*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}

body{
    min-height:100vh;
    background:
        radial-gradient(circle at top,#e8f8ff 0%,#9edcff 45%,#d7f2ff 100%);
    color:#17324d;
}

.phone-screen{
    min-height:100vh;
    max-width:520px;
    margin:0 auto;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.top-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.phone-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 4px 10px;
}

.home-logo{
    height:64px;
    width:auto;
}

.nav-pill{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.22);
    border-radius:12px;
    color:#123c88;
    font-size:20px;
    cursor:pointer;
    transition:.2s;
}

.nav-pill:hover{
    background:rgba(255,255,255,.24);
}

.logout-pill{
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    padding:9px 14px;
    color:#123c88;
}

.home-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px 16px;
}

.app-icon{
    background:transparent;
    border:0;
    color:white;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:700;
    text-align:center;
}

.app-bubble{
    width:82px;
    height:82px;
    border-radius:23px;
    display:grid;
    place-items:center;
    font-size:38px;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.35),
        0 10px 20px rgba(0,0,0,.28);
}

.blue{background:linear-gradient(145deg,#48a7ff,#1557d1);}
.green{background:linear-gradient(145deg,#61e06f,#139533);}
.purple{background:linear-gradient(145deg,#a16cff,#5524d7);}
.orange{background:linear-gradient(145deg,#ffc45c,#f08b16);}
.slate{background:linear-gradient(145deg,#86b8df,#385f82);}
.gold{background:linear-gradient(145deg,#ffe56c,#e4a512);}
.gray{background:linear-gradient(145deg,#d3d6da,#6e7883);}

.connect-card{
    margin-top:auto;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    border-radius:24px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:16px;
    box-shadow:0 14px 28px rgba(0,0,0,.24);
    cursor:pointer;
}

.connect-phone{
    width:60px;
    height:60px;
    border-radius:18px;
    background:linear-gradient(145deg,#61e06f,#139533);
    display:grid;
    place-items:center;
    font-size:30px;
}

.connect-card strong{
    font-size:22px;
}

.connect-card p{
    color:#d8e7ff;
    margin-top:4px;
}

.content-panel{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    border-radius:22px;
    padding:18px;
}

.content-panel h1{
    font-size:28px;
    margin-bottom:6px;
}

.content-panel p{
    color:#073b66;
    margin-bottom:12px;
}

button{
    cursor:pointer;
}

input,
select,
textarea{
    width:100%;
    padding:12px;
    border:1px solid #cfd7e6;
    border-radius:12px;
    margin:7px 0 14px;
    font-size:16px;
}

pre{
    background:#0d1627;
    color:#d8f2ff;
    padding:14px;
    border-radius:16px;
    overflow:auto;
    max-height:280px;
}

.row{
    display:flex;
    gap:20px;
}

.col{
    flex:1;
}

.card{
    background:white;
    color:#172033;
    border-radius:24px;
    padding:24px;
    box-shadow:0 14px 28px rgba(0,0,0,.18);
}

.shell{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
}

.button,
.card button{
    display:inline-block;
    border:0;
    border-radius:12px;
    background:#2457d6;
    color:#fff;
    padding:12px 16px;
    text-decoration:none;
    font-weight:700;
}

@media(max-width:600px){
    .phone-screen{
        max-width:none;
    }

    .app-bubble{
        width:74px;
        height:74px;
        font-size:34px;
    }

    .home-grid{
        gap:18px 10px;
    }

    .row{
        flex-direction:column;
    }
}

.contact-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:15px;
}

.contact-card{
    background:transparent;
    border:0;
    color:white;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    font-weight:700;
}

.contact-card img{
    width:86px;
    height:86px;
    object-fit:cover;
    border-radius:26px;
    box-shadow:0 10px 22px rgba(0,0,0,.30);
}

.waiting-game{
    text-align:center;
}

.game-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;
  margin-top:18px;
}

.game-card{
  min-height:150px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.1);
  color:white;
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  cursor:pointer;
}

.game-icon{
  font-size:38px;
}

.clann-game-shell{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.game-top-bar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,0.1);
  font-weight:700;
}

.spelling-card{
  padding:20px;
  border-radius:24px;
  background:rgba(255,255,255,0.12);
  text-align:center;
}

.spelling-hint{
  font-size:18px;
  opacity:0.9;
}

.spelling-answer{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:20px 0;
}

.spelling-slot{
  min-width:42px;
  min-height:52px;
  border-radius:12px;
  background:rgba(255,255,255,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  font-weight:800;
}

.spelling-tiles{
  flex-wrap:wrap;
  justify-content:center;
}

.letter-tile{
  min-width:58px;
  min-height:58px;
  border-radius:16px;
  font-size:24px;
  font-weight:800;
}

.game-message{
  font-size:18px;
  font-weight:700;
  min-height:24px;
}

.game-call-actions,
.game-bottom-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.letter-row{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-top:16px;
}

.letter-row button{
    width:72px;
    height:72px;
    border-radius:22px;
    font-size:30px;
    font-weight:900;
    background:linear-gradient(145deg,#61e06f,#139533);
}

.image-bubble{
    background:rgba(255,255,255,.16);
    overflow:hidden;
}

.image-bubble img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.phone-dock{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  padding:10px;
  border-radius:24px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(14px);
  z-index:950;
}

.dock-button{
  min-height:58px;
  border:none;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  font-size:11px;
  font-weight:600;
  color:#fff;
  background:rgba(255,255,255,.08);
  cursor:pointer;
}

.dock-button:hover{
  background:rgba(255,255,255,.18);
}

.phone-app-shell{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.phone-actions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:14px;
}

.phone-keypad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  max-width:360px;
  margin:18px auto;
}

.phone-keypad button{
  height:68px;
  border:none;
  border-radius:50%;
  font-size:28px;
  font-weight:800;
  cursor:pointer;
}

.phone-number-display{
  text-align:center;
  font-size:22px;
  margin-bottom:18px;
  color:#fff;
}

.muted{
  opacity:.75;
  text-align:center;
}

.permission-group{
    background:rgba(255,255,255,.58);
    border:1px solid rgba(120,180,220,.45);
    border-radius:18px;
    padding:14px;
    margin:12px 0;
}

.permission-group h4{
    color:#17324d;
    margin-bottom:12px;
}

.permission-group label{
    display:flex;
    align-items:center;
    gap:12px;
    color:#17324d;
    margin:10px 0;
    padding:10px 12px;
    background:rgba(255,255,255,.45);
    border:1px solid rgba(120,180,220,.25);
    border-radius:14px;
    font-weight:700;
}

.permission-group input[type="checkbox"]{
    width:22px;
    height:22px;
    margin:0;
    flex:0 0 auto;
}

.livekit-video-area {
  width: 180px;
  min-height: 120px;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
}

.livekit-video-area video {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}