/* ============================================================
   ToucanPlay.games — shared design system
   ============================================================ */
:root{
  --jungle:#0e2a1f;
  --jungle-deep:#081c14;
  --leaf:#1c4a33;
  --beak-orange:#ff8c1a;
  --beak-yellow:#ffd23f;
  --beak-red:#f24c3d;
  --sky:#7be0c3;
  --cream:#fff8ec;
  --ink:#10231a;
  --card-radius:22px;
  --shadow-pop:0 8px 0 rgba(0,0,0,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito',sans-serif;
  background:var(--jungle);
  color:var(--cream);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(123,224,195,.12), transparent),
    repeating-linear-gradient(135deg, transparent 0 60px, rgba(255,255,255,.012) 60px 120px);
  overflow-x:hidden;
  min-height:100vh;
}
h1,h2,h3,.display{font-family:'Lilita One',cursive;letter-spacing:.5px}

/* ============ CSS TOUCAN MASCOT ============ */
.toucan{position:relative;width:230px;height:240px;flex-shrink:0}
.t-tail{position:absolute;left:18px;top:150px;width:64px;height:26px;background:var(--ink);border-radius:13px;transform:rotate(38deg)}
.t-body{position:absolute;left:36px;top:42px;width:120px;height:135px;background:var(--ink);border-radius:54% 46% 48% 52%/40% 48% 52% 60%;box-shadow:inset -10px -8px 0 rgba(255,255,255,.06)}
.t-chest{position:absolute;left:64px;top:78px;width:74px;height:88px;background:linear-gradient(180deg,var(--beak-yellow),#ffb84d);border-radius:50% 50% 46% 54%/44% 56% 54% 46%}
.t-eye{position:absolute;left:104px;top:54px;width:34px;height:34px;border-radius:50%;background:var(--sky);display:flex;align-items:center;justify-content:center}
.t-eye::before{content:"";width:20px;height:20px;border-radius:50%;background:var(--cream)}
.t-eye::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--ink);left:16px;top:12px}
.t-beak{
  position:absolute;left:128px;top:56px;width:104px;height:48px;
  background:linear-gradient(95deg,var(--beak-orange) 8%,var(--beak-yellow) 60%,var(--beak-yellow) 82%,var(--beak-red) 82%);
  border-radius:6px 28px 60px 10px;
  transform:rotate(14deg);transform-origin:left center;
  box-shadow:0 4px 0 rgba(0,0,0,.22);
  animation:beak-chat 5s infinite;
}
.t-beak::after{content:"";position:absolute;left:6px;top:26px;width:86px;height:3px;background:rgba(16,35,26,.25);border-radius:3px}
@keyframes beak-chat{0%,86%,100%{transform:rotate(14deg)}90%{transform:rotate(18deg)}94%{transform:rotate(12deg)}97%{transform:rotate(17deg)}}
.t-wing{position:absolute;left:40px;top:92px;width:58px;height:74px;background:#06140e;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;transform:rotate(-12deg)}
.t-foot1,.t-foot2{position:absolute;top:172px;width:20px;height:26px;background:var(--beak-orange);border-radius:0 0 8px 8px}
.t-foot1{left:78px}.t-foot2{left:108px;height:24px}
.t-branch{position:absolute;left:6px;top:194px;width:220px;height:18px;background:#6b4a2b;border-radius:9px;box-shadow:0 5px 0 rgba(0,0,0,.3)}
.t-branch::before{content:"🌿";position:absolute;right:-8px;top:-18px;font-size:26px}
.t-branch::after{content:"🌿";position:absolute;left:-6px;top:-16px;font-size:20px;transform:scaleX(-1)}
.toucan.bob{animation:bob 3.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-1.5deg)}}

/* mini toucan for nav/footer logo */
.toucan.mini{width:64px;height:66px}
.toucan.mini .t-tail{left:5px;top:41px;width:18px;height:8px;border-radius:4px}
.toucan.mini .t-body{left:10px;top:11px;width:34px;height:38px}
.toucan.mini .t-chest{left:18px;top:21px;width:21px;height:25px}
.toucan.mini .t-eye{left:29px;top:14px;width:11px;height:11px}
.toucan.mini .t-eye::before{width:6px;height:6px}
.toucan.mini .t-eye::after{width:3px;height:3px;left:5px;top:4px}
.toucan.mini .t-beak{left:36px;top:15px;width:30px;height:14px;border-radius:2px 8px 18px 3px;box-shadow:0 2px 0 rgba(0,0,0,.22);animation:none}
.toucan.mini .t-beak::after{left:2px;top:7px;width:25px;height:1.5px}
.toucan.mini .t-wing{left:11px;top:25px;width:16px;height:21px}
.toucan.mini .t-foot1{left:21px;top:47px;width:6px;height:8px}
.toucan.mini .t-foot2{left:30px;top:47px;width:6px;height:7px}
.toucan.mini .t-branch{left:2px;top:53px;width:60px;height:6px;border-radius:3px;box-shadow:0 2px 0 rgba(0,0,0,.3)}
.toucan.mini .t-branch::before,.toucan.mini .t-branch::after{display:none}

/* ============ NAV ============ */
nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:18px;
  padding:8px 28px;
  background:rgba(8,28,20,.92);
  backdrop-filter:blur(10px);
  border-bottom:3px solid var(--beak-orange);
}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--cream)}
.logo-text{font-family:'Lilita One',cursive;font-size:1.9rem;line-height:1}
.logo-text span{color:var(--beak-yellow)}
.logo-tag{display:block;font-family:'Nunito';font-size:.62rem;font-weight:900;letter-spacing:2.5px;text-transform:uppercase;color:var(--sky);margin-top:3px}
.nav-links{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav-links a{color:var(--cream);text-decoration:none;font-weight:800;font-size:.95rem;padding:8px 16px;border-radius:999px;transition:.18s}
.nav-links a:hover{background:var(--leaf);transform:translateY(-2px)}
.nav-cta{background:var(--beak-orange);color:var(--ink)!important;box-shadow:0 4px 0 #b35900}
.nav-cta:hover{background:var(--beak-yellow)!important}
.online-pill{display:flex;align-items:center;gap:7px;font-size:.8rem;font-weight:900;color:var(--sky);padding:6px 14px;border:2px solid rgba(123,224,195,.4);border-radius:999px}
.dot{width:9px;height:9px;border-radius:50%;background:#43e97b;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(67,233,123,.5)}60%{box-shadow:0 0 0 7px rgba(67,233,123,0)}}
@media(max-width:760px){.nav-links a:not(.nav-cta){display:none}.online-pill{display:none}}

/* ============ AD SLOTS ============ */
.ad{
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 12px,rgba(255,255,255,.07) 12px 24px);
  border:2px dashed rgba(255,248,236,.35);
  border-radius:12px;color:rgba(255,248,236,.55);
  font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:2px;
}
.ad-leaderboard{max-width:728px;height:90px;margin:22px auto}
.ad-rect{width:300px;height:250px}
.ad-footer{max-width:970px;height:90px;margin:30px auto}

/* ============ BUTTONS ============ */
.btn{
  font-family:'Lilita One',cursive;font-size:1.15rem;letter-spacing:.5px;
  padding:14px 34px;border-radius:999px;border:none;cursor:pointer;
  text-decoration:none;display:inline-block;transition:.15s;text-align:center;
}
.btn-primary{background:var(--beak-orange);color:var(--ink);box-shadow:0 6px 0 #b35900}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 9px 0 #b35900}
.btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 #b35900}
.btn-ghost{background:transparent;color:var(--cream);border:3px solid var(--sky);box-shadow:0 6px 0 rgba(123,224,195,.3)}
.btn-ghost:hover{background:rgba(123,224,195,.12);transform:translateY(-3px)}
.btn-sm{font-size:.95rem;padding:10px 26px}
@keyframes pop-in{from{opacity:0;transform:translateY(24px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ============ FOOTER ============ */
footer{margin-top:60px;background:var(--jungle-deep);border-top:3px solid var(--beak-orange);padding:40px 24px 30px;text-align:center}
footer .foot-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:14px 0 20px}
footer a{color:var(--sky);text-decoration:none;font-weight:800;font-size:.9rem}
footer a:hover{color:var(--beak-yellow)}
.fine{color:rgba(255,248,236,.45);font-size:.8rem;font-weight:600}

/* ============================================================
   GAME SHELL (game.html)
   ============================================================ */
.game-wrap{max-width:1180px;margin:0 auto;padding:20px 24px;display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}
@media(max-width:980px){.game-wrap{grid-template-columns:1fr}.game-side{display:none}}
.game-side{display:flex;flex-direction:column;gap:22px;position:sticky;top:90px}
.game-panel{
  background:var(--cream);color:var(--ink);border-radius:26px;
  padding:24px;box-shadow:0 10px 0 rgba(0,0,0,.3);
  animation:pop-in .4s cubic-bezier(.34,1.56,.64,1);
}
.game-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.game-head .gemoji{font-size:2.4rem}
.game-head h1{font-size:1.9rem}
.game-head .room-pill{
  margin-left:auto;font-weight:900;font-size:.8rem;letter-spacing:1px;
  background:var(--jungle);color:var(--sky);padding:6px 14px;border-radius:999px;
}
.status-bar{
  font-family:'Lilita One';font-size:1.2rem;text-align:center;
  background:var(--jungle);color:var(--cream);
  padding:12px 18px;border-radius:14px;margin:14px 0;
  min-height:50px;display:flex;align-items:center;justify-content:center;gap:10px;
}
.status-bar.good{background:var(--beak-orange);color:var(--ink)}
.status-bar.bad{background:var(--beak-red)}
#board{display:flex;justify-content:center}
.game-actions{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.players-row{display:flex;justify-content:center;gap:18px;margin-top:4px;font-weight:900;font-size:.95rem}
.players-row .p{display:flex;align-items:center;gap:7px;padding:5px 14px;border-radius:999px;background:rgba(16,35,26,.08)}
.players-row .p.me{outline:3px solid var(--beak-yellow)}
.players-row .p .pe{font-size:1.2rem}

/* mode picker overlay */
.mode-pick{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
@media(max-width:560px){.mode-pick{grid-template-columns:1fr}}
.mode-btn{border:none;cursor:pointer;border-radius:18px;padding:20px 16px;text-align:center;font-family:'Nunito';transition:.15s}
.mode-btn .big{font-size:2.2rem;display:block;margin-bottom:6px}
.mode-btn .ttl{font-family:'Lilita One';font-size:1.12rem;display:block}
.mode-btn .dsc{font-size:.78rem;font-weight:800;opacity:.75}
.mode-friend{background:var(--beak-yellow);color:var(--ink);box-shadow:0 5px 0 #c9a000}
.mode-stranger{background:var(--leaf);color:var(--cream);box-shadow:0 5px 0 #0c2418}
.mode-local{background:var(--sky);color:var(--ink);box-shadow:0 5px 0 #3da183}
.mode-bot{background:#e8c9a0;color:var(--ink);box-shadow:0 5px 0 #b08a52}
.mode-btn:hover{transform:translateY(-4px)}
.invite-row{display:flex;margin-top:16px;gap:10px}
.invite-row input{flex:1;font-family:'Nunito';font-weight:800;font-size:.92rem;padding:12px 14px;border-radius:12px;border:3px solid var(--leaf);background:#fff;min-width:0}
.invite-row button{border:none;cursor:pointer;font-family:'Lilita One';font-size:1rem;background:var(--beak-orange);color:var(--ink);padding:0 22px;border-radius:12px;box-shadow:0 4px 0 #b35900}
.matchmaking{text-align:center;font-weight:800;margin-top:16px}
.spinner{width:46px;height:46px;margin:8px auto;border-radius:50%;border:6px solid var(--leaf);border-top-color:var(--beak-orange);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.notice{
  margin-top:14px;padding:12px 16px;border-radius:12px;font-weight:800;font-size:.88rem;
  background:rgba(242,76,61,.12);color:#a8362b;border:2px dashed rgba(242,76,61,.4);
}

/* generic grid cell button used by several games */
.gcell{
  border:none;border-radius:14px;cursor:pointer;background:var(--jungle);
  box-shadow:0 4px 0 rgba(0,0,0,.3);transition:.12s;
  display:flex;align-items:center;justify-content:center;
}
.gcell:hover:not(:disabled){transform:translateY(-3px);background:var(--leaf)}
.gcell:disabled{cursor:default}
.gcell.win{background:var(--beak-orange)}

/* side panel reused from home */
.side-panel{background:var(--leaf);border-radius:var(--card-radius);padding:20px}
.side-panel h3{color:var(--beak-yellow);margin-bottom:12px;font-size:1.2rem}
.side-panel a{color:var(--cream);font-weight:800;text-decoration:none;display:block;padding:8px 0;border-bottom:1px dashed rgba(255,248,236,.18)}
.side-panel a:last-child{border-bottom:none}
.side-panel a:hover{color:var(--beak-yellow)}