/* Play surface owner. The map and input area are separate from the status HUD. */
@font-face{font-family:GRGame;src:url('/assets/gr-ui/korean.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--gr-blue:#245ce6;--gr-blue-pressed:#1747b8;--gr-ink:#152747;--gr-muted:#53627a;--gr-soft:#edf2ff;--gr-gold:#94620a;--gr-danger:#b93838;--gr-border:#d6deea;--gr-surface:#fff}
body,button,input,select{font-family:GRGame,"Noto Sans KR","Malgun Gothic",system-ui,sans-serif;letter-spacing:0}
button{transition:transform 80ms ease,background-color 120ms ease;line-height:1.3}
.header-right .icon-btn,.page-navigation button{border-radius:12px;box-shadow:none}
.page-navigation button{min-height:44px}
.play-column .game-area{border:1px solid var(--gr-border);box-shadow:0 2px 6px #1527470b;border-radius:18px}
.game-area .map-top,.map-footer{background:var(--gr-surface);border-color:var(--gr-border)}
.map-label,.compass{color:var(--gr-ink)}
.sidebar .controls{margin:0;padding:8px 0 10px;border:0;order:-1}
.sidebar .controls-title{padding:0;text-align:left;font-size:12px;color:var(--gr-muted);min-height:20px;line-height:1.4}
.sidebar .controls-title b{color:var(--gr-ink)}
.sidebar .keys{gap:10px;margin:6px 0 9px}
.sidebar .key{height:82px;min-height:64px;padding:8px;border:1px solid #1747b8;border-bottom:4px solid #143c9b;border-radius:16px;background:var(--gr-blue);color:#fff;box-shadow:inset 0 2px 0 #ffffff38,0 3px 5px #15274718;gap:6px;touch-action:none}
.sidebar .key .arrow{font-family:GRGame,system-ui,sans-serif;font-size:32px;font-weight:700;line-height:1}
.sidebar .key small{color:#fff;font-size:13px;font-weight:650;line-height:1.3}
.sidebar .key:active,.sidebar .key.pressed,.sidebar .key.holding,.sidebar .key.queued{background:var(--gr-blue-pressed);border-color:#10338a;box-shadow:inset 0 2px 3px #0c246c30;transform:translateY(2px)}
.sidebar .key.queued{background:var(--gr-blue-pressed)!important;color:#fff!important;outline:2px solid #799eff;outline-offset:2px}
.sidebar .brake-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;height:46px;margin:0;padding:8px;border:1px solid #b9c8e3;border-bottom:3px solid #b9c8e3;border-radius:13px;background:#fff;color:var(--gr-ink);font-size:14px;font-weight:650;touch-action:none;box-shadow:none}
.sidebar .brake-button.holding,.sidebar .brake-button:active{background:var(--gr-soft);transform:translateY(1px)}
.sidebar .control-note{margin:7px 0 0}
.map-footer .tutorial-skip,#briefingActions #skipBriefing{background:var(--gr-soft);color:#244ca4;border-color:#c4d3f0;font-family:inherit}
.game-area .map-label{font-weight:650}
.sidebar>.pause-button{position:static;min-height:44px;height:auto;margin:0;padding:9px 12px;border-radius:12px;border-color:var(--gr-border);background:#fff;color:var(--gr-ink);font-size:12px;white-space:normal}
.sidebar .stat{background:#fff;border-radius:12px;color:var(--gr-ink)}
.sidebar .stat-label{letter-spacing:0;color:var(--gr-muted)}
.sidebar .stat strong,.sidebar .stat strong.combo{color:var(--gr-ink);font-variant-numeric:tabular-nums}
.sidebar .stat strong.combo{color:var(--gr-blue)}
.sidebar .deadline-badge{background:var(--gr-soft);color:var(--gr-ink);border:0;border-radius:10px}
.sidebar .deadline-badge.urgent{background:#fff0ee;color:var(--gr-danger)}
.sidebar .deadline-badge span{color:inherit}
.sidebar .hearts{display:flex;align-items:center;gap:3px;letter-spacing:0}
.gr-heart{display:inline-block;width:18px;height:18px;background:center/contain no-repeat url('/assets/gr-ui/heart.webp')}
.gr-heart.empty{opacity:.2;filter:grayscale(1)}
.gr-heart img{display:none}
.sidebar .food-icon{background:center/contain no-repeat url('/assets/gr-ui/dispatch.webp');color:transparent}
.mobile-playing .guide-dock:not(.floating-guide){color:var(--gr-ink)}
.guide-dock .junction strong,.guide-dock .fork-coach strong{color:var(--gr-ink)}
.map-viewport .ride-feedback{font-family:GRGame,system-ui,sans-serif;text-shadow:0 1px 2px #fff,0 -1px 2px #fff,1px 0 2px #fff,-1px 0 2px #fff}
.map-viewport .ride-feedback b,.map-viewport .ride-feedback.high-combo b{color:#1648ba;font-style:normal;font-weight:800;letter-spacing:0}
.map-viewport .ride-feedback span{color:var(--gr-ink);font-weight:650}
.map-viewport .ride-feedback.hit-miss b{color:var(--gr-danger)}
@media(max-width:650px){
 body.mobile-playing{height:var(--gr-viewport-height,100svh);overflow:hidden}
 .mobile-playing .layout,.mobile-playing.roadgrit-embedded .layout{display:flex;flex-direction:column;height:calc(var(--gr-viewport-height,100svh) - 56px);padding:0 10px max(8px,env(safe-area-inset-bottom));gap:8px;overflow:auto;overscroll-behavior:contain}
 .mobile-playing.roadgrit-embedded .layout{height:calc(var(--gr-viewport-height,100svh) - 52px)}
 .mobile-playing .play-column{flex:1 0 220px;min-height:220px;gap:5px}
 .mobile-playing .play-column .game-area{min-height:170px!important}
 .mobile-playing .sidebar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 10px;flex:none;padding:0;min-width:0}
 .mobile-playing .sidebar .controls{grid-row:1;grid-column:1/-1;margin:0;padding:0}
 .mobile-playing .sidebar .controls-title{display:none}
 .mobile-playing .sidebar .keys{margin:2px 0 5px;gap:8px}
 .mobile-playing .sidebar .key{height:72px;min-height:64px;padding:6px;border-radius:15px}
 .mobile-playing .sidebar .key .arrow{font-size:30px;line-height:30px}
 .mobile-playing .sidebar .key small{font-size:12px;line-height:16px}
 .mobile-playing .sidebar .brake-button{height:44px;min-height:44px;font-size:13px}
 .mobile-playing .sidebar .stage-info{grid-row:3;grid-column:1;align-self:center}
 .mobile-playing .sidebar .stage-title{font-size:13px;line-height:20px;color:var(--gr-ink);font-weight:700}
 .mobile-playing .sidebar .status-row{grid-row:3;grid-column:1;justify-self:end;align-self:center}
 .mobile-playing .sidebar .stats{grid-row:2;grid-column:1;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:5px}
 .mobile-playing .sidebar .stat{padding:7px 8px;border-radius:10px}
 .mobile-playing .sidebar .stat-label{font-size:9px;line-height:14px;white-space:normal}
 .mobile-playing .sidebar .stat strong,.mobile-playing .sidebar #score{font-size:clamp(14px,4.6vw,19px);line-height:24px;margin:1px 0 0;white-space:nowrap}
 .mobile-playing .sidebar .timer-wrap{grid-row:2;grid-column:2;display:flex;flex-direction:column;align-self:stretch}
 .mobile-playing .sidebar .timer-label{font-size:10px;line-height:16px;margin:0 0 2px}
 .mobile-playing .sidebar .deadline-badge{padding:5px 7px;gap:4px;margin-top:3px;flex:1}
 .mobile-playing .sidebar .deadline-badge>span{font-size:9px;line-height:14px}
 .mobile-playing .sidebar .deadline-badge b{font-size:22px;line-height:26px}
 .mobile-playing .sidebar>.pause-button{grid-row:3;grid-column:2;height:44px;min-height:44px;margin:0;padding:7px;font-size:12px;border-radius:10px}
 .mobile-playing .game-area .map-top{height:27px}.mobile-playing .map-footer{min-height:36px;padding:2px 5px}
 .mobile-playing .map-tools button{height:32px;min-height:32px;min-width:36px;font-size:11px}
 .mobile-playing.mobile-tutorial .sidebar>.pause-button{display:block}
 .mobile-playing.mobile-tutorial .sidebar{grid-template-rows:auto auto}
 .mobile-playing.mobile-tutorial .play-column{min-height:330px}
 .mobile-playing.mobile-tutorial .sidebar>.pause-button{grid-row:2;grid-column:1/-1}
 .mobile-playing .guide-dock.show-fork:not(.floating-guide){height:48px;min-height:48px;padding:2px 9px 10px}
 .mobile-playing .fork-coach>span,.mobile-playing .fork-coach>small{display:none}
 .mobile-playing .fork-coach b,.mobile-playing .fork-coach strong{font-size:13px;line-height:16px;margin:0}
 .mobile-playing.mobile-overview .sidebar{display:none}
 .mobile-playing.briefing-mode .guide-dock.show-overview:has(#briefingActions:not([hidden])){height:146px!important;min-height:146px!important;padding:8px 12px!important}
 body.mobile-playing:not(.roadgrit-embedded)>header{height:56px;min-height:56px}
}
@media(max-width:650px) and (max-height:650px){
 .mobile-playing .sidebar .key{height:64px}.mobile-playing .sidebar{gap:4px 8px}
 .mobile-playing .sidebar .stat{padding:4px 6px}.mobile-playing .sidebar .controls-title{font-size:10px}
 .mobile-playing .play-column{flex-basis:205px;min-height:205px}
}
@media(prefers-reduced-motion:reduce){.sidebar .key,.sidebar .brake-button{transition:none}.sidebar .key:active,.sidebar .key.holding,.sidebar .key.queued{transform:none}}