:root{color-scheme:dark;--ink: #f5efe4;--sub: rgba(245, 239, 228, .62);--glass: rgba(20, 16, 14, .62);--accent: #e7b75f}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0d0b0a;color:var(--ink);font-family:-apple-system,Hiragino Sans,Noto Sans JP,sans-serif;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}#stage{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;touch-action:none;display:block}#ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#ui button,.power,.spin{pointer-events:auto}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}.hud{position:absolute;top:max(14px,env(safe-area-inset-top));left:16px}.title{margin:0;font-size:13px;letter-spacing:.14em;color:var(--sub)}.stat{margin:4px 0 0;font-size:18px;font-weight:700;letter-spacing:.06em}.tools{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;display:flex;gap:8px}.tools button{padding:8px 12px;border-radius:999px;font-size:12px;letter-spacing:.08em;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12)}.tools button[aria-pressed=false]{opacity:.5}.power{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:56px;height:min(46vh,300px);display:flex;flex-direction:column;align-items:center;gap:8px;touch-action:none}.power-track{position:relative;flex:1;width:22px;border-radius:12px;background:var(--glass);border:1px solid rgba(255,255,255,.16);overflow:hidden}.power-fill{position:absolute;left:0;right:0;top:0;height:0%;background:linear-gradient(180deg,#7fd38b,#e7b75f 55%,#e2553f);border-radius:12px}.power-label{margin:0;font-size:10px;line-height:1.3;text-align:center;color:var(--sub);letter-spacing:.06em}.spin{position:absolute;left:18px;bottom:max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:6px;touch-action:none}.spin-ball{position:relative;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff,#ece7da 45%,#b9b2a2);box-shadow:0 6px 18px #00000080}.spin-ball:before{content:"";position:absolute;top:25%;right:25%;bottom:25%;left:25%;border-radius:50%;border:1px dashed rgba(0,0,0,.22)}.spin-ball:after{content:"";position:absolute;left:50%;top:50%;width:1px;height:1px;box-shadow:0 -46px 0 0 transparent}.spin-dot{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#c2272d;box-shadow:0 0 0 2px #ffffffd9}.spin-label{margin:0;font-size:11px;color:var(--sub);letter-spacing:.06em}.fine{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%);display:flex;gap:10px}.fine button{width:46px;height:40px;border-radius:12px;background:var(--glass);border:1px solid rgba(255,255,255,.12);font-size:14px}.toast{position:absolute;left:50%;top:22%;transform:translate(-50%);margin:0;padding:10px 18px;border-radius:14px;background:#0009;font-size:15px;font-weight:700;letter-spacing:.06em;opacity:0;transition:opacity .25s;white-space:nowrap}.toast[data-on]{opacity:1}.help{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,calc(100vw - 40px));padding:20px 22px;border-radius:18px;background:#100d0bdb;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);pointer-events:auto}.help p{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--sub)}.help b{color:var(--ink)}.help button{margin-top:6px;width:100%;padding:11px;border-radius:12px;background:var(--accent);color:#1a120a;font-weight:700;letter-spacing:.12em}.help[hidden]{display:none}
.rightcol{position:absolute;right:max(12px,env(safe-area-inset-right,0px));top:calc(max(14px,env(safe-area-inset-top,0px)) + 50px);bottom:max(14px,env(safe-area-inset-bottom,0px));width:96px;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.rightcol .spin{position:static;left:auto;bottom:auto;pointer-events:auto}
.rightcol .spin-ball{width:76px;height:76px}
.rightcol .power{position:static;transform:none;right:auto;top:auto;width:96px;height:auto;flex:1;min-height:150px;max-height:400px;gap:6px;pointer-events:auto;cursor:ns-resize;--p:0}
.power-area{position:relative;flex:1;width:100%;padding:0}
.power-area .power-track{position:absolute;right:10px;top:0;bottom:0;width:38px;flex:none;border:0;border-radius:0;overflow:visible;background:rgba(245,239,228,.12);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%)}
.power-area .power-fill{position:absolute;left:0;right:0;top:0;height:100%;border-radius:0;background:linear-gradient(180deg,#7fd38b 0%,#c9d36a 30%,#e7b75f 55%,#e2553f 100%);clip-path:inset(0 0 calc(100% - var(--p) * 100%) 0)}
.power-tick{position:absolute;left:18px;right:2px;height:0;border-top:1px solid rgba(245,239,228,.2);z-index:2;pointer-events:none}
.power-tick span{position:absolute;left:-18px;top:-7px;width:14px;text-align:right;font-size:9px;line-height:14px;color:var(--sub);font-variant-numeric:tabular-nums}
.power-tick:nth-child(5n+1) span,.power-tick:last-child span{font-weight:700}
.power-tick.on{border-top-color:rgba(231,183,95,.85)}
.power-tick.on span{color:var(--accent)}
.power-knob{position:absolute;right:29px;top:0;width:16px;height:4px;transform:translate(50%,-50%);border-radius:2px;background:#fff;box-shadow:0 0 10px #ffffffa0;z-index:3;pointer-events:none;opacity:.6;transition:opacity .15s}
.power.is-pulling .power-knob{opacity:1}
.power-last{position:absolute;right:-4px;width:0;height:0;border:5px solid transparent;border-right:7px solid var(--accent);border-left:0;transform:translateY(-50%);z-index:3;pointer-events:none}
.rightcol .power-label{min-height:30px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.power-label b{color:var(--ink)}
@media (max-height:430px){.rightcol{top:calc(max(10px,env(safe-area-inset-top,0px)) + 44px);gap:8px}.rightcol .spin-ball{width:60px;height:60px}.rightcol .spin-label{display:none}}
.tools button:disabled{opacity:.35;cursor:default}
.leftcol{position:absolute;left:max(14px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.leftcol button{display:flex;align-items:center;gap:7px;padding:9px 14px 9px 11px;border-radius:999px;font-size:12px;letter-spacing:.06em;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);transition:opacity .15s,background .15s}
.leftcol svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.leftcol button:disabled{opacity:.35;cursor:default}
.leftcol button[aria-pressed=true]{background:var(--accent);color:#1a120a;border-color:transparent;font-weight:700}
#ui button:focus-visible,#ui a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.clear{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(340px,calc(100vw - 32px));max-height:calc(100% - 32px);overflow:auto;padding:22px 22px 16px;border-radius:20px;background:#100d0be6;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(231,183,95,.28);box-shadow:0 20px 60px #000a;pointer-events:auto;text-align:center;animation:clear-in .35s ease-out}
@keyframes clear-in{from{opacity:.4;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
@media (prefers-reduced-motion:reduce){.clear{animation:none}}
.clear-close{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;font-size:18px;color:var(--sub)}
.clear-eyebrow{margin:0;font-size:11px;letter-spacing:.28em;color:var(--accent)}
.clear h2{margin:2px 0 0;font-size:22px;letter-spacing:.2em;font-weight:700}
.clear-score{margin:6px 0 0;display:flex;align-items:baseline;justify-content:center;gap:4px;font-variant-numeric:tabular-nums}
.clear-score b{font-size:64px;line-height:1;font-weight:800;color:var(--ink)}
.clear-score span{font-size:16px;color:var(--sub)}
.clear-best{margin:8px 0 0;font-size:12px;line-height:1.6;color:var(--sub)}
.clear-best[data-tone=best]{color:var(--accent);font-weight:700}
.clear-share{margin-top:16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.clear-share a,.clear-share button{display:flex;align-items:center;justify-content:center;min-height:38px;padding:6px 4px;border-radius:10px;font-size:11px;letter-spacing:.04em;color:var(--ink);text-decoration:none;background:rgba(245,239,228,.08);border:1px solid rgba(245,239,228,.12)}
.clear-actions{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.clear-actions button{padding:11px;border-radius:12px;font-weight:700;letter-spacing:.08em;background:rgba(245,239,228,.08);border:1px solid rgba(245,239,228,.12)}
.clear-actions button.primary{background:var(--accent);color:#1a120a;border-color:transparent}
.clear-actions button:disabled{opacity:.35}
.ad-slot{margin-top:12px;min-height:60px;border-radius:10px;border:1px dashed rgba(245,239,228,.18)}
.credit{display:inline-block;margin-top:12px;font-size:10px;letter-spacing:.2em;color:var(--sub);text-decoration:none}
.credit:hover{color:var(--accent)}
.help .credit{display:block;text-align:center}
html,body,#ui{-webkit-touch-callout:none}
.help{max-height:calc(100% - 24px);overflow:auto}
@media (hover:hover) and (pointer:fine){
  .rightcol{top:50%;bottom:auto;transform:translateY(-50%);height:min(560px,calc(100% - 150px))}
}
.rotate{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:max(24px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));background:#0d0b0a;color:var(--ink);text-align:center;pointer-events:auto}
.rotate[hidden]{display:none}
.rotate-phone{width:46px;height:80px;border:3px solid var(--ink);border-radius:9px;position:relative;animation:rotate-hint 2.4s ease-in-out infinite}
.rotate-phone:after{content:"";position:absolute;left:50%;bottom:5px;width:12px;height:3px;margin-left:-6px;border-radius:2px;background:var(--ink)}
@keyframes rotate-hint{0%,25%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:rotate(-90deg)}}
.rotate-title{margin:0;font-size:17px;font-weight:700;letter-spacing:.08em}
.rotate-sub{margin:0;font-size:12px;line-height:1.7;color:var(--sub)}
.rotate button{margin-top:4px;padding:12px 22px;border-radius:12px;background:var(--accent);color:#1a120a;font-weight:700;letter-spacing:.1em}
.hud{pointer-events:none}
.hud .title{padding:0;text-align:left;cursor:pointer;color:var(--sub);font-size:13px;letter-spacing:.14em}
.hud .title:after{content:" ▾";font-size:10px}
.turn{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px;font-size:11px;letter-spacing:.06em;min-height:20px}
.turn:empty{display:none}
.turn>*{padding:3px 9px;border-radius:999px;background:var(--glass);border:1px solid rgba(255,255,255,.12)}
.turn b{font-weight:700}
.turn .p1{background:#2f5fbf;border-color:transparent;color:#fff}
.turn .p2{background:#b5462f;border-color:transparent;color:#fff}
.turn .bih{background:var(--accent);color:#1a120a;border-color:transparent;font-weight:700}
.turn .warn{color:#ff8f7a;border-color:rgba(255,143,122,.5)}
.leftcol button.hint{border-color:var(--accent);box-shadow:0 0 0 0 rgba(231,183,95,.6);animation:bih-pulse 1.6s ease-out infinite}
@keyframes bih-pulse{0%{box-shadow:0 0 0 0 rgba(231,183,95,.55)}100%{box-shadow:0 0 0 12px rgba(231,183,95,0)}}
@media (prefers-reduced-motion:reduce){.leftcol button.hint{animation:none}}
.help .modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 14px}
.help .modes button{margin:0;padding:10px 6px;border-radius:10px;background:rgba(245,239,228,.08);color:var(--ink);border:1px solid rgba(245,239,228,.14);font-size:12px;letter-spacing:.06em}
.help .modes button[aria-pressed=true]{background:var(--ink);color:#1a120a;border-color:transparent}
.help .rule{font-size:12px}
.clear-mode{margin-top:8px;padding:4px 8px;font-size:11px;letter-spacing:.06em;color:var(--sub);text-decoration:underline;text-underline-offset:3px}

.rightcol .spin{margin-bottom:22px}
@media (max-height:430px){.rightcol .spin{margin-bottom:10px}}

.help .modes{grid-template-columns:repeat(3,1fr)}
.help .levels{display:flex;align-items:center;gap:6px;margin:-6px 0 14px}
.help .levels[hidden]{display:none}
.help .levels span{font-size:11px;color:var(--sub);letter-spacing:.06em;margin-right:2px;white-space:nowrap}
.help .levels button{flex:1;margin:0;padding:7px 4px;border-radius:9px;background:transparent;color:var(--ink);border:1px solid rgba(245,239,228,.16);font-size:12px;font-weight:700;letter-spacing:.06em}
.help .levels button[aria-pressed=true]{background:var(--accent);color:#1a120a;border-color:transparent}

.hud{left:50%;right:auto;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:calc(100% - 560px);min-width:220px}
.hud .title{text-align:center}
.turn{justify-content:center;margin-top:8px}
.turn .turnchip{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;font-size:14px;letter-spacing:.08em}
.turn .turnchip.cpu{padding:8px 20px;font-size:17px;font-weight:800;background:linear-gradient(135deg,#e2553f,#b5302a);box-shadow:0 0 0 0 rgba(226,85,63,.6),0 6px 20px rgba(0,0,0,.45);animation:cpu-glow 1.6s ease-out infinite}
.turn .turnchip i{font-style:normal;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:rgba(0,0,0,.25)}
.turn .turnchip .dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:cpu-dot 1s ease-in-out infinite}
@keyframes cpu-glow{0%{box-shadow:0 0 0 0 rgba(226,85,63,.55),0 6px 20px rgba(0,0,0,.45)}100%{box-shadow:0 0 0 14px rgba(226,85,63,0),0 6px 20px rgba(0,0,0,.45)}}
@keyframes cpu-dot{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.turn .turnchip.cpu,.turn .turnchip .dot{animation:none}}
@media (max-width:820px){.hud{left:16px;transform:none;align-items:flex-start;text-align:left;max-width:calc(100% - 300px)}.turn{justify-content:flex-start}}

.toast{top:max(22%,128px)}

.clear-actions{margin-top:18px}
.clear-share-link{margin-top:10px;padding:6px 10px;font-size:12px;letter-spacing:.06em;color:var(--sub);text-decoration:underline;text-underline-offset:3px}
.clear-share-link:hover{color:var(--accent)}
.clear .credit{display:block;margin-top:10px}

.rightcol .spin{margin-bottom:72px}
@media (max-height:430px){.rightcol .spin{margin-bottom:34px}}
.power-knob{height:16px;border-radius:9px;background:linear-gradient(180deg,#5aa2ff,#2a6fe0);border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 3px rgba(58,132,255,.25);opacity:1;transition:box-shadow .15s}
.power-knob:after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:1px;background:rgba(255,255,255,.75);box-shadow:0 -4px 0 rgba(255,255,255,.45),0 4px 0 rgba(255,255,255,.45)}
.power:hover .power-knob{box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 6px rgba(58,132,255,.3)}
.power.is-pulling .power-knob{opacity:1;box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 8px rgba(58,132,255,.35)}

.elev{position:absolute;top:-4px;right:calc(100% + 6px);width:104px;display:flex;flex-direction:column;align-items:center;pointer-events:auto;touch-action:none;cursor:grab;border-radius:14px;padding:4px 4px 6px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);outline:none}
.elev.is-drag{cursor:grabbing}
.elev:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.elev svg{width:100%;height:auto;display:block;overflow:visible}
.elev-table{stroke:rgba(31,122,80,.9);stroke-width:3;stroke-linecap:round}
.elev-track{fill:none;stroke:rgba(245,239,228,.18);stroke-width:6;stroke-linecap:round}
.elev-minzone{fill:none;stroke:rgba(226,85,63,.7);stroke-width:6;stroke-linecap:round}
.elev-tick{stroke:rgba(245,239,228,.35);stroke-width:1}
.elev-tick.major{stroke:rgba(245,239,228,.6);stroke-width:1.4}
.elev-num{fill:var(--sub);font-size:7.5px;text-anchor:middle;font-variant-numeric:tabular-nums}
.elev-cue{stroke:#e9d6a8;stroke-width:3.2;stroke-linecap:round}
.elev-ball{fill:#f3efe4;stroke:rgba(0,0,0,.25);stroke-width:.6}
.elev-knob{fill:#3a84ff;stroke:#fff;stroke-width:2;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));transition:r .12s}
.elev:hover .elev-knob,.elev.is-drag .elev-knob{r:8.5}
.elev-label{margin:0;display:flex;align-items:baseline;gap:5px;font-size:9.5px;color:var(--sub);letter-spacing:.06em}
.elev-label b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;min-width:28px;text-align:right}
.elev[data-on="1"] .elev-label b{color:#7fb3ff}
.elev-kind{margin:1px 0 0;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--sub);white-space:nowrap}
.elev[data-on="1"] .elev-kind{color:#7fb3ff}
.elev[data-forced="1"] .elev-kind{color:#ff8f7a}
.rightcol .spin{position:relative}
@media (max-height:430px){.elev{width:88px;top:-2px}.elev-kind{display:none}}

.elev-label span{white-space:nowrap}
@media (max-height:430px){.elev-label span{display:none}.elev-label b{font-size:14px;min-width:0}}

.help{width:min(340px,calc(100vw - 40px));padding:24px 22px 16px;text-align:center}
.help-eyebrow{margin:0!important;font-size:11px!important;letter-spacing:.32em;color:var(--accent)!important}
.help-title{margin:2px 0 18px;font-size:26px;letter-spacing:.16em;font-weight:800;color:var(--ink)}
.help .modes{grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.help .modes button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 4px 10px}
.help .modes button b{font-size:13px;letter-spacing:.06em}
.help .modes button small{font-size:10px;letter-spacing:.02em;opacity:.65;font-weight:500}
.help .levels{margin:0 0 12px}
.help .help-start{margin-top:4px;padding:14px;font-size:16px;letter-spacing:.2em}
.howto{margin-top:12px;text-align:left}
.howto summary{list-style:none;cursor:pointer;text-align:center;font-size:12px;color:var(--sub);letter-spacing:.08em;padding:4px}
.howto summary::-webkit-details-marker{display:none}
.howto summary:after{content:" ▾";font-size:10px}
.howto[open] summary:after{content:" ▴"}
.howto dl{margin:8px 0 0;display:grid;gap:6px}
.howto dl div{display:grid;grid-template-columns:52px 1fr;gap:8px;align-items:baseline;font-size:12px;line-height:1.5}
.howto dt{font-weight:700;color:var(--ink)}
.howto dd{margin:0;color:var(--sub)}
.help .credit{margin-top:12px}
.coach{position:fixed;inset:0;pointer-events:none;z-index:20}
.coach[hidden]{display:none}
.coach-bubble{position:absolute;padding:8px 12px;border-radius:12px;background:rgba(16,13,11,.92);border:1px solid rgba(58,132,255,.7);color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.05em;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.45);animation:coach-in .4s ease-out both}
.coach-bubble small{display:block;margin-top:2px;font-size:10.5px;font-weight:500;color:var(--sub);letter-spacing:.03em}
.coach.out .coach-bubble{opacity:0;transition:opacity .35s}
@keyframes coach-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.coach-bubble{animation:none}}

.help .modes button[aria-pressed=true] b,.help .modes button[aria-pressed=true] small{color:#1a120a}

/* angle meter: compact, above the spin ball */
.elev{position:relative;top:auto;right:auto;width:92px;padding:4px 6px 4px;margin-bottom:10px;flex:none}
.elev svg{width:100%}
.elev-label{position:absolute;top:4px;right:8px;margin:0}
.elev-label b{font-size:18px;min-width:0;text-align:right}
.elev-kind{display:none}
.elev[data-forced="1"] .elev-label b{color:#ff8f7a}
.rightcol .spin{margin-bottom:56px}
/* power bar on its own panel so it reads over any background */
.rightcol .power{padding:12px 4px 8px;border-radius:16px;background:rgba(14,11,9,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.power-area .power-track{background:rgba(245,239,228,.16)}
.power-tick{border-top-color:rgba(245,239,228,.28)}
@media (max-height:430px){.elev{width:76px;margin-bottom:4px;padding:2px 4px}.elev-label b{font-size:15px}.rightcol .spin{margin-bottom:22px}.rightcol .power{padding:8px 4px 6px}}
/* potted-ball trays: vertical, one each side */
.tray{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:64px;padding:10px 0 12px;border-radius:18px;background:rgba(14,11,9,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);pointer-events:none;transition:border-color .25s,box-shadow .25s,opacity .25s}
.tray[hidden]{display:none}
#tray-left{left:max(14px,env(safe-area-inset-left,0px))}
#tray-right{right:calc(max(12px,env(safe-area-inset-right,0px)) + 96px + 14px)}
.tray-name{font-size:12px;font-weight:800;letter-spacing:.04em;color:#fff;padding:3px 9px;border-radius:999px;background:#3a6fd8;white-space:nowrap}
.tray.p2 .tray-name{background:#d24a34}
.tray.solo .tray-name{background:transparent;color:var(--sub);font-weight:600;font-size:11px;padding:0;white-space:normal;text-align:center;line-height:1.3;max-width:56px}
.tray-count{font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums;margin-top:-4px}
.tray-count:after{content:"個"}
.tray-balls{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:28px}
.tray-empty{width:28px;height:28px;border-radius:50%;border:1.5px dashed rgba(245,239,228,.2)}
.tray:not(.solo):not(.active){opacity:.6}
.tray.active{border-color:#4d8bff;box-shadow:0 0 0 3px rgba(77,139,255,.35),0 10px 26px rgba(0,0,0,.45)}
.tray.p2.active{border-color:#ff6a50;box-shadow:0 0 0 3px rgba(255,106,80,.35),0 10px 26px rgba(0,0,0,.45)}
.pball{position:relative;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.6),rgba(255,255,255,0) 42%),var(--c);box-shadow:inset 0 -3px 5px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.45);display:inline-flex;align-items:center;justify-content:center;flex:none}
.pball.stripe{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.6),rgba(255,255,255,0) 42%),linear-gradient(180deg,#f6f3ea 0 24%,var(--c) 24% 76%,#f6f3ea 76%)}
.pball i{font-style:normal;font-size:12px;font-weight:900;line-height:17px;width:17px;height:17px;border-radius:50%;background:#fbfaf5;color:#111;text-align:center;font-variant-numeric:tabular-nums}
.pball.pop{animation:pball-pop .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pball-pop{from{transform:scale(0)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.pball.pop{animation:none}}
@media (max-height:430px){.tray{width:46px;gap:4px;padding:6px 0 8px;top:calc(50% - 14px)}.tray-name{font-size:10px;padding:2px 6px}.tray-count{display:none}.tray-balls{gap:3px}.pball{width:22px;height:22px}.pball i{font-size:9.5px;line-height:13px;width:13px;height:13px}#tray-right{right:calc(max(12px,env(safe-area-inset-right,0px)) + 96px + 8px)}.tray-empty{width:22px;height:22px}}
/* whose turn: big banner + pulsing badge */
.turn-banner{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.9);padding:14px 36px;border-radius:999px;font-size:28px;font-weight:900;letter-spacing:.18em;color:#fff;background:linear-gradient(135deg,#4d8bff,#2350c8);box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 6px rgba(77,139,255,.25);opacity:0;pointer-events:none;white-space:nowrap}
.turn-banner.p2{background:linear-gradient(135deg,#ff6a50,#b5302a);box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 6px rgba(255,106,80,.25)}
.turn-banner.show{animation:turn-banner 1.7s ease-out both}
@keyframes turn-banner{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}22%{transform:translate(-50%,-50%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.turn-banner.show{animation:none;opacity:1}}
@media (max-height:430px){.turn-banner{font-size:20px;padding:10px 26px}}
.turn .turnchip.p1:not(.cpu){animation:you-glow 1.6s ease-out infinite}
@keyframes you-glow{0%{box-shadow:0 0 0 0 rgba(77,139,255,.55)}100%{box-shadow:0 0 0 12px rgba(77,139,255,0)}}
@media (prefers-reduced-motion:reduce){.turn .turnchip.p1{animation:none}}

/* trays: one compact strip under the score */
.trays{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}
.tray{position:static;transform:none;flex-direction:row;width:auto;padding:4px 10px 4px 4px;gap:7px;border-radius:999px;background:rgba(14,11,9,.6)}
#tray-left,#tray-right{left:auto;right:auto}
.tray-count{display:none}
.tray-name{font-size:11px;padding:3px 8px}
.tray.solo{padding-left:10px}
.tray.solo .tray-name{max-width:none;white-space:nowrap}
.tray-balls{flex-direction:row;gap:3px;min-height:22px}
.tray-empty{width:auto;height:auto;border:0}
.tray-empty:after{content:"—";font-size:12px;color:var(--sub)}
.pball{width:22px;height:22px}
.pball i{font-size:10px;line-height:13px;width:13px;height:13px}
.tray:not(.solo):not(.active){opacity:.55}
.tray.active{box-shadow:0 0 0 2px rgba(77,139,255,.45)}
.tray.p2.active{box-shadow:0 0 0 2px rgba(255,106,80,.45)}
@media (max-height:430px){.tray{width:auto;padding:3px 8px 3px 3px;gap:5px;top:auto}.trays{margin-top:5px;gap:6px}.pball{width:18px;height:18px}.pball i{font-size:8.5px;line-height:11px;width:11px;height:11px}.tray-balls{min-height:18px}#tray-right{right:auto}.tray-empty{width:auto;height:auto}}
.hud{max-width:calc(100% - 500px)}

/* trays fixed in the top corners: you on the left, opponent on the right */
#tray-left,#tray-right{position:absolute;top:max(14px,env(safe-area-inset-top,0px));max-width:250px;align-items:flex-start}
#tray-left{left:max(16px,env(safe-area-inset-left,0px));right:auto}
#tray-right{right:calc(max(14px,env(safe-area-inset-right,0px)) + var(--tools-w,240px));left:auto}
.tray-balls{flex-wrap:wrap;align-self:center}
.tray-name{flex:none}
@media (max-width:820px){.hud{left:50%;transform:translateX(-50%);align-items:center;text-align:center;max-width:calc(100% - 440px);min-width:200px}.turn{justify-content:center}}
@media (max-height:430px){#tray-left,#tray-right{max-width:190px}#tray-right{top:max(54px,calc(env(safe-area-inset-top,0px) + 40px));right:calc(max(12px,env(safe-area-inset-right,0px)) + 96px + 10px)}}
@media (max-width:760px){#tray-right{left:max(16px,env(safe-area-inset-left,0px));right:auto;top:calc(max(14px,env(safe-area-inset-top,0px)) + 36px)}}

/* while balls roll or the CPU plays, step the controls back */
.rightcol,.leftcol,.fine,.tools{transition:opacity .3s}
body[data-phase="rolling"] .rightcol,body[data-phase="rolling"] .leftcol,body[data-phase="rolling"] .fine,body[data-cpu="1"] .leftcol,body[data-cpu="1"] .fine{opacity:.28}
body[data-cpu="1"] .rightcol{opacity:.55}
/* phones in landscape: compact, quieter controls */
@media (max-height:500px){
  .hud{top:max(6px,env(safe-area-inset-top,0px))}
  .hud .title{font-size:10px;letter-spacing:.1em}
  .stat{font-size:14px;margin-top:1px}
  .turn{margin-top:4px;min-height:0}
  .turn>*{padding:2px 8px;font-size:10px}
  .turn .turnchip,.turn .turnchip.cpu{padding:3px 10px;font-size:11px;gap:5px;letter-spacing:.05em}
  .turn .turnchip.cpu{animation:none;box-shadow:0 2px 8px rgba(0,0,0,.4)}
  .turn .turnchip i{font-size:9px;padding:1px 6px}
  .turn .turnchip .dot{width:6px;height:6px}
  .turn .turnchip.p1:not(.cpu){animation:none}
  .tools{top:max(6px,env(safe-area-inset-top,0px));gap:5px}
  .tools button{padding:5px 9px;font-size:10.5px;letter-spacing:.04em;background:rgba(20,16,14,.45)}
  #tray-left,#tray-right{top:max(6px,env(safe-area-inset-top,0px))}
  #tray-right{top:max(40px,calc(env(safe-area-inset-top,0px) + 34px))}
  .tray{padding:2px 7px 2px 2px;gap:4px;background:rgba(14,11,9,.45)}
  .tray-name{font-size:9.5px;padding:2px 6px}
  .pball{width:16px;height:16px}
  .pball i{font-size:7.5px;line-height:10px;width:10px;height:10px}
  .tray-balls{min-height:16px;gap:2px}
  .rightcol{top:calc(max(6px,env(safe-area-inset-top,0px)) + 34px);bottom:max(8px,env(safe-area-inset-bottom,0px));width:70px;gap:4px;right:max(8px,env(safe-area-inset-right,0px))}
  .elev{width:56px;padding:1px 3px;margin-bottom:0;background:rgba(20,16,14,.45)}
  .elev-label b{font-size:11px}
  .rightcol .spin-ball{width:40px;height:40px}
  .rightcol .spin{margin-bottom:6px}
  .rightcol .power{width:70px;min-height:140px;padding:5px 2px 3px;background:rgba(14,11,9,.5);border-radius:12px}
  .power-area .power-track{width:26px;right:8px}
  .power-knob{right:21px;height:12px}
  .power-tick{left:13px}
  .power-tick span{left:-13px;font-size:8px;width:10px}
  .rightcol .power-label{min-height:18px;font-size:9px}
  #tray-right{right:calc(max(8px,env(safe-area-inset-right,0px)) + 70px + 8px)}
  .leftcol{gap:6px;bottom:max(8px,env(safe-area-inset-bottom,0px))}
  .leftcol button{padding:0;width:34px;height:34px;justify-content:center;background:rgba(20,16,14,.45)}
  .leftcol button span{display:none}
  .leftcol svg{width:15px;height:15px}
  .fine{bottom:max(8px,env(safe-area-inset-bottom,0px));gap:6px}
  .fine button{width:34px;height:28px;border-radius:9px;font-size:11px;background:rgba(20,16,14,.4)}
  .toast{font-size:12px;padding:7px 12px;top:max(18%,92px)}
  .turn-banner{font-size:17px;padding:8px 22px;letter-spacing:.12em}
}
/* all status pills in the HUD share one size and baseline */
.turn{align-items:center}
.turn>*{display:inline-flex;align-items:center;line-height:1.2;padding:6px 16px;font-size:14px;font-weight:700;letter-spacing:.08em}
.turn .turnchip.cpu{padding:6px 16px;font-size:14px}
@media (max-height:500px){.turn>*,.turn .turnchip,.turn .turnchip.cpu{padding:3px 10px;font-size:11px;letter-spacing:.05em}}

/* language switch */
.help{position:absolute}
.help .lang{position:absolute;top:12px;right:12px;display:flex;padding:2px;border-radius:999px;background:rgba(245,239,228,.08);border:1px solid rgba(245,239,228,.12)}
.help .lang button{margin:0;width:auto;padding:4px 9px;border-radius:999px;background:transparent;color:var(--sub);font-size:10.5px;font-weight:600;letter-spacing:.04em}
.help .lang button[aria-pressed=true]{background:var(--ink);color:#1a120a}
.help-eyebrow{margin-top:14px!important}
.toast{white-space:normal;max-width:min(560px,calc(100vw - 32px));width:max-content;text-align:center;line-height:1.45}
.coach-bubble{max-width:calc(100vw - 32px)}

/* angle meter sits at the bottom of the right column */
.elev{margin-bottom:0;margin-top:10px}
@media (max-height:500px){.elev{margin-top:4px}}

/* angle meter back on top of the right column */
.elev{margin-top:0;margin-bottom:10px}
@media (max-height:500px){.elev{margin-top:0;margin-bottom:4px}}

/* ===== phones held upright: info band / table / control dock ===== */
@media (orientation:portrait) and (max-width:600px){
  :root{--top-h:calc(env(safe-area-inset-top,0px) + 100px);--dock-h:calc(env(safe-area-inset-bottom,0px) + 178px)}
  body{background:#0b0908}
  #stage{top:var(--top-h);bottom:auto;height:calc(100% - var(--top-h) - var(--dock-h));border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
  /* top band */
  .hud{left:12px;right:auto;top:calc(env(safe-area-inset-top,0px) + 8px);transform:none;display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:10px;row-gap:6px;text-align:left;max-width:calc(100% - 24px);min-width:0}
  .hud .title{grid-column:1/-1;font-size:11px;text-align:left}
  .stat{margin:0;font-size:17px}
  .turn{margin:0;justify-content:flex-start}
  .turn>*,.turn .turnchip,.turn .turnchip.cpu{padding:3px 10px;font-size:12px;letter-spacing:.05em}
  .turn .turnchip.cpu{animation:none}
  .tools{top:calc(env(safe-area-inset-top,0px) + 6px);right:10px;gap:4px}
  .tools button{padding:4px 9px;font-size:10.5px;letter-spacing:.03em}
  #tray-left,#tray-right{top:calc(env(safe-area-inset-top,0px) + 66px);max-width:calc(50% - 18px);transform:none}
  #tray-left{left:12px;right:auto}
  #tray-right{right:12px;left:auto}
  .tray{padding:2px 8px 2px 2px;gap:5px}
  .tray-name{font-size:10px;padding:2px 7px}
  .pball{width:18px;height:18px}
  .pball i{font-size:8.5px;line-height:11px;width:11px;height:11px}
  .tray-balls{min-height:18px;gap:2px}
  /* bottom dock: angle + spin | power on the right, nudges and buttons on the left */
  .rightcol{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);right:12px;left:auto;transform:none;width:auto;height:158px;display:grid;grid-template-columns:auto auto;grid-template-rows:auto 1fr;column-gap:10px;row-gap:6px;align-items:start}
  .elev{grid-column:1;grid-row:1;width:78px;margin:0;padding:2px 5px}
  .rightcol .spin{grid-column:1;grid-row:2;margin:0;justify-self:center}
  .rightcol .spin-ball{width:62px;height:62px}
  .rightcol .spin-label{font-size:10px}
  .rightcol .power{grid-column:2;grid-row:1/3;width:78px;height:158px;min-height:0;max-height:none;padding:8px 3px 4px}
  .fine{left:12px;transform:none;bottom:calc(env(safe-area-inset-bottom,0px) + 104px);gap:8px}
  .fine button{width:56px;height:42px;font-size:15px}
  .leftcol{left:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);gap:8px}
  .leftcol button{padding:8px 13px 8px 10px}
  .toast{top:calc(var(--top-h) + 16px)}
  .turn-banner{top:calc(var(--top-h) + (100% - var(--top-h) - var(--dock-h)) * .4);font-size:22px;padding:10px 28px}
}