/* The stage, HUD and thumb controls share a single phone viewport. */
body.playing {overflow:hidden; overscroll-behavior:none;background:#132d31}
body.playing .top {display:none}
#game:not([hidden]) {
  height:100vh;height:100dvh;width:100%;max-width:none;margin:0;
  padding:max(5px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:6px;overflow:hidden;
  background:linear-gradient(135deg,#1d393b,#11292d);
}
#game .gamebar {padding:0;display:flex;min-height:42px;gap:8px}
#game .scene-name {margin-right:auto;min-width:0}
#game .scene-name h2 {word-break:normal;font-size:clamp(11px,1.5vw,21px)}
#game .stats {margin:0;flex:none}
#game .board, #game .board.room {width:100%;height:100%;min-height:0;border-radius:3px}
#pauseBtn {
  width:46px;height:44px;flex:none;display:grid;place-items:center;border:1px solid #93a38b;border-radius:8px;
  box-shadow:inset 0 1px 0 #758c77,0 2px 0 #081d22;color:#fff2c4;background:#314e4b;font:900 22px/1 system-ui;
}
#pauseBtn:active {transform:translateY(1px)}
#onlineScores {font-size:12px;color:#f8dea0;font-weight:700;max-width:24vw;line-height:1.2;text-align:right}
.console-deck {padding:8px clamp(9px,4vw,72px) 5px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(8px,2vw,28px);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.joystick {
  width:clamp(96px,12vmin,134px);aspect-ratio:1;position:relative;isolation:isolate;border-radius:50%;touch-action:none;
  border:2px solid #78938a;box-shadow:inset 0 1px 2px #8ea39a,inset 0 -3px 3px #14282b,0 3px 0 #081c1f;
  background:linear-gradient(145deg,#56716b,#2b4444 62%,#435b56);
}
.stick-well,.stick-thumb {position:absolute;border-radius:50%;pointer-events:none}
.stick-well {inset:17%;background:radial-gradient(circle at 67% 73%,#47635d,#182d30 75%);box-shadow:inset 0 2px 4px #0c2126,0 1px #98aa92}
.stick-thumb {
 width:49%;height:49%;left:25.5%;top:25.5%;transform:translate(var(--stick-x,0%),var(--stick-y,0%));
 background:radial-gradient(ellipse at 38% 28%,#849b87 0%,#657f71 54%,#435c54 74%,#344a45 76%,#435b52 84%);
 border:2px solid #839988;box-shadow:0 4px 5px #112529cc,inset 0 2px 0 #9dac94;
}
.stick-thumb::after {content:"";position:absolute;inset:23%;border-radius:50%;border:1px solid #92a49077;box-shadow:inset 0 1px 1px #536c60}
.stick-mark {position:absolute;display:block;z-index:1;width:0;height:0;pointer-events:none;border:4px solid transparent}
.stick-mark.north {top:2%;left:calc(50% - 4px);border-bottom-color:#c3d1b4}
.stick-mark.south {bottom:2%;left:calc(50% - 4px);border-top-color:#c3d1b4}
.stick-mark.east {right:2%;top:calc(50% - 4px);border-left-color:#c3d1b4}
.stick-mark.west {left:2%;top:calc(50% - 4px);border-right-color:#c3d1b4}
.console-tip {display:grid;gap:2px;text-align:center;justify-self:center;color:#e8ebcf}
.console-tip strong {font-size:clamp(12px,1vw,16px)}
.console-tip span {font-size:12px;color:#beccbc}
.face-buttons {display:flex;gap:clamp(10px,2vw,24px);align-items:center}
.face-key {padding:0;background:none;border:0;display:flex;align-items:center;flex-direction:column;gap:5px;min-width:55px;touch-action:none;-webkit-touch-callout:none;color:#f1ead0}
.face-key b {width:clamp(52px,6.5vmin,73px);aspect-ratio:1;border:2px solid #bf9d65;border-radius:50%;display:grid;place-items:center;font:normal 25px var(--pixel);background:radial-gradient(circle at 40% 28%,#ffdb85,#e5b85f 61%,#c48e48 73%,#976438 78%);box-shadow:0 3px 0 #102326, inset 0 2px 0 #ffe8aa;color:#354035}
.b-key b {background:radial-gradient(circle at 38% 27%,#a0cabb,#77a597 62%,#5b8b7c 73%,#486e65 78%);color:#203a35;border-color:#94b7a6;box-shadow:0 3px 0 #102326,inset 0 2px 0 #cee1c7}
.face-key span {font-size:13px;font-weight:750;line-height:1.15}
.face-key.held b,.face-key:active b {filter:brightness(.91);transform:translateY(2px)}
#village {position:absolute;inset:0;pointer-events:none;z-index:1}
#avatar,#rider {z-index:4}
#markers {z-index:2;pointer-events:none}
#village img,#village canvas {image-rendering:pixelated}
#game .overview {top:auto;bottom:9px;right:9px}
.join-link {background:none;border:none;text-underline-offset:3px;color:#e7cf96;font:700 15px var(--sans);text-decoration:underline;min-height:42px;padding:7px 0;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.home #joinBtn {display:flex;width:max-content;margin:10px 0 0}
.home #startBtn {width:max-content;min-width:230px;gap:12px}
.home .best {margin-top:6px}
.salon,.salon input,#pauseDialog {text-align:left}
.salon .modal-title {margin-right:24px;font-size:clamp(18px,4vw,23px)}
.salon form,.salon #waitingPanel {margin-top:20px}
.salon fieldset {padding:0;margin:12px 0 15px;border:0}
.salon legend,.salon .input-name {font-size:14px;font-weight:700;margin-bottom:7px}
.seats {display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seats label {position:relative;cursor:pointer}
.seats input {position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.seats span {border:1px solid #809180;border-radius:5px;display:grid;place-items:center;height:49px;background:#294748;color:#f9e8b9;font:18px var(--pixel)}
.seats input:checked+span {border:2px solid #ffd78a;background:#446052;color:#ffdb89}
.seats input:focus-visible+span {outline:2px solid #fff2be;outline-offset:2px}
.salon-submit,.pause-actions button {min-height:46px;padding:0 17px;border-radius:4px;font-weight:750}
.salon-submit {width:100%;margin:6px 0}
#roomCode,#inviteCode {text-transform:uppercase;letter-spacing:.18em}
.invite-card {padding:13px;border:1px solid #718473;background:#183438;text-align:center}
.invite-card span,.invite-card strong {display:block}
.invite-card strong {color:#f7ce81;font:24px var(--pixel);margin:10px 0 2px}
#waitingCount,#salonMessage {font-size:14px;line-height:1.4}
#salonMessage:empty {display:none}
#salonMessage {color:#ffdb96;margin-bottom:0}
#waitingPlayers {padding:0;list-style:none;display:grid;gap:6px}
#waitingPlayers li {font-size:15px;display:flex;align-items:center;gap:8px}
#waitingPlayers li::before {content:"";width:8px;height:8px;background:#a5d382;border-radius:50%}
#manualLink {width:100%;font-size:15px}
#pauseDialog .modal-title {margin:8px 0}
.pause-icon {font-size:25px}
.pause-actions {display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:650px) {
  .home #startBtn {width:100%;order:4}.home #joinBtn {order:5;margin:4px auto 0}.home .best{order:6}
  .console-deck {position:relative;grid-template-columns:1fr auto;gap:2px 5px;padding:4px 6px 2px}
  .console-tip {position:absolute;top:4px;left:112px;right:134px;max-height:calc(100% - 4px);text-align:left;align-content:center;height:100%;overflow:hidden;pointer-events:none}
  .console-tip strong {font-size:11px;line-height:1.3}.console-tip span {display:none}
  .joystick {width:98px}.face-key {min-width:53px}.face-key b{width:53px}
  .face-buttons {gap:10px}.face-key span{font-size:12px}
  #game .scene-name small {display:none}#game .scene-name h2{font-size:11px}
  #game .stat {padding:4px}#game .stat svg{width:14px}
  #pauseBtn {width:42px;height:42px}
  #game .gamebar:has(#onlineScores:not([hidden])) {flex-wrap:wrap;row-gap:0}
  #onlineScores:not([hidden]) {order:4;max-width:100%;width:100%;text-align:center;font-size:10px;line-height:12px}
}
@media (orientation:landscape) and (max-height:560px) {
  #game:not([hidden]) {grid-template-rows:auto minmax(0,1fr);padding:2px max(5px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));gap:3px}
  #game .gamebar {min-height:29px}.gamebar .scene-name small{display:none}
  #pauseBtn {width:45px;height:31px;font-size:17px}
  .console-deck {position:absolute;z-index:11;bottom:max(5px,env(safe-area-inset-bottom));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));padding:0 5px 3px;pointer-events:none;display:flex;justify-content:space-between;align-items:end}
  .console-tip {display:none}
  .console-deck .joystick,.console-deck .face-buttons {pointer-events:auto}.joystick {width:88px}
  .face-key {min-width:55px}.face-key b {width:49px}.face-key span{color:white;background:#1d3839db;padding:2px 5px;border-radius:4px}
  #game .overview {top:7px;bottom:auto}.board #notice{bottom:14px}
}
#pauseSound {min-height:40px;padding:6px 13px;margin:0 0 15px;color:#e3e7c8}
#pauseBtn span,.pause-icon {font-size:0}
#pauseBtn span::before,.pause-icon::before {content:"";display:block;width:15px;height:18px;border-left:5px solid currentColor;border-right:5px solid currentColor;box-sizing:border-box}
#listenSample{margin:3px 0 9px;max-width:320px;color:#cfd9bb;font-size:14px}
#listenSample summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px;width:max-content;padding:6px 0}
#listenSample audio{width:100%;margin-top:5px;display:block}
@media(max-width:650px){.home #listenSample{order:6;align-self:center;margin:0}.home .best{order:7}}
.sms-room {display:flex;text-decoration:none;justify-content:center;align-items:center;text-align:center}
.home .sms-home {width:max-content;display:flex;margin:6px 0 0}
@media(max-width:650px){.home .sms-home{align-self:center;order:5;margin:3px auto 0}}
#dialog.result-dialog {
  width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;inset:0;
  border:0;border-radius:0;padding:max(32px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background:radial-gradient(ellipse at 50% 30%,#355a4d,#1c3636 58%,#142b2e);color:#fff1ce;text-align:center;
}
#dialog.result-dialog[open]{display:flex;align-items:safe center;justify-content:center;overflow:auto}
.result-dialog #modalContent{width:min(650px,100%);margin:auto}
.result-dialog .close{right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top))}
.result-dialog .modal-emblem{width:64px;height:64px;margin:0 auto 13px;background:#a47b3c;color:#fff2be;border:2px solid #eacf8c;box-shadow:0 3px #122e2e}
.result-dialog .modal-emblem svg{width:32px;height:32px}
.result-dialog .modal-title{font:normal clamp(17px,3.8vw,26px)/1.25 var(--pixel);color:#d4dcb6}
.winning-names{display:grid;gap:3px;margin:16px auto 9px;overflow-wrap:anywhere}
.winning-names strong{display:block;color:#ffdd88;font:800 clamp(42px,10vw,92px)/1.04 var(--sans);letter-spacing:-.045em;text-shadow:0 3px #714f2d}
.winning-names:has(> :nth-child(2)) strong{font-size:clamp(33px,7.7vw,66px)}
.result-dialog .modal-desc{font-size:clamp(17px,3.2vw,24px);margin:8px 0 18px;color:#fcf2cc}
.result-ranking{width:min(100%,420px);margin:18px auto;text-align:left}
.result-dialog .modal-actions{justify-content:center;margin:14px auto}
.result-dialog .input-name{text-align:left;width:min(330px,100%);margin:20px auto 4px}
@media(max-height:520px) and (orientation:landscape){#dialog.result-dialog{padding-block:14px}.result-dialog .modal-emblem{display:none}.winning-names{margin:6px auto}.winning-names strong{font-size:36px}.result-dialog .modal-desc,.result-ranking{margin:6px auto}.result-ranking li{padding:4px 0}}