:root{
  --text:#f7fffd;
  --muted:#d3ebe6;
  --line:rgba(255,255,255,.13);
  --blue:#4594ff;
  --red:#ff6670;
  --green:#2cd070;
  --yellow:#f4cf58;
  --water1:#1092a2;
  --water2:#0b6173;
  --water3:#083c4a;
  --cell:min(4.1vw, 48px);
  --board-size:calc(var(--cell) * 15);
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 10%, rgba(130,255,233,.12), transparent 16%),
    radial-gradient(circle at 86% 82%, rgba(215,255,120,.08), transparent 18%),
    linear-gradient(180deg,#061c22 0%,#0a3340 55%,#061f28 100%);
}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
.is-hidden{display:none!important}
.game-shell{min-height:100vh;padding:22px;display:grid;place-items:center}
.game-card{
  width:min(1440px,100%);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:34px;
  overflow:hidden;
  box-shadow:0 24px 90px rgba(0,0,0,.5);
  backdrop-filter:blur(16px);
}
.hero-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 28px 20px;border-bottom:1px solid var(--line)}
.back-link{display:inline-block;color:#def8ff;text-decoration:none;font-size:13px;font-weight:900;margin-bottom:10px}
.back-link:hover{text-decoration:underline}
.eyebrow{margin:0 0 8px;color:#c8fff0;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.18em}
h1,h2,p{margin-top:0}
.hero-copy h1{margin-bottom:8px;font-size:clamp(32px,4.4vw,58px);line-height:.95;letter-spacing:-.06em}
.subtitle{max-width:720px;color:var(--muted);margin:0}
.hero-brand{display:grid;justify-items:center;gap:8px;min-width:140px}
.hero-badge{width:92px;height:92px;border-radius:28px;display:grid;place-items:center;font-weight:1000;font-size:36px;letter-spacing:-.08em;color:#f4fff5;background:linear-gradient(145deg,#3bd270,#147845);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 20px 44px rgba(0,0,0,.3)}
.hero-brand span{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:#d5f2ee}

.setup-screen{padding:28px}
.setup-panel{display:grid;gap:20px;padding:26px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.08)}
.setup-text p{color:var(--muted)}
.setup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.setup-card{padding:22px;border-radius:24px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));text-align:left;color:var(--text);cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.setup-card:hover,.setup-card.selected{transform:translateY(-3px);border-color:rgba(198,255,132,.65);box-shadow:0 16px 38px rgba(0,0,0,.24)}
.count-pill{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:linear-gradient(180deg,#e4ffae,#8dd14d);color:#15321a;font-weight:1000;font-size:26px;margin-bottom:16px}
.setup-card strong{display:block;font-size:20px;margin-bottom:6px}
.setup-card span:last-child{color:var(--muted)}
.license-copy{color:var(--muted);font-size:13px;line-height:1.55;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}
.primary-button,.secondary-button,.ghost-button,.link-button{display:inline-flex;justify-content:center;align-items:center;gap:8px;border-radius:999px;padding:13px 20px;text-decoration:none;border:0;cursor:pointer;font-weight:900}
.primary-button{background:linear-gradient(180deg,#e4ff9d,#87cf4e);color:#17331c;box-shadow:0 12px 24px rgba(0,0,0,.25)}
.secondary-button{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--text)}
.ghost-button{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--text)}

.game-screen{padding:18px 20px 24px}
.status-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-bottom:16px}
.turn-pill{padding:11px 18px;border-radius:999px;font-weight:1000;color:white;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.status-center{padding:11px 14px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);min-width:0}
.status-center p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e3f8f3;font-weight:700}
.menu-toggle{display:none;border-radius:999px;padding:10px 14px;background:rgba(255,255,255,.07);color:var(--text);border:1px solid rgba(255,255,255,.1);font-weight:900}
.layout-grid{display:grid;grid-template-columns:230px minmax(720px,1fr) 260px;gap:18px;align-items:start}

.panel{border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);padding:18px;box-shadow:0 16px 36px rgba(0,0,0,.22)}
.panel-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.panel-head h2{margin:0;font-size:20px;letter-spacing:-.04em}
.player-list{display:grid;gap:12px}
.player-row{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center;padding:12px 13px;border-radius:20px;background:rgba(5,17,17,.75);border:1px solid rgba(255,255,255,.07);transition:border-color .18s ease,transform .18s ease}
.player-row.active{border-color:rgba(198,255,132,.62);transform:translateY(-1px);box-shadow:0 0 0 2px rgba(198,255,132,.18)}
.avatar{width:58px;height:58px;border-radius:50%;position:relative;display:grid;place-items:center;color:#112214;font-weight:1000;border:3px solid rgba(255,255,255,.88);box-shadow:0 8px 18px rgba(0,0,0,.24), inset 0 4px 10px rgba(255,255,255,.3)}
.avatar::before{content:attr(data-letter);font-size:24px;line-height:1}
.avatar.blue{background:radial-gradient(circle at 30% 25%, #d8e7ff, var(--blue) 58%, #145ac7)}
.avatar.red{background:radial-gradient(circle at 30% 25%, #ffd8db, var(--red) 58%, #bf2028)}
.avatar.green{background:radial-gradient(circle at 30% 25%, #ddffe8, var(--green) 58%, #10713c)}
.avatar.yellow{background:radial-gradient(circle at 30% 25%, #fff3cb, var(--yellow) 58%, #c69215)}
.player-main{display:flex;flex-direction:column}
.player-name{font-size:18px;font-weight:1000;line-height:1.1}
.player-meta{margin-top:4px;color:#d5ebe4;font-size:13px}
.home-count{font-weight:1000;color:#dff6aa;font-size:15px}

.table-frame{
  position:relative;
  border-radius:42px;
  padding:14px 14px 18px;
  background:linear-gradient(180deg,#0b3c48,#082a34);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px rgba(0,0,0,.36);
  overflow:hidden;
}
.table-frame::before{content:'';position:absolute;inset:10px;border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);pointer-events:none}
.table-glow{position:absolute;inset:0;background:radial-gradient(circle at 18% 18%, rgba(102,255,213,.14), transparent 24%),radial-gradient(circle at 84% 82%, rgba(194,255,125,.09), transparent 18%);pointer-events:none}
.table-badges{position:relative;z-index:4;display:flex;justify-content:space-between;gap:12px;margin:0 4px 8px}
.table-chip{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#d8f2ee;font-size:12px;font-weight:800}
.board-wrap{position:relative;display:grid;place-items:center;width:var(--board-size);height:var(--board-size);margin:0 auto}

.board{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:repeat(15,1fr);
  grid-template-rows:repeat(15,1fr);
  gap:calc(var(--cell) * .14);
  padding:calc(var(--cell) * .18);
  border-radius:46px;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(181,255,255,.28), transparent 13%),
    radial-gradient(circle at 76% 72%, rgba(130,220,255,.18), transparent 18%),
    radial-gradient(circle at 42% 66%, rgba(255,255,255,.08), transparent 14%),
    linear-gradient(180deg,var(--water1),var(--water2) 58%,var(--water3));
  box-shadow:0 22px 48px rgba(0,0,0,.34),inset 0 0 0 6px rgba(255,255,255,.08),inset 0 -18px 22px rgba(0,0,0,.18),inset 0 10px 16px rgba(255,255,255,.04);
}
.board::before{content:'';position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.11) 0 1px, transparent 1px 35px);opacity:.2;pointer-events:none}
.board::after{content:'POND';position:absolute;right:22px;bottom:16px;color:rgba(255,255,255,.14);font-size:24px;font-weight:1000;letter-spacing:.2em;pointer-events:none}

.cell{position:relative;border-radius:999px;display:grid;place-items:center;overflow:visible;background:transparent;border:0;min-width:0;min-height:0}
.cell.empty,.cell.center-water{background:transparent}
.water-ripple{position:absolute;inset:18%;border-radius:50%;border:1px solid rgba(255,255,255,.16);opacity:.55}
.pad{position:absolute;display:block;z-index:1}
.stone-pad{
  inset:8%;
  border-radius:53% 47% 56% 44% / 48% 56% 44% 52%;
  background:radial-gradient(circle at 35% 28%, #ffffff, #dddcd2 32%, #acaea4 68%, #747d79 100%);
  box-shadow:0 6px 12px rgba(0,0,0,.26), inset 0 4px 6px rgba(255,255,255,.65), inset 0 -5px 8px rgba(0,0,0,.16);
}
.leaf-pad{
  inset:6%;
  border-radius:52% 4% 52% 48% / 46% 8% 52% 54%;
  transform:rotate(-34deg);
  background:radial-gradient(circle at 35% 28%, #f2ffd7, #9be867 42%, #4fab4b 70%, #247739 100%);
  box-shadow:0 6px 12px rgba(0,0,0,.24), inset 0 4px 6px rgba(255,255,255,.42), inset 0 -4px 7px rgba(0,0,0,.15);
}
.leaf-pad::after{content:'';position:absolute;left:15%;top:48%;width:74%;height:6%;border-radius:999px;background:rgba(255,255,255,.32);transform:rotate(8deg)}
.home-pad,.start-pad{
  inset:6%;
  border-radius:14px;
  box-shadow:0 6px 12px rgba(0,0,0,.24), inset 0 4px 6px rgba(255,255,255,.45), inset 0 -5px 8px rgba(0,0,0,.16);
}
.blue-pad{background:linear-gradient(180deg,#b8d5ff,#5798ff)}
.red-pad{background:linear-gradient(180deg,#ffc4c8,#ff6e76)}
.green-pad{background:linear-gradient(180deg,#b7f6c7,#42c878)}
.yellow-pad{background:linear-gradient(180deg,#fff0ae,#f5d15d)}
.safe-post{position:absolute;z-index:3;left:50%;top:49%;width:6%;height:33%;transform:translateX(-50%);border-radius:999px;background:#8a5a2b;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.safe-sign{position:absolute;z-index:4;left:50%;top:14%;transform:translateX(-50%);width:52%;height:52%;display:grid;place-items:center;border-radius:50%;background:linear-gradient(180deg,#f2ffff,#8fe4ff);border:2px solid #0a6c9b;color:#08648d;font-size:calc(var(--cell) * .45);font-weight:1000;box-shadow:0 5px 9px rgba(0,0,0,.26),inset 0 2px 3px rgba(255,255,255,.6)}

.base-zone{
  position:absolute;
  z-index:1;
  border-radius:30px;
  border:4px solid rgba(255,255,255,.92);
  box-shadow:inset 0 0 0 12px rgba(255,255,255,.12),0 10px 22px rgba(0,0,0,.18), inset 0 -8px 14px rgba(0,0,0,.13);
  display:grid;
  place-items:center;
}
.frog-house{position:relative;width:66%;height:58%;display:block;margin-top:4%;filter:drop-shadow(0 5px 7px rgba(0,0,0,.2))}
.house-roof{position:absolute;left:50%;top:0;transform:translateX(-50%);width:96%;height:52%;clip-path:polygon(50% 0,100% 54%,88% 54%,88% 100%,12% 100%,12% 54%,0 54%);background:linear-gradient(180deg,#af6838,#6d391f)}
.house-door{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:48%;height:50%;border-radius:999px 999px 8px 8px;background:linear-gradient(180deg,#ffe4a4,#a1612a);box-shadow:inset 0 3px 4px rgba(255,255,255,.3)}
.home-label{position:absolute;z-index:2;bottom:8%;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#f7fff8;background:rgba(7,25,16,.35);padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.15)}
.base-zone.blue{left:calc(var(--cell)*1);bottom:calc(var(--cell)*1);width:calc(var(--cell)*5);height:calc(var(--cell)*5);background:linear-gradient(145deg,#7ed0ec,#3a8db0)}
.base-zone.red{left:calc(var(--cell)*1);top:calc(var(--cell)*1);width:calc(var(--cell)*5);height:calc(var(--cell)*5);background:linear-gradient(145deg,#ffb0a3,#d96e61)}
.base-zone.green{right:calc(var(--cell)*1);top:calc(var(--cell)*1);width:calc(var(--cell)*5);height:calc(var(--cell)*5);background:linear-gradient(145deg,#90ef9f,#42a85a)}
.base-zone.yellow{right:calc(var(--cell)*1);bottom:calc(var(--cell)*1);width:calc(var(--cell)*5);height:calc(var(--cell)*5);background:linear-gradient(145deg,#ffe99d,#e2bf58)}

.center-dice-zone{position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;padding:0;background:transparent;box-shadow:none}
.dice-button{width:84px;height:84px;border-radius:28px;border:2px solid rgba(255,255,255,.32);background:linear-gradient(180deg,#fffdf2,#e1f58d 60%,#8cbc3d);box-shadow:0 16px 28px rgba(0,0,0,.28), inset 0 7px 12px rgba(255,255,255,.72), inset 0 -10px 16px rgba(74,121,20,.24);color:#17331c;font-size:50px;display:grid;place-items:center;cursor:pointer;position:relative}
.dice-button::before{content:'';position:absolute;inset:8px;border-radius:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.dice-button.rolling{animation:diceRoll .72s ease}
.roll-button,.dice-hint{display:none!important}
.dice-button:disabled{opacity:.56;cursor:default}
@keyframes diceRoll{0%{transform:rotate(0) scale(1)}20%{transform:rotate(13deg) scale(1.08)}50%{transform:rotate(-15deg) scale(.95)}100%{transform:rotate(0) scale(1)}}

.token{
  position:absolute;
  z-index:7;
  width:calc(var(--cell)*1.05);
  height:calc(var(--cell)*.96);
  margin:calc(var(--cell)*-.02);
  border-radius:52% 52% 48% 48%;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 13px 18px rgba(0,0,0,.34), inset 0 7px 10px rgba(255,255,255,.32), inset 0 -8px 12px rgba(0,0,0,.18);
  cursor:default;
  transition:left .18s linear,top .18s linear,transform .16s ease,opacity .16s ease;
}
.token::after{content:'';position:absolute;left:16%;right:16%;bottom:7%;height:22%;border-radius:999px;background:rgba(0,0,0,.12);filter:blur(2px)}
.frog-leg{position:absolute;bottom:-6%;width:34%;height:24%;border-radius:60% 60% 50% 50%;z-index:-1;box-shadow:0 4px 6px rgba(0,0,0,.2)}
.frog-leg.left{left:4%;transform:rotate(-18deg)}
.frog-leg.right{right:4%;transform:rotate(18deg)}
.frog-body{position:absolute;inset:0;border-radius:52% 52% 48% 48%}
.frog-face{position:absolute;inset:0;display:block}
.frog-eye{position:absolute;top:-7%;width:29%;height:29%;border-radius:50%;background:linear-gradient(180deg,#fff,#e6faf0);border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 4px rgba(0,0,0,.2)}
.frog-eye.left{left:14%}.frog-eye.right{right:14%}
.frog-eye::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-45%);width:38%;height:38%;border-radius:50%;background:#16211b}
.frog-smile{position:absolute;left:50%;top:56%;width:34%;height:18%;border-bottom:2px solid rgba(20,37,25,.45);border-radius:0 0 999px 999px;transform:translateX(-50%)}
.token.blue,.token.blue .frog-body,.token.blue .frog-leg{background:radial-gradient(circle at 30% 24%,#f0f7ff 0%,#b8d2ff 18%,var(--blue) 54%,#1d5fcb 100%)}
.token.red,.token.red .frog-body,.token.red .frog-leg{background:radial-gradient(circle at 30% 24%,#fff0f1 0%,#ffc0c4 18%,var(--red) 54%,#be2027 100%)}
.token.green,.token.green .frog-body,.token.green .frog-leg{background:radial-gradient(circle at 30% 24%,#f0fff5 0%,#baf5cf 18%,var(--green) 54%,#0f783f 100%)}
.token.yellow,.token.yellow .frog-body,.token.yellow .frog-leg{background:radial-gradient(circle at 30% 24%,#fff8db 0%,#ffe8a0 18%,var(--yellow) 54%,#bc8c14 100%)}
.token.active-player{transform:translateY(-4px) scale(1.06)}
.token.selectable{cursor:pointer;animation:pulse 1s infinite;box-shadow:0 0 0 4px rgba(255,255,255,.56),0 0 0 10px rgba(198,255,132,.32),0 12px 20px rgba(0,0,0,.35)}
.token.finished{opacity:.76;transform:scale(.84)}
.token.bumped{animation:bumped .6s ease both}
.token.jumping{animation:frogJump .18s ease}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
@keyframes bumped{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.35) rotate(-16deg)}100%{transform:scale(.8) rotate(18deg)}}
@keyframes frogJump{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-13px) scale(1.1)}100%{transform:translateY(0) scale(1)}}

.guide-list{margin:0;padding-left:18px;color:#d9efea;display:grid;gap:8px}
.guide-list li{line-height:1.45}
.move-log{height:420px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}
.log-line{margin:0;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.055);font-size:13px;color:#e2f1ed}
.log-line strong{color:#fff}
.modal,.mobile-menu{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:22px;background:rgba(2,10,10,.78);backdrop-filter:blur(10px)}
.modal-card{width:min(460px,100%);padding:28px;border-radius:28px;background:rgba(9,24,24,.97);border:1px solid rgba(255,255,255,.12);text-align:center;box-shadow:0 30px 100px rgba(0,0,0,.5)}
.modal-card.small{width:min(360px,100%)}
.modal-card h2{font-size:34px;margin-bottom:10px}
.modal-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.modal-actions.vertical{display:grid}
.confetti{position:absolute;z-index:20;width:10px;height:10px;border-radius:3px;animation:confetti 900ms ease-out forwards}
@keyframes confetti{from{opacity:1;transform:translate(0,0) rotate(0)}to{opacity:0;transform:translate(var(--x),var(--y)) rotate(260deg)}}

@media (max-width:1280px){:root{--cell:min(4.15vw,42px)}.layout-grid{grid-template-columns:190px minmax(680px,1fr) 210px}}
@media (max-width:1180px){:root{--cell:min(4.5vw,38px)}.layout-grid{grid-template-columns:1fr}.left-column,.right-column{order:2}.center-column{order:1}.player-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.move-log{height:180px}}
@media (max-width:820px){:root{--cell:min(5vw,31px)}.game-shell{padding:10px}.hero-bar{padding:18px 16px}.hero-brand{display:none}.setup-grid{grid-template-columns:1fr}}
@media (max-width:740px){
  :root{--cell:min(5.5vw,28px)}
  body{overflow:hidden}
  .game-shell{padding:0;display:block;height:100svh}
  .game-card{height:100svh;border-radius:0;border:0;display:flex;flex-direction:column}
  .hero-bar{display:none}
  .setup-screen{height:100svh;overflow:auto;padding:16px}
  .game-screen{height:100svh;padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
  .status-row{grid-template-columns:auto 1fr auto;gap:8px;margin-bottom:8px}
  .turn-pill{padding:9px 12px;font-size:12px}
  .status-center{padding:9px 10px}
  .status-center p{font-size:12px}
  .menu-toggle{display:inline-flex}
  .layout-grid{flex:1;min-height:0;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:8px}
  .left-column{order:2}
  .right-column{display:none}
  .table-frame{padding:8px 8px 10px;border-radius:20px}
  .table-badges{margin:0 2px 8px}
  .table-chip{font-size:10px;padding:6px 8px}
  .center-dice-zone{padding:8px 10px;gap:6px;border-radius:16px}
  .dice-button{width:72px;height:72px;border-radius:22px;font-size:40px}
  .roll-button{padding:8px 14px;font-size:13px}
  .dice-hint{font-size:10px;max-width:110px}
  .player-list{grid-template-columns:1fr 1fr;gap:8px}
  .player-row{grid-template-columns:44px 1fr auto;padding:10px 10px}
  .avatar{width:44px;height:44px}
  .avatar::before{font-size:18px}
  .player-name{font-size:15px}
  .player-meta{font-size:11px}
  .home-count{font-size:12px}
}
@media (max-width:740px) and (orientation:landscape){
  :root{--cell:min(calc((100svh - 120px)/15), calc((100vw - 70px)/15))}
  .layout-grid{grid-template-rows:1fr auto}
  .player-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .center-dice-zone{transform:translate(-50%,-50%) scale(.88)}
}


body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.12), transparent 10%),
    radial-gradient(circle at 76% 12%, rgba(255,255,255,.08), transparent 9%),
    linear-gradient(180deg, rgba(148,220,232,.45) 0 20%, rgba(74,144,108,.35) 20% 34%, rgba(19,102,112,.22) 34% 42%, rgba(10,77,90,.16) 42% 100%);
  opacity:.55;
}
.game-card{position:relative}
.game-card::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 92%, rgba(141,209,101,.18), transparent 12%),
    radial-gradient(circle at 90% 88%, rgba(141,209,101,.15), transparent 12%),
    radial-gradient(circle at 8% 78%, rgba(255,255,255,.05), transparent 9%),
    radial-gradient(circle at 92% 22%, rgba(255,255,255,.05), transparent 9%);
}
.table-frame::after{
  content:'';
  position:absolute;
  inset:14px;
  border-radius:34px;
  pointer-events:none;
  background:
    radial-gradient(circle at 9% 92%, rgba(125,191,89,.24), transparent 10%),
    radial-gradient(circle at 93% 88%, rgba(125,191,89,.24), transparent 10%),
    radial-gradient(circle at 18% 82%, rgba(255,255,255,.05), transparent 6%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.05), transparent 6%);
}
.board-wrap{filter:drop-shadow(0 18px 32px rgba(0,0,0,.22))}
.board{background:
  radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 12%),
  radial-gradient(circle at 78% 70%, rgba(255,255,255,.08), transparent 16%),
  radial-gradient(circle at 50% 50%, rgba(255,255,255,.05), transparent 38%),
  radial-gradient(circle at 50% 50%, rgba(54,191,214,.16), transparent 58%),
  linear-gradient(180deg,#1ea0b6 0%,#1289a0 28%,#0f7187 58%,#0a586a 100%);
}
.board::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 20%, rgba(255,255,255,.11), transparent 3%),
    radial-gradient(circle at 66% 78%, rgba(255,255,255,.08), transparent 3%),
    radial-gradient(circle at 74% 18%, rgba(255,255,255,.07), transparent 2.6%);
}
.base-leaf{
  position:absolute;
  z-index:3;
  width:calc(var(--cell) * 1.05);
  height:calc(var(--cell) * .82);
  border-radius:55% 45% 52% 48%;
  background:radial-gradient(circle at 30% 30%, #f3ffd5 0%, #9ce468 32%, #4da64a 64%, #2b7334 100%);
  box-shadow:0 8px 12px rgba(0,0,0,.22), inset 0 3px 5px rgba(255,255,255,.35), inset 0 -4px 6px rgba(0,0,0,.16);
}
.base-leaf::before{
  content:'';
  position:absolute;
  left:47%;
  top:12%;
  width:6%;
  height:72%;
  background:rgba(255,255,255,.3);
  border-radius:999px;
  transform:rotate(18deg);
}
.base-leaf::after{
  content:'';
  position:absolute;
  right:-2%;
  top:50%;
  width:28%;
  height:22%;
  background:#13899e;
  border-radius:50%;
  transform:translateY(-50%) rotate(18deg);
}
.base-leaf.tilt-left{transform:rotate(-16deg)}
.base-leaf.tilt-right{transform:rotate(14deg)}
.base-zone{backdrop-filter:blur(1px)}
.token{z-index:8}
.token.launching{animation:launchJump .36s ease}
@keyframes launchJump{0%{transform:translateY(0) scale(1)}35%{transform:translate(-10px,-18px) scale(1.16)}100%{transform:translateY(0) scale(1)}}
@media (max-width:740px){
  .center-dice-zone{transform:translate(-50%,-50%) scale(.88)}
  .dice-button{width:68px;height:68px;font-size:40px}
}


/* Premium scenic pond + mobile board enlargement update */
.table-frame{
  background:
    radial-gradient(circle at 8% 100%, rgba(122,186,84,.20), transparent 11%),
    radial-gradient(circle at 92% 100%, rgba(122,186,84,.18), transparent 10%),
    linear-gradient(180deg,#28503d,#1a4433 26%,#173f32 56%,#13352b 100%);
}
.table-frame::before{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), inset 0 -26px 26px rgba(0,0,0,.1)}
.board{
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.18), transparent 11%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.05), transparent 40%),
    radial-gradient(circle at 78% 72%, rgba(255,255,255,.10), transparent 14%),
    radial-gradient(circle at 25% 78%, rgba(131,255,202,.08), transparent 18%),
    linear-gradient(180deg,#22aac0 0%,#1591a7 25%,#0f7d93 55%,#0b6779 76%,#095666 100%);
}
.board::before{
  background:
    radial-gradient(circle at 30% 32%, rgba(255,255,255,.09), transparent 18%),
    radial-gradient(circle at 70% 68%, rgba(255,255,255,.08), transparent 15%),
    radial-gradient(circle at 14% 86%, rgba(139,212,84,.20), transparent 7%),
    radial-gradient(circle at 85% 16%, rgba(139,212,84,.15), transparent 7%),
    radial-gradient(circle at 89% 80%, rgba(139,212,84,.18), transparent 6%);
}
.cell.path.stone .stone-pad,
.cell.path.stone::before{
  background:radial-gradient(circle at 35% 24%, #fffdf8 0%, #e8e4da 28%, #b8b8ae 62%, #8a8e87 100%)!important;
  border-radius:58% 44% 52% 46% / 48% 58% 44% 56% !important;
  transform:rotate(-8deg);
}
.cell.path.leaf .leaf-pad,
.cell.path.leaf::before{filter:saturate(1.08)}
.token{
  width:calc(var(--cell)*1.08);
  height:calc(var(--cell)*1.02);
  border-radius:56% 56% 48% 48%;
}
.token .frog-eye{top:-10%;width:31%;height:31%;box-shadow:0 3px 5px rgba(0,0,0,.22), inset 0 2px 2px rgba(255,255,255,.9)}
.token .frog-eye::after{width:34%;height:34%}
.token .frog-smile{top:58%;width:38%;border-bottom-width:2.4px}
.token .frog-body::after{
  content:'';
  position:absolute;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  width:38%;
  height:24%;
  border-radius:50%;
  background:rgba(255,255,255,.17);
}
.base-zone .base-player-name{
  position:absolute;
  top:6%;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  min-width:44%;
  text-align:center;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.01em;
  color:#f8fff8;
  background:rgba(4,25,18,.45);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:4px 10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:78%;
}
.base-zone.current-turn .base-player-name{
  background:rgba(223,247,157,.92);
  color:#13331c;
  box-shadow:0 0 0 3px rgba(255,255,255,.16);
}
.base-zone.inactive{opacity:.38;filter:saturate(.55)}
.base-zone .home-label{bottom:7%}
.status-row{margin-bottom:10px}
.left-column{min-width:0}
.players-panel .panel-head{margin-bottom:8px}
.players-panel{padding:14px}
.player-row{padding:10px 11px}
.player-name{font-size:16px}
.player-meta{font-size:12px}
@media (max-width:1280px){:root{--cell:min(4.45vw,44px)}.layout-grid{grid-template-columns:170px minmax(700px,1fr) 200px}}
@media (max-width:1180px){:root{--cell:min(4.9vw,40px)}.left-column{display:none}.layout-grid{grid-template-columns:1fr}.center-column{order:1}.right-column{order:2}}
@media (max-width:740px){
  :root{--cell:min(calc((100vw - 18px)/15), calc((100svh - 110px)/15), 36px)}
  .status-row{grid-template-columns:auto 1fr auto;gap:6px;margin-bottom:6px}
  .turn-pill{padding:7px 10px;font-size:11px}
  .status-center{padding:7px 9px}
  .status-center p{font-size:11px}
  .left-column,.right-column{display:none !important}
  .layout-grid{display:block;flex:1;min-height:0}
  .table-frame{padding:6px 6px 8px;border-radius:18px;height:100%}
  .table-frame::before,.table-frame::after{border-radius:14px;inset:6px}
  .table-badges{display:none}
  .center-column{height:100%}
  .board-wrap{height:calc(var(--cell) * 15);width:calc(var(--cell) * 15);max-width:100%;margin:auto}
  .game-screen{justify-content:flex-start}
  .center-dice-zone{transform:translate(-50%,-50%) scale(.82)}
  .dice-button{width:62px;height:62px;border-radius:20px;font-size:34px}
  .base-zone{border-width:3px;border-radius:20px;box-shadow:inset 0 0 0 8px rgba(255,255,255,.12),0 6px 12px rgba(0,0,0,.16), inset 0 -6px 10px rgba(0,0,0,.13)}
  .base-zone .base-player-name{font-size:10px;padding:3px 7px;max-width:86%;top:4%}
  .base-zone .home-label{font-size:8px;padding:3px 6px;bottom:5%}
  .frog-house{width:62%;height:52%}
  .base-leaf{width:calc(var(--cell) * .92);height:calc(var(--cell) * .72)}
}
@media (max-width:740px) and (orientation:landscape){
  :root{--cell:min(calc((100vw - 18px)/15), calc((100svh - 78px)/15), 42px)}
  .game-screen{padding:max(5px,env(safe-area-inset-top)) 5px max(6px,env(safe-area-inset-bottom))}
  .status-row{margin-bottom:4px}
}


/* Classic design return + timer/sounds/mobile-fit */
.timer-pill,.sound-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(8,31,34,.56);
  color:#edfff7;
  font-weight:900;
  font-size:12px;
  letter-spacing:.03em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 12px rgba(0,0,0,.16);
  white-space:nowrap;
}
.timer-pill.is-low{background:linear-gradient(180deg,#ffe89f,#ffc96c);color:#382409}
.sound-toggle.off{opacity:.68}
.base-zone .base-player-name{z-index:9}
.board-wrap{position:relative}
.landing-ripple{
  position:absolute;
  z-index:6;
  width:8px;
  height:8px;
  border-radius:50%;
  border:2px solid rgba(213,247,255,.82);
  box-shadow:0 0 0 3px rgba(88,207,243,.12);
  transform:translate(-50%, -50%);
  pointer-events:none;
  animation:landingRipple .72s ease-out forwards;
}
@keyframes landingRipple{
  0%{opacity:.9; width:8px; height:8px}
  100%{opacity:0; width:28px; height:28px}
}
@media (max-width:740px){
  :root{--cell:var(--cell-mobile-fit, min(calc((100dvw - 8px)/15), calc((100dvh - 88px)/15), 33px))}
  body{overflow:hidden}
  .game-shell{padding:0;height:100dvh}
  .game-card{height:100dvh;border-radius:0;border:0;display:flex;flex-direction:column}
  .game-screen{height:100dvh;display:grid;grid-template-rows:auto 1fr;padding:max(4px,env(safe-area-inset-top)) 4px max(4px,env(safe-area-inset-bottom));overflow:hidden}
  .status-row{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:4px;margin-bottom:4px;align-items:center}
  .turn-pill,.timer-pill,.sound-toggle,.menu-toggle{padding:7px 8px;font-size:10px;min-height:32px}
  .status-center{padding:6px 8px;min-width:0}
  .status-center p{font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .layout-grid{height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;gap:0}
  .left-column,.right-column{display:none !important}
  .center-column{display:flex;align-items:center;justify-content:center;min-height:0;height:100%}
  .table-frame{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:4px;border-radius:16px}
  .table-badges{display:none}
  .board-wrap{width:calc(var(--cell) * 15);height:calc(var(--cell) * 15);margin:auto;flex:0 0 auto}
  .center-dice-zone{transform:translate(-50%,-50%) scale(.84)}
  .dice-button{width:60px;height:60px;font-size:34px;border-radius:18px}
  .base-zone .base-player-name{top:4px;font-size:9px;padding:3px 6px;max-width:88%}
  .player-list{display:none}
}
@media (max-width:740px) and (orientation:landscape){
  :root{--cell:var(--cell-mobile-fit, min(calc((100dvw - 10px)/15), calc((100dvh - 56px)/15), 38px))}
  .game-screen{padding:max(3px,env(safe-area-inset-top)) 3px max(3px,env(safe-area-inset-bottom))}
  .status-row{margin-bottom:2px}
}