:root{
  color-scheme:dark;
  --bg:#100c22;--bg2:#19123a;--glass:#1c1835d9;--glass2:#292044e8;--line:#ffffff16;
  --text:#fffafb;--muted:#bcb6d3;--pink:#ff5d83;--pink2:#ff93ab;--cyan:#4ddcff;--cyan2:#a7f1ff;
  --gold:#ffd45d;--green:#7df2af;--purple:#a88bff;--danger:#ff718b;--tile1:#343d4b;--tile2:#262e39;
  --glass1:#171c25f2;--glass2:#0e131bf2;--control:#0c1119;--chip:#0c1119cc;
  --body-a:#4d254f;--body-b:#15435e;--body-c:#090c12;--shadow:0 22px 65px #05030f66;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg);overscroll-behavior-y:contain}
body{margin:0;min-height:100vh;overscroll-behavior-y:contain;font-family:ui-rounded,"Hiragino Maru Gothic ProN","Yu Gothic UI","Noto Sans JP",system-ui,sans-serif;color:var(--text);background:
  radial-gradient(circle at 12% -10%,var(--body-a) 0,transparent 33%),
  radial-gradient(circle at 86% 2%,var(--body-b) 0,transparent 31%),
  linear-gradient(160deg,var(--bg2),var(--bg) 58%,var(--body-c));overflow-x:hidden;transition:background .25s ease,color .25s ease}
body[data-theme="contrast"]{--bg:#111923;--bg2:#1b2a39;--glass1:#273544f4;--glass2:#182431f4;--line:#ffffff34;--text:#ffffff;--muted:#e2e7ef;--tile1:#52677a;--tile2:#3e5265;--control:#16222f;--chip:#16222fe8;--body-a:#6b3d67;--body-b:#286b86;--body-c:#0c131b}
body[data-theme="night"]{--bg:#1a1234;--bg2:#2a2051;--glass1:#403663e8;--glass2:#28214be8;--line:#ffffff28;--text:#fffdfd;--muted:#ded8ec;--tile1:#4d4274;--tile2:#3b3362;--control:#211941;--chip:#1d1639dc;--body-a:#8a4b8f;--body-b:#2f668f;--body-c:#100c26}
body[data-theme="ocean"]{--bg:#0c2733;--bg2:#10445a;--glass1:#1a5264ef;--glass2:#103746ef;--line:#c9f4ff3b;--text:#fbfeff;--muted:#d8f0f5;--tile1:#28728d;--tile2:#1d5972;--control:#0d3442;--chip:#0c303edf;--gold:#ffe783;--green:#9effca;--body-a:#267789;--body-b:#35649a;--body-c:#071d27}
body[data-theme="forest"]{--bg:#10291a;--bg2:#1a4931;--glass1:#28513aef;--glass2:#173727ef;--line:#ddffea3a;--text:#fdfff9;--muted:#e0f0e4;--tile1:#47715a;--tile2:#345c45;--control:#123420;--chip:#11301edf;--gold:#ffe07d;--green:#aeffc0;--body-a:#4b7843;--body-b:#26786e;--body-c:#091d11}
body[data-theme="space"]{--bg:#030611;--bg2:#090e25;--glass1:#10183df2;--glass2:#080d25f3;--line:#95a9ff3b;--text:#fcfdff;--muted:#cbd4f7;--tile1:#24346b;--tile2:#141e49;--control:#080e2c;--chip:#080e2ce8;--gold:#fff08c;--green:#84ffd8;--purple:#c5a1ff;--body-a:#41155f;--body-b:#123c79;--body-c:#01030a}
body[data-theme="space"] .sky{opacity:1;filter:saturate(1.2)}
body[data-theme="space"] .sky i{color:#eaf2ff;text-shadow:0 0 8px #fff,0 0 18px #78a8ff,0 0 30px #b56cff88}
body[data-theme="space"] .board-card{box-shadow:var(--shadow),inset 0 1px #ffffff12,0 0 34px #526dff16}

button, select{font:inherit}button{color:inherit}
.sky{position:fixed;inset:0;pointer-events:none;overflow:hidden;opacity:.96}.sky i{position:absolute;display:grid;place-items:center;width:auto;height:auto;background:none;border-radius:0;box-shadow:none;font-style:normal;line-height:1;color:#ffe8a6;text-shadow:0 0 8px #fff8,0 0 16px #ffd45d88;animation:twinkle 5.4s ease-in-out infinite}.sky i::before{content:"✦";font-size:var(--spark-size,13px)}.sky i:nth-child(1){left:8%;top:18%;--spark-size:12px;animation-delay:0s}.sky i:nth-child(2){left:25%;top:7%;--spark-size:10px;animation-delay:.9s}.sky i:nth-child(3){right:31%;top:13%;--spark-size:13px;animation-delay:2.2s}.sky i:nth-child(4){right:9%;top:29%;--spark-size:11px;animation-delay:1.4s}.sky i:nth-child(5){left:17%;bottom:16%;--spark-size:12px;animation-delay:2.9s}.sky i:nth-child(6){right:18%;bottom:13%;--spark-size:10px;animation-delay:.35s}@keyframes twinkle{0%,100%{opacity:.38;transform:scale(.86) rotate(0deg)}50%{opacity:1;transform:scale(1.14) rotate(10deg)}}
.app-shell{width:min(1160px,100%);margin:auto;padding:18px 16px 42px;padding-top:max(18px,calc(env(safe-area-inset-top) + 8px));position:relative;z-index:1}
.glass{background:linear-gradient(160deg,var(--glass1),var(--glass2));border:1px solid var(--line);box-shadow:var(--shadow),inset 0 1px #ffffff0b;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:7px 4px 14px}.brand-lockup{display:flex;align-items:center;gap:12px}.logo-mark{position:relative;width:54px;height:47px;display:grid;place-items:center;flex:none;transform:rotate(-3deg);isolation:isolate;overflow:visible;visibility:hidden}.logo-mark.puni-rendered{visibility:visible}.logo-mark.puni-rendered .puni-shell-svg{filter:drop-shadow(0 8px 12px #0006)}.logo-mark.puni-rendered .face{z-index:3}.hero h1{margin:0;font-size:clamp(30px,5.5vw,52px);letter-spacing:.04em;line-height:1}.hero h1 small{font-size:.27em;color:var(--muted);letter-spacing:.23em;margin-left:.4em}.brand-title{display:inline-flex;align-items:flex-start;gap:0}.brand-main{display:inline-block}.po-star{position:relative;display:inline-block;padding-right:.16em;line-height:1}.po-base{display:inline-block}.po-mark{position:absolute;right:-.08em;top:-.20em;font-size:.44em;line-height:1;color:var(--gold);text-shadow:0 0 7px #fff7,0 0 12px #ffd45d77;transform:rotate(12deg)}.opening-brand{justify-content:center}.hero p{margin:7px 0 0;color:#f1eaf8;font-weight:850;letter-spacing:.08em}.build-pill{font-size:11px;font-weight:900;letter-spacing:.09em;color:#d9d1ef;border:1px solid #ffffff1d;border-radius:999px;padding:7px 10px;background:#0d0a1c66;white-space:nowrap}
.controls{position:relative;border-radius:20px;padding:10px;display:flex;gap:8px;align-items:end;flex-wrap:wrap}.settings-fields{display:contents}.settings-toggle{display:none}.controls label{display:grid;gap:4px;color:var(--muted);font-size:11px;font-weight:800}.controls select{height:42px;border-radius:12px;border:1px solid #ffffff1c;background:var(--control);color:var(--text);padding:0 34px 0 12px;font-weight:850}.control-buttons{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}.controls button, .end-actions button{border:1px solid #ffffff1c;background:var(--control);border-radius:12px;min-height:42px;padding:0 13px;font-weight:950;cursor:pointer;transition:.15s transform,.15s filter,.15s background}.controls button:hover, .end-actions button:hover{filter:brightness(1.12);transform:translateY(-1px)}.controls button:disabled{opacity:.32;cursor:not-allowed;transform:none}.primary{border:0!important;background:linear-gradient(135deg,#ff587e,#ff8a60)!important;box-shadow:0 9px 25px #ff597a35}.danger-soft{color:#ffc0cc!important}.icon-btn{width:42px;padding:0!important;font-size:17px}.watch-only{display:none}.mode-watch .watch-only{display:inline-flex}.mode-watch #resign{display:none}.mode-local #cpuWrap{display:none}
.status{margin-top:10px;border-radius:18px;padding:9px 14px;display:flex;align-items:center;gap:16px;min-height:62px}.turn-block{display:flex;align-items:baseline;gap:4px;white-space:nowrap}.turn-block span{font-size:11px;color:var(--muted);font-weight:900;letter-spacing:.13em}.turn-block strong{font-size:31px;line-height:1;font-variant-numeric:tabular-nums}.turn-block.final strong, .turn-block.final #turnEyebrow{color:var(--gold);text-shadow:0 0 18px #ffd45d55}.message{font-weight:850;color:#f5efff;line-height:1.45;min-width:0}
.arena{display:grid;grid-template-columns:155px minmax(360px,660px) 155px;gap:12px;justify-content:center;align-items:center;margin-top:12px}.player-panel{border-radius:22px;padding:14px;transition:.2s transform,.2s border-color,.2s box-shadow}.player-panel.active{transform:translateY(-4px);border-color:#ffffff42;box-shadow:0 20px 55px #0007,0 0 30px #ffffff0d}.player-head{display:flex;align-items:center;gap:9px;text-align:left}.player-head div{display:grid}.player-head small{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.06em}.player-head strong{font-size:15px;margin-top:1px}.avatar{position:relative;width:38px;height:32px;display:grid;place-items:center;border-radius:54% 54% 46% 46%;flex:none;transform-origin:50% 82%;isolation:isolate;overflow:visible;will-change:transform;filter:drop-shadow(0 6px 6px #0007)}.avatar::before{content:'';position:absolute;inset:2.5%;border-radius:inherit;z-index:1;pointer-events:none;box-shadow:inset 0 2px 3px #fff9,inset 5px 7px 10px #fff3,inset -6px -8px 12px #0004,inset 0 -2px 4px #0005}.avatar::after{content:'';position:absolute;width:29%;height:16%;left:18%;top:12%;border-radius:50%;background:radial-gradient(ellipse at center,#fff 0 15%,#ffffffb5 35%,transparent 72%);transform:rotate(-24deg);filter:blur(.2px);opacity:.88;pointer-events:none}.avatar.top{background:radial-gradient(circle at 29% 18%,#ffeef3 0 7%,transparent 19%),radial-gradient(circle at 40% 32%,#ffb0c4 0 13%,#ff6b91 35%,#e64370 62%,#a51f4a 100%)}.avatar.bottom{background:radial-gradient(circle at 29% 18%,#f0fdff 0 7%,transparent 19%),radial-gradient(circle at 40% 32%,#bff5ff 0 13%,#55ddfb 35%,#25afd4 62%,#11637f 100%)}.avatar .face{font-size:13px;z-index:2;animation-duration:3.1s;transform-origin:center 64%}.goal-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:13px}.goal-chip{border:1px solid #ffffff13;border-radius:11px;padding:4px 2px;background:#0f0c20a6;display:grid;place-items:center;color:var(--muted);opacity:.84;transition:.25s;min-height:44px}.goal-star-badge{position:relative;width:39px;height:39px;display:grid;place-items:center;line-height:1}.goal-star-symbol{position:absolute;inset:0;display:grid;place-items:center;font-size:38px;line-height:1;color:currentColor;text-shadow:0 2px 7px #0006}.goal-star-letter{position:relative;z-index:1;font-size:14px;font-weight:1000;color:#18202b;transform:none;text-shadow:0 1px 0 #fff7}.goal-chip:not(.got) .goal-star-letter{color:#252536}.goal-chip.got{color:var(--gold);opacity:1;background:#54410e4f;border-color:#ffd45d4a;box-shadow:inset 0 0 15px #ffd45d18,0 0 17px #ffd45d12}.goal-chip.got .goal-star-letter{color:#342813}.bench{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:9px;color:var(--muted);font-size:11px}.bench strong{font-size:22px;color:var(--text);font-variant-numeric:tabular-nums}
.board-card{border-radius:26px;padding:12px;min-width:0}.board-caption{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 2px 9px;color:var(--muted);font-size:11px;font-weight:750}.rule-id{font-size:9px;border:1px solid #ffffff1b;border-radius:999px;padding:3px 6px;color:#d6cee7}.board-line{display:flex;gap:5px}.col-labels{margin-left:24px;display:grid;grid-template-columns:repeat(7,1fr);text-align:center;color:var(--text);font-size:13px;font-weight:1000;padding-bottom:5px;line-height:1;text-shadow:0 1px 5px #0008}.row-labels{width:20px;display:grid;grid-template-rows:repeat(7,1fr);align-items:center;text-align:center;color:var(--text);font-size:13px;font-weight:1000;line-height:1;text-shadow:0 1px 5px #0008}.board{flex:1;aspect-ratio:1;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:5px;min-width:0}.cell{position:relative;border:0;border-radius:14px;background:linear-gradient(145deg,var(--tile1),var(--tile2));box-shadow:inset 0 1px #ffffff0f,0 5px 12px #0003;cursor:pointer;min-width:0;transition:.13s transform,.13s filter,.13s box-shadow;overflow:hidden}.cell:nth-child(2n){filter:brightness(.97)}.cell:hover{filter:brightness(1.07)}.cell.goal::before{content:'☆';position:absolute;inset:-7%;display:grid;place-items:center;font-size:clamp(42px,8.5vw,82px);line-height:1;z-index:0;color:#ffffff45;font-family:system-ui,sans-serif;font-weight:900;transform:scale(1.06);text-shadow:0 0 15px #ffffff16;pointer-events:none}.cell.goal::after{content:attr(data-goal);position:absolute;right:5px;top:4px;font-size:9px;font-weight:1000;color:#ffffffe0;z-index:1;text-shadow:0 1px 4px #000}.cell.goal.acquired::before{content:'★';color:#ffd45d;text-shadow:0 0 5px #fff4b8,0 0 20px #ffd45dcc;transform:scale(1.00);transform-origin:50% 50%;will-change:transform,opacity;animation-name:acquiredStarMotion,acquiredStarGlow;animation-duration:3.6s,3.6s;animation-timing-function:ease-in-out,steps(12,jump-none);animation-iteration-count:infinite,infinite;animation-delay:var(--acquired-star-phase,0s),var(--acquired-star-phase,0s)}.cell.goal[data-goal="B"]{--acquired-star-phase:0s}.cell.goal[data-goal="D"]{--acquired-star-phase:-1.2s}.cell.goal[data-goal="F"]{--acquired-star-phase:-2.4s}.cell.goal.acquired::after{color:#fff3a8}@keyframes acquiredStarMotion{0%,100%{opacity:.72;transform:scale(.975)}50%{opacity:1;transform:scale(1.045)}}@keyframes acquiredStarGlow{0%,100%{text-shadow:0 0 3px #fff4b866,0 0 11px #ffd45d88}50%{text-shadow:0 0 7px #fff7c8,0 0 25px #ffd45de0,0 0 35px #ffd45d55}}html[data-puni-motion="off"] .cell.goal.acquired::before{animation:none!important;opacity:1;transform:scale(1)}.cell.selected{box-shadow:inset 0 0 0 3px #fff,0 0 23px #ffffff45;transform:translateY(-2px)}.cell.legal{box-shadow:inset 0 0 0 3px var(--green),0 0 20px #7df2af38;transform:scale(.96)}.cell.blocked-loop{animation:loopBlink .45s ease}@keyframes loopBlink{50%{box-shadow:inset 0 0 0 3px var(--purple),0 0 23px #a88bff55}}.piece{position:absolute;inset:12%;z-index:2;border-radius:54% 54% 46% 46%;display:grid;place-items:center;transition:.15s;transform-origin:50% 84%;will-change:transform;isolation:isolate;overflow:visible;animation:puniLife var(--puni-life,10.6s) cubic-bezier(.45,.05,.35,1) infinite;filter:drop-shadow(0 7px 7px #0007)}
.piece::before{content:'';position:absolute;inset:2.5%;border-radius:inherit;z-index:1;pointer-events:none;box-shadow:inset 0 2px 3px #fff9,inset 7px 9px 13px #fff3,inset -8px -10px 16px #0004,inset 0 -3px 5px #0005}
.piece::after{content:'';position:absolute;width:29%;height:16%;left:18%;top:12%;border-radius:50%;background:radial-gradient(ellipse at center,#fff 0 15%,#ffffffb5 35%,transparent 72%);transform:rotate(-24deg);filter:blur(.2px);opacity:.88;pointer-events:none}
.piece.top{background:radial-gradient(circle at 29% 18%,#ffeef3 0 7%,transparent 19%),radial-gradient(circle at 40% 32%,#ffb0c4 0 13%,#ff6b91 35%,#e64370 62%,#a51f4a 100%)}
.piece.bottom{background:radial-gradient(circle at 29% 18%,#f0fdff 0 7%,transparent 19%),radial-gradient(circle at 40% 32%,#bff5ff 0 13%,#55ddfb 35%,#25afd4 62%,#11637f 100%)}
.face{font-size:clamp(11px,2.5vw,24px);font-weight:1000;color:#211425;z-index:2;display:flex;align-items:center;justify-content:center;gap:.05em;transform-origin:center 64%;animation:faceBreath 2.9s ease-in-out infinite;text-shadow:0 1px 0 #fff3,0 -1px 0 #0002;line-height:1}



@keyframes puniLife{
  0%,100%{transform:translateY(0) scale(1,1);border-radius:54% 54% 46% 46%}
  7%{transform:translateY(.6%) scale(1.018,.982)}
  14%{transform:translateY(-.5%) scale(.988,1.014)}
  22%{transform:translateY(0) scale(1,1)}
  34%{transform:translateY(.7%) scale(1.021,.98)}
  43%{transform:translateY(-.5%) scale(.99,1.013)}
  52%,76%{transform:translateY(0) scale(1,1);border-radius:54% 54% 46% 46%}
  81%{transform:translateY(5%) scale(1.105,.89);border-radius:60% 60% 39% 39%}
  85%{transform:translateY(-6%) scale(.925,1.115);border-radius:48% 48% 53% 53%}
  89%{transform:translateY(2%) scale(1.055,.945);border-radius:57% 57% 42% 42%}
  93%{transform:translateY(-1%) scale(.985,1.025)}
  96%{transform:translateY(0) scale(1,1)}
}
@keyframes faceBreath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.4%) scale(.995,1.012)}}

.respawn-panel{margin:12px auto 0;border-radius:20px;padding:12px 14px;max-width:880px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}.respawn-copy{display:flex;align-items:center;gap:10px}.respawn-copy .spark{font-size:26px;color:var(--gold);animation:spin 2s linear infinite}.respawn-copy div{display:grid}.respawn-copy small{color:var(--muted);margin-top:2px}.respawn-choices{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.respawn-choices button{border:1px solid #ffffff25;border-radius:999px;background:#17122d;color:#fff;padding:8px 11px;font-weight:900;cursor:pointer}.respawn-choices button:hover{border-color:var(--gold);color:var(--gold)}@keyframes spin{to{transform:rotate(360deg)}}
.quick-rules{margin-top:12px;border-radius:20px;padding:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.quick-rules div{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:13px;background:#0d0a1b55}.quick-rules b{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#ffffff0d;color:var(--gold);flex:none}.quick-rules span{font-size:10px;color:var(--muted);line-height:1.35}.quick-rules strong{color:var(--text);font-size:11px}
footer{display:flex;justify-content:space-between;align-items:center;padding:15px 5px 0;color:#79718d;font-size:10px}.text-btn{border:0;background:none;color:#aaa1c0;font-size:10px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.hidden{display:none!important}
.overlay{position:fixed;inset:0;z-index:50;background:#070512dc;display:grid;place-items:center;padding:20px;backdrop-filter:blur(10px)}.coin-dialog{text-align:center;display:grid;justify-items:center;gap:9px;font-size:20px}.coin-dialog small{color:var(--muted)}.coin{width:130px;height:130px;position:relative;transform-style:preserve-3d;margin-bottom:8px}.coin span{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;backface-visibility:hidden;font-size:54px;font-weight:1000;border:7px solid #ffe59a;overflow:hidden;background:radial-gradient(circle at 31% 24%,rgba(255,255,255,.98) 0 7%,rgba(255,248,214,.96) 8% 12%,rgba(255,233,153,.72) 13% 18%,rgba(255,233,153,0) 19% 28%),radial-gradient(circle at 34% 29%,rgba(255,255,255,.42) 0 16%,rgba(255,255,255,0) 24%),radial-gradient(circle at 50% 38%,#ffd768 0 15%,#ffc954 36%,#e58b2e 78%);box-shadow:0 18px 50px #000a,inset 0 0 0 4px #b9621a,inset 0 14px 24px rgba(255,255,255,.16)}.coin .coin-back{transform:rotateY(180deg);background:radial-gradient(circle at 31% 24%,rgba(255,255,255,.98) 0 7%,rgba(229,253,255,.96) 8% 12%,rgba(181,245,255,.70) 13% 18%,rgba(181,245,255,0) 19% 28%),radial-gradient(circle at 34% 29%,rgba(255,255,255,.42) 0 16%,rgba(255,255,255,0) 24%),radial-gradient(circle at 50% 38%,#92f2ff 0 15%,#6ceaff 36%,#2eb3d2 78%);border-color:#c6f7ff;box-shadow:0 18px 50px #000a,inset 0 0 0 4px #1d7f96,inset 0 14px 24px rgba(255,255,255,.16)}.coin.flip{animation:coinFlip 1.30s cubic-bezier(.2,.75,.2,1)!important;animation-iteration-count:1!important}@keyframes coinFlip{0%{transform:translateY(55px) rotateY(0)}45%{transform:translateY(-105px) rotateY(900deg) rotateZ(15deg)}100%{transform:translateY(0) rotateY(1800deg)}}
.help-card, .end-card{width:min(530px,100%);border-radius:26px;padding:26px;position:relative}.help-card .close{position:absolute;right:13px;top:12px;border:0;background:#ffffff0d;color:#fff;border-radius:50%;width:34px;height:34px;font-size:22px;cursor:pointer}.kicker, #endKicker{margin:0 0 4px;color:var(--gold);font-size:11px;font-weight:1000;letter-spacing:.14em}.help-card h2, .end-card h2{font-size:30px;margin:0 0 16px}.help-card ol{padding-left:22px;color:#e9e1f3}.help-card li{margin:10px 0;line-height:1.55}.help-card .note{color:var(--muted);font-size:12px;line-height:1.55}.help-card a{color:#a8eaff}.help-card{max-height:min(86dvh,760px);overflow:auto;overscroll-behavior:contain}.help-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 14px;position:sticky;top:-26px;z-index:3;padding:4px 0 8px;background:linear-gradient(180deg,var(--glass1) 72%,transparent)}.help-tab{border:1px solid #ffffff22;border-radius:999px;background:var(--control);color:var(--muted);min-height:38px;padding:0 9px;font-weight:900;cursor:pointer}.help-tab.active{color:#241c0d;background:var(--gold);border-color:var(--gold)}.help-page{font-size:15px;line-height:1.72;color:#f2edf7}.help-page h3{margin:4px 0 12px;font-size:20px}.help-page h4{margin:18px 0 6px;font-size:16px;color:#fff2bd}.help-page p{margin:7px 0}.help-page ul, .help-page ol{padding-left:24px}.manual-list{display:grid;gap:8px;margin:0}.manual-list div{padding:10px 11px;border-radius:13px;background:#ffffff08;border:1px solid #ffffff10}.manual-list dt{font-weight:1000;color:#fff2bd;margin-bottom:3px}.manual-list dd{margin:0}.logic-steps li{margin:5px 0}.manual-id{margin-top:16px!important;padding:9px 10px;border-radius:10px;background:#0003;color:var(--muted);font-size:12px}.manual-id code{font-size:11px}.help-page.hidden{display:none!important}.manual-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.manual-example{padding:10px 11px;border-radius:13px;border:1px solid #ffffff14;background:#ffffff08;display:grid;gap:3px}.manual-example b{font-size:12px;letter-spacing:.08em}.manual-example span{font-weight:900}.manual-example small{color:var(--muted);line-height:1.45}.manual-example.ok b{color:#9effca}.manual-example.ng b{color:#ffbdc9}.end-card{text-align:center}.end-emoji{font-size:55px}.end-card h2{font-size:clamp(40px,9vw,72px);margin:2px 0;background:linear-gradient(90deg,#fff,#ffd45d);-webkit-background-clip:text;background-clip:text;color:transparent}.end-card p{color:var(--muted)}#endLayer.lose-result .end-card h2{background:linear-gradient(90deg,#ffd6df,#ff718b);-webkit-background-clip:text;background-clip:text;color:transparent}#endLayer.lose-result #endKicker{color:#ff9caf}#endLayer.draw-result .end-card h2{background:linear-gradient(90deg,#fff,#b8c4d6);-webkit-background-clip:text;background-clip:text;color:transparent}.end-actions{display:flex;justify-content:center;gap:8px;margin-top:19px;flex-wrap:wrap}.end-actions button{padding:0 16px}.end-remote-note{margin-top:12px;padding:10px 12px;border-radius:12px;background:#ffffff0a;border:1px solid #ffffff12;color:#f7eefb;font-size:13px;line-height:1.5}
.fx-layer{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden}.fx-boing{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:0;color:#fff;font-size:clamp(39px,9vw,88px);font-weight:1000;line-height:1;text-shadow:0 5px 0 #0004;animation:wordPop .95s ease-out forwards;white-space:nowrap}.fx-boing.super{font-size:clamp(42px,10vw,98px);animation-duration:1.25s}.fx-boing-char{display:block;flex:none}.fx-boing-wave{display:block;width:clamp(115px,28vw,300px);height:.55em;margin:0 -.045em;overflow:visible}.fx-boing-wave path{fill:none;stroke:currentColor;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 4px 0 #0004)}.fx-boing.super .fx-boing-wave{width:clamp(180px,42vw,430px)}.fx-word{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:clamp(35px,9vw,86px);font-weight:1000;text-shadow:0 5px 0 #0004;animation:wordPop .9s ease-out forwards;white-space:nowrap}.fx-word.ko{color:#fff}.fx-word.star{color:var(--gold);text-shadow:0 0 28px #ffd45d}.fx-word.home{font-size:clamp(18px,5vw,42px);color:#fff0b4}@keyframes wordPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-78%) scale(.92)}}.fx-piece{position:fixed;z-index:81;border-radius:54% 54% 45% 45%;box-shadow:inset 0 7px 9px #fff6,inset 0 -7px 12px #0002,0 8px 14px #0006;display:grid;place-items:center;font-weight:1000;color:#24192f;will-change:transform,opacity}.fx-piece span{font-size:clamp(10px,2.3vw,23px);letter-spacing:-.18em;padding-right:.18em}
.toast{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;background:#111025e8;border:1px solid #ffffff20;border-radius:999px;padding:9px 14px;font-size:12px;font-weight:850;box-shadow:0 10px 30px #0007;animation:toast 1.6s ease forwards}@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}15%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
@media(max-width:860px){.arena{grid-template-columns:1fr 1fr}.board-card{grid-column:1/3;grid-row:1}.player-panel{grid-row:2}.top-panel{grid-column:1}.bottom-panel{grid-column:2}.hero{align-items:center}.build-pill{display:none}.controls{justify-content:center}.controls label{flex:1;min-width:135px}.controls select{width:100%}.control-buttons{margin-left:0;width:100%;justify-content:center}.status{flex-direction:column;gap:3px;text-align:center}.quick-rules{grid-template-columns:1fr 1fr}.respawn-panel{grid-template-columns:1fr}.respawn-choices{justify-content:flex-start}}
@media(max-width:520px){.app-shell{padding:10px 8px 28px;padding-top:max(10px,calc(env(safe-area-inset-top) + 6px))}.hero{padding:5px 4px 10px}.logo-mark{width:43px;height:38px}.logo-mark span{font-size:21px}.hero h1{font-size:31px}.hero h1 small{display:block;margin:4px 0 0;font-size:9px}.po-mark{right:-.02em;top:-.22em;font-size:.46em}.hero p{font-size:11px}.controls{border-radius:16px;padding:8px}.controls label{min-width:105px}.controls select{height:39px;padding-left:9px;font-size:12px}.controls button{min-height:39px;padding:0 10px;font-size:12px}.arena{gap:7px;margin-top:8px}.board-card{padding:7px;border-radius:19px}.board{gap:3px}.cell{border-radius:9px}.player-panel{padding:10px;border-radius:17px}.avatar{width:31px;height:27px}.avatar .face{font-size:11px}.player-head small{font-size:7px}.player-head strong{font-size:12px}.goal-chip{padding:5px 1px}.goal-chip b{font-size:17px}.bench strong{font-size:18px}.board-caption{font-size:9px}.quick-rules{padding:7px;gap:4px}.quick-rules div{padding:6px}.quick-rules span{font-size:9px}.quick-rules strong{font-size:9px}.row-labels{width:18px;font-size:12px}.col-labels{margin-left:21px;font-size:12px}.respawn-panel{padding:10px}.respawn-copy small{font-size:10px}footer{padding:12px 3px 0}.message{font-size:13px}}
@media(prefers-reduced-motion:reduce){*, *::before, *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
.piece.return-preview{box-shadow:inset 0 8px 10px #fff7,inset 0 -8px 13px #0002,0 0 0 3px #ffd45d88,0 0 24px #ffd45d66;animation:returnPreviewPuni .68s cubic-bezier(.18,.90,.23,1) 1 both}
@keyframes returnPreviewPuni{0%{opacity:0;transform:translateY(28%) scale(1.16,.20)}18%{opacity:1;transform:translateY(15%) scale(1.08,.38)}48%{transform:translateY(-4%) scale(.96,.78)}70%{transform:translateY(-8%) scale(.94,1.10)}86%{transform:translateY(-2%) scale(1.055,.93)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes returnGlow{to{transform:translateY(-4%) scale(1.04);filter:brightness(1.13)}}
.respawn-choices button.active{border-color:var(--gold);background:#5b451d;color:#fff5b8;box-shadow:0 0 18px #ffd45d22}



.status .message{flex:1}
.team-legend{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;align-items:center;margin-left:auto}
.team-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #ffffff20;border-radius:999px;padding:6px 9px;background:var(--chip);font-size:10px;font-weight:1000;white-space:nowrap}
.team-chip i{width:11px;height:11px;border-radius:50%;display:block;box-shadow:0 0 0 2px #fff3}



.avatar.top{border:1.25px solid #ff4162;box-shadow:0 0 0 .6px #ff244f35}
.avatar.bottom{border:1.25px solid #2f8cff;box-shadow:0 0 0 .6px #147cff35}




.move-arrow{position:absolute;z-index:7;width:clamp(24px,33%,34px);height:clamp(24px,33%,34px);border-radius:999px;display:grid;place-items:center;background:linear-gradient(180deg,#111321f0,#09111bd9);border:2px solid #96ffd0;color:#fff;font-size:clamp(14px,1.45vw,19px);font-weight:1000;line-height:1;box-shadow:0 4px 12px #0008,0 0 16px #7df2af4f;pointer-events:none;transform:translate(-50%,-50%);text-shadow:0 1px 0 #0006}.move-arrow.dir-up{left:50%;top:18%}.move-arrow.dir-down{left:50%;top:82%}.move-arrow.dir-left{left:18%;top:50%}.move-arrow.dir-right{left:82%;top:50%}
@media(max-width:860px){.team-legend{margin-left:0;justify-content:center}}
@media(max-width:520px){.team-chip{font-size:9px;padding:5px 7px}.team-chip i{width:10px;height:10px}.move-arrow{width:clamp(22px,36%,30px);height:clamp(22px,36%,30px);font-size:clamp(13px,4vw,17px)}.move-arrow.dir-up{top:20%}.move-arrow.dir-down{top:80%}.move-arrow.dir-left{left:20%}.move-arrow.dir-right{left:80%}.cell.legal{box-shadow:inset 0 0 0 3px var(--green),0 0 25px #7df2af55;transform:scale(.94)}}



#themeWrap{min-width:120px}
#theme{min-width:132px}
.avatar{transform-origin:50% 80%;animation:avatarPuni 2.4s ease-in-out infinite}
.avatar.bottom{animation-delay:-1.15s}
@keyframes avatarPuni{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1%) scale(1.012,.988)}}
@media(max-width:520px){#themeWrap{min-width:100px;flex:1}#theme{min-width:0;width:100%}.cell.goal::before{font-size:clamp(40px,11.5vw,58px)}}



.board-card.player-facing .board-caption::after{content:'YOU ↓';font-size:9px;font-weight:1000;color:var(--green);border:1px solid #7df2af55;border-radius:999px;padding:3px 7px;margin-left:auto}
.board-card.player-facing .rule-id{margin-left:0}



#puniMotionWrap{min-width:122px}
#puniMotion{min-width:142px}
html[data-puni-motion="on"] .piece{animation-name:puniLife!important;animation-duration:var(--puni-life,10.6s)!important;animation-iteration-count:infinite!important;animation-play-state:running!important}
html[data-puni-motion="on"] .face{animation-name:faceBreath!important;animation-duration:2.9s!important;animation-iteration-count:infinite!important;animation-play-state:running!important}
html[data-puni-motion="on"] .avatar{animation-duration:2.4s!important;animation-iteration-count:infinite!important;animation-play-state:running!important}
html[data-puni-motion="on"] .cell.selected .piece{animation-name:selectedPuni!important;animation-duration:1.40s!important;animation-timing-function:ease-in-out!important;animation-direction:alternate!important;animation-iteration-count:infinite!important;animation-play-state:running!important}
html[data-puni-motion="on"] .piece.return-preview{animation-name:returnPreviewPuni!important;animation-duration:.68s!important;animation-iteration-count:1!important;animation-direction:normal!important;animation-fill-mode:both!important;animation-play-state:running!important}
html[data-puni-motion="off"] .piece, html[data-puni-motion="off"] .face, html[data-puni-motion="off"] .avatar{animation:none!important}
@media(max-width:520px){#puniMotionWrap{min-width:108px;flex:1}#puniMotion{min-width:0;width:100%}}



body:not(.game-active) .arena{content-visibility:hidden}

body:not(.game-active) .arena .piece, body:not(.game-active) .arena .puni-idle-motion, body:not(.game-active) .arena .face, body:not(.game-active) .arena .cell.goal.acquired::before{animation:none!important}

.piece.puni-rendered .face, .avatar.puni-rendered .face{animation:none!important}

.opening-layer{position:fixed;inset:0;z-index:120;display:grid;place-items:start center;padding:max(20px,calc(env(safe-area-inset-top) + 10px)) max(20px,env(safe-area-inset-right)) max(20px,calc(env(safe-area-inset-bottom) + 10px)) max(20px,env(safe-area-inset-left));box-sizing:border-box;overflow:auto;background:radial-gradient(circle at 50% 18%,#ffffff12,transparent 28%),linear-gradient(160deg,var(--bg2),var(--bg) 60%,var(--body-c));backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px)}
.opening-layer.hidden{display:none!important}

#helpLayer, #storyLayer{z-index:140}
.opening-card{width:min(520px,100%);border-radius:30px;padding:34px 28px 28px;margin-block:auto;text-align:center;display:grid;justify-items:center;gap:9px}
.opening-logo{width:104px;height:88px;border-radius:55% 55% 45% 45%;display:grid;place-items:center;background:radial-gradient(circle at 28% 18%,#fff 0 6%,transparent 17%),radial-gradient(circle at 40% 30%,#ffb8c9 0 14%,#ff638a 41%,#d83e69 69%,#8c1d42 100%);box-shadow:inset 0 3px 4px #fffb,inset 8px 10px 14px #fff3,inset -10px -12px 18px #0004,0 18px 35px #0007;border:3px solid #ff365c}
.opening-logo span{font-size:46px;font-weight:1000;text-shadow:0 2px 0 #fff4,0 -2px 0 #0003}
.opening-kicker{margin:3px 0 0;color:var(--gold);font-size:11px;font-weight:1000;letter-spacing:.28em}
.opening-card h2{font-size:clamp(40px,9vw,68px);line-height:1;margin:0;letter-spacing:.08em}
.opening-tagline{margin:0 0 8px;color:var(--text);font-weight:900;letter-spacing:.08em}
.opening-actions{width:min(360px,100%);display:grid;gap:8px;margin-top:6px}
.opening-actions button, .opening-help, .opening-story, .opening-language{border:1px solid #ffffff26;background:var(--control);color:var(--text);min-height:46px;border-radius:14px;padding:0 16px;font-weight:950;cursor:pointer;transition:.15s transform,.15s filter,.15s border-color}
.opening-actions button:hover, .opening-help:hover, .opening-story:hover, .opening-language:hover{filter:brightness(1.12);transform:translateY(-1px);border-color:#ffffff50}
.opening-actions .opening-primary{border:0;background:linear-gradient(135deg,#ff587e,#ff8a60);box-shadow:0 10px 28px #ff597a3d}
.opening-help{margin-top:3px;min-height:38px;background:transparent}
.opening-card small{color:var(--muted);font-size:10px;margin-top:4px}
.piece.top{border:1.25px solid #ff4162;box-shadow:inset 0 2px 3px #fff8,inset 7px 10px 14px #fff2,inset -8px -11px 16px #0004,0 0 0 .6px #ff244f35}
.piece.bottom{border:1.25px solid #2f8cff;box-shadow:inset 0 2px 3px #fff8,inset 7px 10px 14px #fff2,inset -8px -11px 16px #0004,0 0 0 .6px #147cff35}
.cell .piece{perspective:220px}
.cell .piece::before{transform:translateZ(0)}

.fx-piece{background-clip:padding-box;filter:drop-shadow(0 8px 8px #0008)}
.fx-piece.top{background:radial-gradient(circle at 29% 18%,#fff 0 6%,transparent 18%),radial-gradient(circle at 40% 32%,#ffb0c4 0 13%,#ff6b91 35%,#e64370 62%,#a51f4a 100%)}
.fx-piece.bottom{background:radial-gradient(circle at 29% 18%,#fff 0 6%,transparent 18%),radial-gradient(circle at 40% 32%,#bff5ff 0 13%,#55ddfb 35%,#25afd4 62%,#11637f 100%)}
@media(max-width:520px){.opening-card{padding:28px 18px 22px;border-radius:24px}.opening-logo{width:88px;height:74px}.opening-logo span{font-size:39px}}



.app-shell{position:relative;z-index:2}
.push-star-particle{position:fixed;z-index:88;display:block;pointer-events:none;color:#fff5a8;font-size:clamp(13px,2.4vw,24px);font-weight:1000;line-height:1;text-shadow:0 0 7px #ffd45d,0 2px 3px #0008;transform:translate(-50%,-50%);animation:pushStarBurst .68s cubic-bezier(.12,.68,.25,1) var(--sd,0ms) forwards}
@keyframes pushStarBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0)}16%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(1.08) rotate(var(--sr))}}
.coin.easter-hop{animation:coinExtraHop .4s cubic-bezier(.2,.9,.3,1)!important}
@keyframes coinExtraHop{0%,100%{transform:translateY(0) rotateY(1800deg)}45%{transform:translateY(-28px) rotateY(1980deg) rotateZ(-8deg)}}
.piece.easter-flat{animation:easterFlat .8s cubic-bezier(.2,.8,.2,1)!important}
@keyframes easterFlat{0%,100%{transform:scale(1)}42%{transform:translateY(13%) scale(1.16,.72)}65%{transform:translateY(-2%) scale(.94,1.07)}}
.face.easter-brave{font-weight:1000;letter-spacing:-.12em}
.face.easter-look{animation:easterLook .34s ease-in-out infinite alternate!important}
@keyframes easterLook{to{transform:translateY(-2%) scale(1.03)}}
.piece.easter-big-squish{animation:easterBigSquish 1.02s cubic-bezier(.2,.85,.25,1)!important}
@keyframes easterBigSquish{0%,100%{transform:scale(1)}22%{transform:scale(1.14,.80) translateY(7%)}46%{transform:scale(.92,1.16) translateY(-6%)}67%{transform:scale(1.08,.91)}82%{transform:scale(.98,1.04)}}
.easter-subtitle{position:fixed;z-index:90;left:50%;bottom:13%;transform:translateX(-50%);padding:7px 13px;border-radius:999px;background:#0c0a18d9;border:1px solid #ffffff2d;color:#fff6bd;font-weight:1000;font-size:clamp(12px,2.5vw,19px);text-shadow:0 2px 3px #0008;animation:easterSubtitle 1.05s ease forwards;pointer-events:none}
@keyframes easterSubtitle{0%{opacity:0;transform:translate(-50%,12px) scale(.85)}18%,72%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-8px) scale(.96)}}
.piece.easter-gold{border-color:#fff0a1!important;background:radial-gradient(circle at 28% 18%,#fff 0 7%,transparent 18%),radial-gradient(circle at 40% 32%,#fff6b8 0 12%,#ffd85a 34%,#e8a928 61%,#8e5414 100%)!important;filter:drop-shadow(0 7px 8px #0007) drop-shadow(0 0 11px #ffd45d8c)!important}
.cell.easter-rainbow-star::before{animation:easterRainbow 1.15s linear!important;color:#fff!important}
@keyframes easterRainbow{0%{filter:hue-rotate(0deg) saturate(1.8);transform:scale(1.05)}50%{filter:hue-rotate(180deg) saturate(2.2);transform:scale(1.22) rotate(7deg)}100%{filter:hue-rotate(360deg) saturate(1.8);transform:scale(1.05)}}
.cell.easter-star-sparkle::before{animation:easterStarSparkle .86s ease-out!important}
@keyframes easterStarSparkle{0%,100%{transform:scale(1.06);filter:brightness(1)}35%{transform:scale(1.28) rotate(-8deg);filter:brightness(2.2)}65%{transform:scale(.96) rotate(5deg);filter:brightness(1.45)}}
.piece.easter-wave{animation:easterWave .95s ease-in-out!important}
@keyframes easterWave{0%,100%{transform:scale(1)}35%{transform:rotate(-5deg) translateY(-4%) scale(1.04)}65%{transform:rotate(4deg) translateY(-2%) scale(1.02)}}
.easter-arm{position:absolute;right:-13%;top:30%;z-index:4;font-size:clamp(15px,2.6vw,26px);font-weight:1000;color:#fff;transform-origin:20% 80%;animation:easterArm .18s ease-in-out 6 alternate;text-shadow:0 2px 3px #0007}
@keyframes easterArm{from{transform:rotate(-18deg)}to{transform:rotate(28deg)}}
.easter-z{position:absolute;right:-27%;top:-18%;z-index:5;color:#fff;font-size:clamp(9px,1.7vw,15px);font-weight:1000;animation:easterZ 1.15s ease-out forwards;text-shadow:0 2px 3px #0008}
@keyframes easterZ{to{opacity:0;transform:translate(12px,-16px) rotate(-12deg)}}
.easter-peek{position:fixed;z-index:87;width:62px;height:54px;border-radius:55% 55% 45% 45%;display:grid;place-items:center;font-weight:1000;color:#261a30;border:3px solid #fff7;box-shadow:inset 0 6px 8px #fff6,inset 0 -7px 11px #0003,0 9px 20px #0007;pointer-events:none;animation:easterPeek 1.65s ease forwards}
.easter-peek.top{background:radial-gradient(circle at 35% 28%,#ffd4df,#ff5d83 48%,#b42b55)}.easter-peek.bottom{background:radial-gradient(circle at 35% 28%,#d8f9ff,#4ddcff 48%,#177c99)}
@keyframes easterPeek{0%,100%{opacity:0;transform:translateY(20%) scale(.75)}18%,72%{opacity:1;transform:translateY(0) scale(1)}}
.easter-giant-puni{position:fixed;z-index:1;width:min(54vw,620px);aspect-ratio:1.15;right:-9vw;top:25vh;border-radius:55% 55% 45% 45%;display:grid;place-items:center;pointer-events:none;opacity:0;filter:drop-shadow(0 35px 45px #0007);animation:giantPuniVisit 2.45s cubic-bezier(.2,.8,.2,1) forwards}
.easter-giant-puni.top{background:radial-gradient(circle at 29% 18%,#fff 0 6%,transparent 18%),radial-gradient(circle at 40% 32%,#ffb0c4 0 13%,#ff6b91 35%,#e64370 62%,#a51f4a 100%)}.easter-giant-puni.bottom{background:radial-gradient(circle at 29% 18%,#fff 0 6%,transparent 18%),radial-gradient(circle at 40% 32%,#bff5ff 0 13%,#55ddfb 35%,#25afd4 62%,#11637f 100%)}
.easter-giant-puni span{font-size:clamp(58px,11vw,150px);font-weight:1000;color:#25192e}
@keyframes giantPuniVisit{0%{opacity:0;transform:translate(22%,12%) scale(.72) rotate(5deg)}20%,72%{opacity:.88;transform:translate(0,0) scale(1) rotate(0)}100%{opacity:0;transform:translate(25%,9%) scale(.82) rotate(4deg)}}
.opening-logo.easter-tumble, .logo-mark.easter-tumble{animation:openingTumble 1.12s cubic-bezier(.2,.8,.2,1)!important}@keyframes openingTumble{0%,100%{transform:rotate(0) translateY(0)}35%{transform:rotate(88deg) translate(10px,7px) scale(.94,.88)}60%{transform:rotate(102deg) translate(6px,10px) scale(1.02,.82)}82%{transform:rotate(-7deg) translateY(-5px)}}
.brand-title.easter-papoooo{letter-spacing:.03em;animation:papoooo .95s ease-in-out infinite alternate!important}@keyframes papoooo{to{transform:scaleX(1.07)}}
@media(max-width:520px){.easter-giant-puni{width:82vw;right:-24vw;top:31vh}.easter-peek{width:48px;height:42px}.push-star-particle{font-size:17px}}
@media(prefers-reduced-motion:reduce){.push-star-particle{animation-duration:.34s!important;animation-iteration-count:1!important}}
@media(max-width:700px){}

@media(max-width:700px){.piece .face::before, .piece .face::after{top:.64em;width:.42em;height:.22em}.piece .face::before{left:-.50em}.piece .face::after{right:-.50em}}
@media(max-width:380px){}



#bgmWrap{min-width:110px}
#bgm{min-width:120px}
@media(max-width:520px){#bgmWrap{min-width:100px;flex:1}#bgm{min-width:0;width:100%}}



.cell.return-option{box-shadow:inset 0 0 0 2px var(--gold),0 0 20px #ffd45d55;animation:returnCellGlow 1.15s ease-in-out infinite alternate;z-index:3}
.cell.return-option::after{content:'↩';position:absolute;left:5px;bottom:3px;right:auto;top:auto;font-size:15px;color:var(--gold);font-weight:1000;z-index:5;text-shadow:0 1px 5px #000}
.cell.return-draft{box-shadow:inset 0 0 0 3px #fff6aa,0 0 24px #ffd45d88;filter:brightness(1.13)}
@keyframes returnCellGlow{from{filter:brightness(1)}to{filter:brightness(1.14)}}
.respawn-panel{max-width:520px;grid-template-columns:1fr;padding:8px 12px;margin-top:7px}.respawn-copy{justify-content:center}.respawn-copy .spark{font-size:20px}.respawn-choices{display:none!important}

@media(max-width:700px){
  .app-shell{padding:7px 7px calc(10px + env(safe-area-inset-bottom));}
  .hero{padding:3px 4px 7px;align-items:center}.logo-mark{width:39px;height:35px}.logo-mark span{font-size:19px}.hero h1{font-size:27px}.hero h1 small{display:inline;font-size:8px;margin-left:.35em}.hero p{display:none}
  
  .controls{min-height:44px;border-radius:14px;padding:5px 6px;display:block;z-index:35}
  .settings-toggle{display:inline-grid!important;place-items:center}
  .settings-fields{display:none;position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:40;padding:10px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,var(--glass1),var(--glass2));box-shadow:0 18px 45px #000a;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .controls.settings-open .settings-fields{display:grid}
  .settings-fields label{min-width:0!important}.settings-fields label span{font-size:11px}.settings-fields select{width:100%;height:40px;min-width:0!important;padding:0 27px 0 9px;font-size:13px}
  .control-buttons{width:100%;margin:0;display:flex;gap:5px;align-items:center;justify-content:stretch;flex-wrap:nowrap}
  .control-buttons button{min-height:38px;height:38px;padding:0 9px;font-size:13px;border-radius:10px}.control-buttons .icon-btn{width:38px;min-width:38px;padding:0!important;font-size:16px}.control-buttons #newGame{flex:1;min-width:86px}.control-buttons #resign{min-width:58px}.mode-watch .control-buttons #step, .mode-watch .control-buttons #auto{display:inline-flex;min-width:52px;justify-content:center}
  .status{margin-top:6px;min-height:48px;padding:5px 9px;border-radius:13px;display:grid;grid-template-columns:auto 1fr;gap:2px 8px;text-align:left}.turn-block{grid-row:1/3;align-self:center}.turn-block strong{font-size:27px}.turn-block span{font-size:9px}.message{font-size:14px!important;line-height:1.3;align-self:center}.team-legend{margin:0;justify-content:flex-start;gap:5px;align-self:start}.team-chip{font-size:10px;padding:3px 6px;gap:4px}.team-chip i{width:8px;height:8px}body.game-active .team-legend{display:none}
  .arena{gap:5px;margin-top:6px}.board-card{padding:6px;border-radius:16px}.board-caption{padding:0 2px 4px;font-size:10px}.board-card.player-facing .board-caption::after{font-size:8px;padding:2px 5px}.rule-id{font-size:8px;padding:2px 5px}.col-labels{margin-left:21px;font-size:12px;padding-bottom:3px}.row-labels{width:18px;font-size:12px}.board-line{gap:3px}.board{gap:2.5px}.cell{border-radius:8px}.cell.goal::before{font-size:clamp(34px,10.3vw,50px)}
  .player-panel{padding:7px 8px;border-radius:13px}.player-panel.active{transform:translateY(-1px)}.player-head{gap:6px}.avatar{width:29px;height:26px}.avatar .face{font-size:10px}.player-head small{font-size:9px}.player-head strong{font-size:14px}.goal-progress{margin-top:5px;gap:3px}.goal-chip{padding:2px 1px;border-radius:7px;min-height:39px}.goal-star-badge{width:35px;height:35px}.goal-star-symbol{font-size:34px}.goal-star-letter{font-size:13px}.bench{margin-top:3px;font-size:11px}.bench strong{font-size:17px}
  .respawn-panel{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;width:min(92vw,440px);margin:0;padding:7px 10px;border-radius:999px;box-shadow:0 10px 28px #000b}.respawn-copy{gap:7px}.respawn-copy .spark{font-size:15px}.respawn-copy strong{font-size:12px}.respawn-copy small{font-size:10px!important}.cell.return-option::after{font-size:13px;left:3px;bottom:2px}
  .quick-rules, footer{display:none}
  .help-card{width:min(94vw,590px);padding:20px 18px;max-height:88dvh}.help-card h2{font-size:26px;margin-bottom:12px}.help-page{font-size:16px;line-height:1.72}.help-card li{margin:9px 0}.help-card .note{font-size:14px}.help-tab{font-size:13px;min-height:40px;padding:0 6px}.help-tabs{top:-20px}.manual-list div{padding:10px}.manual-id code{overflow-wrap:anywhere}
}
@media(max-width:390px){.hero h1{font-size:25px}.hero h1 small{display:none}.control-buttons #resign{font-size:12px;padding:0 7px}.status{grid-template-columns:auto 1fr}.team-chip{padding:3px 5px}.board-caption #targetHint{max-width:74%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.help-tab{font-size:12px}}
@media(max-width:700px) and (max-height:760px){body.game-active .controls{min-height:41px;padding:4px 5px}.control-buttons button{height:36px;min-height:36px}.status{min-height:44px;margin-top:4px}.turn-block strong{font-size:25px}.arena{margin-top:4px}.player-panel{padding:6px 7px}.goal-progress{margin-top:4px}.bench{margin-top:2px}}



html[data-puni-colors="classic"]{--pt-hi:#ffeef3;--pt-light:#ffb0c4;--pt-mid:#ff6b91;--pt-low:#e64370;--pt-deep:#a51f4a;--pt-edge:#ff5d83;--pt-soft:#ff5d8340;--pb-hi:#f0fdff;--pb-light:#bff5ff;--pb-mid:#55ddfb;--pb-low:#25afd4;--pb-deep:#11637f;--pb-edge:#35bfff;--pb-soft:#35bfff40}
html[data-puni-colors="cvd"]{--pt-hi:#fff7e2;--pt-light:#ffd89a;--pt-mid:#e69f00;--pt-low:#bd7700;--pt-deep:#744500;--pt-edge:#f2b52d;--pt-soft:#f2b52d45;--pb-hi:#effaff;--pb-light:#a9daf2;--pb-mid:#56b4e9;--pb-low:#2587bd;--pb-deep:#045879;--pb-edge:#6bc7ee;--pb-soft:#6bc7ee45}
html[data-puni-colors="grape"]{--pt-hi:#f8efff;--pt-light:#d7bdff;--pt-mid:#a678e8;--pt-low:#784db9;--pt-deep:#492975;--pt-edge:#b58cff;--pt-soft:#b58cff40;--pb-hi:#edfffb;--pb-light:#a9f1e2;--pb-mid:#39d4bd;--pb-low:#199d89;--pb-deep:#096759;--pb-edge:#61e3cd;--pb-soft:#61e3cd40}
html[data-puni-colors="lemon"]{--pt-hi:#fffde8;--pt-light:#fff3a1;--pt-mid:#f0e442;--pt-low:#c8b927;--pt-deep:#716614;--pt-edge:#fff06a;--pt-soft:#fff06a40;--pb-hi:#f5efff;--pb-light:#cfbaff;--pb-mid:#9275df;--pb-low:#6749b4;--pb-deep:#3e2a72;--pb-edge:#aa8cff;--pb-soft:#aa8cff40}
.piece.top, .avatar.top{background:radial-gradient(circle at 29% 18%,var(--pt-hi) 0 7%,transparent 19%),radial-gradient(circle at 40% 32%,var(--pt-light) 0 13%,var(--pt-mid) 35%,var(--pt-low) 62%,var(--pt-deep) 100%)!important;border:.75px solid var(--pt-edge)!important}
.piece.bottom, .avatar.bottom{background:radial-gradient(circle at 29% 18%,var(--pb-hi) 0 7%,transparent 19%),radial-gradient(circle at 40% 32%,var(--pb-light) 0 13%,var(--pb-mid) 35%,var(--pb-low) 62%,var(--pb-deep) 100%)!important;border:.75px solid var(--pb-edge)!important}
.piece.top{box-shadow:inset 0 2px 3px #fff8,inset 7px 10px 14px #fff2,inset -8px -11px 16px #0004,0 0 0 .3px var(--pt-soft)!important}.piece.bottom{box-shadow:inset 0 2px 3px #fff8,inset 7px 10px 14px #fff2,inset -8px -11px 16px #0004,0 0 0 .3px var(--pb-soft)!important}
.avatar.top{box-shadow:0 0 0 .3px var(--pt-soft)!important}.avatar.bottom{box-shadow:0 0 0 .3px var(--pb-soft)!important}
.fx-piece.top, .easter-giant-puni.top, .easter-peek.top{background:radial-gradient(circle at 29% 18%,var(--pt-hi) 0 7%,transparent 19%),radial-gradient(circle at 40% 32%,var(--pt-light) 0 13%,var(--pt-mid) 35%,var(--pt-low) 62%,var(--pt-deep) 100%)}
.fx-piece.bottom, .easter-giant-puni.bottom, .easter-peek.bottom{background:radial-gradient(circle at 29% 18%,var(--pb-hi) 0 7%,transparent 19%),radial-gradient(circle at 40% 32%,var(--pb-light) 0 13%,var(--pb-mid) 35%,var(--pb-low) 62%,var(--pb-deep) 100%)}
.team-chip.red{border-color:var(--pt-soft)}.team-chip.red i{background:var(--pt-mid);box-shadow:0 0 0 2px var(--pt-soft)}.team-chip.blue{border-color:var(--pb-soft)}.team-chip.blue i{background:var(--pb-mid);box-shadow:0 0 0 2px var(--pb-soft)}
.top-panel{border-color:var(--pt-soft)}.bottom-panel{border-color:var(--pb-soft)}.cell.goal.top-target::before{color:color-mix(in srgb,var(--pt-mid) 65%,transparent);text-shadow:0 0 18px var(--pt-soft)}.cell.goal.bottom-target::before{color:color-mix(in srgb,var(--pb-mid) 70%,transparent);text-shadow:0 0 18px var(--pb-soft)}
.cell.selected .piece{box-shadow:inset 0 2px 3px #fff9,inset 7px 10px 14px #fff3,inset -8px -11px 16px #0004,0 0 0 1.5px #fff,0 0 17px #ffffff5c!important}
@keyframes selectedPuni{from{transform:translateY(0) scale(1,1);border-radius:54% 54% 46% 46%}to{transform:translateY(-2.4%) scale(.968,1.065);border-radius:50% 50% 49% 49%}}
.cell.selected .piece{animation:selectedPuni 1.30s cubic-bezier(.42,0,.34,1) infinite alternate}
html[data-puni-motion="on"] .cell.selected .piece{animation-name:selectedPuni!important;animation-duration:1.30s!important;animation-timing-function:cubic-bezier(.42,0,.34,1)!important;animation-direction:alternate!important;animation-iteration-count:infinite!important}
.team-mark{display:none;position:absolute;right:7%;bottom:7%;z-index:4;font-size:clamp(6px,1.15vw,10px);line-height:1;color:#fff;text-shadow:0 1px 3px #000,0 0 3px #000;font-weight:1000;pointer-events:none}.avatar .team-mark{right:-5%;bottom:-5%;font-size:7px}
html[data-puni-colors="cvd"] .piece .team-mark, html[data-puni-colors="cvd"] .avatar .team-mark{display:block}
#puniColorWrap{min-width:150px}#puniColor{min-width:190px}@media(max-width:520px){#puniColorWrap{min-width:0;flex:1}#puniColor{min-width:0;width:100%}}



.opening-extra-actions{width:min(360px,100%);display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opening-extra-actions .opening-help, .opening-extra-actions .opening-story, .opening-extra-actions .opening-language{width:100%}.opening-extra-actions .opening-language{grid-column:1/-1;min-height:38px;font-size:12px}
.story-card{width:min(620px,100%);max-height:min(88dvh,820px);overflow:auto;overscroll-behavior:contain;border-radius:26px;padding:28px;position:relative}
.story-card .close{position:absolute;right:13px;top:12px;border:0;background:#ffffff0d;color:#fff;border-radius:50%;width:38px;height:38px;font-size:24px;cursor:pointer}
.story-card h2{font-size:clamp(30px,7vw,46px);margin:0 0 8px}
.story-lead{margin:0 0 22px;color:#ffe9a7;font-weight:900;line-height:1.65}
.story-card section{padding:13px 0;border-top:1px solid #ffffff14}
.story-card h3{margin:0 0 7px;font-size:18px;color:#fff3c0}
.story-card section p{margin:7px 0;font-size:16px;line-height:1.85;color:#f4eff8}
.story-card b{color:#fff}
.story-ending{background:radial-gradient(circle at 50% 100%,#ffd45d10,transparent 64%)}
.story-last{text-align:center;margin-top:18px!important;font-size:20px!important;color:var(--gold)!important}
.story-note{margin:18px 0 0;padding:10px 12px;border-radius:12px;background:#0003;color:var(--muted);font-size:12px;line-height:1.6}
@media(max-width:520px){.opening-extra-actions{gap:6px}.opening-extra-actions button{font-size:12px;padding:0 8px;min-height:42px}.story-card{width:94vw;max-height:88dvh;padding:22px 18px}.story-card h2{font-size:30px}.story-card h3{font-size:17px}.story-card section p{font-size:15px;line-height:1.78}.story-lead{font-size:15px}.story-last{font-size:19px!important}}



.opening-actions .opening-continue{border-color:#7df2af66;background:linear-gradient(135deg,#173d31,#1e5541);color:#eafff3;box-shadow:0 8px 22px #42d99a1f}
.opening-actions .opening-continue:not(.hidden){display:block}
@media(max-width:700px){
  body.game-active .hero{display:flex!important;min-height:32px;padding:1px 4px 4px;align-items:center;gap:7px}
  body.game-active .brand-lockup{gap:7px;width:100%;min-width:0}
  body.game-active .brand-lockup>.brand-copy{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
  body.game-active .logo-mark{width:31px;height:28px;border-radius:55% 55% 44% 44%}
  body.game-active .logo-mark span{font-size:15px}
  body.game-active .hero h1{font-size:22px;line-height:1;flex:none}
  body.game-active .hero h1 small{font-size:7px;margin-left:.28em;display:inline}
  body.game-active .hero p{display:block!important;margin:0 0 0 auto;font-size:10.5px;line-height:1.1;letter-spacing:.025em;white-space:nowrap;color:#f5f0ff;text-align:right}
  body.game-active .build-pill{display:none!important}
}
@media(max-width:390px){body.game-active .hero h1{font-size:20px}body.game-active .hero h1 small{display:none}body.game-active .hero p{font-size:9.5px;letter-spacing:0;min-width:0;overflow:hidden;text-overflow:ellipsis}.control-buttons{gap:4px!important}.control-buttons button{padding-left:5px!important;padding-right:5px!important;white-space:nowrap;overflow:hidden}.control-buttons .icon-btn{width:32px!important;min-width:32px!important}.control-buttons #newGame{min-width:0!important;flex:1 1 72px!important;font-size:11px!important}.control-buttons #resign{width:54px!important;min-width:54px!important;padding-left:3px!important;padding-right:3px!important;font-size:10.5px!important}.mode-watch .control-buttons #newGame{flex:0 0 56px!important;width:56px!important;font-size:9.5px!important}.mode-watch .control-buttons #step, .mode-watch .control-buttons #auto{flex:0 0 36px!important;width:36px!important;min-width:36px!important;padding:0 2px!important;font-size:9.5px!important}}
@media(max-width:340px){.control-buttons{gap:3px!important}.control-buttons button{height:36px!important;min-height:36px!important;padding-left:3px!important;padding-right:3px!important}.control-buttons .icon-btn{width:30px!important;min-width:30px!important}.control-buttons #newGame{min-width:0!important;font-size:9.5px!important}.control-buttons #resign{width:48px!important;min-width:48px!important;font-size:9.5px!important}.mode-watch .control-buttons #newGame{flex:0 0 50px!important;width:50px!important}.mode-watch .control-buttons #step, .mode-watch .control-buttons #auto{flex:0 0 32px!important;width:32px!important;min-width:32px!important;font-size:9px!important}}


@media(prefers-reduced-motion:reduce){
}


.logo-mark{flex:0 0 auto;min-width:0}
.brand-copy{min-width:0}
.hero, .brand-lockup{max-width:100%}
@media(max-width:700px){
  
  body.game-active .brand-lockup>.logo-mark{display:grid;flex:0 0 31px;width:31px;height:28px;min-width:31px;max-width:31px}
  body.game-active .brand-copy{overflow:hidden}
  body.game-active .hero p{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
}


#coinLayer{position:fixed;inset:0;width:auto;height:auto;min-height:100dvh;overflow:hidden;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));box-sizing:border-box}
#coinLayer .coin-dialog{position:relative;left:auto;top:auto;transform:none;width:min(90vw,360px);max-width:360px;margin:0;justify-items:center;text-align:center}


.bench-punis{min-height:19px;margin-top:5px;display:flex;justify-content:center;align-items:end;gap:3px;overflow:visible}
.bench-puni{position:relative;width:18px;height:15px;border-radius:55% 55% 45% 45%;display:grid;place-items:center;filter:drop-shadow(0 2px 2px #0006);transform-origin:50% 100%;opacity:.9}
.bench-puni.top{background:radial-gradient(circle at 30% 20%,var(--pt-hi) 0 8%,transparent 20%),radial-gradient(circle at 42% 34%,var(--pt-light) 0 13%,var(--pt-mid) 39%,var(--pt-low) 68%,var(--pt-deep) 100%);border:.55px solid var(--pt-edge)}
.bench-puni.bottom{background:radial-gradient(circle at 30% 20%,var(--pb-hi) 0 8%,transparent 20%),radial-gradient(circle at 42% 34%,var(--pb-light) 0 13%,var(--pb-mid) 39%,var(--pb-low) 68%,var(--pb-deep) 100%);border:.55px solid var(--pb-edge)}
.bench-puni::before{content:'–ᴗ–';font-size:6px;font-weight:1000;color:#fff;text-shadow:0 1px 2px #000;letter-spacing:-.12em;padding-right:.12em}
.bench-puni::after{content:'z';position:absolute;right:-4px;top:-7px;font-size:7px;font-weight:1000;color:#dce9ff;text-shadow:0 1px 3px #000;animation:benchZ 1.8s ease-in-out infinite}
.bench-puni.waking{animation:benchWake 1.15s ease-in-out infinite alternate}
.bench-puni.waking::before{content:'•ᴗ•'}
.bench-puni.waking::after{content:'!';color:var(--gold);animation:none;top:-6px}
.bench-puni.ready{animation:benchReady .72s ease-in-out infinite alternate}
.bench-puni.ready::before{content:'•◡•'}
.bench-puni.ready::after{content:'↩';color:var(--gold);animation:none;top:-7px;right:-6px}
.bench-empty{font-size:10px;color:#ffffff38;line-height:1}
@keyframes benchZ{0%,100%{opacity:.25;transform:translate(0,2px) scale(.8)}50%{opacity:1;transform:translate(2px,-2px) scale(1)}}
@keyframes benchWake{to{transform:scale(.94,1.08) translateY(-1px)}}
@keyframes benchReady{to{transform:translateY(-2px) scale(.98,1.07)}}


.fx-contact-pulse{position:fixed;z-index:89;width:18px;height:18px;border:3px solid #fff6b3;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(.25);box-shadow:0 0 16px #ffd45daa;animation:contactPulse .52s ease-out forwards}
.fx-contact-word{position:fixed;z-index:90;pointer-events:none;transform:translate(-50%,-50%) scale(.7);font-size:clamp(11px,2.5vw,18px);font-weight:1000;color:#fff7c8;text-shadow:0 2px 4px #000,0 0 10px #ffd45d88;animation:contactWord .60s ease-out forwards;white-space:nowrap}
@keyframes contactPulse{65%{opacity:1;transform:translate(-50%,-50%) scale(1.35)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
@keyframes contactWord{0%{opacity:0;transform:translate(-50%,-30%) scale(.55)}25%{opacity:1;transform:translate(-50%,-70%) scale(1.06)}100%{opacity:0;transform:translate(-50%,-150%) scale(.9)}}


.star-get-curtain{position:fixed;inset:0;z-index:82;pointer-events:none;background:#02030aa6;animation:starCurtain .72s ease both}
.fx-star-get{position:fixed;z-index:91;pointer-events:none;width:clamp(86px,20vw,132px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.15);display:grid;place-items:center;color:var(--gold);filter:drop-shadow(0 0 20px #ffd45dbb);animation:starGetPop .72s cubic-bezier(.18,.85,.2,1) forwards}
.fx-star-get .star-shape{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(82px,19vw,126px);line-height:1;text-shadow:0 0 28px #fff59c,0 0 55px #ffd45d99}
.fx-star-get b{position:relative;z-index:1;color:#3e2c09;font-size:clamp(23px,5vw,34px);font-weight:1000;transform:translateY(-1px);text-shadow:0 1px 0 #fff8}
.fx-star-caption{position:fixed;z-index:92;pointer-events:none;left:50%;top:calc(50% + 88px);transform:translate(-50%,-50%);white-space:nowrap;font-weight:1000;font-size:clamp(20px,5vw,34px);color:#fff5b8;text-shadow:0 3px 8px #000,0 0 18px #ffd45d88;animation:starCaption .78s ease forwards}
.fx-star-flight{position:fixed;z-index:91;pointer-events:none;width:24px;height:24px;display:grid;place-items:center;color:var(--gold);font-size:24px;filter:drop-shadow(0 0 8px #ffd45d);transform:translate(-50%,-50%);will-change:transform,opacity}
.cell.star-get-cell{z-index:6;animation:starCellFlash .72s ease!important;box-shadow:inset 0 0 0 3px #fff4aa,0 0 34px #ffd45dcc!important;filter:brightness(1.28)!important}
@keyframes starCurtain{0%,100%{opacity:0}18%,68%{opacity:1}}
@keyframes starGetPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(-18deg)}32%{opacity:1;transform:translate(-50%,-50%) scale(1.16) rotate(6deg)}68%{opacity:1;transform:translate(-50%,-50%) scale(.98)}100%{opacity:0;transform:translate(-50%,-58%) scale(.82)}}
@keyframes starCaption{0%{opacity:0;transform:translate(-50%,8px) scale(.7)}28%,68%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-18px) scale(.92)}}
@keyframes starCellFlash{0%,100%{transform:scale(1)}38%{transform:scale(.94)}56%{transform:scale(1.045)}}








.fx-faceoff{position:fixed;inset:0;z-index:84;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:clamp(28px,10vw,82px);background:radial-gradient(circle at 50% 50%,#ffffff0e,transparent 35%);animation:faceoffFade .82s ease forwards}
.faceoff-puni{width:clamp(64px,16vw,104px);aspect-ratio:1.13;border-radius:55% 55% 45% 45%;display:grid;place-items:center;font-size:clamp(21px,5vw,32px);font-weight:1000;color:#fff;text-shadow:0 2px 4px #000;filter:drop-shadow(0 12px 15px #0008);transform-origin:50% 100%}
.faceoff-puni.top{background:radial-gradient(circle at 30% 20%,var(--pt-hi) 0 8%,transparent 20%),radial-gradient(circle at 42% 34%,var(--pt-light) 0 13%,var(--pt-mid) 39%,var(--pt-low) 68%,var(--pt-deep) 100%);border:.8px solid var(--pt-edge);animation:faceoffLeft .64s ease-in-out 2 alternate}
.faceoff-puni.bottom{background:radial-gradient(circle at 30% 20%,var(--pb-hi) 0 8%,transparent 20%),radial-gradient(circle at 42% 34%,var(--pb-light) 0 13%,var(--pb-mid) 39%,var(--pb-low) 68%,var(--pb-deep) 100%);border:.8px solid var(--pb-edge);animation:faceoffRight .64s ease-in-out 2 alternate}
.faceoff-vs{font-size:clamp(19px,5vw,34px);font-weight:1000;color:var(--gold);text-shadow:0 0 15px #ffd45d88;animation:faceoffVs .48s ease-in-out infinite alternate}
@keyframes faceoffFade{0%{opacity:0}12%,70%{opacity:1}100%{opacity:0}}
@keyframes faceoffLeft{from{transform:translateX(-7px) scale(1.03,.97)}to{transform:translateX(4px) scale(.97,1.04)}}
@keyframes faceoffRight{from{transform:translateX(7px) scale(1.03,.97)}to{transform:translateX(-4px) scale(.97,1.04)}}
@keyframes faceoffVs{to{transform:scale(1.14)}}


.end-badge{width:max-content;max-width:100%;margin:12px auto 0;padding:8px 13px;border-radius:999px;border:1px solid #ffd45d55;background:#ffd45d12;color:#fff4bb;font-weight:1000;font-size:14px;box-shadow:0 0 22px #ffd45d1f}
.end-badge b{color:var(--gold);margin-right:5px}

@media(max-width:700px){
  .bench-punis{min-height:17px;margin-top:3px}.bench-puni{width:16px;height:13px}.bench-puni::before{font-size:5px}.bench-puni::after{font-size:6px}
  .fx-star-caption{top:calc(50% + 72px)}
}


@media(prefers-reduced-motion:reduce){
  .fx-faceoff, .faceoff-puni, .faceoff-vs, .fx-contact-pulse, .fx-contact-word, .fx-star-get, .fx-star-caption, .bench-puni, .bench-puni::after{animation-duration:.18s!important;animation-iteration-count:1!important}
}



.fx-piece .fx-face{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(10px,2.3vw,23px);font-weight:1000;line-height:1;color:#24192f;text-shadow:0 1px 0 #fff3,0 -1px 0 #0002;transition:opacity .055s linear,transform .085s ease}
.fx-piece .fx-face-normal{opacity:1;transform:scale(1);letter-spacing:-.14em;padding-right:.14em}
.fx-piece .fx-face-impact{opacity:0;transform:scale(.72,1.04);font-size:clamp(13px,2.9vw,27px);letter-spacing:-.20em;padding-right:.20em}




.opening-actions .opening-puni-room{border-color:#ffd86a55;background:linear-gradient(135deg,#3a2e54,#214b57);box-shadow:0 8px 22px #2fd9d326}
.opening-actions .opening-puni-room:hover{border-color:#ffe48799}
.puni-room-layer{position:fixed;inset:0;z-index:190;background:linear-gradient(160deg,#17122cf5,#0e2631f7 55%,#102417fa);display:grid;place-items:stretch;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overscroll-behavior:contain}
.puni-room-layer.hidden{display:none!important}
.puni-room-shell{min-width:0;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:9px;width:min(1160px,100%);height:100%;margin:auto}
.puni-room-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:4px 4px 0;color:#fff;min-width:0}
.puni-room-head>div{min-width:0}.puni-room-kicker{margin:0;color:#ffd65c;font-size:11px;font-weight:1000;letter-spacing:.22em}.puni-room-head h2{margin:1px 0 1px;font-size:clamp(20px,3.4vw,34px);line-height:1.1}.puni-room-help{margin:0;color:#d8e7e6;font-size:13px;font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.puni-room-close{flex:0 0 auto;width:45px;height:45px;border:1px solid #ffffff2d;border-radius:50%;background:#ffffff10;color:#fff;font-size:26px;font-weight:900;cursor:pointer}
.puni-room-settings{min-width:0;margin:0;padding:0;border:0}
.puni-room-settings>summary{display:flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border:1px solid #ffffff22;border-radius:13px;background:#0b2026d9;color:#f4fbfa;font-size:12px;font-weight:950;cursor:pointer;list-style:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.puni-room-settings>summary::-webkit-details-marker{display:none}
.puni-room-settings>summary::after{content:'▾';margin-left:8px;color:#ffe487;transition:transform .16s ease}
.puni-room-settings[open]>summary::after{transform:rotate(180deg)}
.puni-room-settings[open]>summary{border-radius:13px 13px 9px 9px;margin-bottom:5px}
.puni-room-toolbar{display:grid;grid-template-columns:repeat(4,minmax(115px,1fr)) repeat(2,minmax(145px,1.1fr));gap:7px;padding:8px;border:1px solid #ffffff1b;border-radius:18px;background:#07171bbb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 28px #0004}
.puni-room-toolbar label{min-width:0;display:grid;gap:4px;padding:6px 8px;border-radius:12px;background:#ffffff08;color:#f4fbfa;font-size:11px;font-weight:850}
.puni-room-toolbar label>span{display:flex;justify-content:space-between;gap:8px;white-space:nowrap}.puni-room-toolbar label>span>b{color:#ffe487;font-size:11px;font-weight:950}.puni-room-toolbar label>small{display:block;min-height:1.25em;color:#bcd1d2;font-size:9px;font-weight:700;line-height:1.25;white-space:normal}.puni-room-toolbar input[type="range"]{width:100%;accent-color:#ffd65c;margin:0}.puni-room-toolbar select{min-width:0;width:100%;height:31px;border:1px solid #ffffff22;border-radius:9px;background:#10272d;color:#fff;padding:0 6px;font-weight:800}
.puni-room-actions{grid-column:1/-1;display:flex;justify-content:center;gap:8px}.puni-room-actions button{min-height:34px;border:1px solid #ffffff26;border-radius:11px;background:#16323a;color:#fff;padding:0 15px;font-weight:950;cursor:pointer}.puni-room-actions button:first-child{background:linear-gradient(135deg,#ff5f80,#ff9464);border:0}
.puni-room-stage-wrap{position:relative;min-width:0;min-height:250px;overflow:hidden;border:1px solid #ffffff20;border-radius:24px;background:radial-gradient(circle at 22% 17%,#fff4 0 2px,transparent 3px),radial-gradient(circle at 76% 28%,#fff3 0 1.5px,transparent 2.5px),radial-gradient(circle at 64% 78%,#ffe69b3d 0 2px,transparent 3px),linear-gradient(155deg,#253d56 0%,#143848 48%,#143427 100%);box-shadow:inset 0 0 55px #0005,0 18px 38px #0005;touch-action:none;user-select:none;-webkit-user-select:none}
.puni-room-stage-wrap::before, .puni-room-stage-wrap::after{content:'';position:absolute;pointer-events:none;border-radius:50%;filter:blur(28px);opacity:.23}.puni-room-stage-wrap::before{width:38%;aspect-ratio:1;left:-8%;top:-22%;background:#ff62a2}.puni-room-stage-wrap::after{width:40%;aspect-ratio:1;right:-10%;bottom:-28%;background:#47d9ff}
.puni-room-stage{display:block;width:100%;height:100%;position:relative;z-index:1;overflow:visible;touch-action:none}
.puni-room-puni{cursor:grab;touch-action:none;will-change:transform}.puni-room-puni.is-held{cursor:grabbing}.puni-room-puni .room-shadow{fill:#02080b;opacity:.25}.puni-room-puni .room-eye, .puni-room-puni .room-mouth, .puni-room-puni .room-squeeze-eye{fill:none;stroke:#241528;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 0 rgba(255,255,255,.20))}.puni-room-puni .room-mark{fill:#fff;stroke:#17313b;stroke-width:1.1;paint-order:stroke;opacity:.92;font-size:13px;font-weight:1000;text-anchor:middle;dominant-baseline:middle}
.puni-room-puni.is-squeezed .room-eye{opacity:0}.puni-room-puni:not(.is-squeezed) .room-squeeze-eye{opacity:0}

.puni-room-fx{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;border-radius:inherit}
.room-star-particle{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);color:#fff3a6;font-size:clamp(15px,3.4vw,30px);font-weight:1000;line-height:1;text-shadow:0 0 10px #ffd45d,0 2px 3px #0008;animation:roomStarBurst .9s cubic-bezier(.08,.72,.16,1) forwards}
@keyframes roomStarBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.08) rotate(0)}12%{opacity:1;transform:translate(-50%,-50%) scale(calc(var(--ss,1)*1.35)) rotate(16deg)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(calc(var(--ss,1)*.72)) rotate(var(--rr))}}
.room-shockwave{position:absolute;left:var(--x);top:var(--y);width:1px;height:1px;pointer-events:none}
.room-shockwave i{position:absolute;left:0;top:0;width:42px;height:42px;border:3px solid #fff8b8;border-radius:50%;box-shadow:0 0 14px #ffd45dcc,inset 0 0 10px #fff8;transform:translate(-50%,-50%) scale(.1);opacity:0;animation:roomShockRing .66s cubic-bezier(.06,.68,.16,1) var(--delay) forwards}
@keyframes roomShockRing{0%{opacity:.95;transform:translate(-50%,-50%) scale(.1)}65%{opacity:.58}100%{opacity:0;transform:translate(-50%,-50%) scale(calc(4.6 * var(--shock,1)))}}
.room-boing{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:0;color:#fff;font-size:clamp(34px,8.5vw,80px);font-weight:1000;line-height:1;white-space:nowrap;text-shadow:0 5px 0 #0005,0 0 14px #fff6;animation:roomBoingPop 1.06s cubic-bezier(.08,.72,.16,1) forwards}
.room-boing.super{font-size:clamp(46px,11vw,108px);animation-duration:1.38s}.room-boing .fx-boing-wave{width:clamp(120px,29vw,320px);height:1.05em}.room-boing.super .fx-boing-wave{width:clamp(210px,48vw,520px);height:1.12em}.room-boing.super .fx-boing-wave path{stroke-width:4.8}
@keyframes roomBoingPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.08) rotate(-5deg)}13%{opacity:1;transform:translate(-50%,-50%) scale(1.28) rotate(3deg)}28%{transform:translate(-50%,-53%) scale(.92) rotate(-2deg)}42%{transform:translate(-50%,-59%) scale(1.08) rotate(1deg)}100%{opacity:0;transform:translate(-50%,-96%) scale(.78) rotate(-1deg)}}

.puni-room-tip{position:absolute;z-index:2;left:50%;bottom:9px;transform:translateX(-50%);padding:6px 11px;border-radius:999px;background:#071318a8;color:#efffff;font-size:11px;font-weight:850;white-space:nowrap;pointer-events:none;opacity:.8}
.room-speech-bubble{position:absolute;left:var(--x);top:var(--y);z-index:4;transform:translate(-50%,-118%) rotate(var(--tilt,0deg));max-width:min(160px,42vw);padding:7px 10px;border-radius:16px;background:linear-gradient(180deg,#fffefeea,#ffeef7ea);color:#4a2140;border:1px solid #ffffffc2;box-shadow:0 10px 24px #00000033,0 0 0 1px #ffb8d633 inset;font-size:12px;font-weight:950;line-height:1.2;letter-spacing:.01em;white-space:nowrap;pointer-events:none;animation:roomSpeechFloat 2.25s ease forwards}.room-speech-bubble::before{content:'';position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:18px;height:10px;background:linear-gradient(180deg,#fffefeea,#ffeef7ea);clip-path:polygon(50% 100%,0 0,100% 0);filter:drop-shadow(0 3px 3px #00000012)}@keyframes roomSpeechFloat{0%{opacity:0;transform:translate(-50%,-105%) scale(.84) rotate(var(--tilt,0deg))}12%{opacity:1;transform:translate(-50%,-118%) scale(1) rotate(var(--tilt,0deg))}80%{opacity:1;transform:translate(-50%,-132%) scale(1) rotate(var(--tilt,0deg))}100%{opacity:0;transform:translate(-50%,-146%) scale(.96) rotate(var(--tilt,0deg))}}
body.puni-room-open{overflow:hidden;overscroll-behavior:contain}
@media(max-width:780px){
  .puni-room-layer{padding:max(7px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
  .puni-room-shell{gap:6px}.puni-room-head{padding:1px 4px}.puni-room-head h2{font-size:22px}.puni-room-help{font-size:11px}.puni-room-close{width:40px;height:40px;font-size:23px}
  .puni-room-settings>summary{min-height:44px;font-size:13px}
  .puni-room-toolbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:6px;border-radius:14px}.puni-room-toolbar label{padding:4px 6px}.puni-room-toolbar .puni-room-select{grid-column:auto}.puni-room-actions{gap:6px}.puni-room-actions button{min-height:32px;font-size:12px;padding:0 11px}
  .puni-room-stage-wrap{border-radius:18px;min-height:230px}.puni-room-tip{font-size:10px;bottom:6px}
}
@media(max-width:430px){.puni-room-kicker{font-size:9px}.puni-room-head h2{font-size:19px}.puni-room-help{max-width:285px}.puni-room-toolbar label{font-size:10px}.puni-room-toolbar select{font-size:11px}.puni-room-tip{max-width:92%;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:780px){.puni-room-toolbar label{font-size:11px}.puni-room-toolbar select{font-size:12px}}






.theme-bg-canvas{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;display:block}
body.theme-bg-ready .sky{display:none}
body{background-color:var(--bg)}

body[data-theme="contrast"]{--board-glass-a:rgba(45,61,77,.82);--board-glass-b:rgba(24,36,49,.78);--cell-glass-a:rgba(91,111,131,.72);--cell-glass-b:rgba(50,70,89,.66);--cell-glass-line:rgba(235,246,255,.20);--panel-glass-a:rgba(39,53,68,.83);--panel-glass-b:rgba(24,36,49,.81);--theme-board-glow:rgba(143,205,234,.16);--theme-blur:9px}
body[data-theme="night"]{--board-glass-a:rgba(67,56,101,.64);--board-glass-b:rgba(37,31,72,.62);--cell-glass-a:rgba(87,75,132,.54);--cell-glass-b:rgba(54,45,99,.48);--cell-glass-line:rgba(241,236,255,.18);--panel-glass-a:rgba(64,54,99,.72);--panel-glass-b:rgba(40,33,75,.70);--theme-board-glow:rgba(181,164,255,.22);--theme-blur:10px}
body[data-theme="ocean"]{--board-glass-a:rgba(34,92,111,.60);--board-glass-b:rgba(16,57,72,.58);--cell-glass-a:rgba(49,126,150,.50);--cell-glass-b:rgba(25,82,104,.44);--cell-glass-line:rgba(219,250,255,.20);--panel-glass-a:rgba(30,91,108,.70);--panel-glass-b:rgba(15,55,70,.68);--theme-board-glow:rgba(121,229,255,.20);--theme-blur:10px}
body[data-theme="forest"]{--board-glass-a:rgba(47,91,65,.65);--board-glass-b:rgba(24,58,40,.62);--cell-glass-a:rgba(74,123,88,.54);--cell-glass-b:rgba(42,86,61,.48);--cell-glass-line:rgba(235,255,226,.18);--panel-glass-a:rgba(43,84,59,.72);--panel-glass-b:rgba(24,57,40,.70);--theme-board-glow:rgba(197,244,153,.16);--theme-blur:9px}
body[data-theme="space"]{--board-glass-a:rgba(38,48,104,.43);--board-glass-b:rgba(15,23,67,.40);--cell-glass-a:rgba(47,65,132,.35);--cell-glass-b:rgba(21,34,88,.31);--cell-glass-line:rgba(218,226,255,.22);--panel-glass-a:rgba(31,42,96,.61);--panel-glass-b:rgba(13,21,61,.59);--theme-board-glow:rgba(112,155,255,.28);--theme-blur:11px}


.board-card.glass{background:linear-gradient(155deg,var(--board-glass-a),var(--board-glass-b))!important;border-color:var(--cell-glass-line)!important;box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.12),0 0 30px var(--theme-board-glow)!important;backdrop-filter:blur(var(--theme-blur)) saturate(1.08);-webkit-backdrop-filter:blur(var(--theme-blur)) saturate(1.08)}
.player-panel.glass, .status.glass, .controls.glass, .quick-rules.glass, .respawn-panel.glass{background:linear-gradient(155deg,var(--panel-glass-a),var(--panel-glass-b));backdrop-filter:blur(calc(var(--theme-blur) * .82));-webkit-backdrop-filter:blur(calc(var(--theme-blur) * .82))}
.cell{background:linear-gradient(145deg,var(--cell-glass-a),var(--cell-glass-b))!important;border:1px solid var(--cell-glass-line)!important;box-shadow:inset 0 1px rgba(255,255,255,.11),inset 0 -1px rgba(0,0,0,.14),0 5px 12px rgba(0,0,0,.20)!important}
body[data-theme="space"] .cell{box-shadow:inset 0 1px rgba(220,230,255,.15),inset 0 -1px rgba(0,0,0,.13),0 5px 13px rgba(0,0,0,.27),0 0 8px rgba(86,116,255,.08)!important}


.cell.return-option{box-shadow:inset 0 0 0 2px var(--gold),0 0 20px #ffd45d55!important}
.cell.return-draft{box-shadow:inset 0 0 0 3px #fff6aa,0 0 24px #ffd45d88!important}
.cell.star-get-cell{box-shadow:inset 0 0 0 3px #fff4aa,0 0 34px #ffd45dcc!important}
.col-labels, .row-labels{color:rgba(255,255,255,.98);text-shadow:0 1px 4px #000,0 0 10px rgba(255,255,255,.18)}
body[data-theme="contrast"] .col-labels, body[data-theme="contrast"] .row-labels{color:#fff}



.piece .face::before, .piece .face::after, .avatar .face::before, .avatar .face::after{content:'';position:absolute;top:.60em;width:.38em;height:.20em;border-radius:50%;background:rgba(255,130,155,.40);box-shadow:0 0 .24em rgba(255,150,170,.24);pointer-events:none;z-index:0}
.piece .face::before, .avatar .face::before{left:-.47em}
.piece .face::after, .avatar .face::after{right:-.47em}

.avatar .face::before, .avatar .face::after{top:.58em;width:.33em;height:.18em;opacity:.92}
html[data-puni-colors="cvd"] .piece .face::before, html[data-puni-colors="cvd"] .piece .face::after, html[data-puni-colors="cvd"] .avatar .face::before, html[data-puni-colors="cvd"] .avatar .face::after{background:rgba(255,145,160,.31)}


@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .board-card.glass{background:linear-gradient(155deg,var(--board-glass-a),var(--board-glass-b))!important}
}

@media(prefers-reduced-motion:reduce){
  .theme-bg-canvas{opacity:.94}
}



html[data-puni-motion="on"] .piece.easter-flat{animation-name:easterFlat!important;animation-duration:.8s!important;animation-timing-function:cubic-bezier(.2,.8,.2,1)!important;animation-iteration-count:1!important;animation-fill-mode:none!important}
html[data-puni-motion="on"] .piece.easter-big-squish{animation-name:easterBigSquish!important;animation-duration:1.02s!important;animation-timing-function:cubic-bezier(.2,.85,.25,1)!important;animation-iteration-count:1!important;animation-fill-mode:none!important}
html[data-puni-motion="off"] .piece.easter-flat, html[data-puni-motion="off"] .piece.easter-big-squish{animation-play-state:running!important}
.piece.easter-gold, .piece.easter-gold.top, .piece.easter-gold.bottom{border-color:#fff0a1!important;background:radial-gradient(circle at 28% 18%,#fff 0 7%,transparent 18%),radial-gradient(circle at 40% 32%,#fff6b8 0 12%,#ffd85a 34%,#e8a928 61%,#8e5414 100%)!important;box-shadow:inset 0 2px 3px #fff9,inset 7px 10px 14px #fff4,inset -8px -11px 16px #0004,0 0 0 .3px rgba(255,214,109,.78)!important;filter:drop-shadow(0 7px 8px #0007) drop-shadow(0 0 11px #ffd45d8c)!important}
body[data-theme="space"] .piece.easter-gold, body[data-theme="space"] .piece.easter-gold.top, body[data-theme="space"] .piece.easter-gold.bottom{box-shadow:inset 0 2px 3px #fff9,inset 7px 10px 14px #fff4,inset -8px -11px 16px #0004,0 0 0 .3px rgba(255,214,109,.84),0 0 12px rgba(255,212,93,.34)!important}



@media(min-width:861px){
  .goal-progress{grid-template-columns:repeat(3,minmax(0,1fr));min-width:0;width:100%}
  .goal-chip{min-width:0;width:100%;box-sizing:border-box;padding-left:0;padding-right:0;overflow:hidden}
  .goal-star-badge{width:min(39px,100%);height:auto;aspect-ratio:1}
  .goal-star-symbol{font-size:clamp(29px,1.9vw,36px)}
}



body.mode-local .top-panel{transform:rotate(180deg);transform-origin:50% 50%}
body.mode-local .top-panel.active{transform:rotate(180deg)}

body.mode-local .bottom-panel{transform:none}
body.mode-local .bottom-panel.active{transform:translateY(-4px)}
@media(max-width:520px){body.mode-local .bottom-panel.active{transform:translateY(-1px)}}


.opening-actions .opening-online{border-color:#71e8ff66;background:linear-gradient(135deg,#173a55,#25356f);box-shadow:0 8px 22px #56cfff1f}
.opening-actions .opening-online:hover{border-color:#9df2ff9c}
.online-card{width:min(650px,100%);max-height:min(91dvh,820px);overflow:auto;overscroll-behavior:contain;border-radius:26px;padding:24px;position:relative}
.online-close{position:absolute;right:12px;top:11px;width:36px;height:36px;border:1px solid #ffffff24;border-radius:50%;background:var(--control);color:var(--text);font-size:22px;cursor:pointer}
.online-card h2{font-size:clamp(25px,6vw,36px);margin:2px 40px 9px 0}.online-card .kicker{margin:0;color:var(--gold);font-size:11px;font-weight:1000;letter-spacing:.18em}
.online-intro, .online-privacy{color:var(--muted);line-height:1.55}.online-privacy{font-size:11px;margin:16px 0 0}
.online-role-choice{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0 8px}.online-role-choice button, .online-copy, .online-steps button, .online-verify button{min-height:46px;border:1px solid #ffffff25;border-radius:14px;background:var(--control);color:var(--text);font-weight:950;cursor:pointer;padding:0 14px}.online-role-choice .primary, .online-steps .primary, .online-verify .primary{background:linear-gradient(135deg,#4f72e7,#715bd7);border-color:#aac3ff52}
.online-steps{display:grid;gap:9px;margin-top:14px}.online-step-text{font-weight:850;line-height:1.5;margin:0}.online-code-wrap{display:grid;gap:5px;font-size:12px;font-weight:900;color:var(--muted)}
.online-code-wrap textarea{width:100%;box-sizing:border-box;min-height:108px;max-height:190px;resize:vertical;border:1px solid #ffffff25;border-radius:12px;background:#070b1fd9;color:#f5f7ff;padding:10px;font:11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-all}
.online-code-wrap textarea:focus{outline:2px solid #80dcff88;outline-offset:1px}.online-copy{justify-self:start;min-height:38px;padding:0 18px}
.online-verify{display:grid;justify-items:center;text-align:center;gap:8px;margin:16px 0 4px;padding:18px;border:1px solid #ffd45d4f;border-radius:18px;background:#2b25427c}.online-verify small{color:var(--muted);font-weight:850}.online-verify strong{font-size:clamp(39px,11vw,65px);letter-spacing:.10em;font-variant-numeric:tabular-nums;color:#fff6bd;text-shadow:0 0 20px #ffd45d55}.online-verify p{margin:0;color:var(--text);font-weight:800;line-height:1.5}
.online-progress{display:flex;align-items:center;gap:9px;padding:12px 2px;color:var(--text)}.online-dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 12px #7df2af;animation:onlinePulse .85s ease-in-out infinite alternate}@keyframes onlinePulse{to{opacity:.45;transform:scale(.75)}}
.online-error{border:1px solid #ff718b55;border-radius:12px;background:#501a2a77;color:#ffdce4;padding:10px 12px;font-size:12px;line-height:1.45}
.online-status{margin-left:auto;display:flex;align-items:center;gap:6px;white-space:nowrap;color:#bfffd8;font-size:10px}.online-status>span{color:#7df2af;text-shadow:0 0 8px #7df2af}.online-status.checking{color:#fff0bd}.online-status.checking>span{color:#ffd45d}.online-status.offline{color:#ffd3dc}.online-status.offline>span{color:#ff718b}
.mode-online #cpuWrap{display:none}
@media(max-width:600px){.online-card{padding:20px 15px}.online-role-choice{grid-template-columns:1fr}.online-code-wrap textarea{min-height:95px}.online-status{width:100%;margin-left:0;justify-content:flex-start}}
.online-reconnect{border:1px solid #ffd45d55;border-radius:999px;background:#322a18;color:#fff2b0;font-size:10px;font-weight:950;min-height:28px;padding:0 10px;cursor:pointer}.online-reconnect:hover{border-color:#ffe99a}



.online-network-mode{margin:8px 0 2px;padding:8px 10px;border-radius:11px;border:1px solid #ffffff1d;background:#0b1128aa;color:var(--muted);font-size:11px;font-weight:850;line-height:1.45}
.online-network-mode.configured{border-color:#7df2af3d;color:#caffdc;background:#10291d99}.online-network-mode.direct{border-color:#ffd45d35;color:#fff1bd;background:#30281388}.online-network-mode.error{border-color:#ff718b55;color:#ffdce4;background:#501a2a77}


.online-method-choice{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:12px 0 4px;padding:4px;border:1px solid #ffffff17;border-radius:13px;background:#070b1f66}.online-method-choice button{min-height:36px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-weight:900;cursor:pointer}.online-method-choice button.active{background:#ffffff12;color:var(--text);box-shadow:inset 0 0 0 1px #ffffff1e}.online-room-flow{display:grid;gap:10px;margin-top:14px}.online-room-code-card{display:grid;justify-items:center;gap:7px;padding:17px 12px;border:1px solid #7df2af45;border-radius:18px;background:#10291d77;text-align:center}.online-room-code-card small{color:var(--muted);font-weight:900}.online-room-code-card strong{font:1000 clamp(24px,6vw,38px)/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.045em;color:#d7ffe5;text-shadow:0 0 15px #7df2af38;overflow-wrap:anywhere}.online-room-code-card button, .online-room-flow>button{min-height:42px;border:1px solid #ffffff25;border-radius:12px;background:var(--control);color:var(--text);font-weight:950;cursor:pointer;padding:0 16px}.online-room-flow>button.primary{background:linear-gradient(135deg,#4f72e7,#715bd7);border-color:#aac3ff52}.online-room-input{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:900}.online-room-input input{width:100%;box-sizing:border-box;min-height:48px;border:1px solid #ffffff25;border-radius:12px;background:#070b1fd9;color:#fff;padding:0 12px;text-transform:uppercase;font:900 16px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em}.online-room-input input:focus{outline:2px solid #80dcff88;outline-offset:1px}
@media(max-width:600px){.online-method-choice{grid-template-columns:1fr 1fr}.online-room-code-card strong{font-size:clamp(20px,6.4vw,30px)}}


#onlineLayer{z-index:150}



.online-comm-dock{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:96;display:grid;justify-items:end;gap:8px;pointer-events:none}
.online-comm-dock.hidden{display:none}.online-chat-toggle, .online-comm-panel{pointer-events:auto}
.online-chat-toggle{min-width:54px;height:54px;padding:0 13px;border:1px solid #ffffff70;border-radius:999px;background:linear-gradient(145deg,#ff8fc8ed,#f15da9ed);color:#fff;font-size:23px;font-weight:950;box-shadow:0 12px 30px #0007,0 0 0 3px #ffffff18 inset;cursor:pointer;touch-action:manipulation;display:flex;align-items:center;gap:6px;transform-origin:70% 100%;transition:transform .18s ease,filter .18s ease}
.online-chat-toggle:hover{filter:brightness(1.06)}.online-chat-toggle:active{transform:scale(.9,.82)}.online-chat-toggle:disabled{opacity:.45;cursor:not-allowed}.online-chat-toggle-label{font-size:10px;white-space:nowrap}.online-chat-toggle:focus-visible, .online-comm-panel button:focus-visible{outline:3px solid #80dcffaa;outline-offset:2px}
.online-comm-panel{position:relative;width:min(350px,calc(100vw - 20px));padding:10px 12px 12px;border:1px solid #ffffff68;border-radius:28px 28px 23px 23px;background:linear-gradient(180deg,#fffdf4f5,#fff2f8f2);color:#493447;box-shadow:0 18px 55px #0009,0 0 0 2px #ffffff40 inset;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transform-origin:72% 100%}
.online-comm-panel:not(.hidden){animation:onlineCommMunyuu .34s cubic-bezier(.2,.85,.25,1.15)}
.online-comm-handle{width:48px;height:5px;border-radius:999px;background:#e89ac2b8;margin:0 auto 7px;box-shadow:0 1px 0 #fff inset}
.online-comm-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;padding:0 2px}.online-comm-head strong{font-size:13px;color:#5b3652}.online-comm-head button{width:31px;height:31px;border:1px solid #eeb8d1;border-radius:50%;background:#fff7fb;color:#a94379;font-size:19px;font-weight:950;cursor:pointer}
.online-chat-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.online-chat-grid button{min-height:40px;border:1px solid #edbfd5;border-radius:16px 18px 15px 19px;background:linear-gradient(180deg,#fff,#fff5fa);color:#55394e;font-size:12px;font-weight:950;padding:7px 8px;cursor:pointer;touch-action:manipulation;line-height:1.25;box-shadow:0 4px 12px #9e41601a,0 1px 0 #fff inset;transition:transform .14s ease,filter .14s ease}.online-chat-grid button:nth-child(2n){border-radius:18px 15px 19px 14px}.online-chat-grid button:active{transform:scale(.94,.88)}
.online-chat-grid-extra{margin-top:6px}.online-comm-more{display:block;margin:6px auto 0;padding:3px 13px;min-height:28px;border:1px solid #e9c4d6;border-radius:999px;background:#ffffffb8;color:#7b5471;font-size:10px;font-weight:900;cursor:pointer}.online-comm-more[aria-expanded="true"]{background:#fbe6f1}
.online-reaction-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px;padding-top:8px;border-top:1px dashed #dfb8cb}.online-reaction-row button{min-height:42px;border:1px solid #e8c8d7;border-radius:18px;background:#fffdfdcc;color:#493447;font-size:22px;cursor:pointer;touch-action:manipulation;box-shadow:0 4px 12px #9e416015}.online-reaction-row button:active{transform:scale(.9,.84)}
.online-chat-grid button:disabled, .online-reaction-row button:disabled{opacity:.42;cursor:not-allowed}
.online-comm-visibility{display:flex;align-items:center;gap:7px;margin-top:8px;color:#765e70;font-size:10px;font-weight:850;line-height:1.3}.online-comm-visibility input{width:18px;height:18px;accent-color:#63d69c}.online-comm-note{display:block;margin-top:5px;color:#8a7082;font-size:9px;text-align:center}
.online-comm-bubble-layer{position:fixed;inset:0;z-index:94;pointer-events:none;overflow:hidden}.online-comm-bubble{position:absolute;top:max(92px,12dvh);max-width:min(72vw,360px);padding:10px 15px 11px;border:1px solid #ffffffa0;background:linear-gradient(180deg,#fffdf7f4,#fff2f8f0);color:#4b3545;box-shadow:0 11px 30px #0005,0 0 0 2px #ffffff30 inset;animation:onlineCommBubble 2.45s ease forwards;filter:drop-shadow(0 3px 3px #0002)}
.online-comm-bubble::after{content:"";position:absolute;bottom:-9px;width:18px;height:10px;background:#fff2f8f0;clip-path:polygon(0 0,100% 0,50% 100%);border:0;border-radius:0;transform:none;filter:drop-shadow(0 3px 2px #00000018)}.online-comm-bubble.local{right:max(14px,env(safe-area-inset-right));border-radius:25px 22px 25px 18px}.online-comm-bubble.local::after{right:24px}.online-comm-bubble.remote{left:max(14px,env(safe-area-inset-left));border-radius:22px 25px 18px 25px;background:linear-gradient(180deg,#eef8fff4,#e7f3fff0)}.online-comm-bubble.remote::after{left:24px;background:#e7f3fff0}.online-comm-bubble.reaction{padding:7px 14px}.online-comm-bubble small{display:block;color:#9d6682;font-size:9px;font-weight:950;margin-bottom:1px}.online-comm-bubble.remote small{color:#5b78a0}.online-comm-bubble strong{display:block;font-size:14px;line-height:1.35;overflow-wrap:anywhere}.online-comm-bubble.reaction strong{font-size:28px;line-height:1.05}
@keyframes onlineCommMunyuu{0%{opacity:0;transform:translateY(42px) scale(.88,.72)}52%{opacity:1;transform:translateY(-4px) scale(1.035,1.06)}72%{transform:translateY(1px) scale(.985,.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes onlineCommBubble{0%{opacity:0;transform:translateY(12px) scale(.78,.7)}14%{opacity:1;transform:translateY(-2px) scale(1.04,1.08)}25%{transform:translateY(0) scale(.99,.97)}78%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-13px) scale(.96)}}
@media(max-width:520px){.online-comm-dock{left:0;right:0;bottom:0;justify-items:end;padding:0 max(9px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom));gap:7px}.online-chat-toggle{min-width:52px;height:52px;padding:0 12px}.online-comm-panel{justify-self:center;width:min(100%,390px);border-radius:31px 31px 20px 20px;padding:9px 12px 12px;max-height:min(56dvh,430px);overflow:auto;overscroll-behavior:contain}.online-chat-grid{gap:5px}.online-chat-grid button{font-size:11px;min-height:39px;padding:6px}.online-comm-bubble{top:max(78px,10dvh);max-width:78vw}.online-chat-toggle-label{display:none}}
@media(prefers-reduced-motion:reduce){.online-comm-panel:not(.hidden){animation:none}.online-chat-toggle{transition:none}.online-chat-grid button, .online-reaction-row button{transition:none}.online-comm-bubble{animation-duration:2.1s;animation-name:onlineCommBubbleReduced}@keyframes onlineCommBubbleReduced{0%{opacity:0}10%,82%{opacity:1}100%{opacity:0}}}

@media(max-width:430px){.face{font-size:clamp(12px,4.3vw,18px)}.manual-examples{grid-template-columns:1fr}.end-remote-note{font-size:12px}}







body.game-active .player-panel{transition:.18s transform,.18s opacity,.18s filter,.18s border-color,.18s box-shadow}
body.game-active .player-panel:not(.active){opacity:.70;filter:saturate(.78) brightness(.84);transform:scale(.975)}
body.game-active .player-panel.active{opacity:1;filter:none;transform:translateY(-5px) scale(1.015);border-color:#ffffff58;box-shadow:0 20px 55px #0007,0 0 34px #ffffff13}
.goal-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding:5px 7px;border-radius:10px;background:#080b13a6;border:1px solid #ffffff10}
.goal-summary span{font-size:13px;font-weight:1000;color:#fff5c5;white-space:nowrap}.goal-summary span b{font-size:17px;color:var(--gold)}
.goal-summary small{font-size:8px;font-weight:900;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}


.selection-prompt{margin:8px 22px 0;padding:7px 11px;border-radius:999px;background:#10271fdb;border:1px solid #7df2af55;box-shadow:0 5px 18px #0005,0 0 16px #7df2af16;display:grid;grid-template-columns:auto auto 1fr;align-items:center;justify-content:center;gap:7px;color:#effff5}
.selection-prompt>span{font-size:15px}.selection-prompt b{font-size:12px;white-space:nowrap}.selection-prompt small{font-size:10px;color:#bde8cf;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


.cell.selected{box-shadow:inset 0 0 0 3px #fff,0 0 25px #ffffff55!important;filter:brightness(1.10)!important}
.cell.legal{box-shadow:inset 0 0 0 3px var(--green),0 0 21px #7df2af45!important}
.cell.legal-star{box-shadow:inset 0 0 0 3px var(--gold),0 0 27px #ffd45d88!important;filter:brightness(1.10)!important}
.cell.legal-star .move-arrow{border-color:var(--gold);color:#fff7d0;box-shadow:0 4px 12px #0008,0 0 18px #ffd45d72}


.board .cell.legal{background:linear-gradient(rgba(67,190,118,.22),rgba(67,190,118,.14)),linear-gradient(145deg,var(--tile1),var(--tile2))!important;box-shadow:inset 0 0 0 3px var(--green),inset 0 0 18px #7df2af38,0 0 24px #7df2af66!important}
.board .cell.legal-star{background:linear-gradient(rgba(255,212,93,.24),rgba(255,212,93,.15)),linear-gradient(145deg,var(--tile1),var(--tile2))!important;box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 20px #ffd45d3d,0 0 29px #ffd45d99!important;filter:brightness(1.10)!important}



.board-net-status{display:inline-flex;align-items:center;gap:5px;min-height:22px;padding:2px 7px;border-radius:999px;background:#0a2518c9;border:1px solid #7df2af55;color:#dfffee;font-size:9px;font-weight:1000;white-space:nowrap}
.board-net-status i{width:7px;height:7px;border-radius:50%;background:#7df2af;box-shadow:0 0 9px #7df2af}
.board-net-status.checking{background:#30260bc9;border-color:#ffd45d66;color:#fff1b9}.board-net-status.checking i{background:var(--gold);box-shadow:0 0 9px #ffd45d}
.board-net-status.offline{background:#321019cf;border-color:#ff718b66;color:#ffdce3}.board-net-status.offline i{background:var(--danger);box-shadow:0 0 9px #ff718b}
body.mode-online .board-card.player-facing .board-caption::after{display:none}


.beginner-guide{display:block;padding:9px 10px}
.quick-rules-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:0 2px 7px!important;background:none!important}
.quick-rules-head>strong{font-size:10px;letter-spacing:.08em;color:#fff1b9}.quick-rules-head button{min-height:27px;padding:0 9px;border-radius:999px;border:1px solid #ffffff1b;background:#0b1018;color:var(--muted);font-size:9px;font-weight:900;cursor:pointer}
.quick-rule-items{display:grid!important;grid-template-columns:repeat(4,1fr);gap:7px!important;background:none!important;padding:0!important}
.quick-rules .quick-rule-items .quick-rule-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:13px;background:#0d0a1b55}
.quick-guide-compact{display:none!important;padding:5px 8px!important;border-radius:10px!important;background:#0d0a1b55!important;text-align:center;color:var(--muted);font-size:10px;line-height:1.4}
.beginner-guide[data-guide="compact"]{padding:7px 10px}
.beginner-guide[data-guide="compact"] .quick-rule-items{display:none!important}
.beginner-guide[data-guide="compact"] .quick-guide-compact{display:block!important}
.beginner-guide[data-guide="compact"] .quick-rules-head{padding-bottom:4px!important}


.end-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:19px}
.end-actions .end-primary{grid-column:1/-1;min-height:52px;font-size:16px;border-radius:14px}
.end-actions .end-secondary{min-height:42px;background:#111622}
.end-actions .end-tertiary{grid-column:1/-1;justify-self:center;min-height:32px;padding:0 12px!important;border-color:transparent;background:transparent;color:var(--muted);font-size:11px;font-weight:800;box-shadow:none}
.end-actions .end-tertiary:hover{background:#ffffff08;transform:none}


.mobile-match-hud{display:none}
.mobile-side-hud{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:5px;padding:5px 7px;border-radius:10px;opacity:.65;filter:saturate(.8);transition:.16s opacity,.16s background,.16s box-shadow}
.mobile-side-hud.active{opacity:1;filter:none;background:#ffffff0b;box-shadow:inset 0 0 0 1px #ffffff1f,0 0 16px #ffffff09}
.mobile-side-hud strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-side-hud span{font-size:10px;font-weight:900;white-space:nowrap}.mobile-star-score b{color:var(--gold);font-size:12px}.mobile-sleep-score{color:var(--muted)}
.mobile-team-dot{width:9px;height:9px;border-radius:50%;box-shadow:0 0 8px currentColor}.mobile-side-hud.top .mobile-team-dot{background:var(--pt-mid);color:var(--pt-edge)}.mobile-side-hud.bottom .mobile-team-dot{background:var(--pb-mid);color:var(--pb-edge)}
.mobile-hud-vs{align-self:center;font-size:8px;font-weight:1000;letter-spacing:.08em;color:var(--muted)}

@media(max-width:860px){
  .quick-rule-items{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
  body.game-active .mobile-match-hud{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:4px;align-items:stretch;margin-top:5px;padding:4px;border-radius:12px}
  body.game-active .arena{display:block;margin-top:5px}
  body.game-active .arena>.player-panel{display:none!important}
  body.game-active .board-card{width:100%;max-width:680px;margin:0 auto}
  body.game-active .status{grid-template-columns:auto minmax(0,1fr);padding-right:7px}
  body.game-active .online-status{font-size:9px}
  .goal-summary{margin-top:5px;padding:3px 5px}.goal-summary span{font-size:11px}.goal-summary span b{font-size:14px}
  .selection-prompt{margin:6px 19px 0;padding:5px 8px;gap:5px}.selection-prompt>span{font-size:13px}.selection-prompt b{font-size:10px}.selection-prompt small{font-size:9px}
  .board-net-status{font-size:8px;min-height:19px;padding:1px 5px}.board-net-status i{width:6px;height:6px}
  .board-caption{gap:5px}.board-caption #targetHint{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.mode-online .board-caption .rule-id{display:none}
  .end-actions{grid-template-columns:1fr}.end-actions .end-primary, .end-actions .end-tertiary{grid-column:1}.end-actions .end-secondary{min-height:40px}.end-actions .end-primary{min-height:50px}
}

@media(max-width:430px){
  .mobile-match-hud{font-size:9px}.mobile-side-hud{grid-template-columns:auto minmax(0,1fr) auto;gap:4px;padding:4px 5px}.mobile-side-hud .mobile-sleep-score{grid-column:2/4;font-size:8px;justify-self:start}.mobile-side-hud strong{font-size:10px}.mobile-side-hud span{font-size:9px}
  .selection-prompt{grid-template-columns:auto 1fr}.selection-prompt small{grid-column:2;display:block}.selection-prompt b{white-space:normal}
}

@media(max-width:430px){.room-speech-bubble{font-size:11px;padding:6px 8px;max-width:46vw}}



.face{width:68%;height:60%;font-size:0!important;line-height:0;text-shadow:none!important;position:relative;display:block;overflow:visible;color:#241528}
.piece .face{width:70%;height:62%}.avatar .face{width:68%;height:62%;z-index:2}


.puni-eye-dot{fill:#241528;stroke:none}
.puni-eye-stroke{fill:none;stroke:#241528;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 0 rgba(255,255,255,.18))}







.piece .face::before, .piece .face::after, .avatar .face::before, .avatar .face::after{content:none!important;display:none!important}
@media(max-width:700px){.piece .face{width:74%;height:66%}.avatar .face{width:72%;height:66%}.puni-eye-stroke{stroke-width:3.9}}



.puni-rendered{isolation:isolate;background:none!important;border:0!important;box-shadow:none!important;overflow:visible}

.faceoff-puni.puni-rendered{position:relative}
.puni-rendered::before, .puni-rendered::after{content:none!important;display:none!important}
.puni-shell-svg{position:absolute;inset:-1.5%;width:103%;height:103%;z-index:0;overflow:visible;pointer-events:none;filter:drop-shadow(0 7px 7px #0006)}
.avatar .puni-shell-svg{filter:drop-shadow(0 4px 5px #0006)}
.puni-shell-body{stroke-width:1.05;vector-effect:non-scaling-stroke}
.top .puni-shell-body{stroke:var(--pt-edge)}.bottom .puni-shell-body{stroke:var(--pb-edge)}
.top .puni-stop-hi{stop-color:var(--pt-hi)}.top .puni-stop-light{stop-color:var(--pt-light)}.top .puni-stop-mid{stop-color:var(--pt-mid)}.top .puni-stop-low{stop-color:var(--pt-low)}.top .puni-stop-deep{stop-color:var(--pt-deep)}
.bottom .puni-stop-hi{stop-color:var(--pb-hi)}.bottom .puni-stop-light{stop-color:var(--pb-light)}.bottom .puni-stop-mid{stop-color:var(--pb-mid)}.bottom .puni-stop-low{stop-color:var(--pb-low)}.bottom .puni-stop-deep{stop-color:var(--pb-deep)}
.puni-shell-shine{fill:#fff;opacity:.28;filter:blur(.18px)}
.puni-core-star{fill:#fff1a0;opacity:.105;transform-box:fill-box;transform-origin:center;transition:opacity .18s ease,filter .18s ease,transform .18s ease}
.puni-rendered.star-reactive .puni-core-star{opacity:.19;filter:drop-shadow(0 0 2px #ffe06a66)}
.puni-rendered.victory-star .puni-core-star{opacity:.25;filter:drop-shadow(0 0 4px #ffe06aa8);transform:scale(1.04)}
.puni-rendered.star-get-pulse .puni-core-star{animation:puniCoreGet .42s ease-out 1}
@keyframes puniCoreGet{0%{opacity:.12;transform:scale(.85)}35%{opacity:.72;filter:drop-shadow(0 0 8px #fff4a8);transform:scale(1.42)}100%{opacity:.13;transform:scale(1)}}


.face{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:3!important;display:block!important;overflow:visible!important;pointer-events:none;font-size:0!important;line-height:0!important;text-shadow:none!important;transform-origin:50% 58%}
.puni-face-svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.puni-eye{transform-box:fill-box;transform-origin:center;transition:transform .075s ease,opacity .075s ease}
.puni-face-svg, .puni-face-svg *{shape-rendering:geometricPrecision}
.puni-eye-dot, .puni-eye-fill, .puni-eye-focus-fill, .puni-eye-squeeze-fill, .puni-brow-fill, .puni-mouth-fill{fill:#241528;stroke:none}
.puni-eye-stroke{fill:none;stroke:#241528;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.4}
.puni-cheek{fill:rgba(255,130,155,.37);filter:none}
html[data-puni-colors="cvd"] .puni-cheek{fill:rgba(255,145,160,.29)}
.face.blink .puni-eye{transform:scaleY(.10)}html[data-puni-motion="off"] .face.blink .puni-eye{transform:none}

@media(max-width:700px){.puni-cheek{transform:scale(1.07);transform-box:fill-box;transform-origin:center}}


.piece.puni-rendered, .avatar.puni-rendered, .opening-logo.puni-rendered, .fx-piece.puni-rendered, .faceoff-puni.puni-rendered{border-radius:0!important;background:none!important;border:0!important;box-shadow:none!important;outline:none!important}
.opening-logo:not(.puni-rendered){visibility:hidden!important;background:none!important;border-color:transparent!important;box-shadow:none!important}
.opening-logo.puni-rendered{position:relative;overflow:visible;visibility:visible}.opening-logo.puni-rendered .face{z-index:3}
.opening-logo.puni-rendered .puni-shell-svg{filter:drop-shadow(0 18px 25px #0007)}


@keyframes puniLifeDev26{
  0%,12%,25%,39%,52%,66%,78%,100%{transform:translateY(0) scale(1,1)}
  7%{transform:translateY(.25%) scale(1.010,.991)}
  18%{transform:translateY(-.28%) scale(.994,1.008)}
  32%{transform:translateY(.35%) scale(1.012,.990)}
  60%{transform:translateY(-.30%) scale(.995,1.009)}
  84%{transform:translateY(4.2%) scale(1.085,.91)}
  89%{transform:translateY(-4.5%) scale(.945,1.095)}
  94%{transform:translateY(1.1%) scale(1.035,.968)}
  97%{transform:translateY(0) scale(.992,1.012)}
}
html[data-puni-motion="on"] .piece.puni-rendered{animation-name:puniLifeDev26!important}
@keyframes selectedPuniDev26{from{transform:translateY(0) scale(1,1)}to{transform:translateY(-1.8%) scale(.978,1.052)}}
.cell.selected .piece.puni-rendered{animation:selectedPuniDev26 1.30s cubic-bezier(.42,0,.34,1) infinite alternate!important}
html[data-puni-motion="on"] .cell.selected .piece.puni-rendered{animation-name:selectedPuniDev26!important}


.piece.puni-rendered>.puni-idle-motion{position:absolute;inset:0;display:block;transform-origin:50% 84%;isolation:isolate;overflow:visible;will-change:transform;animation:puniLifeDev26 var(--puni-life,10.6s) cubic-bezier(.45,.05,.35,1) infinite}
html[data-puni-motion="on"] .piece.puni-rendered>.puni-idle-motion{animation-name:puniLifeDev26!important;animation-duration:var(--puni-life,10.6s)!important;animation-timing-function:cubic-bezier(.45,.05,.35,1)!important;animation-iteration-count:infinite!important;animation-play-state:running!important}
.cell.selected .piece.puni-rendered>.puni-idle-motion{animation:selectedPuniDev26 1.30s cubic-bezier(.42,0,.34,1) infinite alternate!important}
html[data-puni-motion="on"] .cell.selected .piece.puni-rendered>.puni-idle-motion{animation-name:selectedPuniDev26!important;animation-duration:1.30s!important;animation-timing-function:cubic-bezier(.42,0,.34,1)!important;animation-direction:alternate!important;animation-iteration-count:infinite!important;animation-play-state:running!important}
.piece.return-preview>.puni-idle-motion, .piece.easter-flat>.puni-idle-motion, .piece.easter-big-squish>.puni-idle-motion, .piece.easter-wave>.puni-idle-motion{animation:none!important;transform:none!important}
html[data-puni-motion="off"] .piece.puni-rendered>.puni-idle-motion{animation:none!important;transform:none!important}
.cell.selected .piece.puni-rendered{box-shadow:none!important;border:0!important;outline:none!important}


.fx-piece .fx-face{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:3!important;transition:opacity .055s linear,transform .085s ease}
.fx-piece .fx-face-normal{opacity:1;transform:scale(1)}.fx-piece .fx-face-impact{opacity:0;transform:scale(.84,1.02)}
.fx-piece.impact-face .fx-face-normal{opacity:0;transform:scale(1.06,.82)}.fx-piece.impact-face .fx-face-impact{opacity:1;transform:scale(1.05,.88)}






.puni-room-puni .room-body{stroke-width:.72;vector-effect:non-scaling-stroke}
.puni-room-puni .room-core-star{fill:#fff1a0;opacity:.10;filter:drop-shadow(0 0 1.6px rgba(255,231,115,.30));pointer-events:none}
.puni-room-puni .room-shine{fill:#fff;opacity:.26}
.puni-room-puni .room-cheek{fill:rgba(255,132,160,.38);filter:drop-shadow(0 0 2px rgba(255,170,190,.15))}
.puni-room-puni .room-eye{fill:#241528;stroke:none}.puni-room-puni .room-mouth, .puni-room-puni .room-squeeze-eye{fill:none;stroke:#241528;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 0 rgba(255,255,255,.18))}.puni-room-puni .room-mouth{stroke-width:2.25}.puni-room-puni .room-squeeze-eye{stroke-width:2.35}

@media(prefers-reduced-motion:reduce){
  .puni-rendered.star-get-pulse .puni-core-star{animation-duration:.18s!important;animation-iteration-count:1!important}
  
}
html[data-puni-motion="off"] .piece.puni-rendered, html[data-puni-motion="off"] .avatar.puni-rendered{animation:none!important}


.bench-puni.puni-rendered, .easter-peek.puni-rendered, .easter-giant-puni.puni-rendered{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.bench-puni.puni-rendered::before{content:none!important;display:none!important}
.bench-puni.puni-rendered .puni-shell-svg{inset:-2%;width:104%;height:104%;filter:drop-shadow(0 2px 2px #0006)}
.bench-puni.puni-rendered .face{z-index:3!important}.bench-puni.puni-rendered .puni-cheek{display:none}
.bench-puni.puni-rendered .puni-core-star{opacity:.09}
.easter-peek.puni-rendered .puni-shell-svg{filter:drop-shadow(0 9px 20px #0007)}
.easter-giant-puni.puni-rendered .puni-shell-svg{filter:drop-shadow(0 35px 45px #0007)}

.easter-gold .puni-stop-hi{stop-color:#fffdf0!important}.easter-gold .puni-stop-light{stop-color:#fff6b8!important}.easter-gold .puni-stop-mid{stop-color:#ffd85a!important}.easter-gold .puni-stop-low{stop-color:#e8a928!important}.easter-gold .puni-stop-deep{stop-color:#8e5414!important}.easter-gold .puni-shell-body{stroke:#fff0a1!important}.easter-gold .puni-core-star{opacity:.22;filter:drop-shadow(0 0 3px #fff0a1)}

.cell .piece.puni-rendered.easter-gold, .cell .piece.puni-rendered.easter-gold.top, .cell .piece.puni-rendered.easter-gold.bottom{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}


html[data-puni-motion="off"] .cell.selected .piece.puni-rendered, html[data-puni-motion="off"] .bench-puni.puni-rendered{animation:none!important}
html[data-puni-motion="off"] .puni-rendered.star-get-pulse .puni-core-star{animation:none!important;opacity:.34;filter:drop-shadow(0 0 3px #ffe06a88)}


html, body{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.app-shell{width:100%;max-width:1160px;min-width:0;overflow-x:clip}
.app-shell>*{min-width:0;max-width:100%}
.hero, .brand-lockup, .brand-copy, .controls, .control-buttons, .status, .arena, .board-card, .board-line, .board, .quick-rules{min-width:0;max-width:100%}
.arena>*{min-width:0;max-width:100%}
.brand-lockup{flex:1 1 auto;overflow:hidden}.brand-copy{overflow:hidden}
.hero h1{min-width:0;max-width:100%;white-space:nowrap}
.hero p{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.control-buttons{min-width:0;max-width:100%;box-sizing:border-box}
@media(max-width:520px){
.app-shell{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right));padding-top:max(12px,calc(env(safe-area-inset-top) + 8px))}
body.game-active .hero{width:100%;max-width:100%;overflow:hidden}body.game-active .brand-lockup{width:100%;max-width:100%;min-width:0}body.game-active .brand-lockup>.brand-copy{min-width:0;max-width:calc(100% - 34px);overflow:hidden}
body.game-active .hero h1{font-size:clamp(18px,6.2vw,22px)!important;max-width:100%;overflow:hidden;padding-top:.30em}body.game-active .hero p{font-size:clamp(8px,2.7vw,10.5px)!important;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.controls{width:100%;max-width:100%;overflow:visible}.control-buttons{width:100%!important;max-width:100%!important;min-width:0!important;gap:4px!important;overflow:hidden}.control-buttons button{min-width:0!important;max-width:100%}.control-buttons .icon-btn{flex:0 0 32px!important;width:32px!important;min-width:32px!important;padding:0!important}.control-buttons #newGame{flex:1 1 0!important;width:auto!important;min-width:0!important;padding-left:5px!important;padding-right:5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.control-buttons #resign{flex:0 1 54px!important;width:54px!important;min-width:0!important;padding-left:3px!important;padding-right:3px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{width:100%;min-width:0;overflow:hidden}.status>*{min-width:0;max-width:100%}.arena{width:100%;min-width:0;overflow:hidden}.board-card{width:100%;min-width:0;overflow:hidden}.board-caption{min-width:0;overflow:hidden}.board-caption #targetHint{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(max-width:300px){body.game-active .logo-mark{width:26px!important;height:24px!important;min-width:26px!important;flex-basis:26px!important}body.game-active .brand-lockup{gap:5px!important}body.game-active .brand-lockup>.brand-copy{max-width:calc(100% - 31px)}body.game-active .hero h1{font-size:17px!important}body.game-active .hero h1 small{display:none!important}body.game-active .hero p{display:block!important;font-size:7.5px!important;letter-spacing:-.01em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.control-buttons{gap:2px!important}.control-buttons .icon-btn{flex-basis:25px!important;width:25px!important;min-width:25px!important;font-size:13px!important}.control-buttons #resign{flex-basis:40px!important;width:40px!important;font-size:9px!important}.control-buttons #newGame{font-size:9px!important}.status{padding-left:7px!important;padding-right:7px!important}.message{font-size:10px!important}}

.sr-only{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}
.cell:focus-visible{outline:3px solid #80dcff!important;outline-offset:2px;z-index:12}



.overlay{
  padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
}


#closeHelp, #closeStory, #closeOnline, #closePuniRoom{touch-action:manipulation}
#closeHelp::before, #closeStory::before, #closeOnline::before, #closePuniRoom::before{
  content:"";position:absolute;inset:-6px;border-radius:inherit;
}
#closePuniRoom{position:relative}

.end-actions .end-secondary, .end-actions .end-tertiary{min-height:44px}
.online-reconnect{min-height:44px;font-size:11px;touch-action:manipulation}
.quick-rules-head button{position:relative;min-height:36px;font-size:11px}
.quick-rules-head button::before{content:"";position:absolute;inset:-4px 0;border-radius:inherit}

@media(max-width:700px){
  .settings-fields select{height:44px;font-size:13px}
  .settings-fields label span{font-size:12px}
  .help-tab{min-height:44px;font-size:13px}
  .selection-prompt b{font-size:11px}
  .selection-prompt small{font-size:10px}
  .board-caption{font-size:11px}
  body.game-active .online-status{font-size:10px}
  .mobile-side-hud strong{font-size:11px}
  .mobile-side-hud span{font-size:10px}
  .mobile-side-hud .mobile-sleep-score{font-size:10.5px}
  .mobile-hud-vs{font-size:10.5px}
  .end-actions .end-secondary, .end-actions .end-tertiary{min-height:44px}
}

@media(max-width:600px){
  .opening-extra-actions button, .opening-extra-actions .opening-language{min-height:44px}
}

@media(max-width:520px){
  .control-buttons{gap:4px!important;overflow:visible}
  .control-buttons button{height:44px!important;min-height:44px!important;touch-action:manipulation}
  .control-buttons .icon-btn{flex:0 0 36px!important;width:36px!important;min-width:36px!important;font-size:17px!important}
  .control-buttons #newGame{font-size:clamp(12px,3.2vw,13px)!important}
  .control-buttons #resign{flex:0 0 68px!important;width:68px!important;min-width:68px!important;font-size:clamp(12px,3.2vw,13px)!important}
  .mode-watch .control-buttons #step, .mode-watch .control-buttons #auto{font-size:12px!important}

  .online-chat-grid button, .online-reaction-row button, .online-comm-more, #onlineCommClose{min-height:44px}
  .puni-room-close{width:40px;height:40px}
  .puni-room-toolbar select{height:44px;font-size:12px}
  .puni-room-toolbar input[type="range"]{height:44px;margin:-6px 0}
  .puni-room-toolbar label>small{font-size:10px}
  .puni-room-actions button{min-height:44px;font-size:12px}
}


@media(max-width:375px){
  .control-buttons{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:44px 44px;
    gap:4px!important;
  }
  .control-buttons #newGame{grid-column:1/4;grid-row:1;width:100%!important;min-width:0!important}
  .control-buttons #resign{grid-column:4/6;grid-row:1;width:100%!important;min-width:0!important}
  .control-buttons #settingsToggle{grid-column:1;grid-row:2;justify-self:center}
  .control-buttons #sound{grid-column:2;grid-row:2;justify-self:center}
  .control-buttons #story{grid-column:3;grid-row:2;justify-self:center}
  .control-buttons #help{grid-column:4;grid-row:2;justify-self:center}
  body.game-active .hero p{font-size:10px!important}
  .message{font-size:12px!important}
}


@media(max-width:390px){
  body.mode-watch .control-buttons{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:44px 44px;
    gap:4px!important;
  }
  body.mode-watch .control-buttons #newGame{grid-column:1/4;grid-row:1;width:100%!important;min-width:0!important;flex:none!important;font-size:12px!important}
  body.mode-watch .control-buttons #step{grid-column:4;grid-row:1;width:100%!important;min-width:0!important;flex:none!important;font-size:12px!important}
  body.mode-watch .control-buttons #auto{grid-column:5;grid-row:1;width:100%!important;min-width:0!important;flex:none!important;font-size:12px!important}
  body.mode-watch .control-buttons #settingsToggle{grid-column:1;grid-row:2;justify-self:center}
  body.mode-watch .control-buttons #sound{grid-column:2;grid-row:2;justify-self:center}
  body.mode-watch .control-buttons #story{grid-column:3;grid-row:2;justify-self:center}
  body.mode-watch .control-buttons #help{grid-column:4;grid-row:2;justify-self:center}
}
@media(max-width:700px){
  .online-method-choice button, .online-room-code-card button, .online-room-flow>button, .online-copy{min-height:44px}
}
@media(max-width:520px){
}
@media(max-width:900px) and (max-height:520px){
  .control-buttons button{height:44px!important;min-height:44px!important;touch-action:manipulation}
  .controls select{height:44px}
}


:where(button,select,input,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid #80dcff!important;
  outline-offset:2px;
}


@keyframes coinFadeReduced{from{opacity:.72}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after{transition-duration:.01ms!important;transition-delay:0s!important}
  .coin.flip{animation:coinFadeReduced .18s ease-out 1 both!important;transform:none!important}
  .coin.easter-hop{animation:none!important;transform:none!important}
}



@media(max-width:520px){
  .online-reconnect{font-size:12px}
  .quick-rules-head button{font-size:12px}
  .online-chat-grid button, .online-comm-more{font-size:12px}
  .online-comm-visibility{font-size:12px}
  .online-comm-note{font-size:12px;line-height:1.3}
  .puni-room-help{font-size:12px;line-height:1.25}
  .puni-room-toolbar label>small{font-size:11px;line-height:1.3}
  .puni-room-tip{font-size:11px}
}
@media(max-width:430px){
  html[lang="en"] .puni-room-help{max-width:none;white-space:normal;overflow:visible;text-overflow:clip}
}


.brand-lockup, .brand-copy, body.game-active .hero, body.game-active .brand-lockup>.brand-copy, body.game-active .hero h1{
  overflow:visible!important;
}


html, body{overscroll-behavior-y:auto}
@media (hover:none) and (pointer:coarse){
  html, body{overscroll-behavior-y:contain}
}


html[data-puni-motion="on"] body:not(.game-active) .arena .piece.puni-rendered, html[data-puni-motion="on"] body:not(.game-active) .arena .piece.puni-rendered>.puni-idle-motion, html[data-puni-motion="on"] body:not(.game-active) .arena .piece.puni-rendered .face, html[data-puni-motion="on"] body:not(.game-active) .arena .cell.goal.acquired::before{
  animation:none!important;
}
html[data-puni-motion="on"] body:not(.game-active) .arena .avatar.puni-rendered{
  animation:none!important;
}








.glass, .board-card.glass, .player-panel.glass, .status.glass, .controls.glass, .quick-rules.glass, .respawn-panel.glass{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}


.cell:nth-child(2n){filter:none!important}
body.game-active .player-panel:not(.active){filter:none!important}
.piece, .avatar, .piece.puni-rendered>.puni-idle-motion{will-change:auto!important}
.piece.puni-rendered, .avatar.puni-rendered{filter:none!important}
.piece.puni-rendered>.puni-idle-motion{filter:none!important}
.logo-mark.puni-rendered .puni-shell-svg{filter:none!important}


.cell:not(.selected) .piece.puni-rendered{box-shadow:0 5px 9px rgba(0,0,0,.28)}
.avatar.puni-rendered{box-shadow:0 4px 7px rgba(0,0,0,.25)}


html[data-puni-motion="on"] body.game-active .arena .cell:not(.selected) .piece.puni-rendered>.puni-idle-motion, html[data-puni-motion="on"] body.game-active .arena .cell:not(.selected) .piece.puni-rendered .face, html[data-puni-motion="on"] body.game-active .arena .avatar.puni-rendered{
  animation:none!important;
}
html[data-puni-motion="on"] body.game-active .arena .cell:not(.selected) .piece.puni-rendered>.puni-idle-motion{
  transform:none!important;
}
html[data-puni-motion="on"] body.game-active .arena .cell:not(.selected) .piece.puni-rendered>.puni-idle-motion.puni-ambient-pulse{
  animation:puniAmbientPulse .62s cubic-bezier(.22,.72,.24,1) 1 both!important;
  will-change:transform!important;
}
@keyframes puniAmbientPulse{
  0%,100%{transform:translateY(0) scale(1,1)}
  34%{transform:translateY(-2.2%) scale(.982,1.038)}
  63%{transform:translateY(.8%) scale(1.025,.978)}
  82%{transform:translateY(-.4%) scale(.994,1.010)}
}


html[data-puni-motion="off"] .piece, html[data-puni-motion="off"] .avatar, html[data-puni-motion="off"] .puni-idle-motion{
  will-change:auto!important;
}


html[data-puni-motion="on"] .face, html[data-puni-motion="on"] .avatar{animation:none!important}