*{
    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 18px max(112px,calc(96px + env(safe-area-inset-bottom)));
    display:flex;
    flex-direction:column;
    gap:20px;
}

.clann-video-app-surface[hidden]{
    display:none;
}

.phone-screen.video-app-active{
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
    gap:8px;
}

.phone-screen.phone-app-open{
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
    gap:10px;
}

.phone-screen.phone-app-open > .phone-top{
    flex:0 0 auto;
}

.phone-screen.phone-app-open > .notice-area{
    flex:0 0 auto;
}

.phone-screen.phone-app-open > .content-panel.phone-app-active{
    display:flex;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    padding:0;
    border:0;
    border-radius:28px;
    background:#f7fbfd;
    box-shadow:0 16px 42px rgba(19,54,83,.16);
}

.content-panel.phone-app-active > #pageTitle,
.content-panel.phone-app-active > #pageSubtitle{
    display:none;
}

.content-panel.phone-app-active > #output{
    flex:1 1 auto;
    min-width:0;
    min-height:0;
    overflow:hidden;
}

.visually-hidden{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

.phone-screen.video-app-active > .notice-area,
.phone-screen.video-app-active > .content-panel,
.phone-screen.video-app-active > .identity-share-area,
.phone-screen.video-app-active > .home-grid,
.phone-screen.video-app-active > .connect-card{
    display:none !important;
}

.clann-video-app-surface{
    display:flex;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    border-radius:24px;
    background:#030810;
    box-shadow:0 18px 55px rgba(1,18,38,.45);
}

.clann-video-app-surface .video-call-stage{
    display:flex;
    flex:1 1 auto;
    min-height:0;
    flex-direction:column;
    border-radius:24px;
}

.clann-video-app-surface .video-call-canvas{
    flex:1 1 auto;
    min-height:0;
    aspect-ratio:auto;
}

.clann-video-app-surface .video-call-heading{
    cursor:default;
    touch-action:auto;
}

.notice-area:empty{
    display:none;
}

.os-notification-enrollment{
    position:fixed;
    top:calc(env(safe-area-inset-top,0px) + 82px);
    left:50%;
    z-index:990;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    width:min(520px,calc(100vw - 24px));
    padding:14px 16px;
    border:1px solid rgba(18,60,136,.18);
    border-radius:18px;
    background:rgba(255,255,255,.86);
    box-shadow:0 10px 28px rgba(23,50,77,.12);
    backdrop-filter:blur(14px);
    transform:translateX(-50%);
}

.os-notification-enrollment.is-blocked{
    border-color:rgba(181,48,61,.35);
    background:rgba(255,239,241,.94);
}

.os-notification-enrollment strong{
    display:block;
    color:#123c88;
}

.os-notification-enrollment p{
    margin-top:4px;
    font-size:13px;
    line-height:1.35;
}

.os-notification-enrollment button{
    flex:0 0 auto;
    min-height:42px;
    padding:0 16px;
    border:0;
    border-radius:14px;
    color:#fff;
    background:#1557d1;
    font-weight:700;
    cursor:pointer;
}

.incoming-call-kicker{
    margin:0;
    color:#9fe8ff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.incoming-call-actions button{
    min-height:58px;
    font-size:17px;
    font-weight:900;
}

.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;
}

.identity-share-area{
    background:
        linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.08)),
        radial-gradient(circle at 20% 10%,rgba(255,255,255,.32),transparent 45%);
    border:1px solid rgba(255,255,255,.28);
    border-radius:24px;
    padding:14px 16px;
    box-shadow:0 14px 28px rgba(0,0,0,.18);
}

.identity-share-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.identity-number-copy{
    min-width:0;
}

.identity-number-copy strong{
    display:block;
    font-size:14px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#0b4774;
    margin-bottom:5px;
}

.identity-number-copy span{
    display:block;
    color:#092f62;
    font-size:22px;
    font-weight:800;
    overflow-wrap:anywhere;
}

.identity-number-copy small{
    display:block;
    color:#0b4774;
    margin-top:6px;
}

.identity-qr-icon{
    flex:0 0 auto;
    width:88px;
    height:88px;
    border-radius:23px;
    padding:8px;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#ffffff,#d9f1ff);
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.7),
        0 10px 20px rgba(0,0,0,.25);
    pointer-events:none;
}

.identity-qr-icon canvas,
.identity-qr-icon img,
.identity-qr-icon table{
    width:72px !important;
    height:72px !important;
    display:block;
}

.qr-invitation-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:16px 0;
}

.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;
}

.family-quick-connect{
    cursor:default;
    padding:9px 12px 10px;
}

.family-quick-connect-heading{
    color:#fff;
    font-size:14px;
    line-height:1.15;
    font-weight:800;
    margin-bottom:5px;
    text-align:center;
}

.family-quick-connect-targets{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    align-items:start;
}

.family-quick-connect-count-1 .family-quick-connect-targets{
    grid-template-columns:minmax(132px,190px);
    justify-content:center;
}

.family-quick-connect-count-2 .family-quick-connect-targets{
    grid-template-columns:repeat(2,minmax(112px,170px));
    justify-content:center;
}

.family-quick-connect-target{
    position:relative;
    min-width:0;
    min-height:94px;
    padding:5px 5px 4px;
    border:0;
    border-radius:22px;
    background:rgba(255,255,255,.14);
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

.family-quick-connect-target:focus-visible{
    outline:4px solid #ffe56c;
    outline-offset:2px;
}

.family-quick-connect-target:disabled{
    opacity:.65;
}

.family-quick-connect-face{
    position:relative;
    width:64px;
    height:64px;
    flex:0 0 64px;
    border-radius:50%;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#61e06f,#139533);
    border:4px solid rgba(255,255,255,.92);
    box-shadow:0 8px 18px rgba(0,0,0,.28);
}

.family-quick-connect-count-1 .family-quick-connect-face{
    width:76px;
    height:76px;
    flex-basis:76px;
}

.family-quick-connect-count-2 .family-quick-connect-face{
    width:70px;
    height:70px;
    flex-basis:70px;
}

.family-quick-connect-avatar{
    font-size:24px;
    font-weight:900;
    color:#fff;
}

.family-quick-connect-face img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.family-quick-connect-name{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    font-weight:800;
}

.family-quick-connect-video{
    position:absolute;
    right:5px;
    bottom:5px;
    width:23px;
    height:23px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#17a84f;
    color:#fff;
    font-size:14px;
    box-shadow:0 4px 10px rgba(0,0,0,.25);
}

.family-quick-connect-status{
    min-height:0;
    margin:8px 0 0;
    text-align:center;
    color:#fff;
    font-size:13px;
}

.family-quick-connect-status:empty{
    display:none;
}

.family-quick-connect-configuration{
    cursor:default;
    justify-content:center;
    min-height:128px;
    color:#fff;
}

.family-quick-connect-configuration-icon{
    width:66px;
    height:66px;
    flex:0 0 66px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#61e06f,#139533);
    border:3px solid rgba(255,255,255,.88);
    font-size:30px;
}

.family-quick-connect-configuration-copy{
    min-width:0;
}

.family-quick-connect-configuration-copy strong{
    display:block;
    font-size:17px;
}

.family-quick-connect-configuration-copy p{
    color:rgba(255,255,255,.86);
    font-size:13px;
}

.family-quick-connect-retry{
    min-width:74px;
    min-height:44px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:14px;
    color:#fff;
    background:rgba(255,255,255,.14);
}

.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;
}

.clann-child-card{display:flex;width:100%;align-items:center;gap:14px;margin:12px 0;padding:16px;border:1px solid rgba(18,102,145,.17);border-radius:20px;color:#083f68;background:rgba(255,255,255,.88);box-shadow:0 8px 18px rgba(6,75,113,.08);text-align:left}
.clann-child-card:hover,.clann-child-card:focus-visible{border-color:#1688ba;background:#fff;box-shadow:0 10px 22px rgba(6,75,113,.15)}
.clann-child-card-avatar{display:grid;flex:0 0 48px;width:48px;height:48px;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(145deg,#267ee9,#16bfa8);font-size:1.25rem;font-weight:900}
.clann-child-card-copy{display:grid;gap:3px;min-width:0}.clann-child-card-copy strong{font-size:1.08rem}.clann-child-card-copy span{color:#416a85;font-size:.83rem}.clann-child-card-open{margin-left:auto;color:#1675a5;font-size:2rem;font-weight:300;line-height:1}
.clann-child-sensitive-actions{border-color:rgba(158,62,49,.24)}.clann-child-sensitive-actions .danger-button{margin-left:8px;color:#fff;background:#a63232}

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-night-area{margin-top:24px;display:flex;flex-direction:column;gap:14px}.clann-game-night-loading,.clann-game-night-empty{padding:24px;border-radius:24px;text-align:center;background:rgba(7,58,88,.14)}.clann-game-night-empty>span{display:block;font-size:42px}.clann-game-night-heading{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:12px;align-items:center;padding:18px;border-radius:26px;color:#fff;background:linear-gradient(135deg,#073a58,#167fb2)}.clann-game-night-heading small{font-size:.65rem;letter-spacing:.08em;opacity:.75}.clann-game-night-heading h2,.clann-game-night-heading p{margin:0}.clann-game-night-heading h2{margin:3px 0;font-size:1.35rem}.clann-game-night-heading p{font-size:.86rem;opacity:.85}.clann-game-night-heading>span{display:flex;flex-direction:column;align-items:center;justify-content:center;width:72px;height:72px;border-radius:22px;font-size:1.75rem;font-weight:900;background:rgba(255,255,255,.14)}.clann-game-night-heading>span small{font-size:.58rem}.clann-family-game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.clann-family-game-card{min-height:126px;padding:13px;border:0;border-radius:23px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;text-align:left;color:#073a58;background:linear-gradient(155deg,rgba(255,255,255,.94),rgba(213,241,255,.9));box-shadow:0 9px 24px rgba(7,58,88,.12)}.clann-family-game-card>span{font-size:35px;line-height:1}.clann-family-game-card strong{font-size:1rem}.clann-family-game-card small{font-size:.68rem;opacity:.68}.clann-active-games h3{margin:0 0 6px}.clann-active-game-card{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) 18px;gap:10px;align-items:center;padding:10px 13px;margin-bottom:7px;border:0;border-radius:18px;text-align:left;color:#073a58;background:rgba(255,255,255,.82)}.clann-active-game-card>span{font-size:28px}.clann-active-game-card div{display:flex;flex-direction:column}.clann-active-game-card small{opacity:.65}.clann-active-game-card>b{font-size:24px}.clann-game-setup{display:flex;flex-direction:column;gap:13px}.clann-game-mode-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:16px;border-radius:25px;color:#073a58;background:rgba(255,255,255,.9)}.clann-game-mode-card>span{font-size:38px}.clann-game-mode-card h2,.clann-game-mode-card p{margin:0}.clann-game-mode-card p{font-size:.82rem;opacity:.72}.clann-game-mode-card>button,.clann-game-mode-card>fieldset,.clann-game-mode-card>.clann-bot-count{grid-column:1/-1}.clann-game-mode-card fieldset{display:grid;gap:7px;border:0;padding:0}.clann-player-choice{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;padding:9px 11px;border-radius:15px;background:#e9f7fd}.clann-player-choice small{opacity:.6}.clann-bot-count{display:flex;align-items:center;justify-content:space-between}.clann-bot-count select{width:auto}.clann-game-lobby,.clann-family-game-stage{display:flex;flex-direction:column;gap:12px;min-height:0}.clann-game-lobby{text-align:center}.clann-game-lobby-art{font-size:64px}.clann-game-lobby h2,.clann-game-lobby p{margin:0}.clann-game-players{display:flex;gap:8px;max-width:100%;overflow-x:auto;padding:3px 2px 7px;scrollbar-width:none}.clann-game-players>div{flex:0 0 92px;display:flex;flex-direction:column;align-items:center;padding:8px 5px;border:2px solid transparent;border-radius:18px;background:rgba(255,255,255,.74);color:#073a58}.clann-game-players>div.is-me{box-shadow:inset 0 0 0 2px #2394ce}.clann-game-players>div.is-turn{border-color:#ffb21c}.clann-game-players span{font-size:24px}.clann-game-players strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem}.clann-game-players small{font-size:.6rem;opacity:.65}.clann-lobby-actions,.clann-family-game-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.clann-game-turn{padding:9px;border-radius:15px;text-align:center;font-weight:900;color:#073a58;background:rgba(255,255,255,.82)}.clann-ttt-board{width:min(100%,390px);aspect-ratio:1;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.clann-ttt-board button{padding:0;border-radius:18px;font-size:clamp(2.2rem,14vw,4rem);color:#073a58;background:#fff}.clann-connect-board{width:min(100%,430px);margin:auto;display:grid;grid-template-columns:repeat(7,1fr);gap:5px;padding:8px;border-radius:20px;background:#137ec0}.clann-connect-drops{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.clann-connect-drops button{min-height:34px;padding:0;border-radius:10px}.clann-connect-board>i{aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:inset 0 3px 6px rgba(0,0,0,.2)}.clann-connect-board>i.red{background:#ed4050}.clann-connect-board>i.yellow{background:#ffd43b}.clann-memory-board{width:min(100%,500px);margin:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.clann-memory-board button{aspect-ratio:1;padding:0;border-radius:14px;font-size:clamp(1.4rem,8vw,2.4rem);background:#0c668f;color:#fff}.clann-memory-board button.revealed,.clann-memory-board button.matched{background:#fff;color:#073a58}.clann-trivia-board{padding:16px;border-radius:25px;text-align:center;color:#073a58;background:rgba(255,255,255,.9)}.clann-trivia-board h2{font-size:1.2rem}.clann-trivia-board>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.clann-trivia-board button{min-height:56px;border-radius:16px}.clann-board-game-grid{width:min(100%,500px);aspect-ratio:1;margin:auto;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);overflow:hidden;border:5px solid #5d3d27;border-radius:12px}.clann-board-game-grid button{width:100%;height:100%;min-width:0;min-height:0;padding:0;border:0;border-radius:0;display:grid;place-items:center;font-size:clamp(1.05rem,7vw,2.15rem);line-height:1}.clann-board-game-grid button.light{background:#f3d7ad}.clann-board-game-grid button.dark{background:#8e603c}.clann-board-game-grid button.selected{box-shadow:inset 0 0 0 4px #24d6ff}.checker{display:block;width:74%;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 4px 0 rgba(255,255,255,.28),0 3px 5px rgba(0,0,0,.3)}.checker.red{background:#d63242}.checker.black{background:#1d2730}.checker.king:after{content:"★";display:grid;place-items:center;height:100%;color:#ffd166;font-size:.7em}.clann-family-game-actions{position:sticky;bottom:0;padding-top:5px;background:linear-gradient(transparent,rgba(183,229,249,.96) 35%)}

@media (min-width:700px){.clann-family-game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.clann-memory-board{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:420px){.clann-game-night-heading{grid-template-columns:minmax(0,1fr) 60px;padding:14px}.clann-game-night-heading>span{width:58px;height:58px;font-size:1.4rem;border-radius:18px}.clann-family-game-card{min-height:112px}.clann-trivia-board>div{grid-template-columns:1fr}.clann-game-players>div{flex-basis:78px}.clann-family-game-actions{grid-template-columns:1fr 1fr}}

.clann-learning-game-switcher{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  width:min(100%,560px);
  margin:0 auto 14px;
  padding:5px;
  border-radius:20px;
  background:rgba(7,58,88,.14);
}

.clann-learning-game-switcher button{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:16px;
  color:#174c67;
  background:rgba(255,255,255,.72);
  box-shadow:none;
}

.clann-learning-game-switcher button.selected{
  color:#fff;
  background:linear-gradient(135deg,#087fc2,#4c58d7);
  box-shadow:0 8px 20px rgba(8,86,145,.24);
}

.clann-game-auto-advance{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:8px 16px;
  border-radius:999px;
  color:#07527d;
  background:#e8f6ff;
  font-weight:900;
}

.clann-points-wallet{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:10px;
  padding:16px;
  border-radius:24px;
  color:#fff;
  background:linear-gradient(135deg,#10283f,#1a6e78);
  box-shadow:0 16px 34px rgba(8,31,48,.24);
}

.clann-points-wallet>div{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.clann-points-wallet small,
.clann-points-wallet span{
  opacity:.8;
}

.clann-points-wallet strong{
  font-size:clamp(1.35rem,5vw,2.25rem);
  line-height:1;
}

.clann-economy-note{
  margin:10px 4px 18px;
  font-size:.82rem;
  opacity:.82;
}

.clann-store-section,
.clann-store-admin-card{
  margin-top:18px;
}

.clann-store-section h2,
.clann-store-admin-card h2{
  margin:0 0 10px;
  font-size:1.12rem;
}

.clann-store-offers,
.clann-store-history{
  display:grid;
  gap:10px;
}

.clann-store-offer,
.clann-store-history-item,
.clann-store-admin-card{
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.66);
  color:#0b4269;
  border-radius:20px;
  padding:14px;
  box-shadow:0 8px 20px rgba(22,85,118,.10);
}

.clann-store-offer{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}

.clann-store-offer-art{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:1.6rem;
  color:#fff;
  background:linear-gradient(145deg,#2d91ff,#6f55d9);
}

.clann-store-offer h3,
.clann-store-offer p{
  margin:2px 0;
}

.clann-store-offer p,
.clann-store-offer small,
.clann-store-history-item small{
  display:block;
  font-size:.78rem;
  opacity:.78;
}

.clann-store-offer-action,
.clann-store-history-status{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
  text-align:right;
}

.clann-store-offer-action button,
.clann-store-row-actions button,
.clann-store-history-item>button{
  min-height:40px;
  padding:8px 12px;
  border-radius:13px;
}

.clann-store-history-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}

.clann-store-row-actions{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.clann-store-admin-card form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.clann-store-admin-card label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:.82rem;
  font-weight:700;
}

.clann-store-admin-card input,
.clann-store-admin-card select,
.clann-store-admin-card textarea{
  width:100%;
  box-sizing:border-box;
}

.clann-store-admin-card textarea,
.clann-store-admin-card .clann-store-check,
.clann-store-admin-card form>button{
  grid-column:1/-1;
}

.clann-store-admin-card .clann-store-check{
  flex-direction:row;
  align-items:flex-start;
}

.clann-store-admin-card .clann-store-check input{
  width:auto;
  margin-top:3px;
}

.clann-store-empty{
  padding:24px 14px;
  text-align:center;
  opacity:.72;
}

.clann-site-admin-identity{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:20px;
  color:#fff;
  background:linear-gradient(145deg,#143d63,#1b6685);
  box-shadow:0 10px 24px rgba(8,51,78,.2);
}

.clann-site-admin-identity>span{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  flex:0 0 46px;
  border-radius:15px;
  font-size:1.45rem;
  background:rgba(255,255,255,.16);
}

.clann-site-admin-identity strong,
.clann-site-admin-identity small,
.clann-site-admin-item-copy strong,
.clann-site-admin-item-copy span,
.clann-site-admin-item-copy small{
  display:block;
}

.clann-site-admin-identity small,
.clann-site-admin-item-copy small,
.clann-site-admin-item-copy span{
  font-size:.78rem;
  opacity:.78;
}

.clann-site-admin-list{
  display:grid;
  gap:10px;
}

.clann-site-admin-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:18px;
  color:#0b4269;
  background:rgba(255,255,255,.66);
  box-shadow:0 8px 20px rgba(22,85,118,.1);
}

.clann-site-admin-item-copy{
  min-width:0;
}

.clann-site-admin-item-copy strong{
  margin:3px 0;
}

.clann-site-admin-actions{
  display:flex;
  gap:7px;
}

.clann-site-admin-actions button,
.clann-site-admin-item>button{
  min-height:40px;
  padding:8px 12px;
  border-radius:13px;
}

.clann-chore-tabs{
  position:sticky;
  z-index:5;
  top:0;
  display:flex;
  gap:4px;
  margin:-4px -2px 14px;
  padding:4px;
  overflow-x:auto;
  border-radius:16px;
  background:rgba(13,74,108,.09);
  scrollbar-width:none;
}
.clann-chore-tabs::-webkit-scrollbar{display:none}
.clann-chore-tabs button{
  flex:1 0 auto;
  min-height:38px;
  padding:7px 12px;
  border:0;
  border-radius:12px;
  color:#315f78;
  background:transparent;
  font-size:.8rem;
  font-weight:850;
}
.clann-chore-tabs button.selected{color:#fff;background:#176a91;box-shadow:0 5px 12px rgba(9,70,103,.2)}

.clann-chore-hero,
.clann-chore-assignment>header,
.clann-chore-board>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:17px;
  border-radius:22px;
  color:#fff;
  background:linear-gradient(145deg,#136a83,#2a8c81);
  box-shadow:0 12px 26px rgba(10,77,100,.2);
}
.clann-chore-hero h2,.clann-chore-assignment h2,.clann-chore-board h2{margin:2px 0 0;font-size:1.25rem}
.clann-chore-hero small,.clann-chore-assignment header small,.clann-chore-board header small{font-size:.68rem;font-weight:900;letter-spacing:.1em;opacity:.8}
.clann-chore-hero>span,.clann-chore-assignment header>span,.clann-chore-board header>span{display:grid;width:46px;height:46px;place-items:center;border-radius:15px;background:rgba(255,255,255,.16);font-size:1.5rem}
.clann-chore-archive-hero{margin-bottom:9px;background:linear-gradient(145deg,#4d6072,#6d748b)}

.clann-chore-list{display:grid;gap:9px;margin-top:12px}
.clann-chore-card{
  width:100%;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 18px;
  gap:11px;
  align-items:center;
  padding:12px;
  text-align:left;
  color:#0b4269;
  border:1px solid rgba(26,104,137,.13);
  border-radius:19px;
  background:rgba(255,255,255,.75);
  box-shadow:0 7px 18px rgba(22,85,118,.08);
}
.clann-chore-card-copy{display:block;min-width:0}
.clann-chore-card-copy strong,.clann-chore-card-copy span,.clann-chore-card-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clann-chore-card-copy strong{font-size:.98rem}
.clann-chore-card-copy span,.clann-chore-card-copy small{font-size:.72rem;opacity:.72}
.clann-chore-open{font-size:1.7rem;opacity:.5}
.clann-chore-points{width:54px;height:54px;display:grid;place-content:center;text-align:center;border-radius:17px;background:#dff7dd;color:#176428;font-size:1.18rem;font-weight:900}
.clann-chore-points small{display:block;font-size:.58rem;line-height:1}
.clann-chore-comment{font-weight:800;color:#8a3d32}
.clann-chore-history{margin-top:14px;padding:10px;border-radius:16px;background:rgba(14,81,115,.06)}
.clann-chore-history summary{padding:4px;font-weight:850;color:#295c74}

.clann-chore-assignment,.clann-chore-board,.clann-avatar-builder,.clann-chore-competition-settings{display:grid;gap:12px}
.clann-chore-assignment form,.clann-avatar-builder,.clann-chore-competition-settings{padding:15px;border:1px solid rgba(26,104,137,.13);border-radius:21px;background:rgba(255,255,255,.72)}
.clann-chore-assignment form{display:grid;gap:11px}
.clann-chore-assignment label,.clann-chore-avatar-child,.clann-avatar-builder>label,.clann-chore-competition-settings label,.clann-chore-review label,.clann-chore-camera-sheet label{display:grid;gap:5px;font-size:.78rem;font-weight:850;color:#24566f}
.clann-chore-assignment input,.clann-chore-assignment select,.clann-chore-assignment textarea,.clann-chore-avatar-child select,.clann-chore-competition-settings input,.clann-chore-review input,.clann-chore-camera-sheet input{width:100%;box-sizing:border-box}
.clann-chore-form-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:9px}
.clann-chore-policy{margin:0;padding:8px 10px;border-radius:12px;color:#3c6579;background:rgba(26,104,137,.07);font-size:.73rem;line-height:1.4}
.clann-chore-step-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.clann-chore-step-heading button{min-height:34px;padding:6px 10px;border-radius:11px}
#clannChoreStepEditors{display:grid;gap:8px}
.clann-chore-step-editor{display:grid;grid-template-columns:28px minmax(0,1fr) 34px;gap:7px;align-items:start;padding:10px;border-radius:15px;background:rgba(20,97,132,.07)}
.clann-chore-step-editor>span{display:grid;width:28px;height:28px;place-items:center;border-radius:10px;color:#fff;background:#2485a6;font-weight:900}
.clann-chore-step-editor label{grid-column:2/3}
.clann-chore-step-live-rule{grid-column:2/3;margin:0;color:#35697e;font-size:.72rem;font-weight:800}
.clann-chore-step-editor .clann-store-check{display:flex;flex-direction:row;align-items:center}
.clann-chore-step-editor .clann-store-check input{width:auto}
.clann-chore-step-editor>button{grid-column:3;grid-row:1;width:32px;height:32px;padding:0;border-radius:10px;color:#8a3d32;background:#fde9e3}

.clann-chore-board{margin-bottom:16px}
.clann-chore-board>header{background:linear-gradient(145deg,#214f85,#5e67a8)}
.clann-chore-rank-row{display:grid;grid-template-columns:24px 42px minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 11px;border:1px solid rgba(26,104,137,.12);border-radius:16px;background:rgba(255,255,255,.72)}
.clann-chore-rank-row>strong{font-size:1.05rem;text-align:center;color:#68552a}
.clann-chore-rank-row>span{font-weight:850;overflow:hidden;text-overflow:ellipsis}
.clann-chore-rank-row>b{font-size:.78rem;color:#276b3c}
.clann-chore-band-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.clann-chore-band-picker button{min-height:34px;padding:5px;border:0;border-radius:10px;color:#315f78;background:rgba(22,106,145,.08);font-weight:850}
.clann-chore-band-picker button.selected{color:#fff;background:#176a91}

.clann-chore-avatar{position:relative;display:grid;width:42px;height:42px;place-items:center;overflow:hidden;border:3px solid var(--avatar-color);border-radius:50%;background:color-mix(in srgb,var(--avatar-color) 22%,white)}
.clann-chore-avatar i{position:absolute;inset:0;display:grid;place-items:center;font-size:2rem;opacity:.2;font-style:normal}
.clann-chore-avatar b{position:relative;font-size:1.65rem;line-height:1}
.clann-chore-avatar em{position:absolute;right:-1px;top:-1px;font-size:.9rem;font-style:normal}
.clann-chore-avatar-child{margin-bottom:12px}
.clann-avatar-builder header>div{display:flex;align-items:center;gap:12px}
.clann-avatar-builder header .clann-chore-avatar{width:72px;height:72px}
.clann-avatar-builder header .clann-chore-avatar b{font-size:2.7rem}
.clann-avatar-builder h2,.clann-chore-competition-settings h2{margin:2px 0}
.clann-avatar-parts{display:flex;gap:6px;overflow-x:auto;padding:3px;scrollbar-width:none}
.clann-avatar-parts button{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;padding:0;border:2px solid transparent;border-radius:13px;background:rgba(20,97,132,.07);font-size:1.35rem}
.clann-avatar-parts button.selected{border-color:#176a91;background:#dff5ff}
.clann-avatar-parts i{width:24px;height:24px;border-radius:50%}

.clann-chore-back{min-height:35px;margin-bottom:10px;padding:6px 10px;border:0;border-radius:11px;color:#285d78;background:rgba(19,102,141,.08);font-weight:850}
.clann-chore-detail-hero{display:grid;grid-template-columns:60px minmax(0,1fr);gap:13px;align-items:center;padding:16px;border-radius:21px;color:#fff;background:linear-gradient(145deg,#156d83,#328e7a)}
.clann-chore-detail-hero h2,.clann-chore-detail-hero p{margin:2px 0}.clann-chore-detail-hero p{font-size:.78rem;opacity:.8}.clann-chore-detail-hero .clann-chore-points{width:58px;height:58px}
.clann-chore-timeline{display:grid;gap:9px;margin:14px 0}
.clann-chore-step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:12px;border:1px solid rgba(26,104,137,.13);border-radius:17px;background:rgba(255,255,255,.7)}
.clann-chore-step>span{display:grid;width:32px;height:32px;place-items:center;border-radius:11px;color:#496879;background:#e4eff4;font-weight:900}
.clann-chore-step.current{border-color:#2c94a7;box-shadow:0 0 0 2px rgba(44,148,167,.1)}
.clann-chore-step.current>span{color:#fff;background:#2485a6}.clann-chore-step.done>span{color:#fff;background:#3b9a59}
.clann-chore-step small{font-size:.62rem;font-weight:900;letter-spacing:.09em;opacity:.65}.clann-chore-step h3,.clann-chore-step p{margin:2px 0}.clann-chore-step p{font-size:.78rem;line-height:1.4}.clann-chore-photo-state{color:#35697e;font-weight:750}
.clann-chore-step-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.clann-chore-step-actions button{min-height:36px;padding:7px 10px;border-radius:11px}
.clann-chore-photo-buttons{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.clann-chore-photo-buttons button{min-height:31px;padding:5px 8px;border-radius:10px;font-size:.7rem}
.clann-chore-primary{width:100%;min-height:50px;border-radius:16px;font-size:1rem;font-weight:900}
.clann-chore-review{display:grid;gap:10px;margin-top:13px;padding:15px;border-radius:19px;background:rgba(255,255,255,.75)}
.clann-chore-review h2{margin:0}.clann-chore-review>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.clann-chore-camera-sheet{position:fixed;z-index:3000;inset:0;display:flex;flex-direction:column;gap:10px;padding:calc(16px + env(safe-area-inset-top,0px)) 14px calc(16px + env(safe-area-inset-bottom,0px));color:#fff;background:#061924}
.clann-chore-camera-sheet header{display:flex;align-items:center;justify-content:space-between}.clann-chore-camera-sheet header button{width:38px;height:38px;padding:0;border-radius:50%;background:rgba(255,255,255,.15)}
.clann-chore-camera-sheet>p{margin:0;font-size:.8rem;opacity:.75}.clann-chore-camera-sheet video,.clann-chore-camera-sheet>img{width:100%;min-height:0;flex:1 1 auto;object-fit:cover;border-radius:20px;background:#000}.clann-chore-camera-sheet label{color:#d8edf5}.clann-chore-camera-sheet>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.clann-chore-camera-sheet>div button{min-height:48px;border-radius:15px}.clann-chore-camera-sheet>div button:only-child{grid-column:1/-1}
.clann-chore-photo-viewer{position:fixed;z-index:3000;inset:0;display:flex;flex-direction:column;gap:10px;padding:calc(14px + env(safe-area-inset-top,0px)) 12px calc(14px + env(safe-area-inset-bottom,0px));color:#fff;background:#061924}.clann-chore-photo-viewer header{display:flex;align-items:center;justify-content:space-between}.clann-chore-photo-viewer header button{width:40px;height:40px;padding:0;border-radius:50%;background:rgba(255,255,255,.15)}.clann-chore-photo-viewer img{width:100%;min-height:0;flex:1 1 auto;object-fit:contain;border-radius:20px;background:#000}

@media (max-width:560px){
  .clann-chore-form-grid{grid-template-columns:1fr}
  .clann-chore-card{grid-template-columns:50px minmax(0,1fr) 14px}
  .clann-chore-points{width:50px;height:50px}
}

@media (max-width:560px){
  .clann-points-wallet{grid-template-columns:1.2fr 1fr 1fr;padding:13px;}
  .clann-store-offer{grid-template-columns:44px minmax(0,1fr);}
  .clann-store-offer-art{width:44px;height:44px;border-radius:14px;}
  .clann-store-offer-action{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;}
  .clann-store-admin-card form{grid-template-columns:1fr;}
  .clann-site-admin-item{grid-template-columns:1fr;}
  .clann-site-admin-actions{display:grid;grid-template-columns:1fr 1fr;}
}

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

.content-panel.game-screen{
  margin-bottom:8px;
  max-height:calc(100dvh - 215px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

.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;
}

.clann-os-status-button.listening{color:#fff;background:#c92f4a;animation:clannVoicePulse 1s ease-in-out infinite}
@keyframes clannVoicePulse{50%{box-shadow:0 0 0 7px rgba(201,47,74,.2)}}
.clann-voice-panel{width:min(92vw,430px);display:grid;gap:14px;padding:20px;border-radius:26px;color:#073e62;background:#eefaff;box-shadow:0 24px 70px rgba(1,26,42,.42)}
.clann-voice-panel header{display:flex;align-items:center;justify-content:space-between}.clann-voice-panel h2,.clann-voice-panel p{margin:0}.clann-voice-panel header small{font-size:.66rem;font-weight:900;letter-spacing:.1em;color:#39718e}
.clann-voice-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.clann-voice-actions button{min-height:84px;display:grid;place-items:center;gap:5px;padding:10px;border-radius:18px}.clann-voice-actions button span{font-size:1.55rem}.clann-voice-panel label{display:grid;gap:7px;font-weight:850}.clann-voice-panel>small{line-height:1.4;color:#416f84}

.clann-learning-loader{font-size:4rem;animation:clannLearningFloat 1.6s ease-in-out infinite}@keyframes clannLearningFloat{50%{transform:translateY(-7px) rotate(3deg)}}
.clann-spelling-growth{display:grid;gap:8px;padding:13px 15px;border-radius:18px;background:rgba(255,255,255,.72);color:#073e62}.clann-spelling-growth>div{display:flex;align-items:end;justify-content:space-between;gap:10px}.clann-spelling-growth span{font-size:.73rem;font-weight:800;color:#49788d}.clann-spelling-growth progress{width:100%;height:10px;accent-color:#18a86b}.clann-spelling-bonus{justify-self:start;padding:5px 9px;border-radius:999px;color:#613b00!important;background:#ffe49b}.clann-spelling-badge-earned{display:flex;align-items:center;justify-content:center;gap:9px;margin:12px 0;padding:12px;border-radius:17px;color:#684500;background:linear-gradient(135deg,#fff1aa,#ffd45e)}.clann-spelling-badge-earned span{font-size:1.7rem}

.abc-game-shell{max-width:660px;margin:0 auto}.abc-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px}.abc-mode-switch button{min-height:54px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;background:rgba(255,255,255,.65);color:#174c67}.abc-mode-switch button.selected{color:#fff;background:#087fc2;box-shadow:0 8px 20px rgba(8,127,194,.25)}.abc-card{display:grid;justify-items:center;gap:14px}.abc-letter-display{display:grid;place-items:center;width:min(45vw,190px);aspect-ratio:1;border-radius:34px;font-size:clamp(5rem,18vw,9rem);font-weight:950;color:#fff;background:linear-gradient(145deg,#168fd0,#584bd9);box-shadow:0 18px 38px rgba(22,78,122,.25)}.abc-hear-display{font-size:6rem}.abc-hear-button,.abc-primary-action{min-height:58px;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:18px}.abc-hear-button{background:#e8f6ff;color:#07527d}.abc-primary-action{width:min(100%,340px);font-size:1.05rem}.abc-type-label{width:min(100%,340px);display:grid;gap:7px;font-size:.8rem;font-weight:900;color:#3d7189}.abc-letter-input{width:100%;height:76px;border:3px solid #8dcceb!important;border-radius:20px!important;text-align:center;font-size:2.8rem!important;font-weight:950;text-transform:uppercase;background:#fff!important}.abc-card>small{max-width:420px;line-height:1.4;color:#4b768a}.abc-video-card .abc-mode-switch{grid-template-columns:repeat(2,48px);justify-content:center}.abc-video-input{display:flex;align-items:center;justify-content:center;gap:8px}.abc-video-input .abc-letter-display{width:80px;border-radius:16px;font-size:3rem}.abc-video-input .abc-letter-input{width:78px;height:54px;font-size:1.7rem!important}

/* Learn ABCs occupies the usable CLANN OS viewport on phones. Only the
   activity card scrolls as a fallback for a very short viewport or large
   accessibility text; the fixed OS status and navigation areas never move. */
@media (max-width:620px){
  .phone-screen.os-app-open > .content-panel.abc-game-screen{
    display:flex;
    min-height:0;
    padding:8px 10px;
    overflow:hidden;
  }
  .content-panel.abc-game-screen > #pageTitle,
  .content-panel.abc-game-screen > #pageSubtitle{display:none}
  .content-panel.abc-game-screen > #output{
    display:flex;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
  }
  .abc-game-screen .abc-game-shell{
    width:100%;
    height:100%;
    min-height:0;
    gap:7px;
    padding:0;
  }
  .abc-game-screen .clann-learning-game-switcher{
    flex:0 0 auto;
    margin-bottom:0;
    padding:3px;
    border-radius:15px;
  }
  .abc-game-screen .clann-learning-game-switcher button{
    min-height:42px;
    gap:5px;
    border-radius:12px;
    font-size:.78rem;
  }
  .abc-game-screen .game-top-bar{
    flex:0 0 auto;
    gap:4px;
    padding:7px 9px;
    font-size:.7rem;
  }
  .abc-game-screen .clann-spelling-growth{
    flex:0 0 auto;
    gap:4px;
    padding:7px 10px;
    border-radius:13px;
  }
  .abc-game-screen .clann-spelling-growth strong{font-size:.76rem}
  .abc-game-screen .clann-spelling-growth span{font-size:.62rem}
  .abc-game-screen .clann-spelling-growth progress{height:6px}
  .abc-game-screen .abc-mode-switch{flex:0 0 auto;gap:6px}
  .abc-game-screen .abc-mode-switch button{
    min-height:44px;
    gap:5px;
    border-radius:13px;
    font-size:.78rem;
  }
  .abc-game-screen .abc-card{
    flex:1 1 auto;
    min-height:0;
    gap:7px;
    padding:10px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  .abc-game-screen .abc-letter-display{
    width:min(32dvh,150px);
    border-radius:24px;
    font-size:clamp(4.5rem,22vw,7rem);
  }
  .abc-game-screen .abc-hear-display{font-size:3.1rem;line-height:1}
  .abc-game-screen .abc-hear-button,
  .abc-game-screen .abc-primary-action{
    min-height:44px;
    border-radius:14px;
    font-size:.88rem;
  }
  .abc-game-screen .abc-type-label{gap:3px;font-size:.68rem}
  .abc-game-screen .abc-letter-input{
    height:56px;
    margin:3px 0 5px;
    border-radius:15px!important;
    font-size:2rem!important;
  }
  .abc-game-screen .game-message{min-height:20px;font-size:.82rem}
  .abc-game-screen .abc-card>small{font-size:.62rem;line-height:1.25}
  .abc-game-screen .game-bottom-actions{flex:0 0 auto}
  .abc-game-screen .game-bottom-actions button{min-height:38px;padding:7px 13px}
}

.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(5,1fr);
  gap:8px;
  padding:10px;
  border-radius:24px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(14px);
  z-index:950;
}

.phone-dock[hidden],
.dock-button[hidden]{
  display:none !important;
}

.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:0;
}

.phone-os-app{
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  border:0;
  border-radius:28px;
  background:#f7fbfd;
  color:#12324a;
}

.phone-app-number-bar{
  position:relative;
  z-index:2;
  display:grid;
  gap:12px;
  flex:0 0 auto;
  padding:13px 16px 12px;
  border-bottom:1px solid #dce8ee;
  background:rgba(247,251,253,.97);
}

.phone-app-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.phone-app-title-row > div{
  display:flex;
  min-width:0;
  align-items:baseline;
  gap:7px;
  flex-wrap:wrap;
}

.phone-app-title-row h2{
  flex:1 0 100%;
  margin:0;
  color:#0b3550;
  font-size:22px;
  line-height:1;
}

.phone-app-title-row span{
  color:#527083;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.phone-app-title-row strong{
  color:#07385c;
  font-size:15px;
  letter-spacing:.02em;
}

.phone-esim-state,
.phone-esim-button{
  margin-left:auto;
}

.phone-esim-state{
  max-width:190px;
  margin-bottom:0 !important;
  font-size:10px;
  text-align:right;
}

.phone-esim-button{
  min-height:36px;
  padding:7px 11px;
  border:1px solid #cbdbe3;
  border-radius:999px;
  color:#1557d1;
  background:#fff;
  font-size:11px;
  font-weight:800;
}

.phone-media-switch{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  width:100%;
  padding:4px;
  border-radius:14px;
  background:#e5eef3;
}

.phone-media-switch button{
  display:flex;
  min-height:38px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:6px 12px;
  border:0;
  border-radius:11px;
  color:#587386;
  background:transparent;
  font-size:13px;
  font-weight:850;
}

.phone-media-switch button:only-child{
  grid-column:1 / -1;
}

.phone-media-switch button.is-selected{
  color:#0a4ca6;
  background:#fff;
  box-shadow:0 2px 8px rgba(29,65,88,.14);
}

.phone-media-switch .phone-ui-icon{
  width:19px;
  height:19px;
}

.phone-app-content{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:10px 12px 14px;
  scrollbar-gutter:stable;
}

.phone-app-tabs{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(var(--phone-tab-count,4),minmax(0,1fr));
  gap:2px;
  flex:0 0 auto;
  padding:7px 6px calc(7px + env(safe-area-inset-bottom,0px));
  border-top:1px solid #dce8ee;
  background:rgba(247,251,253,.98);
}

.phone-contact-card{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 46px;
  grid-template-rows:auto auto;
  align-items:center;
  gap:2px 10px;
  min-height:72px;
  padding:8px 4px;
  border-bottom:1px solid #e0e9ee;
  color:#12324a;
  background:transparent;
  text-align:left;
}

.phone-contact-list{
  grid-template-columns:minmax(0,1fr);
  gap:0;
  margin-top:0;
  padding:0 6px;
  border:1px solid #dce8ee;
  border-radius:20px;
  background:#fff;
  overflow:hidden;
}

.phone-contact-card:last-child{
  border-bottom:0;
}

.phone-contact-avatar{
  position:relative;
  grid-row:1 / span 2;
  width:50px;
  height:50px;
  overflow:hidden;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(145deg,#48a7ff,#1557d1);
  font-size:20px;
  font-weight:900;
}

.phone-contact-avatar img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.phone-contact-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#0b3550;
  font-size:15px;
  font-weight:800;
}

.phone-contact-card > small{
  grid-column:2;
  color:#60788a;
}

.phone-contact-actions{
  grid-column:3;
  grid-row:1 / span 2;
  display:flex;
  justify-self:end;
}

.phone-contact-actions button{
  width:44px;
  min-width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:#1d9b58;
  box-shadow:0 5px 12px rgba(29,155,88,.22);
}

.phone-contact-actions button.is-video,
.phone-call-button.is-video,
.phone-actions button.is-video{
  background:#176bd6;
  box-shadow:0 5px 12px rgba(23,107,214,.24);
}

.phone-app-tabs button{
  display:flex;
  min-height:50px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:5px 3px;
  border:0;
  border-radius:12px;
  color:#46677d;
  background:transparent;
  font-size:11px;
  font-weight:800;
}

.phone-app-tabs button.is-selected{
  color:#0b54bb;
  background:#e5effd;
}

.phone-ui-icon{
  width:22px;
  height:22px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

.phone-ui-icon circle[r="1.3"]{
  fill:currentColor;
  stroke:none;
}

.phone-app-tabs .phone-ui-icon{
  width:21px;
  height:21px;
}

.phone-keypad-screen{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding-top:4px;
}

.phone-os-app .phone-number-display{
  min-height:32px;
  margin:2px 0 4px;
  color:#0b3550;
  font-size:22px;
  font-weight:750;
}

.phone-call-button{
  display:grid;
  width:64px;
  min-width:64px;
  height:64px;
  padding:0;
  place-items:center;
  border:0;
  border-radius:999px;
  color:#fff;
  background:#23a757;
  box-shadow:0 8px 20px rgba(15,118,61,.3);
}

.phone-call-button .phone-ui-icon{
  width:29px;
  height:29px;
}

.call-history-list{
  display:grid;
  gap:0;
  padding:0 6px;
  border:1px solid #dce8ee;
  border-radius:20px;
  background:#fff;
  overflow:hidden;
}

.call-history-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:4px;
  min-height:68px;
  padding:4px;
  border:0;
  border-bottom:1px solid #e0e9ee;
  border-radius:0;
  background:transparent;
}

.call-history-item:last-child{
  border-bottom:0;
}

.call-history-main-action{
  display:grid;
  width:100%;
  min-width:0;
  min-height:60px;
  grid-template-columns:24px 28px minmax(0,1fr) auto;
  align-items:center;
  gap:6px;
  margin:0;
  padding:7px 5px;
  border:0;
  border-radius:14px;
  color:inherit;
  text-align:left;
  background:transparent;
}

button.call-history-main-action{
  cursor:pointer;
}

button.call-history-main-action:hover,
button.call-history-main-action:focus-visible{
  background:#edf7ff;
  outline:2px solid #58bce8;
  outline-offset:-2px;
}

button.call-history-main-action:active{
  background:#dcefff;
  transform:scale(.992);
}

.call-history-main-action.is-disabled{
  cursor:default;
}

.call-history-direction,
.call-history-media{
  display:grid;
  place-items:center;
  color:#5f7788;
}

.call-history-direction .phone-ui-icon{
  width:18px;
  height:18px;
}

.call-history-media .phone-ui-icon{
  width:20px;
  height:20px;
}

.call-history-person{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:2px;
}

.call-history-person strong,
.call-history-person small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.call-history-main-action time{
  color:#667f8f;
  font-size:11px;
  white-space:nowrap;
}

.call-history-item.missed-call{
  color:#a62435;
  background:#fff8f9;
}

.call-history-callback{
  width:42px;
  height:42px;
  min-width:42px;
  padding:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#1d9b58;
  color:#fff;
}

.call-history-callback .phone-ui-icon{
  width:20px;
  height:20px;
}

.phone-empty-state{
  display:grid;
  min-height:180px;
  place-items:center;
  color:#617a8b;
  text-align:center;
}

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

.modal-area{
  position:fixed;
  inset:0;
  z-index:1000;
  overflow:auto;
  padding:24px;
  background:rgba(5,20,35,.76);
  backdrop-filter:blur(12px);
}

.keypad-modal{
  width:min(100%,420px);
  margin:24px auto;
  padding:24px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:28px;
  color:#fff;
  background:linear-gradient(160deg,#123d5a,#071d31);
  box-shadow:0 24px 80px rgba(0,0,0,.36);
}

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

.keypad-grid button{
  min-height:68px;
  border:none;
  border-radius:22px;
  font-size:24px;
  font-weight:800;
  cursor:pointer;
}

.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;
}

.clann-call-overlay{
  position:fixed;
  right:16px;
  bottom:92px;
  z-index:9999;
  display:flex;
  width:min(520px,calc(100vw - 24px));
  max-height:calc(100vh - 112px);
  overflow:auto;
  border-radius:24px;
  box-shadow:0 18px 55px rgba(1,18,38,.45);
}

.clann-call-overlay.has-minimized-call{
  width:auto;
  overflow:visible;
}

.video-call-stage{
  position:relative;
  width:100%;
  overflow:hidden;
  border:1px solid rgba(164,227,255,.34);
  border-radius:24px;
  color:#fff;
  background:linear-gradient(155deg,#0b1c31,#07111f 70%);
}

.video-call-stage [hidden]{
  display:none !important;
}

.video-call-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:44px;
  padding:8px 10px 8px 16px;
  color:#dff7ff;
  font-size:14px;
  font-weight:800;
  cursor:grab;
  touch-action:none;
  user-select:none;
}

.video-call-heading:active{
  cursor:grabbing;
}

#clannVideoCallStatus.is-error{
  color:#ffb8b8;
}

.video-call-heading-button{
  width:38px;
  min-width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.11);
}

.video-call-heading-actions{
  display:flex;
  align-items:center;
  gap:7px;
}

.video-call-heading-actions .phone-ui-icon{
  width:20px;
  height:20px;
}

.voice-call-identity{
  display:flex;
  flex:1 1 auto;
  min-height:180px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:24px;
  text-align:center;
  color:#dff7ff;
}

.voice-call-avatar{
  display:flex;
  width:84px;
  height:84px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(164,227,255,.38);
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,rgba(46,150,232,.5),rgba(36,74,134,.7));
  box-shadow:0 12px 34px rgba(0,0,0,.28);
}

.voice-call-avatar .phone-ui-icon{
  width:36px;
  height:36px;
}

.voice-call-identity strong{
  max-width:100%;
  overflow:hidden;
  font-size:24px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.voice-call-identity > span:last-child{
  color:#a7c8dc;
  font-size:14px;
}

.video-call-canvas{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  min-height:220px;
  overflow:hidden;
  background:#030810;
}

.video-call-panel{
  position:absolute;
  display:block;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  color:#fff;
  background:#07111d;
  box-shadow:none;
  cursor:pointer;
  transition:border-radius .24s ease,box-shadow .24s ease;
}

.video-call-remote{
  inset:0;
  z-index:1;
  view-transition-name:clann-remote-video;
}

.video-call-self{
  right:12px;
  bottom:12px;
  z-index:3;
  width:30%;
  height:38%;
  border:2px solid rgba(255,255,255,.9);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.42);
  cursor:grab;
  touch-action:none;
  user-select:none;
  view-transition-name:clann-self-video;
}

.video-call-self.is-dragging{
  cursor:grabbing;
  transition:none;
}

.video-self-collapse-button{
  position:absolute;
  top:5px;
  right:5px;
  z-index:7;
  display:grid;
  width:30px;
  min-width:30px;
  height:30px;
  padding:0;
  place-items:center;
  border:1px solid rgba(255,255,255,.62);
  border-radius:999px;
  color:#fff;
  background:rgba(5,20,38,.78);
  box-shadow:0 3px 9px rgba(0,0,0,.35);
}

.video-call-self.is-collapsed{
  width:48px;
  height:48px;
  border-radius:999px;
  background:rgba(5,20,38,.88);
}

.video-call-self.is-collapsed .video-track-mount,
.video-call-self.is-collapsed .video-call-placeholder,
.video-call-self.is-collapsed .video-call-sticker{
  display:none;
}

.video-call-self.is-collapsed .video-self-collapse-button{
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:transparent;
  box-shadow:none;
  font-size:22px;
}

::view-transition-group(clann-remote-video),
::view-transition-group(clann-self-video){
  animation-duration:.26s;
  animation-timing-function:ease-in-out;
}

.video-call-stage.self-primary .video-call-self{
  inset:0;
  z-index:1;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
}

.video-call-stage.self-primary .video-call-remote{
  inset:auto 12px 12px auto;
  z-index:3;
  width:30%;
  height:38%;
  border:2px solid rgba(255,255,255,.9);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.42);
}

.video-track-mount{
  position:absolute;
  inset:0;
  display:block;
}

.video-call-remote .video-track-mount{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:2px;background:#030810}.clann-remote-participant-tile{position:relative;display:block;min-width:0;min-height:0;overflow:hidden}.clann-remote-participant-tile video{position:absolute;inset:0}.clann-remote-participant-tile strong{position:absolute;z-index:2;left:7px;bottom:7px;max-width:calc(100% - 14px);padding:3px 7px;border-radius:999px;overflow:hidden;color:#fff;background:rgba(3,8,16,.62);font-size:.68rem;text-overflow:ellipsis;white-space:nowrap}.video-call-remote .video-track-mount>.clann-remote-participant-tile:only-child{grid-column:1/-1;grid-row:1/-1}
.clann-family-game-video-overlay{position:relative;width:100%;height:100%;display:grid;place-items:center;padding:6px;background:rgba(3,8,16,.18);backdrop-filter:blur(1px)}.clann-family-game-video-overlay>.video-game-overlay-hide{position:absolute;z-index:5;top:5px;right:5px}.clann-family-game-video-overlay .clann-board-game-grid,.clann-family-game-video-overlay .clann-ttt-board,.clann-family-game-video-overlay .clann-connect-board,.clann-family-game-video-overlay .clann-memory-board{width:auto;max-width:100%;height:100%;max-height:100%;margin:0}.clann-family-game-video-overlay .clann-trivia-board{max-height:100%;overflow:auto;padding:8px}.clann-family-game-video-overlay .clann-trivia-board h2{margin:0 0 6px;font-size:.8rem}.clann-family-game-video-overlay .clann-trivia-board button{min-height:28px;padding:4px;font-size:.65rem}

.video-track-mount video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.video-call-panel.facing-user .video-track-mount video{
  transform:scaleX(-1);
}

.video-call-panel[data-filter="warm"] video{
  filter:saturate(1.18) sepia(.2) hue-rotate(-8deg) brightness(1.05);
}

.video-call-panel[data-filter="cool"] video{
  filter:saturate(1.08) hue-rotate(16deg) contrast(1.04);
}

.video-call-panel[data-filter="bright"] video{
  filter:brightness(1.2) saturate(1.12) contrast(.95);
}

.video-call-panel[data-filter="noir"] video{
  filter:grayscale(1) contrast(1.15);
}

.video-call-placeholder{
  position:absolute;
  inset:0;
  z-index:0;
  display:grid;
  place-items:center;
  padding:16px;
  color:#b8ccdc;
  text-align:center;
  font-size:13px;
  background:radial-gradient(circle at 50% 35%,#173653,#07111d 70%);
}

.video-call-placeholder[hidden],
.video-call-sticker[hidden]{
  display:none;
}

.video-call-sticker{
  position:absolute;
  top:12%;
  left:50%;
  z-index:5;
  font-size:clamp(38px,10vw,82px);
  line-height:1;
  transform:translateX(-50%);
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.42));
  pointer-events:none;
}

.video-call-game-overlay{
  position:absolute;
  left:54px;
  right:10px;
  bottom:10px;
  z-index:8;
  max-height:calc(100% - 20px);
  overflow:auto;
  border:0;
  border-radius:0;
  color:#fff;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}

.video-game-picker{
  position:absolute;
  inset:10px 10px 10px 54px;
  z-index:10;
  overflow:auto;
  padding:10px;
  border:1px solid rgba(151,229,255,.62);
  border-radius:18px;
  color:#fff;
  background:rgba(5,20,38,.94);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  backdrop-filter:blur(12px);
}

.video-game-picker[hidden]{
  display:none;
}

.video-game-picker-topbar{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:10px;
}

.video-game-picker-topbar strong{
  flex:1;
}

.video-game-picker-close{
  display:grid;
  width:36px;
  min-width:36px;
  height:36px;
  padding:0;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  color:#fff;
  background:rgba(255,255,255,.12);
}

.video-game-picker-choices{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
  gap:9px;
}

.video-game-choice{
  display:flex;
  min-height:76px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:8px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  color:#fff;
  background:rgba(35,176,86,.32);
  font-weight:800;
}

.video-game-choice span:first-child{
  font-size:28px;
}

.video-game-overlay-card{
  display:grid;
  gap:8px;
  padding:10px;
  background:transparent;
}

.video-game-overlay-topbar,
.video-game-prompt,
.video-game-message{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:1px solid rgba(225,248,255,.2);
  border-radius:10px;
  background:rgba(5,20,38,.38);
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}

.video-game-overlay-topbar strong{
  flex:1;
}

.video-game-prompt{
  flex-wrap:wrap;
  color:#dff7ff;
  font-size:12px;
}

.video-game-prompt > span{
  flex:1 1 150px;
}

.video-game-answer,
.video-game-letters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
}

.video-game-slot{
  display:grid;
  width:30px;
  height:34px;
  place-items:center;
  border-radius:9px;
  color:#08213a;
  background:rgba(225,248,255,.92);
  font-size:20px;
  font-weight:900;
}

.video-game-letter,
.video-game-action,
.video-game-overlay-hide{
  display:grid;
  min-width:36px;
  min-height:36px;
  padding:5px;
  place-items:center;
  border:1px solid rgba(255,255,255,.35);
  border-radius:10px;
  color:#fff;
  background:rgba(35,176,86,.9);
  font-weight:900;
}

.video-game-overlay-hide{
  min-width:32px;
  min-height:32px;
  background:rgba(255,255,255,.12);
}

.video-game-message{
  justify-content:space-between;
  min-height:30px;
  color:#e9faff;
  font-size:12px;
  font-weight:800;
}

.video-call-options-toggle{
  position:absolute;
  left:0;
  right:auto;
  top:auto;
  bottom:12px;
  z-index:30;
  width:42px;
  min-width:42px;
  height:58px;
  padding:0;
  border:1px solid rgba(255,255,255,.3);
  border-left:0;
  border-radius:0 16px 16px 0;
  color:#fff;
  background:rgba(5,20,38,.78);
  box-shadow:0 6px 18px rgba(0,0,0,.32);
  transform:none;
  transition:left .22s ease,background .22s ease;
}

.video-call-options-drawer{
  position:absolute;
  top:44px;
  left:0;
  right:auto;
  bottom:0;
  z-index:29;
  width:min(240px,72%);
  overflow:auto;
  border-right:1px solid rgba(255,255,255,.2);
  background:rgba(5,20,38,.94);
  box-shadow:10px 0 28px rgba(0,0,0,.34);
  transform:translateX(-101%);
  transition:transform .22s ease;
}

.video-call-stage.options-open .video-call-options-drawer{
  transform:translateX(0);
}

.video-call-stage.options-open .video-call-options-toggle{
  left:min(240px,72%);
  background:rgba(20,93,126,.94);
}

.video-call-self .video-call-sticker,
.video-call-stage.self-primary .video-call-remote .video-call-sticker{
  font-size:clamp(24px,5vw,44px);
}

.video-call-stage.self-primary .video-call-self .video-call-sticker{
  font-size:clamp(38px,10vw,82px);
}

.video-call-feature-bar,
.video-call-controls{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:10px 12px;
}

.video-call-options-drawer .video-call-feature-bar,
.video-call-options-drawer .video-call-controls{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.video-call-options-drawer .video-call-feature-bar button:last-child,
.video-call-options-drawer .video-call-controls .video-call-end-button{
  grid-column:1/-1;
}

.video-call-feature-bar{
  border-bottom:1px solid rgba(255,255,255,.1);
}

.video-call-feature-bar button,
.video-call-controls button,
.video-tool-option{
  min-height:44px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:13px;
  color:#fff;
  font-weight:800;
  background:rgba(255,255,255,.1);
}

.video-call-feature-bar button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
}

.icon-only-button > span{
  display:block;
  font-size:24px;
  line-height:1;
}

.video-call-heading-button.icon-only-button > span{
  font-size:25px;
}

.video-call-feature-bar button[aria-expanded="true"],
.video-tool-option.selected{
  border-color:#6fd9ff;
  background:rgba(36,175,225,.28);
}

.video-call-controls{
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding-top:6px;
}

.video-call-controls button,
.video-call-feature-bar button{
  min-height:50px;
}

.video-call-controls .control-off{
  color:#ffd0d0;
  background:rgba(193,46,57,.32);
}

.video-call-controls .video-call-end-button{
  border-color:rgba(255,140,140,.55);
  background:#a92d3b;
}

.video-call-tool-tray{
  display:flex;
  gap:8px;
  padding:10px 12px;
  overflow-x:auto;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.18);
}

.video-call-tool-tray[hidden]{
  display:none;
}

.video-tool-option{
  display:flex;
  flex:0 0 58px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:12px;
}

.video-tool-option span:first-child{
  font-size:26px;
}

.video-call-stage[data-call-type="voice"] .video-call-canvas,
.video-call-stage[data-call-type="voice"] .video-call-feature-bar,
.video-call-stage[data-call-type="voice"] .video-call-options-toggle,
.video-call-stage[data-call-type="voice"] .video-only-control{
  display:none;
}

.video-call-stage[data-call-type="voice"] .video-call-options-drawer{
  position:static;
  width:auto;
  overflow:visible;
  border:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}

.video-call-stage[data-call-type="voice"] .video-call-controls{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.video-call-stage[data-call-type="video"] .voice-call-identity{
  display:none;
}

.video-call-stage[data-call-type="voice"] .video-call-options-drawer{
  flex:0 0 auto;
}

.clann-call-overlay .voice-call-identity{
  min-height:120px;
  padding:16px;
}

.video-call-stage.is-minimized{
  width:220px;
}

.video-call-stage.is-minimized .video-call-heading{
  min-height:40px;
}

.video-call-stage.is-minimized .video-call-canvas{
  min-height:120px;
}

.video-call-stage.is-minimized .video-call-feature-bar,
.video-call-stage.is-minimized .video-call-tool-tray,
.video-call-stage.is-minimized .video-call-options-toggle,
.video-call-stage.is-minimized .video-call-controls button:not(.video-call-end-button){
  display:none;
}

.video-call-stage.is-minimized .video-call-controls{
  grid-template-columns:1fr;
  padding:8px;
}

.video-call-stage.is-minimized .video-call-options-drawer{
  position:static;
  width:auto;
  overflow:visible;
  border:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}

@media (max-width:620px){
  .clann-call-overlay{
    right:8px;
    bottom:82px;
    width:calc(100vw - 16px);
    max-height:calc(100vh - 92px);
  }

  .video-call-canvas{
    min-height:190px;
  }

  .video-call-game-overlay{
    left:46px;
    right:6px;
    bottom:6px;
    max-height:calc(100% - 12px);
  }

  .video-call-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .video-call-controls .video-call-end-button{
    grid-column:1/-1;
  }

  .video-call-stage.is-minimized{
    width:190px;
  }

  .video-call-stage.is-minimized .video-call-canvas{
    min-height:105px;
  }
}

@media (max-height:950px){
  .content-panel.game-screen{
    padding:12px;
  }

  .content-panel.game-screen h1{
    font-size:22px;
  }

  .clann-game-shell{
    gap:10px;
  }

  .game-top-bar{
    padding:9px;
  }

  .spelling-card{
    padding:12px;
  }

  .spelling-hint{
    font-size:15px;
  }

  .spelling-answer{
    margin:10px 0;
  }

  .spelling-slot{
    min-width:36px;
    min-height:42px;
    font-size:24px;
  }

  .letter-row{
    gap:9px;
    margin-top:9px;
  }

  .letter-row button{
    width:58px;
    height:58px;
    border-radius:18px;
    font-size:25px;
  }
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(clann-remote-video),
  ::view-transition-group(clann-self-video){
    animation-duration:.01ms;
  }
}

.family-chat-thread{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:16px 0;
}

.family-chat-message{
  width:min(88%,680px);
  padding:14px 16px;
  border:1px solid rgba(120,180,220,.35);
  border-radius:18px 18px 18px 4px;
  color:#17324d;
  background:rgba(255,255,255,.78);
}

.family-chat-message.mine{
  align-self:flex-end;
  border-radius:18px 18px 4px 18px;
  background:rgba(174,230,255,.82);
}

.family-chat-message p{
  margin:8px 0 0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.device-unlock-card{
  margin:20px 0;
  padding:18px;
  border:1px solid rgba(120,180,220,.45);
  border-radius:20px;
  color:#17324d;
  background:linear-gradient(145deg,rgba(205,244,255,.92),rgba(255,255,255,.92));
}

.device-unlock-card h2{
  margin-top:0;
}

/* CLANN OS shell: system status, launcher pages, app lifecycle, and gestures. */
html,
body{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

.phone-screen{
  position:relative;
  width:min(100%,520px);
  height:100dvh;
  min-height:100dvh;
  max-width:520px;
  margin:0 auto;
  padding:0;
  gap:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 24% 4%,rgba(255,255,255,.42),transparent 30%),
    linear-gradient(165deg,#a8e2ff 0%,#63b9ea 54%,#1e76bd 100%);
  box-shadow:0 0 44px rgba(8,48,78,.18);
  isolation:isolate;
}

.clann-os-status-bar{
  position:relative;
  z-index:1600;
  display:grid;
  flex:0 0 auto;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  min-height:calc(38px + env(safe-area-inset-top,0px));
  padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px;
  color:#062a46;
  background:rgba(218,244,255,.82);
  border-bottom:1px solid rgba(17,89,134,.16);
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  user-select:none;
  touch-action:pan-x;
}

.clann-os-connectivity,
.clann-os-status-actions,
.clann-os-battery{
  display:flex;
  align-items:center;
}

.clann-os-connectivity{
  min-width:0;
  gap:7px;
  font-size:11px;
  font-weight:850;
}

#clannOsConnectionLabel{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.clann-os-signal-bars{
  display:flex;
  align-items:flex-end;
  gap:2px;
  width:22px;
  height:14px;
}

.clann-os-signal-bars i{
  width:4px;
  border-radius:2px;
  background:rgba(6,42,70,.2);
}

.clann-os-signal-bars i:nth-child(1){height:4px}
.clann-os-signal-bars i:nth-child(2){height:7px}
.clann-os-signal-bars i:nth-child(3){height:10px}
.clann-os-signal-bars i:nth-child(4){height:14px}
.clann-os-connectivity[data-bars="1"] i:nth-child(-n+1),
.clann-os-connectivity[data-bars="2"] i:nth-child(-n+2),
.clann-os-connectivity[data-bars="3"] i:nth-child(-n+3),
.clann-os-connectivity[data-bars="4"] i:nth-child(-n+4){background:#087641}
.clann-os-connectivity[data-state="degraded"] .clann-os-signal-bars i,
.clann-os-connectivity[data-state="reconnecting"] .clann-os-signal-bars i{background:#d38300}
.clann-os-connectivity[data-state="offline"] .clann-os-signal-bars i{background:#b6313d}

.clann-os-clock{
  justify-self:center;
  font-size:13px;
  font-weight:900;
  letter-spacing:.01em;
}

.clann-os-status-actions{
  justify-self:end;
  justify-content:flex-end;
  gap:7px;
}

.clann-os-status-button,
.clann-os-icon-button{
  position:relative;
  display:grid;
  width:30px;
  height:30px;
  padding:5px;
  place-items:center;
  border:0;
  border-radius:50%;
  color:#062a46;
  background:transparent;
}

.clann-os-status-button svg{
  width:19px;
  height:19px;
  fill:currentColor;
}

.clann-os-notification-badge{
  position:absolute;
  top:0;
  right:-2px;
  display:grid;
  min-width:15px;
  height:15px;
  padding:0 3px;
  place-items:center;
  border:2px solid #d9f4ff;
  border-radius:999px;
  color:#fff;
  background:#ba2537;
  font-size:8px;
  font-weight:900;
}

.clann-os-notification-badge[hidden],
.clann-os-battery[hidden]{display:none}

.clann-os-battery{
  gap:3px;
  font-size:10px;
  font-weight:800;
}

.clann-os-battery-icon{
  position:relative;
  width:21px;
  height:10px;
  padding:1px;
  border:1.5px solid currentColor;
  border-radius:3px;
}

.clann-os-battery-icon::after{
  content:"";
  position:absolute;
  right:-4px;
  top:2px;
  width:2px;
  height:4px;
  border-radius:0 2px 2px 0;
  background:currentColor;
}

.clann-os-battery-icon i{
  display:block;
  width:0;
  height:100%;
  border-radius:1px;
  background:#087641;
}

.phone-screen > .notice-area{
  position:absolute;
  z-index:1250;
  top:calc(44px + env(safe-area-inset-top,0px));
  left:10px;
  right:10px;
}

.phone-screen.os-app-open > .content-panel{
  display:block;
  flex:1 1 auto;
  min-height:0;
  margin:0;
  padding:18px 16px;
  overflow-x:hidden;
  overflow-y:auto;
  border:0;
  border-radius:0;
  background:#f3f9fc;
  box-shadow:none;
  overscroll-behavior:contain;
}

.phone-screen.os-app-open > .content-panel.phone-app-active{
  padding:0;
  border-radius:0;
}

.phone-screen.os-home > .content-panel,
.phone-screen.os-home > .clann-video-app-surface,
.phone-screen.os-app-open > .identity-share-area,
.phone-screen.os-app-open > .home-grid,
.phone-screen.os-app-open > .connect-card,
.phone-screen.os-app-open > .phone-dock,
.phone-screen.os-open-apps > .content-panel,
.phone-screen.os-open-apps > .identity-share-area,
.phone-screen.os-open-apps > .home-grid,
.phone-screen.os-open-apps > .connect-card,
.phone-screen.os-open-apps > .phone-dock{
  display:none !important;
}

.phone-screen.os-home > .identity-share-area{
  flex:0 0 auto;
  margin:10px 14px 6px;
  padding:10px 13px;
}

.phone-screen.os-home > .home-grid{
  display:block;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}

.phone-screen.os-home > .connect-card{
  flex:0 0 auto;
  max-height:148px;
  margin:6px 14px calc(88px + env(safe-area-inset-bottom,0px));
  overflow:hidden;
}

.clann-launcher-pages{
  display:flex;
  width:100%;
  height:calc(100% - 24px);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  touch-action:pan-x;
}

.clann-launcher-pages::-webkit-scrollbar{display:none}

.clann-launcher-page{
  display:grid;
  flex:0 0 100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:110px;
  align-content:start;
  gap:4px 6px;
  padding:8px 14px 4px;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

.clann-launcher-page .app-icon{
  align-self:center;
  justify-self:center;
  width:100%;
  min-width:0;
  gap:3px;
  color:#062d50;
  text-shadow:0 1px 2px rgba(255,255,255,.6);
  line-height:1.15;
}

.clann-launcher-page .app-icon > span:last-child{
  display:-webkit-box;
  min-height:32px;
  max-width:100%;
  overflow:hidden;
  color:#062d50;
  font-size:13px;
  line-height:16px;
  text-wrap:balance;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.clann-launcher-page .app-bubble{
  flex:0 0 74px;
  width:74px;
  height:74px;
}

.clann-launcher-indicators{
  display:flex;
  height:24px;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.clann-launcher-indicators button{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(6,45,80,.3);
}

.clann-launcher-indicators button.selected{
  width:18px;
  border-radius:999px;
  background:#063f71;
}

.phone-screen.os-home > .phone-dock{
  position:absolute;
  z-index:900;
  left:10px;
  right:10px;
  bottom:calc(46px + env(safe-area-inset-bottom,0px));
  min-height:72px;
  padding:8px;
  border-radius:24px;
  background:rgba(9,34,52,.64);
}

.phone-screen.os-home > .phone-dock .dock-button{
  min-height:54px;
}

.clann-os-navigation{
  position:relative;
  z-index:1600;
  display:grid;
  flex:0 0 auto;
  grid-template-columns:54px 1fr 54px;
  align-items:center;
  min-height:calc(42px + env(safe-area-inset-bottom,0px));
  padding:3px 8px calc(3px + env(safe-area-inset-bottom,0px));
  background:rgba(218,244,255,.9);
  border-top:1px solid rgba(17,89,134,.16);
  backdrop-filter:blur(18px);
}

.clann-os-navigation-button,
.clann-os-gesture-zone{
  display:grid;
  min-height:34px;
  place-items:center;
  border:0;
  background:transparent;
  color:#082f4b;
}

.clann-os-navigation-button svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
}

.clann-os-gesture-zone{
  touch-action:none;
}

.clann-os-gesture-zone span{
  width:min(124px,36vw);
  height:5px;
  border-radius:999px;
  background:#092f4b;
}

.clann-notification-shade,
.clann-app-switcher{
  position:absolute;
  z-index:1550;
  inset:0;
  min-height:0;
  padding:calc(48px + env(safe-area-inset-top,0px)) 12px calc(52px + env(safe-area-inset-bottom,0px));
  color:#102d43;
  background:rgba(226,246,253,.96);
  backdrop-filter:blur(24px) saturate(1.15);
  -webkit-backdrop-filter:blur(24px) saturate(1.15);
}

.clann-notification-shade[hidden],
.clann-app-switcher[hidden]{display:none}

.clann-notification-shade{
  display:flex;
  flex-direction:column;
  transform:translateY(-102%);
  transition:transform .22s ease;
  touch-action:pan-y;
}

.clann-notification-shade.open{transform:translateY(0)}

.clann-notification-shade-handle{
  width:42px;
  height:4px;
  margin:-4px auto 8px;
  border-radius:999px;
  background:rgba(16,45,67,.28);
}

.clann-notification-shade-heading,
.clann-app-switcher-heading,
.clann-notification-card-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.clann-notification-shade-heading p{
  margin:0;
  color:#34708e;
  font-size:11px;
  font-weight:900;
  letter-spacing:.09em;
}

.clann-notification-shade-heading h1,
.clann-app-switcher-heading h1{
  margin:0;
  font-size:25px;
}

.clann-notification-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin:12px 0;
  padding:4px;
  border-radius:15px;
  background:rgba(25,96,135,.1);
}

.clann-notification-tabs button{
  min-height:36px;
  border:0;
  border-radius:11px;
  color:#234f67;
  background:transparent;
  font-weight:800;
}

.clann-notification-tabs button.selected{
  color:#fff;
  background:#17648e;
}

.clann-notification-shade-content{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.clann-notification-card,
.clann-notification-empty,
.clann-notification-loading{
  margin-bottom:10px;
  padding:14px;
  border:1px solid rgba(25,96,135,.15);
  border-radius:18px;
  background:rgba(255,255,255,.75);
  box-shadow:0 7px 18px rgba(8,56,85,.08);
}

.clann-notification-card.is-unread{
  border-left:5px solid #167bb0;
}

.clann-notification-card h2{
  margin:0;
  font-size:16px;
}

.clann-notification-card p{
  margin:7px 0;
  line-height:1.4;
}

.clann-notification-card time,
.clann-notification-card small{
  color:#4b7184;
  font-size:11px;
}

.clann-notification-clear{
  min-height:32px;
  padding:5px 9px;
  border:0;
  border-radius:10px;
  color:#24566f;
  background:rgba(22,100,142,.1);
  font-weight:800;
}

.clann-notification-card-actions{
  margin-top:10px;
}

.clann-notification-card-actions button{
  width:100%;
  min-height:42px;
  border:0;
  border-radius:13px;
  color:#fff;
  background:#126b9b;
  font-weight:900;
}

.clann-notification-error{
  padding:10px;
  border-radius:12px;
  color:#7d1722;
  background:#ffe4e7;
}

.clann-app-switcher{
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(rgba(5,29,45,.7),rgba(5,29,45,.84)),
    radial-gradient(circle at top,#65b9e7,#123d61);
  color:#fff;
}

.clann-open-app-cards{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  gap:16px;
  margin-top:18px;
  padding:8px 20px 20px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  align-items:center;
}

.clann-open-app-card{
  position:relative;
  flex:0 0 min(78vw,330px);
  height:min(62vh,520px);
  scroll-snap-align:center;
}

.clann-open-app-preview{
  display:flex;
  width:100%;
  height:100%;
  padding:30px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:28px;
  color:#12324a;
  background:linear-gradient(165deg,#fff,#c9ebfb);
  box-shadow:0 18px 44px rgba(0,0,0,.3);
}

.clann-open-app-preview > span{
  display:grid;
  width:86px;
  height:86px;
  place-items:center;
  border-radius:24px;
  color:#fff;
  background:linear-gradient(145deg,#44aaf0,#1455b6);
  font-size:42px;
  font-weight:900;
}

.clann-open-app-preview strong{font-size:24px}
.clann-open-app-preview small{color:#4b7184}

.clann-open-app-close{
  position:absolute;
  z-index:2;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  color:#fff;
  background:rgba(7,42,65,.76);
  font-weight:900;
}

.clann-empty-open-apps{
  margin:auto;
  text-align:center;
}

.clann-empty-open-apps button{
  min-width:120px;
  min-height:44px;
  margin-top:12px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:14px;
  color:#fff;
  background:rgba(255,255,255,.13);
}

.clann-settings-card + .clann-settings-card{margin-top:14px}
.clann-settings-card .danger-button{background:#a92d3b}

.clann-calculator{
  width:min(100%,430px);
  margin:0 auto;
  padding:16px;
  border-radius:28px;
  color:#fff;
  background:linear-gradient(160deg,#153d59,#071b2d);
  box-shadow:0 18px 42px rgba(8,47,75,.2);
}

.clann-calculator-display{
  min-height:116px;
  padding:17px 14px;
  margin-bottom:13px;
  border-radius:20px;
  text-align:right;
  background:rgba(0,0,0,.28);
}

.clann-calculator-display small{display:block;min-height:18px;color:#a6c9dc}
.clann-calculator-display output{display:block;overflow:hidden;text-overflow:ellipsis;font-size:clamp(34px,9vw,52px);font-weight:850}
.clann-calculator-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.clann-calculator-keys button{min-height:62px;border:0;border-radius:18px;color:#fff;background:rgba(255,255,255,.12);font-size:24px;font-weight:800}
.clann-calculator-keys .utility-key{background:rgba(136,188,215,.35);font-size:16px}
.clann-calculator-keys .operator-key{background:#176eaa}
.clann-calculator-keys .equals-key{background:#159653}
.clann-calculator-keys .zero-key{grid-column:span 2}

.clann-clock-app{display:grid;gap:16px;width:min(100%,520px);margin:0 auto}
.clann-clock-now,.clann-clock-tool{padding:22px;border:1px solid rgba(20,102,151,.16);border-radius:24px;background:#fff;box-shadow:0 10px 26px rgba(9,54,83,.09)}
.clann-clock-now{text-align:center;background:linear-gradient(145deg,#09689d,#19477e);color:#fff}
.clann-clock-now time{display:block;font-size:clamp(40px,12vw,66px);font-weight:900;letter-spacing:-.05em}
.clann-clock-now > button{display:block;width:100%;margin:8px 0 14px;padding:7px 10px;border:0;border-radius:12px;color:#d8f4ff;background:rgba(255,255,255,.1);font-weight:800}
.clann-clock-now label{display:block;margin-bottom:5px;color:#d8f4ff;font-size:12px;font-weight:800;text-align:left}
.clann-clock-now select{width:100%;margin:0;color:#133b55;background:#fff}
.clann-clock-tool h2{font-size:18px}
.clann-clock-tool output{display:block;margin:13px 0;font-size:44px;font-weight:900;letter-spacing:.02em}
.clann-clock-tool label{font-weight:800}
.clann-clock-actions,.clann-note-editor-actions{display:flex;gap:10px;margin-top:10px}
.clann-clock-actions button,.clann-note-editor-actions button{flex:1;min-height:44px;border:0;border-radius:13px;color:#fff;background:#176eaa;font-weight:850}
.clann-clock-actions .secondary-button,.clann-note-editor-actions .secondary-button{color:#24566f;background:#deedf4}
.clann-clock-tool-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.clann-clock-tool-heading button,.clann-timer-create button{min-height:40px;padding:0 15px;border:0;border-radius:12px;color:#fff;background:#176eaa;font-weight:850}
.clann-clock-swipe-help{margin:5px 0 10px;color:#668596;font-size:12px}
.clann-clock-list{display:grid;gap:9px;overflow:hidden}
.clann-clock-swipe-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;border:1px solid rgba(20,102,151,.15);border-radius:17px;background:#f2f9fc;touch-action:pan-y;transition:transform .16s ease}
.clann-clock-swipe-row strong{display:block;color:#214f67}
.clann-clock-swipe-row output{margin:4px 0 0;font-size:29px}
.clann-clock-row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.clann-clock-row-actions button{min-height:36px;padding:0 10px;border:0;border-radius:10px;color:#fff;background:#176eaa;font-weight:800}
.clann-clock-row-actions .secondary-button{color:#315d74;background:#dbeaf1}
.clann-clock-row-actions .clann-clock-delete{color:#872c38;background:#ffe1e5}
.clann-timer-create{display:grid;grid-template-columns:minmax(0,1fr) 94px auto;gap:8px;align-items:end}
.clann-timer-create input{min-width:0;margin:0}

.clann-segmented-control{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-bottom:13px;padding:5px;border-radius:15px;background:#dcecf4}
.clann-segmented-control button{min-height:40px;border:0;border-radius:11px;color:#3c667b;background:transparent;font-weight:850}
.clann-segmented-control button.selected{color:#fff;background:#176eaa;box-shadow:0 5px 12px rgba(17,89,134,.2)}

.clann-notes-app,.clann-files-app{width:min(100%,760px);margin:0 auto}
.clann-journal-privacy{padding:12px 14px;border:1px solid #e2b864;border-radius:15px;color:#624718;background:#fff4d8;font-size:13px;line-height:1.4}
.clann-notes-layout{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:14px;min-height:480px}
.clann-note-list{display:flex;flex-direction:column;min-height:0;padding:10px;border:1px solid rgba(20,102,151,.16);border-radius:20px;background:#eaf6fb}
.clann-note-new{min-height:42px;border:0;border-radius:12px;color:#fff;background:#176eaa;font-weight:850}
.clann-note-list > div{overflow-y:auto;margin-top:8px}
.clann-note-list-item{display:grid;width:100%;gap:4px;padding:12px 8px;border:0;border-radius:12px;color:#153b54;background:transparent;text-align:left}
.clann-note-list-item.selected{background:#fff;box-shadow:0 4px 12px rgba(11,73,109,.12)}
.clann-note-list-item small,.clann-note-list-item time{overflow:hidden;color:#5f8192;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.clann-note-editor{display:flex;flex-direction:column;padding:16px;border:1px solid rgba(20,102,151,.16);border-radius:20px;background:#fff}
.clann-note-editor label{margin-top:3px;color:#315d74;font-size:12px;font-weight:850}
.clann-note-editor textarea{flex:1;min-height:280px;resize:vertical}
.clann-note-read-receipts{margin-top:12px;padding:10px 12px;border-radius:13px;color:#365f73;background:#edf7fb;font-size:12px}
.clann-note-read-receipts ul{display:grid;gap:5px;margin:7px 0 0;padding:0;list-style:none}
.clann-note-read-receipts li{display:flex;justify-content:space-between;gap:8px}.clann-note-read-receipts time{color:#6c8897}
.clann-journal-lock-actions{display:flex;justify-content:flex-end;margin:0 0 10px}
.clann-journal-lock-actions button{min-height:38px;padding:0 13px;border:0;border-radius:11px;color:#fff;background:#78579b;font-weight:850}
.clann-journal-pin-card{width:min(100%,430px);margin:0 auto;padding:20px;border:1px solid rgba(20,102,151,.16);border-radius:22px;background:#fff;box-shadow:0 10px 26px rgba(9,54,83,.09)}
.clann-journal-pin-card label{display:block;margin-top:11px;color:#315d74;font-size:12px;font-weight:850}.clann-journal-pin-card input{width:100%}
.clann-journal-pin-card > button{width:100%;min-height:44px;margin-top:12px;border:0;border-radius:13px;color:#fff;background:#78579b;font-weight:850}
.clann-journal-pin-card .danger-button{color:#fff;background:#a92d3b}
.clann-journal-lock-icon{text-align:center;font-size:42px}
.clann-empty-utility{padding:18px;color:#587889;text-align:center}
.clann-guardian-journal{width:min(100%,680px);margin:0 auto}
.clann-guardian-journal article{margin-top:12px;padding:18px;border:1px solid rgba(20,102,151,.16);border-radius:20px;background:#fff}
.clann-guardian-journal h2{font-size:19px}.clann-guardian-journal time{display:block;margin:5px 0 12px;color:#5f8192;font-size:12px}.clann-guardian-journal p{line-height:1.55}

/* Memories is a private CLANN application; storage, identity, and permissions remain OS services. */
.clann-memories-app{width:min(100%,920px);margin:0 auto;padding-bottom:16px}
.clann-memories-toolbar{position:sticky;z-index:12;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 11px;background:linear-gradient(180deg,#e4f5fc 75%,rgba(228,245,252,0))}
.clann-memory-tabs{display:flex;min-width:0;padding:4px;border:1px solid rgba(30,91,128,.15);border-radius:16px;background:rgba(255,255,255,.7)}
.clann-memory-tabs button{min-height:40px;padding:0 14px;border:0;border-radius:12px;color:#416b7e;background:transparent;font-weight:850;white-space:nowrap}
.clann-memory-tabs button.selected{color:#fff;background:#176eaa;box-shadow:0 5px 13px rgba(19,94,143,.2)}
.clann-memory-capture-actions,.clann-memory-add-actions{display:flex;gap:7px}.clann-memory-capture-actions button,.clann-memory-add-actions button{min-height:43px;padding:0 15px;border:0;border-radius:14px;color:#fff;background:#176eaa;font-weight:900}.clann-memory-capture-actions .secondary-button,.clann-memory-add-actions .secondary-button{color:#275d78;background:#d2eaf5}
.clann-memory-create-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:3px 0 12px;padding:10px;border-radius:17px;background:rgba(255,255,255,.75)}
.clann-memory-create-bar strong{margin-right:auto;color:#335f74;font-size:13px}.clann-memory-create-bar button{min-height:37px;padding:0 11px;border:0;border-radius:11px;color:#fff;background:#176eaa;font-weight:850}.clann-memory-create-bar button:disabled{opacity:.42}.clann-memory-create-bar .secondary-button{color:#315e75;background:#dcecf4}
.clann-memory-status{min-height:0;margin:0;color:#315e75;font-size:13px}
.clann-memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.clann-memory-card{position:relative;overflow:hidden;aspect-ratio:1;border:0;border-radius:16px;background:#bdd9e7;box-shadow:0 5px 13px rgba(10,60,88,.1)}
.clann-memory-open{display:block;width:100%;height:100%;padding:0;border:0;color:#fff;background:transparent;text-align:left}.clann-memory-frame{display:block;width:100%;height:100%;overflow:hidden}.clann-memory-card .clann-memory-media{width:100%;height:100%;object-fit:cover}
.clann-memory-copy{position:absolute;right:0;bottom:0;left:0;display:grid;gap:2px;padding:26px 9px 9px;color:#fff;background:linear-gradient(transparent,rgba(3,26,39,.82));text-align:left}.clann-memory-copy strong,.clann-memory-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clann-memory-copy strong{font-size:12px}.clann-memory-copy small{font-size:9px}.clann-memory-favorite{position:absolute;z-index:2;top:8px;left:8px;color:#ffdf58;font-size:20px;text-shadow:0 2px 5px rgba(0,0,0,.45)}
.clann-memory-card-copy{position:absolute;right:0;bottom:0;left:0;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:26px 9px 9px;color:#fff;background:linear-gradient(transparent,rgba(3,26,39,.8));text-align:left}.clann-memory-card-copy strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.clann-memory-card-copy time{flex:none;font-size:9px}
.clann-memory-select{position:absolute;z-index:2;top:8px;right:8px;width:28px;height:28px;border:2px solid #fff;border-radius:50%;color:transparent;background:rgba(0,0,0,.25);font-weight:950}.clann-memory-card.selected .clann-memory-select{color:#fff;background:#176eaa}.clann-memory-card.selected{outline:4px solid rgba(23,110,170,.65);outline-offset:-4px}
.clann-memory-video-badge{position:absolute;z-index:2;top:9px;left:9px;padding:4px 7px;border-radius:8px;color:#fff;background:rgba(4,30,44,.72);font-size:10px;font-weight:900}
.clann-memory-detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:15px;width:min(100%,900px);margin:0 auto}
.clann-memory-detail-preview{display:grid;min-height:440px;overflow:hidden;place-items:center;border-radius:24px;background:#071a25}.clann-memory-detail-preview .clann-memory-media{max-width:100%;max-height:70vh;object-fit:contain}
.clann-memory-detail-form{padding:17px;border:1px solid rgba(20,102,151,.16);border-radius:22px;background:#fff}.clann-memory-detail-form>label,.clann-memory-details-grid label{display:block;margin-bottom:10px;color:#315d74;font-size:12px;font-weight:850}.clann-memory-detail-form input,.clann-memory-detail-form textarea,.clann-memory-detail-form select{width:100%;margin-top:4px}.clann-memory-detail-form textarea{min-height:90px;resize:vertical}
.clann-memory-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 9px}.clann-memory-editor{display:grid;gap:7px;margin:12px 0;padding:11px;border:1px solid #d4e4eb;border-radius:14px}.clann-memory-editor legend{padding:0 6px;color:#315d74;font-weight:900}.clann-memory-editor label{display:grid;grid-template-columns:70px 1fr;align-items:center;color:#416b7d;font-size:12px;font-weight:800}.clann-memory-editor input{margin:0}.clann-memory-editor>div{display:flex;gap:7px}
.clann-memory-detail-actions{display:flex;flex-wrap:wrap;gap:8px}.clann-memory-detail-actions button,.clann-memory-project-builder button{min-height:42px;padding:0 14px;border:0;border-radius:13px;color:#fff;background:#176eaa;font-weight:900}.clann-memory-detail-actions .secondary-button,.clann-memory-project-builder .secondary-button{color:#315e75;background:#dcecf4}.clann-memory-detail-actions .danger-button{background:#a92d3b}
.clann-memory-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.clann-memory-project{position:relative;overflow:hidden;padding:0 0 11px;border:0;border-radius:19px;color:#153b54;background:#fff;box-shadow:0 7px 18px rgba(10,60,88,.1);text-align:left}.clann-memory-project>strong,.clann-memory-project>small{display:block;padding:0 12px}.clann-memory-project>strong{margin-top:9px}.clann-memory-project>small{margin-top:3px;color:#65818f}.clann-memory-reel-card{display:block;width:100%;padding:0;border:0}.clann-memory-reel-card>span:last-child{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;padding:10px 12px}.clann-memory-reel-card b{grid-row:1/3;display:grid;width:32px;height:32px;border-radius:50%;place-items:center;color:#fff;background:#176eaa}.clann-memory-reel-card strong,.clann-memory-reel-card small{display:block}.clann-memory-reel-card small{color:#65818f}.clann-project-stack{display:grid;grid-template-columns:repeat(3,1fr);height:180px;overflow:hidden}.clann-project-stack>span{min-width:0;overflow:hidden}.clann-project-stack .clann-memory-media{width:100%;height:100%;object-fit:cover}
.clann-collage-preview,.clann-collage-full,.clann-project-selected,.clann-journal-project-art{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;overflow:hidden;background:#d7e8ef}.clann-collage-preview{height:180px}.clann-collage-preview .clann-memory-media,.clann-project-selected .clann-memory-media,.clann-journal-project-art .clann-memory-media{width:100%;height:100%;min-height:0;object-fit:cover}.clann-collage-full{width:min(100%,820px);height:min(72vh,680px);margin:0 auto 12px;border-radius:24px}.clann-collage-full .clann-memory-media{width:100%;height:100%;min-height:0;object-fit:cover}
.clann-memory-project-builder{width:min(100%,620px);margin:0 auto;padding:18px;border-radius:23px;background:#fff}.clann-project-selected{height:210px;margin-bottom:14px;border-radius:16px}.clann-memory-project-builder label{display:block;margin:10px 0;color:#315d74;font-size:12px;font-weight:850}.clann-memory-project-builder input,.clann-memory-project-builder select{width:100%;margin-top:4px}
.clann-reel-player{position:relative;display:grid;width:min(100%,540px);height:min(72vh,720px);margin:0 auto 12px;overflow:hidden;place-items:center;border-radius:26px;background:#061823}.clann-reel-player .clann-memory-media{width:100%;height:100%;object-fit:contain}.clann-reel-player>p{position:absolute;right:14px;bottom:29px;left:14px;padding:8px;border-radius:12px;color:#fff;background:rgba(0,0,0,.5);text-align:center}.clann-reel-progress{position:absolute;top:11px;right:11px;left:11px;display:flex;gap:3px}.clann-reel-progress i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35)}.clann-reel-progress i.played{background:#fff}

/* Journal uses the OS Memories service, but remains a private writing application. */
.clann-journal-book-app{position:relative;width:min(100%,960px);margin:0 auto}.clann-journal-book-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.clann-journal-book-tools .clann-journal-privacy{flex:1;margin:0}.clann-journal-book-tools button{min-height:39px;padding:0 13px;border:0;border-radius:11px;color:#5c4177;background:#e9dff3;font-weight:850}
.clann-journal-book-workspace{display:grid;grid-template-columns:156px minmax(0,1fr);gap:11px;min-height:510px}.clann-journal-entries{display:flex;min-height:0;flex-direction:column;padding:8px;border-radius:18px;background:rgba(230,217,195,.78)}.clann-journal-entries>div{overflow:auto;margin-top:7px}.clann-journal-entry-tab{display:grid;width:100%;gap:3px;padding:10px;border:0;border-radius:11px;color:#5a4734;background:transparent;text-align:left}.clann-journal-entry-tab.selected{background:#fffaf0;box-shadow:0 4px 10px rgba(70,46,23,.13)}.clann-journal-entry-tab strong{overflow:hidden;font-family:Georgia,serif;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.clann-journal-entry-tab time{font-size:10px;opacity:.65}
.clann-journal-book{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr);min-width:0;overflow:hidden;border:9px solid #725036;border-radius:12px 22px 22px 12px;background:#725036;box-shadow:0 14px 26px rgba(55,37,21,.22)}.clann-journal-page{position:relative;min-width:0;padding:24px 18px 17px;background:#fffaf0}.clann-journal-writing-page{box-shadow:inset -16px 0 19px -19px rgba(46,29,14,.45)}.clann-journal-memory-page{display:flex;min-height:480px;flex-direction:column;box-shadow:inset 16px 0 19px -19px rgba(46,29,14,.45)}.clann-journal-spine{display:block;background:linear-gradient(90deg,#4c2d1c,#8b6447 45%,#402517)}.clann-journal-page-number{display:block;margin-bottom:8px;color:#9b7a5e;font-family:Georgia,serif;font-size:11px;text-align:center}.clann-journal-writing-page input{width:100%;padding:5px 3px 11px;border:0;border-bottom:1px solid #cdbca7;border-radius:0;color:#4a3828;background:transparent;font-family:Georgia,serif;font-size:24px;font-weight:700}.clann-journal-writing-page textarea{width:100%;height:calc(100% - 61px);min-height:370px;padding:14px 4px;border:0;color:#4d3c2d;background:repeating-linear-gradient(transparent,transparent 27px,#e4d8c7 28px);font-family:Georgia,serif;font-size:16px;line-height:28px;resize:none}.clann-journal-writing-page input:focus,.clann-journal-writing-page textarea:focus{outline:2px solid rgba(123,87,151,.25);outline-offset:2px}
.clann-journal-page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:#594635;font-family:Georgia,serif}.clann-journal-page-heading small{font-family:system-ui,sans-serif}.clann-journal-page-memories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;overflow:auto}.clann-journal-book-memory{position:relative;min-width:0;margin:0;padding:5px 5px 19px;background:#fff;box-shadow:0 3px 9px rgba(65,44,24,.17);transform:rotate(-.5deg)}.clann-journal-book-memory:nth-child(even){transform:rotate(.7deg)}.clann-journal-book-memory .clann-memory-media,.clann-journal-book-memory .clann-journal-project-art{width:100%;height:105px;object-fit:cover}.clann-journal-book-memory figcaption{position:absolute;right:5px;bottom:3px;left:5px;overflow:hidden;color:#624e3b;font-family:Georgia,serif;font-size:10px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.clann-journal-book-memory>button{position:absolute;top:1px;right:1px;width:24px;height:24px;border:0;border-radius:50%;color:#fff;background:rgba(70,38,29,.8);font-size:18px}.clann-journal-project-art{position:relative}.clann-journal-project-art>i{position:absolute;top:50%;left:50%;display:grid;width:36px;height:36px;border-radius:50%;place-items:center;color:#fff;background:rgba(0,0,0,.65);font-style:normal;transform:translate(-50%,-50%)}
.clann-journal-blank-page{display:grid;flex:1;place-items:center;align-content:center;color:#967a61;text-align:center}.clann-journal-blank-page span{font-size:40px}.clann-journal-blank-page p{max-width:190px;font-family:Georgia,serif}.clann-journal-add-memory{min-height:39px;margin-top:auto;border:1px dashed #a98767;border-radius:12px;color:#6c5039;background:#fbf2e4;font-weight:850}.clann-journal-book-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:11px}.clann-journal-book-actions button{min-height:42px;padding:0 16px;border:0;border-radius:13px;color:#fff;background:#78579b;font-weight:900}.clann-journal-book-actions .secondary-button{color:#62483d;background:#e8d9c8}
.clann-journal-picker-backdrop{position:fixed;z-index:1850;inset:0;display:grid;padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));place-items:center;background:rgba(3,22,33,.68);backdrop-filter:blur(7px)}.clann-journal-picker{display:flex;width:min(100%,760px);max-height:88vh;overflow:hidden;flex-direction:column;border-radius:24px;background:#f6fbfd;box-shadow:0 18px 54px rgba(0,0,0,.35)}.clann-journal-picker>header,.clann-journal-picker>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 17px}.clann-journal-picker h2,.clann-journal-picker p{margin:0}.clann-journal-picker p{margin-top:3px;color:#5a7a89;font-size:12px}.clann-journal-picker>header>button{width:38px;height:38px;border:0;border-radius:50%;color:#315d74;background:#dcecf4;font-size:23px}.clann-journal-picker>footer button{min-height:40px;padding:0 15px;border:0;border-radius:12px;color:#fff;background:#176eaa;font-weight:850}.clann-journal-picker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;overflow:auto;padding:8px 15px}.clann-journal-picker-card{position:relative;display:flex;min-width:0;overflow:hidden;flex-direction:column;padding:0 0 8px;border:3px solid transparent;border-radius:14px;color:#234e65;background:#fff;text-align:left}.clann-journal-picker-card.selected{border-color:#176eaa}.clann-journal-picker-card>.clann-memory-media,.clann-journal-picker-card>.clann-journal-project-art{width:100%;height:120px;object-fit:cover}.clann-journal-picker-card>span{overflow:hidden;padding:7px 8px 0;font-size:11px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.clann-journal-picker-card>i{position:absolute;top:6px;right:6px;display:grid;width:27px;height:27px;border-radius:50%;place-items:center;color:#fff;background:#176eaa;font-style:normal;font-weight:950}.clann-journal-memory-missing{display:grid;height:100%;place-items:center;color:#806d5a;background:#eee2d0;font-size:11px}
.clann-guardian-journal-book{display:grid!important;grid-template-columns:1fr 1fr;overflow:hidden;padding:0!important;border:8px solid #725036!important;border-radius:12px!important;background:#725036!important}.clann-guardian-journal-book>section{min-width:0;padding:18px;background:#fffaf0}.clann-guardian-memory-page{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;box-shadow:inset 13px 0 15px -17px #4c2d1c}.clann-guardian-memory-page figure{min-width:0;margin:0;padding:5px;background:#fff;box-shadow:0 2px 7px rgba(65,44,24,.16)}.clann-guardian-memory-page .clann-memory-media,.clann-guardian-memory-page .clann-journal-project-art{width:100%;height:110px;object-fit:cover}.clann-guardian-memory-page figcaption{overflow:hidden;color:#654f3c;font-size:10px;text-overflow:ellipsis;white-space:nowrap}

.clann-calendar-app{width:min(100%,700px);margin:0 auto}
.clann-calendar-create{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px;padding:15px;border:1px solid rgba(20,102,151,.16);border-radius:20px;background:#fff}
.clann-calendar-create > input,.clann-calendar-create > textarea,.clann-calendar-create > button{grid-column:1/-1}
.clann-calendar-create label{color:#315d74;font-size:12px;font-weight:850}.clann-calendar-create label input{width:100%;margin-top:4px}
.clann-calendar-create textarea{min-height:82px;resize:vertical}.clann-calendar-create button{min-height:44px;border:0;border-radius:13px;color:#fff;background:#176eaa;font-weight:850}
.clann-calendar-events{display:grid;gap:9px}.clann-calendar-event{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px;border:1px solid rgba(20,102,151,.15);border-radius:18px;background:#fff}
.clann-calendar-event > time{color:#176eaa;font-size:12px;font-weight:850}.clann-calendar-event p{margin:4px 0;color:#496f82}.clann-calendar-event small{color:#78909c}.clann-calendar-event button{min-height:36px;padding:0 10px;border:0;border-radius:10px;color:#315d74;background:#deedf4;font-weight:800}
.clann-calendar-readonly{padding:12px 14px;border-radius:14px;color:#466b7d;background:#e9f4f9}

.clann-file-upload{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;padding:16px;border:1px solid rgba(20,102,151,.16);border-radius:20px;background:#fff}
.clann-file-upload label{grid-column:1/-1;font-weight:850}.clann-file-upload input{margin:0}.clann-file-upload button{min-height:44px;padding:0 18px;border:0;border-radius:13px;color:#fff;background:#176eaa;font-weight:850}.clann-file-upload p{grid-column:1/-1;margin:0;color:#476d81;font-size:13px}
.clann-file-list{margin-top:14px}.clann-file-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:9px;padding:14px;border:1px solid rgba(20,102,151,.14);border-radius:17px;background:#fff}.clann-file-row strong,.clann-file-row small{display:block}.clann-file-row small{margin-top:4px;color:#587889;font-size:12px}.clann-file-row > div:last-child{display:flex;gap:7px}.clann-file-row button{min-height:36px;padding:0 10px;border:0;border-radius:10px;color:#fff;background:#176eaa;font-weight:800}.clann-file-row .secondary-button{color:#315d74;background:#deedf4}
.clann-storage-pinch{width:min(100%,580px);margin:0 auto;padding:22px;border:1px solid rgba(20,102,151,.14);border-radius:26px;background:#fff;box-shadow:0 13px 32px rgba(7,62,92,.12)}.clann-storage-meter{height:12px;overflow:hidden;border-radius:9px;background:#dbeaf1}.clann-storage-meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#45b8e8,#176eaa,#78579b)}.clann-storage-numbers{display:flex;justify-content:space-between;gap:12px;margin-top:7px;color:#55778a;font-size:12px}.clann-storage-pinch h2{margin:23px 0 6px;color:#123e58}.clann-storage-pinch>p{color:#496e81;line-height:1.5}.clann-storage-premium-note{padding:11px;border-radius:13px;color:#315f48!important;background:#e6f5ec}.clann-storage-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:17px 0}.clann-storage-plans button{display:grid;gap:5px;padding:16px;border:2px solid transparent;border-radius:18px;color:#163f57;background:#e8f5fb;text-align:left}.clann-storage-plans button:active{border-color:#176eaa}.clann-storage-plans strong{font-size:23px}.clann-storage-plans span{color:#176eaa;font-weight:900}.clann-storage-plans small{color:#587889;line-height:1.35}.clann-storage-child-message{display:flex;gap:11px;align-items:center;margin:16px 0;padding:14px;border-radius:16px;color:#5e4730;background:#fff2d7}.clann-storage-child-message span{font-size:26px}.clann-storage-child-message p{margin:0;line-height:1.4}.clann-storage-back{min-height:41px;padding:0 15px;border:0;border-radius:12px;color:#315e75;background:#dcecf4;font-weight:850}

.clann-os-toast{position:absolute;z-index:1700;left:50%;bottom:calc(58px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 32px);padding:12px 16px;border-radius:16px;color:#fff;background:rgba(5,28,43,.9);box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:.18s ease}.clann-os-toast.show{opacity:1;transform:translate(-50%,0)}

.clann-demo-entry{
  margin:-8px 0 22px;
  padding:16px;
  border:1px solid rgba(19,113,174,.2);
  border-radius:18px;
  text-align:center;
  background:linear-gradient(145deg,#e9f8ff,#c8ebff);
}
.clann-demo-entry button{width:100%;min-height:48px;font-size:17px;background:linear-gradient(135deg,#0878bd,#2357ce)}
.clann-demo-entry p{margin:9px 0 0;color:#315e77;font-size:13px;font-weight:750;line-height:1.35}

.clann-demo-public-shell{padding:max(24px,env(safe-area-inset-top,0px)) 18px max(24px,env(safe-area-inset-bottom,0px))}
.clann-demo-start-card{width:min(100%,620px);padding:clamp(22px,5vw,38px)}
.clann-demo-start-card .top-logo{display:block;height:82px;margin:0 auto 16px}
.clann-demo-start-card > h1{margin:2px 0 9px;font-size:clamp(30px,7vw,44px)}
.clann-demo-start-card > p{line-height:1.5}
.clann-demo-start-card > button{width:100%;min-height:48px;margin-top:9px}
.clann-demo-start-card > label,.clann-demo-start-card section > label{display:block;margin-top:18px;color:#214f69;font-size:13px;font-weight:850}
.clann-demo-kicker{margin:0 0 5px;color:#1373a8;font-size:11px;font-weight:950;letter-spacing:.12em}
.clann-demo-facts{display:grid;gap:9px;margin:20px 0}
.clann-demo-facts p{display:grid;grid-template-columns:126px minmax(0,1fr);gap:12px;padding:12px;border-radius:15px;background:#edf8fd;line-height:1.35}
.clann-demo-facts strong{color:#0c6395}.clann-demo-facts span{color:#3f6579;font-size:13px}
.clann-demo-invite-details{display:grid;gap:8px;margin:16px 0;padding:14px;border-radius:16px;background:#edf8fd}
.clann-demo-invite-details div{display:flex;justify-content:space-between;gap:16px}.clann-demo-invite-details dt{color:#55798b}.clann-demo-invite-details dd{font-weight:850;text-transform:capitalize}

.clann-demo-status{
  min-width:0;
  height:25px;
  padding:0 7px;
  border:1px solid rgba(8,99,149,.22);
  border-radius:999px;
  color:#084e76;
  background:rgba(255,255,255,.5);
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}
.clann-demo-session-app{display:grid;gap:14px;width:min(100%,780px);margin:0 auto}
.clann-demo-session-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(145deg,#fff,#dff4ff)}
.clann-demo-session-summary > div{min-width:0}.clann-demo-session-summary h2{margin:0}.clann-demo-session-summary > p{max-width:440px;line-height:1.45}
.clann-demo-session-summary > button{flex:0 0 auto}
.clann-demo-member-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.clann-demo-member-form h2,.clann-demo-plan-card h2{font-size:20px}.clann-demo-member-form > p{margin:7px 0 13px;color:#476f84;font-size:13px;line-height:1.4}
.clann-demo-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.clann-demo-form-grid label{font-size:12px;font-weight:850}.clann-demo-form-grid input,.clann-demo-form-grid select{margin-bottom:10px}
.clann-demo-permissions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0 14px;padding:12px;border:1px solid #cfe3ee;border-radius:15px}.clann-demo-permissions legend{padding:0 5px;color:#315e77;font-size:12px;font-weight:850}.clann-demo-permissions label{display:flex;align-items:center;gap:7px;font-size:12px}.clann-demo-permissions input{width:18px;height:18px;margin:0}
.clann-demo-participant-list{display:grid;gap:8px;margin-top:10px}.clann-demo-participant-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid rgba(15,101,151,.14);border-radius:16px;background:#f2f9fc}.clann-demo-participant-card strong,.clann-demo-participant-card span,.clann-demo-participant-card small{display:block}.clann-demo-participant-card span{margin-top:3px;color:#315e77;text-transform:capitalize}.clann-demo-participant-card small{margin-top:3px;color:#6b8796}
.clann-demo-bot-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.clann-demo-bot-actions button{min-height:34px;padding:0 9px;color:#21556f;background:#dceef7;font-size:11px}
.clann-demo-invitation-result{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;align-items:center;margin-top:12px;padding:12px;border-radius:16px;background:#edf8fd}.clann-demo-invitation-result p{overflow-wrap:anywhere;margin:5px 0;color:#3d6579;font-size:11px}.clann-demo-invitation-qr{width:140px;height:140px;padding:6px;border-radius:14px;background:#fff}.clann-demo-invitation-qr img,.clann-demo-invitation-qr canvas{width:128px!important;height:128px!important}
.clann-demo-upgrade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:13px}.clann-demo-upgrade-grid button{display:flex;min-height:76px;flex-direction:column;align-items:flex-start;gap:4px;color:#173f58;background:#e7f5fc;text-align:left}.clann-demo-upgrade-grid button strong{color:#0b689d}.clann-demo-upgrade-grid button span{font-size:11px;font-weight:600;line-height:1.35}.clann-demo-no-charge{margin-top:10px;color:#4d7285;font-size:12px;font-weight:800}
.clann-demo-danger-zone{border-color:rgba(166,45,57,.26)}.clann-demo-danger-zone p{margin:7px 0 13px;line-height:1.45}.clann-demo-danger-zone .danger-button{background:#a92d3b}
.clann-demo-ended{max-width:520px;margin:auto;text-align:center}.clann-demo-ended h2{margin-bottom:10px}.clann-demo-ended p{margin-bottom:14px;line-height:1.5}.clann-demo-onboarding-card{max-width:560px;margin:auto}.clann-demo-onboarding-card p{margin:9px 0 15px;line-height:1.5}.clann-demo-onboarding-card button{margin:4px}
.clann-demo-midpoint{width:min(92vw,430px);padding:24px;border:1px solid rgba(16,100,151,.2);border-radius:24px;color:#173f58;background:#fff;box-shadow:0 24px 70px rgba(3,34,55,.35)}
.clann-demo-midpoint h2{margin:4px 0 10px;font-size:24px}.clann-demo-midpoint > p:not(.clann-demo-kicker){margin-bottom:18px;color:#416a80;line-height:1.5}.clann-demo-midpoint button{width:100%;min-height:46px;margin-top:8px;border:0;border-radius:14px;color:#fff;background:#176eaa;font-weight:850}.clann-demo-midpoint .secondary-button{color:#315e77;background:#e2f0f7}

@media (max-height:720px){
  .phone-screen.os-home > .identity-share-area{
    margin-top:5px;
    padding:7px 10px;
  }
  .identity-qr-icon{
    width:62px;
    height:62px;
    border-radius:17px;
  }
  .identity-qr-icon canvas,
  .identity-qr-icon img,
  .identity-qr-icon table{
    width:50px !important;
    height:50px !important;
  }
  .phone-screen.os-home > .connect-card{max-height:112px}
}

@media (max-width:480px){
  .clann-demo-member-columns{grid-template-columns:1fr}
  .clann-demo-session-summary{align-items:flex-start;flex-direction:column}
  .clann-demo-session-summary > button{width:100%}
  .clann-demo-form-grid{grid-template-columns:1fr}
  .clann-demo-upgrade-grid{grid-template-columns:1fr}
  .clann-demo-invitation-result{grid-template-columns:1fr;justify-items:center;text-align:center}
  .clann-demo-participant-card{align-items:flex-start;flex-direction:column}
  .clann-demo-bot-actions{width:100%;justify-content:stretch}.clann-demo-bot-actions button{flex:1}
  .clann-demo-facts p{grid-template-columns:1fr;gap:3px}
  .clann-notes-layout{grid-template-columns:1fr;min-height:0}
  .clann-note-list{max-height:180px}
  .clann-note-editor textarea{min-height:220px}
  .clann-file-upload{grid-template-columns:1fr}
  .clann-file-upload button{width:100%}
  .clann-file-row{align-items:flex-start;flex-direction:column}
  .clann-storage-plans{grid-template-columns:1fr}
  .clann-clock-swipe-row{align-items:flex-start;flex-direction:column}
  .clann-clock-row-actions{width:100%;justify-content:stretch}.clann-clock-row-actions button{flex:1}
  .clann-timer-create{grid-template-columns:1fr 82px}.clann-timer-create button{grid-column:1/-1}
  .clann-calendar-create{grid-template-columns:1fr}.clann-calendar-create > *{grid-column:1}
  .clann-calendar-event{grid-template-columns:1fr}.clann-calendar-event button{width:100%}
  .clann-memories-toolbar{align-items:stretch;flex-direction:column}.clann-memory-tabs{overflow-x:auto}.clann-memory-tabs button{flex:1;padding:0 10px}.clann-memory-capture-actions button,.clann-memory-add-actions button{flex:1}.clann-memory-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.clann-memory-create-bar{flex-wrap:wrap}.clann-memory-create-bar strong{width:100%}.clann-memory-detail{grid-template-columns:1fr}.clann-memory-detail-preview{min-height:300px}.clann-memory-details-grid{grid-template-columns:1fr}.clann-memory-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.clann-collage-preview,.clann-project-stack{height:145px}
  .clann-journal-book-tools{align-items:stretch;flex-direction:column}.clann-journal-book-workspace{grid-template-columns:1fr}.clann-journal-entries{max-height:132px}.clann-journal-book{grid-template-columns:1fr;overflow:visible;border-width:7px}.clann-journal-page{min-height:430px}.clann-journal-spine{height:10px;background:linear-gradient(#4c2d1c,#8b6447 45%,#402517)}.clann-journal-writing-page textarea{min-height:310px}.clann-journal-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.clann-journal-picker-card>.clann-memory-media,.clann-journal-picker-card>.clann-journal-project-art{height:105px}.clann-guardian-journal-book{grid-template-columns:1fr}.clann-guardian-memory-page{box-shadow:inset 0 13px 15px -17px #4c2d1c}
}

@media (min-width:521px){
  body{background:#d7edf7}
  .phone-screen{border-left:1px solid rgba(15,78,112,.18);border-right:1px solid rgba(15,78,112,.18)}
}

/* Games run as a dedicated CLANN OS surface, not as a scrolling web page. */
.phone-screen.multiplayer-game-active{height:100dvh;overflow:hidden;background:#071b2a}
.phone-screen.os-app-open.multiplayer-game-active > .content-panel.multiplayer-game-screen{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  padding:0;
  overflow:hidden;
  color:#edf9ff;
  background:
    radial-gradient(circle at 50% -10%,rgba(44,164,218,.24),transparent 42%),
    linear-gradient(180deg,#0b2b40,#071a29 72%);
}
.content-panel.multiplayer-game-screen > #pageTitle,
.content-panel.multiplayer-game-screen > #pageSubtitle{display:none}
.content-panel.multiplayer-game-screen > #output{display:flex;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}
.clann-native-game-surface{
  display:grid;
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  grid-template-rows:auto auto auto minmax(0,1fr) auto;
  gap:7px;
  width:100%;
  padding:7px 9px 8px;
  overflow:hidden;
}
.clann-native-game-surface.lobby{grid-template-rows:auto minmax(0,1fr);overflow-y:auto}
.clann-native-game-header{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;min-height:44px}
.clann-native-game-header>button{display:grid;width:40px;height:40px;padding:0;place-items:center;border:0;border-radius:50%;color:#eaf8ff;background:rgba(255,255,255,.1);font-size:32px;line-height:1}
.clann-native-game-header>div{text-align:center}.clann-native-game-header strong,.clann-native-game-header small{display:block}.clann-native-game-header strong{font-size:17px}.clann-native-game-header small{margin-top:1px;color:#9dcce2;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.clann-native-game-header>span{font-size:25px;text-align:center}
.clann-native-game-surface .clann-game-players{min-height:0;padding:0;overflow-x:auto;overflow-y:hidden}
.clann-native-game-surface .clann-game-players>div{flex:0 0 68px;padding:3px 4px;border-radius:13px;color:#eaf8ff;background:rgba(255,255,255,.08)}
.clann-native-game-surface .clann-game-players span{font-size:18px}.clann-native-game-surface .clann-game-players strong{font-size:10px}.clann-native-game-surface .clann-game-players small{font-size:8px;color:#a9d1e4;opacity:1}
.clann-native-game-surface .clann-game-players>div.is-me{box-shadow:inset 0 0 0 2px #38c8ff}.clann-native-game-surface .clann-game-players>div.is-turn{border-color:#ffd35a}
.clann-native-game-surface .clann-game-turn{height:38px;min-height:38px;padding:7px 10px;overflow:hidden;border-radius:12px;color:#eaf8ff;background:rgba(255,255,255,.1);font-size:12px;line-height:24px;white-space:nowrap;text-overflow:ellipsis}
.clann-native-game-board-zone{display:grid;min-height:0;place-items:center;overflow:hidden}
.clann-native-game-surface .clann-board-game-grid{
  position:relative;
  width:min(100%,calc(100dvh - 280px),500px);
  max-width:500px;
  margin:0;
  border:clamp(3px,1vw,6px) solid #593c28;
  border-radius:9px;
  box-shadow:0 12px 30px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.18);
  touch-action:manipulation;
}
.clann-native-game-surface .clann-board-game-grid button{position:relative;isolation:isolate;overflow:hidden;touch-action:manipulation}
.clann-native-game-surface .clann-board-game-grid button.light{background:#e9cf9e}.clann-native-game-surface .clann-board-game-grid button.dark{background:#71905d}
.clann-native-game-surface .clann-board-game-grid button.last-from,.clann-native-game-surface .clann-board-game-grid button.last-to{box-shadow:inset 0 0 0 999px rgba(255,211,65,.22)}
.clann-native-game-surface .clann-board-game-grid button.movable{box-shadow:inset 0 0 0 3px rgba(61,218,255,.72)}
.clann-native-game-surface .clann-board-game-grid button.selected{z-index:3;box-shadow:inset 0 0 0 4px #26d8ff,0 0 14px rgba(38,216,255,.8)}
.clann-native-game-surface .clann-board-game-grid button.legal-target:after{content:"";position:absolute;z-index:4;left:50%;top:50%;width:24%;aspect-ratio:1;border-radius:50%;background:rgba(15,58,79,.68);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(255,255,255,.32)}
.clann-native-game-surface .clann-board-game-grid button.capture-target:after{width:72%;background:transparent;border:clamp(3px,.8vw,5px) solid #26d8ff;box-shadow:0 0 12px rgba(38,216,255,.9)}
.clann-chess-piece{position:relative;z-index:2;display:grid;width:100%;height:100%;place-items:center;font-family:"Arial Unicode MS","Segoe UI Symbol",serif;font-size:clamp(24px,8.4vw,49px);font-style:normal;line-height:1;transform:translateY(-1px)}
.clann-chess-piece.white{color:#fff9e9;-webkit-text-stroke:.7px #172632;text-shadow:0 2px 2px rgba(4,16,25,.7)}.clann-chess-piece.black{color:#17222d;-webkit-text-stroke:.45px #eef7fa;text-shadow:0 1px 1px rgba(255,255,255,.32)}
.clann-native-game-surface .checker{position:relative;z-index:2;width:72%;border:2px solid rgba(255,255,255,.38)}.clann-native-game-surface .checker.red{background:linear-gradient(145deg,#ff5968,#a60d24)}.clann-native-game-surface .checker.black{background:linear-gradient(145deg,#394b58,#080e13)}
.clann-native-game-surface .board-file,.clann-native-game-surface .board-rank{position:absolute;z-index:5;color:rgba(7,27,40,.72);font-size:clamp(7px,1.8vw,10px);font-weight:950;line-height:1;pointer-events:none}.clann-native-game-surface .board-file{right:2px;bottom:2px}.clann-native-game-surface .board-rank{left:2px;top:2px}
.clann-native-game-surface .clann-family-game-actions{position:static;display:flex;min-height:45px;padding:0;gap:7px;background:none}
.clann-native-game-surface .clann-family-game-actions button{display:flex;flex:1;min-width:0;min-height:44px;padding:6px 9px;align-items:center;justify-content:center;gap:5px;border:0;border-radius:14px;color:#f2fbff;background:#147fb1;font-size:16px;font-weight:900}.clann-native-game-surface .clann-family-game-actions button span{font-size:11px}.clann-native-game-surface .clann-family-game-actions .secondary-button{color:#d8edf6;background:rgba(255,255,255,.1)}
.clann-native-game-surface .clann-ttt-board,.clann-native-game-surface .clann-connect-board,.clann-native-game-surface .clann-memory-board{width:min(100%,calc(100dvh - 275px),500px);margin:0}
.clann-native-game-surface .clann-trivia-board{width:min(100%,500px);max-height:100%;overflow-y:auto;color:#102f43}
.clann-family-game-video-overlay .clann-board-game-grid{width:min(100%,360px)}
.clann-chess-promotion-sheet{width:min(100%,430px);margin:max(18vh,90px) auto 0;padding:22px;border:1px solid rgba(255,255,255,.18);border-radius:26px;color:#edf9ff;background:#0b2b40;box-shadow:0 24px 70px rgba(0,0,0,.48);text-align:center}.clann-chess-promotion-sheet h2{margin:0}.clann-chess-promotion-sheet p{margin:6px 0 16px;color:#a7ccdc}.clann-chess-promotion-sheet>div{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.clann-chess-promotion-sheet>div button{display:grid;aspect-ratio:1;padding:0;place-items:center;border:0;border-radius:16px;background:#d6bd91}.clann-chess-promotion-sheet>.secondary-button{width:100%;min-height:42px;margin-top:12px;color:#dceef7;background:rgba(255,255,255,.1)}

.clann-waiting-game-surface{
  display:grid;
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  grid-template-rows:auto auto auto minmax(0,1fr) auto;
  gap:8px;
  width:100%;
  padding:12px 12px max(10px,env(safe-area-inset-bottom,0px));
  overflow:hidden;
  color:#edf9ff;
}
.clann-waiting-game-surface>header{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:12px}.clann-waiting-game-surface>header div{min-width:0}.clann-waiting-game-surface>header small{color:#80cce9;font-size:9px;font-weight:950;letter-spacing:.12em}.clann-waiting-game-surface h2{overflow:hidden;margin:2px 0 0;text-overflow:ellipsis;white-space:nowrap;font-size:22px}.clann-waiting-game-surface>p{margin:0;color:#c0dce8;font-size:12px;line-height:1.35}.clann-waiting-game-surface>small{color:#80abc0;font-size:10px}
.clann-waiting-pulse{width:14px;height:14px;border:3px solid rgba(92,224,161,.28);border-radius:50%;background:#43dd94;box-shadow:0 0 0 0 rgba(67,221,148,.55);animation:clann-waiting-pulse 1.6s infinite}
@keyframes clann-waiting-pulse{70%{box-shadow:0 0 0 13px rgba(67,221,148,0)}100%{box-shadow:0 0 0 0 rgba(67,221,148,0)}}
.clann-waiting-game-grid{display:grid;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px;overflow-y:auto;overscroll-behavior:contain}
.clann-waiting-game-card{display:grid;min-width:0;min-height:104px;padding:12px;grid-template-rows:auto auto minmax(0,1fr);align-content:start;justify-items:start;gap:3px;border:1px solid rgba(255,255,255,.12);border-radius:22px;color:#effaff;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.06));text-align:left;box-shadow:none}.clann-waiting-game-card>span{font-size:30px}.clann-waiting-game-card>strong{font-size:14px}.clann-waiting-game-card>small{overflow:hidden;color:#a9cedf;font-size:9px;line-height:1.25}
.clann-waiting-call-end{min-height:44px;border:1px solid rgba(255,255,255,.12);border-radius:15px;color:#d9edf6;background:rgba(255,255,255,.09);font-weight:900}
.clann-waiting-game-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.clann-waiting-game-choice{display:grid;grid-template-columns:20px 30px minmax(0,1fr);align-items:center;gap:7px;padding:9px;border:1px solid #c7e2ee;border-radius:14px;background:#edf8fd;font-size:12px}.clann-waiting-game-choice.selected{border-color:#1a91c8;background:#d9f2ff}.clann-waiting-game-choice input{width:18px;height:18px;margin:0}.clann-waiting-game-choice>span{font-size:22px}.clann-waiting-game-choice>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clann-waiting-game-count{margin:5px 0 9px;color:#0b6b9e;font-size:12px;font-weight:900}

@media (max-height:680px){
  .clann-native-game-surface{gap:4px;padding-top:3px}.clann-native-game-header{min-height:38px}.clann-native-game-header>button{width:35px;height:35px}.clann-native-game-surface .clann-game-players>div{flex-basis:60px}.clann-native-game-surface .clann-game-players span{font-size:15px}.clann-native-game-surface .clann-board-game-grid,.clann-native-game-surface .clann-ttt-board,.clann-native-game-surface .clann-connect-board,.clann-native-game-surface .clann-memory-board{width:min(100%,calc(100dvh - 250px),430px)}.clann-native-game-surface .clann-family-game-actions{min-height:40px}.clann-native-game-surface .clann-family-game-actions button{min-height:40px}.clann-waiting-game-surface{gap:5px;padding-top:7px}.clann-waiting-game-surface h2{font-size:18px}.clann-waiting-game-card{min-height:88px;padding:8px}.clann-waiting-game-card>span{font-size:24px}
}

@media (prefers-reduced-motion:reduce){
  .clann-notification-shade{transition:none}
  .clann-launcher-pages,
  .clann-open-app-cards{scroll-behavior:auto}
  .clann-waiting-pulse{animation:none}
}