:root{color-scheme:light;--cream:#fff9e9;--green:#174941;--deep:#173f39;--orange:#ef945a;--gold:#f4dda7;--mint:#dcebdd;--line:#c5d2bb;--muted:#66786a}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--cream);color:var(--green);font-family:system-ui,-apple-system,'Noto Sans TC',sans-serif}
body{padding:max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
main{height:100%;height:100dvh;max-height:100%;max-width:1080px;margin:auto;display:grid;grid-template-rows:auto minmax(100px,1fr) auto auto auto auto;gap:12px}
button,select{font:inherit;touch-action:manipulation}
button{min-height:44px;border:1.5px solid transparent;border-radius:14px;padding:10px 20px;font-size:15px;font-weight:800;cursor:pointer;white-space:nowrap;line-height:1.3;transition:background .15s,box-shadow .15s,transform .15s}
button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:3px}
button[hidden],[hidden]{display:none!important}
button:disabled,select:disabled{cursor:not-allowed;opacity:.55}
.primary{color:var(--deep);background:var(--orange);border-color:#d78048;box-shadow:0 3px 0 #b76d3c}
.primary:hover{background:#f6a56d}
.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #b76d3c}
.primary>span{float:right;margin-left:18px}
.secondary{color:var(--green);background:var(--mint);border-color:#bfd2bb}
.secondary:hover{background:#cedfca}
.quiet-button{background:transparent;color:var(--green);border-color:#d5d9c7}
.quiet-button:hover{background:#f3ecd9}
.game-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.eyebrow{font-size:10px;letter-spacing:1.6px;color:var(--muted);font-weight:800}
h1{font-size:30px;line-height:1.2;margin:5px 0 0;letter-spacing:.8px}
h1 span{display:inline-block;font-size:12px;letter-spacing:.4px;margin-left:8px;padding:5px 9px;background:var(--gold);border-radius:7px;vertical-align:middle}
.header-tools{display:flex;align-items:center;gap:12px;flex-shrink:0}
.mode-status{font-size:11px;color:var(--muted);white-space:nowrap}
.menu-button{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--green);color:var(--cream);padding:8px 13px;font-size:13px;min-width:76px}
.menu-button>span:first-child{font-size:18px;font-weight:500;line-height:1}
.scene-card{min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1.5px solid #b9cdb6;border-radius:22px;background:#e4eddf;box-shadow:0 2px 0 #17494108}
.scene-heading{flex:none;display:flex;align-items:center;gap:10px;padding:10px 15px 3px;min-height:37px;font-size:14px}
.scene-heading #badge{font-size:10px;background:var(--cream);border:1px solid #d2d7be;border-radius:6px;padding:4px 8px;color:var(--green);white-space:nowrap;font-weight:800}
.scene-heading strong{line-height:1.35}
.scene-tag{margin-left:auto;font-size:11px;color:var(--muted);letter-spacing:.4px}
.canvas-wrap{flex:1;min-height:0;position:relative}
canvas{width:100%;height:100%;display:block}
.scene-caption{text-align:center;font-size:11px;color:var(--muted);padding:2px 8px 8px;flex:none}
.score-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;align-items:center;border:1.5px solid #dbddc9;border-radius:16px;background:#fffdf6;padding:9px 20px;gap:20px}
.score-row label{display:block;font-size:11px;letter-spacing:.4px;color:var(--muted);font-weight:650}
.score-row strong{display:block;font-variant-numeric:tabular-nums;font-size:23px;font-weight:800;line-height:1.2;margin-top:3px}
.score-row .score-main strong{font-size:34px;letter-spacing:.5px}
.score-row small{font-size:13px;letter-spacing:0;font-weight:600}
.score-best,.score-drop{border-left:1px solid #e0e0cd;padding-left:24px}
.score-best label span{font-size:9px;margin-left:4px}
.control-section{min-width:0}
.instruction{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:0 2px 8px;min-height:22px}
.instruction strong{font-size:18px;line-height:1.4;letter-spacing:-.3px}
.instruction>span{color:var(--muted);font-size:12px;white-space:nowrap}
#pad{height:122px;border:2px solid #b2c5a8;border-radius:20px;position:relative;overflow:hidden;touch-action:none;background:#fffcf1;cursor:grab;outline-offset:3px;isolation:isolate}
#pad:focus-visible{outline:3px solid var(--green)}
#pad:active{cursor:grabbing}
.pad-track{position:absolute;left:11%;right:11%;top:50%;height:3px;transform:translateY(-50%);background:repeating-linear-gradient(to right,#cfdbc1 0,#cfdbc1 9px,transparent 9px,transparent 16px)}
.gate{position:absolute;top:0;bottom:0;width:18%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;z-index:2;pointer-events:none;transition:background .15s,box-shadow .15s}
.gate-prop{height:43px;width:62px;max-width:82%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 0 #1749410a)}
.gate span{font-size:14px;font-weight:850;white-space:nowrap;line-height:1.3}
.gate small{font-size:10px;white-space:nowrap;color:var(--muted)}
.home{left:0;border-right:2px dashed #b3c79d;background:var(--mint)}
.far{right:0;border-left:2px dashed #d5bb80;background:#f9ebc7}
.travel-label{position:absolute;left:23%;right:23%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:7px;align-items:center;color:#637b5e;font-size:17px;font-weight:800;pointer-events:none;text-align:center}
.travel-label>span{background:#fffcf1;padding:0 8px;line-height:1.4}
.travel-label>small{font-size:12px;font-weight:650;background:#fffcf1;padding:0 8px;color:var(--muted)}
#thumb{position:absolute;top:50%;width:34px;height:34px;border-radius:50%;transform:translate(-50%,-50%);left:10%;z-index:4;pointer-events:none;background:var(--orange);border:4px solid var(--cream);box-shadow:0 0 0 2px #bc7445,0 3px 8px #a16c4222;opacity:0}
#thumb i{display:block;width:6px;height:6px;margin:10px;border-radius:50%;background:var(--cream)}
body[data-phase="armed"] #thumb,body[data-phase="outbound"] #thumb,body[data-phase="returning"] #thumb,body[data-phase="success"] #thumb,body[data-phase="demo"] #thumb{opacity:1}
body[data-phase="armed"] .home{box-shadow:inset 0 0 0 3px #4f805b}
body[data-phase="outbound"] .far{background:#f8d789;box-shadow:inset 0 0 0 3px #bc8a39}
body[data-phase="outbound"] .home .gate-prop{opacity:.58}
body[data-phase="returning"] .home{background:#c4dfb8;box-shadow:inset 0 0 0 3px #44845b}
body[data-phase="returning"] .home .gate-prop{transform:rotate(-6deg) scale(1.08)}
body[data-phase="returning"] #instruction{color:#236343}
body[data-phase="returning"] #controlArrow{color:var(--cream);background:var(--green);border-radius:8px;padding:3px 10px}
body[data-phase="returning"] .travel-label>small{visibility:hidden}
body[data-phase="success"] #pad{border-color:#5e8f64}
body[data-phase="success"] .home{background:#c4dfb8}
body[data-phase="failed"] #pad,body[data-phase="cancelled"] #pad{border-color:#c79873}
body[data-phase="failed"] .gate-prop,body[data-phase="cancelled"] .gate-prop{opacity:.65}
#demoVeil{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;background:#fff5db15;color:#617654;font-size:10px;pointer-events:none}
body:not([data-phase="demo"]) #demoVeil{display:none}
.actions{display:flex;align-items:stretch;gap:8px;padding-bottom:3px}
body[data-overlay="entry"] .actions,body[data-overlay="result"] .actions,body[data-overlay="help"] .actions{visibility:hidden}
.actions .primary{flex:1;min-width:0}
.actions .secondary,.actions .quiet-button{flex:0 0 auto}
footer{font-size:10px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;line-height:1.4}
/* Native dialogs keep focus inside their own actions; the game is never paused. */
dialog{border:1.5px solid #b9c9ae;border-radius:22px;width:calc(100% - 32px);max-width:440px;max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:0;background:var(--cream);color:var(--green);box-shadow:0 18px 80px #173f3940;overflow:auto;overscroll-behavior:contain}
dialog::backdrop{background:#173f3966;backdrop-filter:blur(4px)}
.ticket-top{position:relative;background:var(--gold);padding:25px 26px 22px;border-bottom:1.5px dashed #c0ad7d}
.ticket-kicker{font-size:10px;letter-spacing:1.5px;color:#516546;font-weight:850}
.close-button{position:absolute;right:10px;top:10px;padding:0;min-width:44px;width:44px;height:44px;font-size:28px;font-weight:450;background:#fff9e963;color:var(--green);border:1px solid #17494115;border-radius:50%;line-height:1}
.close-button:hover{background:var(--cream)}
.ticket-top h2{margin:12px 0 6px;font-size:38px;line-height:1.2;letter-spacing:1px}
.entry-dialog h2 span{display:inline-block;font-size:13px;letter-spacing:.7px;margin-left:11px;vertical-align:middle;border:1px solid #17494145;border-radius:6px;padding:5px 7px}
.ticket-top p{font-size:14px;margin:0;line-height:1.65;color:#46614b}
.ticket-body{padding:20px 26px 19px}
.entry-route{display:flex;align-items:center;justify-content:center;gap:30px;padding:0 0 16px}
.entry-route img{width:76px;height:62px;object-fit:contain}
.entry-route>span{display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--muted)}
.entry-route b{font-weight:700;white-space:nowrap}
.entry-steps{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0 0 21px;padding:0}
.entry-steps li{display:flex;align-items:flex-start;gap:11px}
.entry-steps li>span{width:25px;height:25px;display:grid;place-items:center;background:var(--mint);border-radius:50%;flex:none;font-size:12px;font-weight:850;margin-top:1px}
.entry-steps strong{font-size:18px;line-height:1.45;display:block;letter-spacing:-.4px}
.entry-steps small{display:block;font-size:12px;color:var(--muted);line-height:1.65;margin-top:2px}
.entry-buttons{display:grid;grid-template-columns:1fr;gap:9px}
.entry-buttons>.primary{grid-column:1/-1;min-height:52px;font-size:18px;margin-bottom:3px}
.ticket-note{font-size:10px;text-align:center;line-height:1.5;color:var(--muted);margin:14px 0 0}
.result-top{text-align:center;padding-top:26px}
.result-top>.ticket-kicker{display:block;padding-right:14px}
.result-top h2{font-size:22px;line-height:1.4;margin:18px 0 0;letter-spacing:0}
.result-summary{display:flex;align-items:center;justify-content:center;gap:14px;margin:12px 0 6px;min-width:0}
.result-portrait{display:block;width:104px;height:104px;flex:none;object-fit:contain;border-radius:18px;background:#fff9e98c}
.result-time{font-size:58px;line-height:1.2;font-weight:900;letter-spacing:-2px;font-variant-numeric:tabular-nums;margin:0;white-space:nowrap;min-width:0}
.result-time>strong{font:inherit;letter-spacing:inherit}
.result-time small{font-size:22px;font-weight:700;letter-spacing:0}
.result-top p{font-size:13px}
.result-records{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px;text-align:center;padding:4px 0 12px;border-bottom:1px solid #dcdcc7}
.result-records>div+div{border-left:1px solid #dcdcc7}
.result-records span{display:block;font-size:11px;color:var(--muted);margin-bottom:7px}
.result-records strong{font-size:20px;font-variant-numeric:tabular-nums;line-height:1.35}
#resultDelta{display:block;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.result-mode{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:10px 0 12px;color:var(--muted)}
.result-mode strong{background:var(--mint);color:var(--green);font-size:11px;padding:5px 9px;border-radius:6px}
.result-buttons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.result-buttons>button{min-height:44px;padding:10px 8px;font-size:14px}
.result-buttons>.primary{font-size:15px}
.result-buttons>.primary>span{margin-left:6px}
.result-status{font-size:11px;line-height:1.5;text-align:center;color:var(--green);margin:8px 0 0}
.result-status:empty{display:none}
.result-dialog .ticket-note{margin-top:10px}
.info-dialog{padding:24px}
.info-header h2{font-size:23px;line-height:1.4;margin:10px 0 18px;letter-spacing:-.4px}
.help-steps{padding-left:22px;margin:0 0 20px}
.help-steps li{font-size:15px;line-height:1.75;padding-left:4px;margin-bottom:7px}
.settings-panel{background:#f1f1df;border:1px solid #d4d9bd;border-radius:14px;padding:12px 14px;margin-bottom:14px}
.mode-label,.sound-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:700}
.sound-setting{margin-top:10px;padding-top:10px;border-top:1px solid #d6dbc4}
select{border:1px solid #b8c8ae;border-radius:9px;background:#fffdf4;padding:9px 8px;color:var(--green);font-size:13px;font-weight:700;min-height:44px;min-width:0;max-width:68%}
.sound-setting button{font-size:13px;padding:8px 14px}
.fine-print{font-size:12px;line-height:1.7;color:var(--muted);margin-bottom:18px}
.fine-print summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700;color:var(--green);gap:8px}
.fine-print summary::before{content:'＋';font-size:16px}
.fine-print[open] summary::before{content:'−'}
.fine-print p{margin:4px 0 12px}
.info-dialog>#closeInfo{width:100%;min-height:48px}
/* Separate canvases preserve playable fallback after WebGL allocation fails. */
#scene3d,#demo3d{display:none;width:100%;height:100%}
#demo3d{object-fit:contain;background:#eee9d9}
body[data-renderer="webgl"] #scene3d{display:block}
body[data-renderer="webgl"] #scene{display:none}
body[data-renderer="fallback"][data-phase="demo"]:not([data-video="failed"]) #demo3d{display:block}
body[data-renderer="fallback"][data-phase="demo"]:not([data-video="failed"]) #scene{display:none}
body[data-renderer="loading"] .scene-caption{color:#846645}
.fallback-badge{display:none;position:absolute;left:8px;bottom:6px;z-index:3;pointer-events:none;font-size:9px;font-weight:650;color:var(--green);background:#fff9e9f2;border:1px solid #b9cdb6;border-radius:6px;padding:3px 6px}
body[data-renderer="fallback"] .fallback-badge{display:block}
body[data-renderer="fallback"][data-phase="demo"] .fallback-badge{bottom:38px}
@media(max-width:600px){
  body{padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  main{gap:9px}
  h1{font-size:26px}h1 span{font-size:10px;margin-left:5px;padding:5px 7px}
  .eyebrow{font-size:8px;letter-spacing:1.1px}
  .header-tools{gap:6px;align-items:flex-end}.mode-status{font-size:9px;max-width:75px;text-align:right;white-space:normal;line-height:1.5;padding-bottom:4px}
  .menu-button{min-width:48px;width:48px;padding:8px;border-radius:12px}.menu-button>span:last-child{display:none}
  .scene-heading{font-size:12px;padding:9px 11px 2px;gap:7px;min-height:33px}.scene-tag{display:none}.scene-card{border-radius:18px}
  .score-row{padding:8px 12px;gap:9px}.score-row label{font-size:10px}.score-row .score-main strong{font-size:28px}.score-row strong{font-size:20px}.score-row small{font-size:11px}
  .score-best,.score-drop{padding-left:12px}.score-best label span{display:none}
  .instruction{display:block;margin-bottom:7px;min-height:0}.instruction strong{font-size:16px;letter-spacing:-.4px;display:block}.instruction>span{font-size:10px;display:block;margin-top:2px}
  #pad{height:118px;border-radius:17px}.gate-prop{height:37px;width:53px}.gate span{font-size:12px;letter-spacing:-.4px}.gate small{font-size:8px;letter-spacing:-.3px}
  .travel-label{font-size:15px;gap:6px}.travel-label>small{font-size:10px}.travel-label>span{padding:0 5px}
  #demoVeil{font-size:9px;padding-bottom:5px}
  .actions{gap:6px}.actions button{font-size:13px;padding:10px 13px}.actions .primary>span{margin-left:10px}
  footer{font-size:9px}footer>span:last-child{display:none}
  /* Narrow result tickets need a compact hero even on tall phone screens. */
  .result-summary{gap:10px}.result-portrait{width:82px;height:82px;border-radius:14px}.result-time{font-size:46px}.result-time small{font-size:17px}
}
@media(max-width:350px){
  h1{font-size:24px}h1 span{font-size:9px;margin-left:3px;padding:4px 6px}.header-tools{gap:4px}.mode-status{font-size:8px;max-width:61px}.eyebrow{font-size:7px}
  .instruction strong{font-size:15px;letter-spacing:-.5px}.gate span{font-size:10px}.gate small{font-size:8px}.travel-label{font-size:13px}
  .actions button{padding-left:10px;padding-right:10px;font-size:12px}
  .ticket-body{padding-left:19px;padding-right:19px}.ticket-top{padding-left:19px;padding-right:19px}.entry-steps strong{font-size:16px}.entry-steps small{font-size:11px}.entry-route{gap:24px}
  .info-dialog{padding:20px}.mode-label,.sound-setting{font-size:12px;gap:7px}select{font-size:12px}.result-records strong{font-size:18px}
}
@media(max-height:650px) and (orientation:portrait){
  body{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}main{gap:7px}
  h1{font-size:23px;margin-top:3px}.eyebrow{font-size:7px}.scene-caption{display:none}.scene-heading{min-height:29px;padding-top:6px}
  .score-row{padding-top:5px;padding-bottom:5px}.score-row .score-main strong{font-size:26px}.score-row strong{font-size:18px}
  #pad{height:100px}.gate-prop{height:31px}.instruction{margin-bottom:5px}.instruction>span{margin-top:0}.travel-label{gap:4px}footer{font-size:8px}
}
/* Dialog density follows available height, including tablet-sized landscape. */
@media(max-height:650px){
  .ticket-top{padding-top:18px;padding-bottom:15px}.ticket-top h2{font-size:32px;margin-top:9px}.ticket-top p{font-size:12px}
  .ticket-body{padding-top:14px;padding-bottom:14px}.entry-route{padding-bottom:10px}.entry-route img{width:62px;height:46px}.entry-route>span{gap:4px;font-size:11px}
  .entry-steps{gap:10px;margin-bottom:15px}.entry-steps strong{font-size:16px}.entry-steps small{font-size:11px;margin-top:0}.entry-steps li>span{width:23px;height:23px}
  .entry-buttons{gap:7px}.entry-buttons>.primary{font-size:17px}.entry-buttons>.secondary,.entry-buttons>.quiet-button{font-size:13px;padding:9px 10px}.ticket-note{margin-top:11px;font-size:9px}
  .result-top h2{font-size:20px}.result-summary{gap:10px;margin-top:8px}.result-portrait{width:82px;height:82px;border-radius:14px}.result-time{font-size:46px}.result-time small{font-size:17px}.result-records{padding-bottom:10px}.result-records span{margin-bottom:5px}.result-mode{padding-top:8px;padding-bottom:9px}.result-buttons>button{font-size:12px}.result-buttons>.primary{font-size:13px}.result-dialog .ticket-note{margin-top:8px}
}
@media(max-height:550px) and (orientation:landscape){
  body{padding:max(6px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  main{grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:44px minmax(56px,1fr) auto auto;gap:6px 12px}
  .game-header{grid-column:1/-1}.eyebrow{display:none}h1{font-size:24px;margin:0}h1 span{font-size:10px}.header-tools{align-items:center;gap:10px}.mode-status{font-size:10px;max-width:none;white-space:nowrap;padding:0}.menu-button{min-width:62px;width:auto;min-height:44px;padding:6px 10px}.menu-button>span:last-child{display:inline}
  .scene-card{grid-column:1;grid-row:2/5;border-radius:16px}.scene-heading{font-size:11px;min-height:28px;padding:5px 9px 0;gap:5px}.scene-tag,.scene-caption{display:none}.scene-heading #badge{font-size:8px;padding:3px 6px}
  .score-row{grid-column:2;grid-row:2;align-self:start;padding:7px 10px;gap:8px;grid-template-columns:1fr 1fr;border-radius:12px}.score-row .score-main strong{font-size:24px}.score-row strong{font-size:19px}.score-row label{font-size:9px}.score-best{padding-left:10px}.score-best label span,.score-drop{display:none}
  .control-section{grid-column:2;grid-row:3}.instruction{display:block;margin-bottom:5px}.instruction strong{font-size:13px;line-height:1.4;letter-spacing:-.4px}.instruction>span{display:block;margin-top:1px;font-size:9px}
  #pad{height:96px;border-radius:14px}.gate-prop{height:32px;width:45px}.gate span{font-size:10px;letter-spacing:-.4px}.gate small{font-size:8px;letter-spacing:-.4px}.travel-label{font-size:12px;gap:4px}.travel-label>small{font-size:9px}.travel-label>span{padding:0 4px}#demoVeil{font-size:8px;padding-bottom:4px}
  .actions{grid-column:2;grid-row:4;gap:5px;padding-bottom:3px}.actions button{min-height:44px;font-size:11px;padding:8px 9px;border-radius:11px}.actions .primary>span{margin-left:7px}
  footer{display:none}#thumb{width:28px;height:28px;border-width:3px}#thumb i{width:5px;height:5px;margin:8px}
  .ticket-dialog{max-width:620px;width:calc(100% - 36px)}.ticket-dialog[open]{display:grid;grid-template-columns:.9fr 1.2fr}.ticket-top{border-bottom:0;border-right:1.5px dashed #c0ad7d;padding:22px 18px}.ticket-top h2{font-size:31px;margin-top:15px}.entry-dialog h2 span{display:block;width:max-content;margin:8px 0 0;font-size:11px}.ticket-top p{font-size:12px;margin-top:12px}.ticket-kicker{font-size:8px;letter-spacing:1px}.close-button{right:7px;top:7px;width:44px;height:44px;z-index:2;background:#fff9e9a6}
  .ticket-body{padding:16px 18px}.entry-route{display:none}.entry-steps{gap:8px;margin-bottom:13px}.entry-steps strong{font-size:15px}.entry-steps small{font-size:10px;margin:0}.entry-steps li{gap:8px}.entry-steps li>span{height:22px;width:22px;font-size:10px}.entry-buttons{gap:6px}.entry-buttons>.primary{min-height:44px;font-size:15px}.entry-buttons>.secondary,.entry-buttons>.quiet-button{font-size:11px;padding:7px 8px}.ticket-note{font-size:8px;margin-top:8px}
  .result-top{padding-top:14px;padding-bottom:14px}.result-top h2{font-size:18px;margin-top:17px}.result-summary{flex-direction:column;gap:0;margin:6px 0 2px}.result-portrait{width:72px;height:72px}.result-time{font-size:42px;margin:0}.result-time small{font-size:16px}.result-top p{font-size:11px;margin-top:2px}.result-dialog .ticket-body{padding-top:14px;padding-bottom:14px}.result-records{padding-top:0;padding-bottom:8px}.result-records strong{font-size:18px}.result-records span{font-size:10px;margin-bottom:4px}.result-mode{padding:6px 0 8px;font-size:11px}.result-mode strong{padding:4px 8px}.result-buttons{gap:6px}.result-buttons>button,.result-buttons>.primary{min-height:44px;font-size:12px;padding:8px 6px}.result-status{font-size:10px;margin-top:6px}.result-dialog .ticket-note{font-size:9px;margin-top:8px}
}
@media(max-width:680px) and (max-height:550px) and (orientation:landscape){
  main{grid-template-columns:minmax(0,1fr) 248px;gap:6px 8px}.scene-heading strong{font-size:10px}.instruction strong{font-size:12px}#pad{height:88px}.gate-prop{height:28px}.gate span{font-size:9px}.gate small{font-size:7px}.actions button{font-size:10px;padding-left:8px;padding-right:8px}.travel-label{font-size:11px}
  .ticket-dialog[open]{grid-template-columns:.85fr 1.2fr}.ticket-top{padding-left:15px;padding-right:15px}.ticket-body{padding:14px 15px}.entry-steps strong{font-size:14px}.entry-steps small{font-size:9px}.entry-steps li{gap:6px}.entry-steps li>span{width:21px;height:21px}.entry-buttons>.secondary,.entry-buttons>.quiet-button{font-size:10px}.result-top h2{font-size:16px}.result-top p{font-size:10px}.result-records{gap:8px}.result-records strong{font-size:16px}#resultDelta{font-size:10px}.result-buttons>button,.result-buttons>.primary{font-size:11px}.result-buttons>.primary>span{margin-left:3px}
}
@media(prefers-reduced-motion:reduce){button,.gate{transition:none}dialog::backdrop{backdrop-filter:none}}

/* The original one-page layout stays in charge; platform additions are in-flow. */
.platform-return{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 12px;border:1.5px solid #d5d9c7;border-radius:14px;text-decoration:none;font-size:13px;font-weight:700;text-align:center}
.platform-return:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.pf-entry-brand{margin:10px 0 0;font:400 11px/1.4 Arial,'Noto Sans TC',system-ui,sans-serif;color:var(--muted);text-align:center;overflow-wrap:anywhere}
/* On short screens, the two secondary actions share a row so the added
   platform return and studio signature fit without shrinking touch targets. */
@media(max-height:650px){
  .entry-dialog .entry-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .entry-dialog .platform-return{font-size:11px;line-height:1.3;padding:9px 6px;white-space:nowrap}
}
/* Compact landscape keeps the complete entry visible beside its title panel. */
@media(max-height:350px) and (orientation:landscape){
  .entry-dialog .ticket-body{padding-top:10px;padding-bottom:10px}
  .entry-dialog .ticket-note,.entry-dialog .pf-entry-brand{margin-top:4px}
}

/* Fast Hands-only QA board. One native dialog, bounded independent scrolling. */
body[data-overlay="ranking"] .actions{visibility:hidden}
.ranking-dialog{width:calc(100% - 28px);max-width:480px;max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:hidden}
.ranking-dialog[open]{display:flex;flex-direction:column}
.ranking-header{position:relative;flex:none;background:var(--gold);padding:18px 22px 14px;border-bottom:1px dashed #c0ad7d}
.ranking-header h2{font-size:24px;line-height:1.3;margin:8px 38px 7px 0}
.ranking-header p{font-size:12px;line-height:1.55;margin:0;padding-right:12px;color:#46614b}
.ranking-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px 22px;scroll-padding:18px;-webkit-overflow-scrolling:touch}
.ranking-scroll:focus-visible,.ranking-dialog input:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.ranking-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ranking-modes button{min-width:44px;min-height:44px;padding:10px}
.ranking-modes button[aria-pressed="true"]{color:var(--cream);background:var(--green);border-color:var(--green)}
.ranking-rule,#rankingPrivacy{font-size:12px;line-height:1.7;color:var(--muted);overflow-wrap:anywhere}
.ranking-own{background:var(--mint);border-radius:12px;padding:12px 14px}
.ranking-own h3{margin:0 0 7px;font-size:13px}.ranking-own p{margin:5px 0 0;font-size:12px;line-height:1.5;overflow-wrap:anywhere}.ranking-own strong{font-size:24px;font-variant-numeric:tabular-nums}
.ranking-status{font-size:12px;line-height:1.65;margin:12px 0;overflow-wrap:anywhere}.ranking-status:empty{display:none}
.ranking-entries{list-style:none;margin:12px 0;padding:0}
.ranking-entries li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid #dedfcb;font-size:13px}
.ranking-place{font-weight:800;text-align:center}.ranking-name{overflow-wrap:anywhere}.ranking-entries strong{font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}.ranking-entries .is-me{background:#dcebdd70}
.ranking-frozen{font-size:17px;font-weight:850;line-height:1.6;margin:0 0 12px}.ranking-nickname{display:block;font-size:14px;font-weight:750;margin:16px 0 8px}
#rankingNickname{display:block;width:100%;min-height:46px;padding:10px 12px;border:1.5px solid #b8c8ae;border-radius:10px;background:#fffdf4;color:var(--green);font:16px/1.4 system-ui,sans-serif;user-select:text;-webkit-user-select:text}
.ranking-consent{display:flex;align-items:center;gap:10px;min-height:48px;font-size:12px;line-height:1.6;margin:12px 0;cursor:pointer}
.ranking-consent input{width:22px;height:22px;margin:11px 0;flex:none;accent-color:var(--green)}
#rankingSubmit,#rankingRefresh{width:100%;min-height:44px;white-space:normal}
.ranking-footer{display:block;flex:none;padding:10px 22px;border-top:1px solid #dedfcb;background:var(--cream)}
.ranking-footer button{width:100%;min-height:44px}
@media(max-height:400px){.ranking-header{padding:10px 16px}.ranking-header h2{font-size:20px;margin-top:4px;margin-bottom:4px}.ranking-header p{font-size:11px}.ranking-scroll{padding:12px 16px}.ranking-footer{padding:8px 16px}}
@media(max-width:350px){.ranking-header,.ranking-scroll{padding-left:16px;padding-right:16px}.ranking-frozen{font-size:15px}.ranking-entries li{gap:5px;font-size:12px}.ranking-entries strong{font-size:12px}}

/* Match the platform toolbar while keeping the single-gesture game layout. */
.game-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
.game-header .pf-home{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 10px;border:1.5px solid #d5d9c7;border-radius:12px;color:var(--green);font-size:13px;font-weight:750;text-decoration:none;white-space:nowrap}
.game-header .pf-home:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.header-tools{gap:6px}.header-tools>button{min-width:44px;min-height:44px;padding:9px 12px;font-size:13px}.header-tools .mode-status{display:none}
.instruction strong{font-size:21px;line-height:1.45}.instruction>span{font-size:14px}
.entry-steps strong{font-size:20px}.entry-steps small{font-size:14px}.help-steps li{font-size:16px}
body[data-renderer="webgl"] .scene-caption{display:none}
@media(max-width:600px) and (orientation:portrait){
 .game-header{grid-template-columns:auto 1fr;gap:7px}.game-header .pf-home{grid-column:1;grid-row:1;justify-self:start}.game-header .header-tools{grid-column:2;grid-row:1;justify-self:end}.pf-game.pf-fast-hands .game-header>.pf-studio-heading{grid-column:1/-1;grid-row:2}.game-header h1{font-size:25px}.game-header .eyebrow{display:none}.header-tools .menu-button{width:44px;min-width:44px}.instruction strong{font-size:18px;letter-spacing:-.4px}.instruction>span{font-size:12px}.entry-steps strong{font-size:19px}.entry-steps small{font-size:13px}
}
@media(max-height:550px) and (orientation:landscape){
 .game-header{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}.game-header h1{font-size:21px}.game-header h1 span{display:none}.game-header .pf-studio-live{font-size:9px}.header-tools>button{padding:8px 10px;font-size:12px}.header-tools .menu-button{min-width:44px;width:44px}.header-tools .menu-button>span:last-child{display:none}.instruction strong{font-size:15px;line-height:1.45}.instruction>span{font-size:11px}.entry-steps strong{font-size:17px}.entry-steps small{font-size:12px}
}

body[data-playback="replay"] #pad{cursor:default;border-style:dashed}body[data-playback="replay"] #thumb{opacity:1}

/* Sharing stays in the result ticket; desktop retains its PNG download. */
.result-share-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #dcdcc7}
.result-share-actions>a,.result-share-actions>button{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 8px;font-size:14px;font-weight:750;text-align:center;text-decoration:none;white-space:normal;line-height:1.4}
.result-share-actions>a{border:1.5px solid #c5d2bb;border-radius:10px;background:var(--mint);color:var(--green)}
.result-share-actions>a:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.result-share-actions>a:not([href]){opacity:.5;pointer-events:none}
.result-share-actions>#resultCopy{grid-column:1/-1}
.share-fallback{margin-top:12px;padding:12px;border:1px solid #c5d2bb;border-radius:12px;background:#fffdf6}
.share-fallback[hidden],.share-fallback>[hidden]{display:none}
.share-fallback img{display:block;width:100%;height:auto;max-width:360px;margin:0 auto 12px;user-select:auto;-webkit-user-select:auto;-webkit-touch-callout:default}
.share-fallback textarea{width:100%;min-height:130px;padding:10px;margin-bottom:10px;resize:vertical;border:1px solid #c5d2bb;border-radius:8px;font:14px/1.6 system-ui,sans-serif;color:var(--green);background:white;user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}
.share-fallback button{width:100%;min-height:44px}
@media(max-height:550px),(max-width:350px){.result-share-actions{gap:6px;margin-top:8px;padding-top:8px}.result-share-actions>a,.result-share-actions>button{font-size:12px;padding:8px 6px}}

/* A larger desktop stage with supporting controls beside it. The continuous
   gesture track keeps the original main width, height and percentage gates. */
@media(min-width:1000px) and (min-height:680px){
  .pf-fast-hands main{grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:auto minmax(0,1fr) auto auto auto;grid-template-areas:"header header" "scene scores" "scene actions" "control control" "footer footer"}
  .pf-fast-hands .game-header{grid-area:header}
  .pf-fast-hands .scene-card{grid-area:scene}
  .pf-fast-hands .score-row{grid-area:scores;align-self:start;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;padding:20px}
  .pf-fast-hands .score-main{grid-column:1/-1}
  .pf-fast-hands .score-best{border-left:0;padding-left:0}
  .pf-fast-hands .score-drop{padding-left:12px}
  .pf-fast-hands .score-row .score-main strong{font-size:40px}
  .pf-fast-hands .actions{grid-area:actions;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-self:end}
  .pf-fast-hands .actions button{flex:none;min-height:48px;padding:10px 8px;font-size:13px}
  .pf-fast-hands .actions .primary{grid-column:1/-1;font-size:15px}
  .pf-fast-hands .control-section{grid-area:control}
  .pf-fast-hands main>footer{grid-area:footer}
}

/* Keep the complete standard result ticket on one desktop screen. */
@media(min-width:1000px) and (min-height:560px){
 .result-dialog{width:calc(100% - 48px);max-width:900px;max-height:calc(100dvh - 32px)}
 .result-dialog[open]{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.25fr)}
 .result-dialog .result-top{display:flex;flex-direction:column;justify-content:center;padding:24px 22px;border-bottom:0;border-right:1.5px dashed #c0ad7d}
 .result-dialog .ticket-kicker{font-size:10px}.result-dialog .result-top h2{font-size:23px;margin-top:16px}
 .result-dialog .result-summary{flex-direction:column;gap:8px;margin:12px 0 8px}.result-dialog .result-portrait{width:118px;height:118px}.result-dialog .result-time{font-size:52px}.result-dialog .result-time small{font-size:19px}.result-dialog .result-top p{font-size:12px}
 .result-dialog .ticket-body{padding:20px 22px}.result-dialog .result-records{padding-bottom:10px}.result-dialog .result-records span{margin-bottom:5px}.result-dialog .result-mode{padding:8px 0}.result-dialog .result-buttons{gap:7px}.result-dialog .result-buttons>button{min-height:44px;font-size:12px;padding:8px}
 .result-dialog .result-share-actions{margin-top:9px;gap:6px}.result-dialog .result-share-actions>a,.result-dialog .result-share-actions>button{min-height:44px;padding:8px 5px;font-size:11px}
 .result-dialog .ticket-body>.level-switch{margin-top:9px;padding-top:9px}.result-dialog .ticket-note{margin-top:8px;font-size:10px}.result-dialog .pf-studio-result{margin-top:8px;font-size:9px}
 .result-dialog .share-fallback:not([hidden]){max-height:170px;overflow:auto}
}