:root{
  --sky:#38a8f0; --sky-d:#1c7fd0; --orange:#ff8a1f; --orange-d:#e76a00; --lime:#d8e83a; --mint:#3fd3a5; --coral:#ff6b5a;
  --cream:#fffaf0; --ink:#1f3550; --ink-2:#4b6380; --line:#d9e6f3; --ok:#22b36b; --bad:#e2483d;
  --radius:22px; --shadow:0 6px 0 rgba(20,60,110,.12), 0 14px 30px rgba(20,60,110,.14);
  --font:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --display:'Baloo 2','Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--ink);background:#bfe5ff;-webkit-tap-highlight-color:transparent;font-weight:600}
img{max-width:100%}
button{font:inherit;color:inherit}
#app{min-height:100dvh;background:#bfe5ff center/cover no-repeat}
#app.bg-home{background-image:url(../img/cc_bg_home.webp)}
#app.bg-lobby{background-image:url(../img/cc_bg_lobby.webp)}
#app.bg-board{background:linear-gradient(#cfeeff,#eaf7ff)}
.screen{max-width:1100px;margin:0 auto;padding:16px 16px calc(24px + env(safe-area-inset-bottom));min-height:100dvh;display:flex;flex-direction:column;gap:14px}
.boot,.login-screen{align-items:center;justify-content:center;text-align:center;min-height:100dvh;display:flex;flex-direction:column;gap:12px;padding:24px}
.boot img{width:120px;animation:bob 1.4s ease-in-out infinite}
.hero-logo{width:min(46vw,190px);filter:drop-shadow(0 10px 18px rgba(0,60,120,.25))}
.title{font-family:var(--display);font-weight:800;font-size:clamp(30px,7vw,52px);line-height:1;margin:0;color:#fff;text-shadow:0 3px 0 var(--sky-d),0 6px 14px rgba(0,50,110,.35)}
.title span{color:#ffe14a}
.lead{margin:0;font-size:16px;color:var(--ink);background:rgba(255,255,255,.8);padding:6px 14px;border-radius:999px}

/* buttons */
.btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border-radius:999px;
  font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.2px;text-decoration:none;color:#fff;background:var(--sky);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.16),inset 0 3px 0 rgba(255,255,255,.35),0 6px 14px rgba(20,80,140,.22);transition:transform .08s,filter .15s}
.btn:active{transform:translateY(2px) scale(.98)}
.btn:focus-visible,.edge-hit:focus-visible,.icon-btn:focus-visible{outline:3px solid #ffd400;outline-offset:3px}
.btn[disabled],.btn.is-busy{filter:grayscale(.85) brightness(1.05);cursor:not-allowed;opacity:.75}
.btn-orange{background:linear-gradient(#ffa443,#ff7a12)} .btn-green{background:linear-gradient(#41d28a,#1fb36b)}
.btn-coral{background:linear-gradient(#ff8d7f,#ff5c4a)} .btn-gold{background:linear-gradient(#ffd84a,#f5b400);color:#5a3a00}
.btn-ghost{background:rgba(255,255,255,.92);color:var(--sky-d)} .btn-lg{min-height:56px;font-size:20px;padding:12px 28px}
.btn-sm{min-height:36px;font-size:14px;padding:6px 14px}
.icon-btn{border:0;background:rgba(255,255,255,.92);border-radius:16px;width:46px;height:46px;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);padding:6px}
.icon-btn img{width:100%;height:100%;object-fit:contain}

/* top bar */
.topbar{display:flex;align-items:center;gap:10px}
.topbar .grow{flex:1}
.me-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.92);border-radius:999px;padding:4px 14px 4px 4px;box-shadow:var(--shadow);min-width:0}
.me-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#e8f4ff;flex:none;border:3px solid #fff}
.avatar.lg{width:64px;height:64px}

/* panels */
.panel{background:rgba(255,253,247,.96);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;border:3px solid #fff}
.panel h2,.panel h3{font-family:var(--display);margin:0 0 10px;line-height:1.1}
.panel h2{font-size:24px} .panel h3{font-size:19px}
.muted{color:var(--ink-2);font-weight:600}
.home-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0 4px;text-align:center}
.home-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:760px){.home-grid{grid-template-columns:repeat(4,1fr)}}
.tile{position:relative;border:0;cursor:pointer;text-align:left;background:rgba(255,253,247,.97);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;display:flex;flex-direction:column;gap:6px;min-height:150px;border:3px solid #fff;transition:transform .1s}
.tile:hover{transform:translateY(-2px)} .tile:active{transform:scale(.98)}
.tile img{width:72px;height:72px;object-fit:contain;align-self:center}
.tile b{font-family:var(--display);font-size:19px;line-height:1.1}
.tile small{color:var(--ink-2);font-size:13px;line-height:1.3}
.tile.primary{grid-column:1/-1;flex-direction:row;align-items:center;min-height:110px;background:linear-gradient(135deg,#ffb04a,#ff7a12);color:#fff}
.tile.primary small{color:#fff6e6} .tile.primary img{width:92px;height:92px}
.tile.soon{opacity:.7;cursor:default} .tile.soon:hover{transform:none}
.badge{display:inline-block;font-size:12px;font-weight:800;padding:2px 10px;border-radius:999px;background:#eef6ff;color:var(--sky-d)}
.badge.soon{background:#fff1c9;color:#8a5a00;position:absolute;top:10px;right:10px}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-weight:800;font-size:14px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{border:2px solid var(--line);background:#fff;border-radius:14px;padding:8px 12px;cursor:pointer;font-weight:800;min-height:42px}
.seg button[aria-pressed=true]{border-color:var(--sky);background:#e3f3ff;color:var(--sky-d)}
.input{border:2px solid var(--line);border-radius:14px;padding:12px 14px;font:inherit;font-size:20px;text-transform:uppercase;letter-spacing:4px;width:100%;text-align:center;background:#fff}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}

/* modal */
.modal-wrap{position:fixed;inset:0;background:rgba(10,40,80,.45);display:grid;place-items:center;padding:16px;z-index:50}
.modal{width:min(520px,100%);max-height:90dvh;overflow:auto}

/* lobby */
.code-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;background:#eaf6ff;border-radius:18px;padding:10px}
.code-box strong{font-family:var(--display);font-size:clamp(26px,8vw,34px);letter-spacing:4px;color:var(--sky-d)}
.icon-btn{flex:none}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.slot{display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:8px 10px;border:2px solid var(--line);min-height:62px}
.slot.empty{border-style:dashed;color:var(--ink-2);justify-content:center}
.slot .nm{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .st{font-size:12px}
.dot-status{display:inline-block;width:9px;height:9px;border-radius:50%;background:#bbb;margin-right:4px}
.dot-status.online{background:var(--ok)} .dot-status.reconnecting{background:#f5a000} .dot-status.offline{background:#bbb}
.rules-list{margin:0;padding-left:18px;line-height:1.55}

/* game */
.game{display:grid;gap:10px;grid-template-columns:1fr;max-width:1100px;margin:0 auto;padding:10px 10px calc(10px + env(safe-area-inset-bottom));min-height:100dvh;grid-template-rows:auto auto auto auto;align-content:start}
@media(min-width:900px){.game{grid-template-columns:280px 1fr 260px;grid-template-rows:auto 1fr;align-items:start}
  .game .g-top{grid-column:1/-1} .game .g-scores{grid-row:2} .game .g-board{grid-row:2} .game .g-side{grid-row:2}}
.g-top{display:flex;align-items:center;gap:8px}
.conn{font-size:13px;padding:4px 10px;border-radius:999px;background:#fff;font-weight:800}
.conn.bad{background:#ffe1dc;color:#a52a1d} .conn.warn{background:#fff1c9;color:#8a5a00}
.g-scores{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
@media(min-width:900px){.g-scores{flex-direction:column;overflow:visible}}
.pcard{flex:1 0 auto;min-width:118px;display:flex;align-items:center;gap:8px;background:#fff;border-radius:18px;padding:6px 10px 6px 6px;border:3px solid transparent;box-shadow:0 3px 0 rgba(20,60,110,.08)}
.pcard.turn{border-color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 25%,transparent)}
.pcard.left{opacity:.5}
.pcard .info{min-width:0;display:flex;flex-direction:column;line-height:1.15}
.pcard .nm{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.pcard .sc{font-family:var(--display);font-size:22px;font-weight:800;color:var(--c)}
.pcard .sym{color:var(--c);font-size:14px}
.g-board{position:relative;display:flex;justify-content:center;align-items:center;min-height:0}
.board-wrap{position:relative;width:min(100%,calc(100dvh - 300px),720px);aspect-ratio:1;border-radius:28px;background:#fffaf0 url(../img/cc_board_bg_default.webp) center/cover;box-shadow:var(--shadow);border:4px solid #fff;touch-action:manipulation;overflow:hidden}
@media(max-width:899px){.board-wrap{width:min(100%,calc(100dvh - 290px));min-width:min(100%,300px)}}
.board-wrap.zoomed{overflow:auto;touch-action:pan-x pan-y}
.board-wrap svg{display:block;width:100%;height:100%}
.board-wrap.zoomed svg{width:170%;height:170%}
.edge-hit{cursor:pointer;outline:none}
.edge-hit .hl{opacity:0;transition:opacity .12s}
.can-play .edge-hit:hover .hl,.can-play .edge-hit:focus .hl{opacity:1}
.edge-pending{animation:pulse .6s ease-in-out infinite}
.cell-new{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
.no-anim *{animation:none!important;transition:none!important}
.g-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;background:rgba(255,253,247,.97);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow);border:3px solid #fff}
@media(min-width:900px){.g-controls{grid-column:2;grid-row:3}}
.dice{width:64px;height:64px;flex:none;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.15))}
.dice.rolling{animation:spin .5s linear infinite}
.turn-info{flex:1 1 150px;min-width:0;line-height:1.2}
.g-controls .btn{margin-left:auto}
@media(max-width:520px){.g-controls .btn{flex:1 1 100%}}
.turn-info b{font-family:var(--display);font-size:18px}
.turn-info .moves{font-size:15px}
.timer{font-family:var(--display);font-weight:800;font-size:18px;min-width:52px;text-align:center;border-radius:12px;padding:4px 6px;background:#eef6ff}
.timer.low{background:#ffe1dc;color:#a52a1d}
.g-side{display:flex;flex-direction:column;gap:10px}
.turnlog{list-style:none;margin:0;padding:0;font-size:13px;max-height:260px;overflow:auto}
.turnlog li{padding:5px 0;border-bottom:1px dashed var(--line)}
@media(max-width:899px){.g-side{display:none}.g-side.open{display:flex}}

/* result */
.result{text-align:center}
.result .trophy{width:120px;animation:bob 2s ease-in-out infinite}
.rank-list{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:8px}
.rank-list li{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:8px 12px;border:2px solid var(--line);text-align:left}
.rank-list .rk{font-family:var(--display);font-size:22px;width:30px;text-align:center}
.rank-list .grow{flex:1;min-width:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.stat{background:#eef6ff;border-radius:14px;padding:8px} .stat b{display:block;font-family:var(--display);font-size:22px}
.hist-item{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.hist-item .grow{flex:1;min-width:0}
.tag{font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px}
.tag.win{background:#dcf7e8;color:#147a46}.tag.lose{background:#ffe6e2;color:#a52a1d}.tag.draw{background:#fff1c9;color:#8a5a00}

#toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(140%);background:#1f3550;color:#fff;padding:12px 18px;border-radius:16px;font-weight:800;z-index:99;max-width:calc(100% - 32px);transition:transform .25s,visibility .25s;text-align:center;visibility:hidden}
#toast.show{transform:translateX(-50%) translateY(0);visibility:visible}
#toast.err{background:#c2372c}
.fx-burst{position:absolute;pointer-events:none;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);animation:burst .8s ease-out forwards}
.confetti{position:fixed;inset:0;pointer-events:none;background:url(../img/cc_fx_victory_confetti.webp) top center/contain no-repeat;animation:fall 2.4s ease-out forwards;z-index:40}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@keyframes bob{50%{transform:translateY(-8px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.35}}
@keyframes pop{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%) scale(1.2)}}
@keyframes fall{0%{opacity:0;transform:translateY(-30px)}15%{opacity:1}100%{opacity:0;transform:translateY(40px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}