styles.css

:root {
  color-scheme: dark;
  --ink: #17151a;
  --bezel: #29282d;
  --bezel-hi: #47464d;
  --screen: #dfe8d0;
  --screen-dark: #183a2b;
  --paper: #fff9dd;
  --danger: #d73e32;
  --warning: #f4c338;
  --ok: #3f9b60;
  --shadow: 8px 8px 0 #111;
  font-family: Consolas, "Courier New", monospace;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #111; touch-action: manipulation; }
body.gameplay { touch-action: none; }
#game-shell, #game { width: 100%; height: 100%; position: relative; }
#game canvas { display: block; margin: auto; image-rendering: pixelated; image-rendering: crisp-edges; touch-action:none; }
#ui-layer { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
#ui-layer.menu-ui { display: grid; place-items: center; pointer-events: auto; padding: 18px; background: radial-gradient(circle at 50% 35%, rgba(244,195,56,.14), transparent 42%); touch-action:pan-y; }
.kiosk-shell { position: relative; width: min(870px, 94vw); height: min(650px, 94vh); padding: 56px 62px 72px; border: 12px solid var(--ink); border-radius: 24px 24px 42px 42px; background: linear-gradient(110deg, var(--bezel-hi), var(--bezel) 22%, #212025 80%); box-shadow: 0 0 0 6px #666, 18px 22px 0 rgba(0,0,0,.42); color: var(--ink); }
.kiosk-shell::before, .kiosk-shell::after { content:"+"; position:absolute; top:18px; width:22px; height:22px; border:3px solid #111; border-radius:50%; background:#777; color:#222; font:bold 17px Arial; text-align:center; line-height:17px; }
.kiosk-shell::before { left:20px; } .kiosk-shell::after { right:20px; }
.kiosk-brand-strip { position:absolute; left:58px; right:58px; top:12px; height:38px; display:flex; align-items:center; justify-content:center; gap:14px; color:#f5f1df; font:900 clamp(13px,2vw,19px) "Arial Black", Impact, sans-serif; letter-spacing:1.5px; background:#18171b; border:4px solid #0b0b0d; }
.status-lamp { display:inline-block; width:13px; height:13px; border:3px solid #111; box-shadow:0 0 8px currentColor; }
.status-lamp.red { color:#ef4538; background:#ef4538; }.status-lamp.amber { color:#f4c338; background:#f4c338; }.status-lamp.green { color:#4ad26c; background:#4ad26c; animation:status-blink 1.6s steps(1) infinite; }
.kiosk-bezel { height:100%; padding:18px; border:8px solid #111; background:#09090b; box-shadow:inset 0 0 0 4px #626167; }
.kiosk-status { height:30px; display:flex; align-items:center; gap:8px; padding:0 10px; color:#b7e9bb; background:#102219; font-size:12px; letter-spacing:1.2px; border-bottom:3px solid #111; }
.status-code { margin-left:auto; color:#789884; }
.kiosk-screen { position:relative; height:calc(100% - 30px); min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; scrollbar-color:var(--screen-dark) #b5c1ad; scrollbar-width:auto; padding:20px 26px; background:var(--screen); box-shadow:inset 0 0 26px rgba(24,58,43,.28); }
.kiosk-screen::-webkit-scrollbar { width:14px; }
.kiosk-screen::-webkit-scrollbar-track { background:#b5c1ad; border-left:3px solid var(--ink); }
.kiosk-screen::-webkit-scrollbar-thumb { background:var(--screen-dark); border:3px solid #b5c1ad; }
.kiosk-screen::after { content:""; pointer-events:none; position:absolute; inset:0; background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(20,40,25,.055) 3px 4px); mix-blend-mode:multiply; }
.kiosk-hardware { position:absolute; left:70px; right:70px; bottom:17px; height:40px; }
.card-reader { position:absolute; left:0; width:58px; height:34px; border:5px solid #111; background:#3e3d43; box-shadow:inset -9px 0 #18171b; }
.card-reader::after { content:""; position:absolute; right:5px; bottom:4px; width:6px; height:6px; background:#4ad26c; box-shadow:0 -9px #f4c338; }
.receipt-slot { position:absolute; left:50%; translate:-50% 0; top:7px; width:210px; height:18px; border:5px solid #111; background:#08080a; box-shadow:inset 0 4px #555; }
.speaker-grill { position:absolute; right:0; top:3px; width:75px; height:28px; background:radial-gradient(circle,#0b0b0d 2px,transparent 3px) 0 0/12px 12px; }
.screen-heading { display:flex; align-items:center; gap:14px; border-bottom:6px solid var(--ink); padding-bottom:10px; margin-bottom:12px; }
.screen-heading span { display:grid; place-items:center; flex:0 0 48px; height:42px; color:#fff; background:var(--danger); border:4px solid var(--ink); font:bold 18px Arial; }
.screen-heading h1 { margin:0; font:900 clamp(24px,4vw,38px) "Arial Black", Impact, sans-serif; letter-spacing:-1px; line-height:1; }
.screen-subtitle { margin:0 0 12px; color:#49604f; font:bold 13px Consolas,monospace; }
.language-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; }
.kiosk-button { position:relative; min-height:52px; border:5px solid var(--ink); color:var(--ink); background:var(--paper); box-shadow:4px 5px 0 var(--ink); font:900 clamp(15px,2.2vw,21px) "Arial Black", Arial, sans-serif; cursor:pointer; transition:translate 70ms,box-shadow 70ms,background 90ms; }
.kiosk-button:hover, .kiosk-button:focus-visible { outline:4px solid var(--warning); outline-offset:2px; background:#fff; }
.kiosk-button:active { translate:4px 5px; box-shadow:0 0 0 var(--ink); }
.language-button { min-height:39px; padding-left:50px; text-align:left; }
.language-button::before { content:attr(data-index); position:absolute; left:0; top:0; bottom:0; width:40px; display:grid; place-items:center; color:#fff; background:var(--screen-dark); border-right:4px solid var(--ink); font:700 13px Consolas; }
.title-lockup { display:grid; grid-template-columns:1fr auto; align-items:end; border-bottom:7px solid var(--ink); margin-bottom:15px; }
.tiny-label { grid-column:1/-1; color:#506757; font:bold 12px Consolas; letter-spacing:1.4px; }
.title-lockup h1 { margin:2px 0 7px; font:900 clamp(34px,7vh,64px)/.82 "Arial Black", Impact, sans-serif; letter-spacing:-4px; }
.title-lockup em { color:var(--danger); font-style:normal; text-shadow:3px 3px 0 var(--warning); }
.title-rule { width:100px; height:70px; margin-bottom:8px; background:repeating-linear-gradient(90deg,var(--ink) 0 7px,transparent 7px 12px); border-bottom:12px solid var(--danger); }
.service-list { display:grid; gap:8px; }
.service-button { min-height:53px; text-align:left; padding:7px 20px; }
.service-button::after { content:"›"; position:absolute; right:18px; font-size:28px; line-height:18px; }
.featured-service { background:var(--warning); }
.start-complaint { position:absolute; right:34px; bottom:76px; z-index:80; width:max-content; max-width:min(540px,76vw); min-height:52px; padding:11px 18px 13px; color:#111; background:#fff; border:5px solid #111; box-shadow:5px 6px 0 #111; font:900 clamp(14px,2vw,20px)/1.08 "Arial Black",Arial,sans-serif; overflow-wrap:anywhere; word-break:keep-all; opacity:0; }
.start-complaint::before { content:""; position:absolute; right:28px; top:100%; width:0; height:0; border-left:15px solid transparent; border-right:15px solid transparent; border-top:18px solid #111; }
.start-complaint::after { content:""; position:absolute; right:34px; top:calc(100% - 1px); width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-top:11px solid #fff; }
.start-complaint.pop { animation:receipt-pop .18s steps(2) forwards; }
.guide-panel { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.control-diagram { min-height:92px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; padding:12px; border:5px solid var(--ink); background:#cbd9c4; font:bold 15px Consolas; }
.control-diagram.wide { grid-column:1/-1; min-height:72px; }
kbd { min-width:42px; padding:7px; border:4px solid #111; background:#fff; box-shadow:3px 3px 0 #111; font:bold 18px Consolas; text-align:center; }
.guide-actions, .result-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:14px; }
.guide-actions .kiosk-button, .result-actions .kiosk-button { min-width:180px; }
.guide-actions.single { justify-content:flex-start; }
.start-button { background:var(--warning); }
.secondary-button { background:#d5d5d0; }
.share-button { background:#b9d9c1; }
.credit-receipt { width:min(430px,95%); margin:10px auto; padding:16px 22px 24px; background:var(--paper); border:4px solid var(--ink); box-shadow:6px 7px 0 var(--ink); clip-path:polygon(0 0,100% 0,100% 95%,96% 100%,92% 95%,88% 100%,84% 95%,80% 100%,76% 95%,72% 100%,68% 95%,64% 100%,60% 95%,56% 100%,52% 95%,48% 100%,44% 95%,40% 100%,36% 95%,32% 100%,28% 95%,24% 100%,20% 95%,16% 100%,12% 95%,8% 100%,4% 95%,0 100%); font:15px/1.25 Consolas; }
.credit-receipt p { margin:4px 0 12px; }.credit-receipt small { display:block; border-top:2px dashed #444; padding-top:9px; text-align:center; }
.cutscene-ui { pointer-events:none; }
.cutscene-bubble { position:absolute; left:var(--bubble-x,50%); top:var(--bubble-y,69%); width:max-content; max-width:min(680px,calc(100vw - 28px)); min-width:170px; padding:13px 20px 15px; translate:-50% -100%; color:#111; background:#fff; border:6px solid #111; box-shadow:7px 8px 0 rgba(0,0,0,.55); font:900 clamp(18px,3.3vw,31px)/1.08 "Arial Black",Arial,sans-serif; text-align:center; overflow-wrap:anywhere; word-break:keep-all; opacity:0; }
.cutscene-bubble::before { content:""; position:absolute; left:var(--bubble-tail-x,50%); top:100%; translate:-50% 0; width:0; height:0; border-left:18px solid transparent; border-right:18px solid transparent; border-top:22px solid #111; }
.cutscene-bubble::after { content:""; position:absolute; left:var(--bubble-tail-x,50%); top:calc(100% - 1px); translate:-50% 0; width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent; border-top:14px solid #fff; }
.cutscene-bubble.pop { animation:receipt-pop .15s steps(2) forwards; }
.result-shell { height:min(610px,94vh); }
.result-shell .kiosk-screen { padding-top:14px; padding-bottom:10px; }
.result-layout { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:9px; height:100%; }
.result-share-card { min-height:0; margin:0; border:5px solid var(--ink); background:#29282d; box-shadow:6px 7px 0 var(--ink); overflow:hidden; }
.result-share-card img { display:block; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; background:#dfe8d0; }
.result-shell .result-actions { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:0; }
.result-shell .result-actions .kiosk-button { min-width:0; min-height:46px; }
.hud-ui { pointer-events:none; }
.game-hud { position:absolute; inset:0; color:#111; }
.objective-ticket { position:absolute; left:max(18px,env(safe-area-inset-left)); top:max(16px,env(safe-area-inset-top)); min-width:280px; max-width:430px; padding:9px 16px 12px 18px; border:5px solid #111; background:var(--paper); box-shadow:6px 7px 0 rgba(0,0,0,.55); clip-path:polygon(0 0,100% 0,100% 86%,96% 100%,92% 86%,88% 100%,84% 86%,80% 100%,76% 86%,72% 100%,68% 86%,64% 100%,60% 86%,56% 100%,52% 86%,48% 100%,44% 86%,40% 100%,36% 86%,32% 100%,28% 86%,24% 100%,20% 86%,16% 100%,12% 86%,8% 100%,4% 86%,0 100%); }
.objective-ticket small { display:block; color:#7d4635; font:bold 11px Consolas; letter-spacing:1px; }
.objective-ticket strong { display:block; margin-top:2px; font:900 clamp(17px,2.3vw,25px) "Arial Black",Arial,sans-serif; line-height:1; }
.objective-ticket span { display:block; margin-top:4px; color:#c53128; font:900 18px Consolas; }
.timer-module { position:absolute; right:max(18px,env(safe-area-inset-right)); top:max(16px,env(safe-area-inset-top)); padding:7px 13px 9px 16px; border:6px solid #111; background:#26352c; color:#bdf6c8; box-shadow:6px 7px 0 rgba(0,0,0,.55),inset 0 0 0 3px #55675d; min-width:190px; text-align:right; }
.timer-module small { display:block; color:#7dae89; font:bold 10px Consolas; letter-spacing:2px; }
.timer-module strong { font:900 26px Consolas; text-shadow:0 0 7px #4ad26c; }
.timer-module i { position:absolute; left:8px; top:10px; width:8px; height:8px; background:#4ad26c; box-shadow:0 0 8px #4ad26c; animation:status-blink 1s steps(1) infinite; }
.weapon-rack { pointer-events:auto; position:absolute; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); display:flex; gap:7px; padding:7px; border:5px solid #111; background:#2b292e; box-shadow:6px 7px 0 rgba(0,0,0,.52); }
.weapon-rack::before { content:"WEAPON"; position:absolute; right:0; bottom:100%; padding:3px 7px; color:#fff; background:#111; font:bold 9px Consolas; letter-spacing:1px; }
.weapon-slot { position:relative; width:70px; height:64px; padding:0; border:4px solid #111; background:#b7b9b1; filter:saturate(.7); cursor:pointer; touch-action:manipulation; }
.weapon-slot:hover:not([aria-disabled="true"]),.weapon-slot:focus-visible { outline:4px solid #fff; outline-offset:2px; }
.weapon-slot.selected { background:var(--warning); outline:4px solid #fff; outline-offset:-7px; filter:none; transform:translateY(-5px); }
.weapon-slot.empty { opacity:.42; filter:grayscale(1); }
.weapon-slot[aria-disabled="true"] { cursor:not-allowed; }
.weapon-slot b { position:absolute; z-index:2; left:-4px; top:-4px; width:22px; height:22px; display:grid; place-items:center; color:#fff; background:#111; font:bold 13px Consolas; }
.weapon-slot img { display:block; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.weapon-slot span { position:absolute; right:2px; bottom:1px; min-width:25px; padding:1px 3px; color:#fff; background:#111; font:bold 11px Consolas; text-align:center; }
.stress-report { pointer-events:auto; position:absolute; z-index:60; left:50%; top:50%; translate:-50% -50%; width:min(590px,88vw); padding:16px; color:#bdf6c8; background:#17231c; border:7px solid #111; box-shadow:0 0 0 4px #68756c,12px 14px 0 rgba(0,0,0,.55); }
.stress-report>strong { display:block; padding-bottom:8px; border-bottom:4px solid #4ad26c; color:#fff9dd; font:900 25px "Arial Black",Arial,sans-serif; }
.stress-report p { margin:9px 0; color:#f4c338; font:bold 17px Consolas; }
.stress-report pre { max-height:170px; overflow:auto; margin:0; padding:9px; color:#bdf6c8; background:#0d1510; border:3px solid #4d6253; font:11px/1.25 Consolas; user-select:text; touch-action:auto; }
.stress-report div { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:10px; }
.stress-report button { min-height:42px; color:#111; background:#f4c338; border:4px solid #111; box-shadow:3px 4px 0 #000; font:900 13px "Arial Black",Arial,sans-serif; }
.playtest-report { pointer-events:auto; position:absolute; z-index:70; inset:10px; display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.9fr); grid-template-rows:auto auto minmax(0,1fr) auto; gap:8px 16px; padding:14px 16px; color:#bdf6c8; background:#17231c; border:7px solid #111; box-shadow:inset 0 0 0 4px #68756c,9px 10px 0 rgba(0,0,0,.5); }
.playtest-report>strong { grid-column:1/-1; padding-bottom:7px; border-bottom:4px solid #4ad26c; color:#fff9dd; font:900 22px "Arial Black",Arial,sans-serif; letter-spacing:1px; }
.playtest-state { grid-column:1/-1; margin:0; padding:5px 9px; color:#111; background:#f4c338; border:3px solid #111; font:900 14px Consolas,monospace; }
.playtest-state.pass { background:#5ed677; }.playtest-state.fail { color:#fff; background:#d73e32; }
.playtest-report ol { grid-row:3; margin:0; padding:9px 9px 9px 34px; color:#fff9dd; background:#0d1510; border:3px solid #4d6253; font:bold 15px/1.75 Consolas,monospace; }
.playtest-average { grid-row:4; display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:2px 12px; padding:7px 10px; color:#111; background:#dfe8d0; border:3px solid #111; }
.playtest-average span { font:bold 11px Consolas; }.playtest-average b { justify-self:end; font:900 25px Consolas; }.playtest-average small { grid-column:1/-1; font:bold 10px Consolas; }
.playtest-report pre { grid-column:2; grid-row:3/5; min-height:0; overflow:auto; margin:0; padding:8px; color:#bdf6c8; background:#0d1510; border:3px solid #4d6253; font:9px/1.2 Consolas; user-select:text; touch-action:auto; }
.playtest-report-actions { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.playtest-report-actions .kiosk-button { min-height:36px; font-size:12px; }
@keyframes receipt-pop { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes status-blink { 0%,82% { opacity:1; } 83%,90% { opacity:.2; } 91% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }
@media (max-width:760px), (max-height:560px) {
  #ui-layer.menu-ui { padding:6px; }
  .kiosk-shell { width:98vw; height:96vh; padding:44px 38px 56px; border-width:8px; border-radius:16px 16px 25px 25px; }
  .kiosk-brand-strip { left:38px; right:38px; top:8px; height:30px; border-width:3px; }
  .kiosk-bezel { padding:10px; border-width:6px; }
  .kiosk-screen { padding:12px 16px; }
  .kiosk-hardware { left:45px; right:45px; bottom:9px; transform:scale(.78); transform-origin:center bottom; }
  .title-lockup h1 { font-size:clamp(30px,10vh,48px); }
  .service-button,.kiosk-button { min-height:42px; }
  .screen-heading { margin-bottom:7px; padding-bottom:6px; }
  .screen-heading h1 { font-size:24px; }
  .language-grid { gap:5px 8px; }
  .language-button { min-height:38px; }
  .guide-panel { margin:7px 0; gap:7px; }
  .control-diagram { min-height:62px; padding:6px; }
  .control-diagram.wide { min-height:48px; }
  .guide-actions,.result-actions { margin-top:8px; }
  .guide-actions .kiosk-button,.result-actions .kiosk-button { min-width:135px; }
  .result-layout { gap:6px; height:100%; }
  .result-share-card { border-width:3px; box-shadow:3px 4px 0 var(--ink); }
  .result-shell .result-actions .kiosk-button { min-width:0; min-height:40px; }
  .objective-ticket { min-width:230px; max-width:330px; padding:6px 12px 10px; }
  .timer-module { min-width:150px; padding:5px 9px; }
  .timer-module strong { font-size:20px; }
  .weapon-rack { right:14px; bottom:12px; gap:4px; padding:4px; transform:scale(.82); transform-origin:right bottom; }
  .stress-report { width:min(510px,78vw); padding:9px; border-width:5px; }
  .stress-report>strong { padding-bottom:5px; font-size:18px; }
  .stress-report p { margin:5px 0; font-size:12px; }
  .stress-report pre { max-height:92px; padding:5px; font-size:8px; }
  .stress-report div { gap:6px; margin-top:6px; }
  .stress-report button { min-height:34px; font-size:10px; }
  .playtest-report { inset:5px; grid-template-columns:minmax(0,1fr) minmax(150px,.9fr); gap:4px 8px; padding:7px 8px; border-width:5px; box-shadow:inset 0 0 0 2px #68756c,5px 6px 0 rgba(0,0,0,.5); }
  .playtest-report>strong { padding-bottom:3px; border-bottom-width:3px; font-size:15px; }
  .playtest-state { padding:3px 6px; border-width:2px; font-size:10px; }
  .playtest-report ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; padding:4px; border-width:2px; font-size:8px; line-height:1.2; list-style:none; }
  .playtest-report ol li { min-width:0; overflow:hidden; text-align:center; white-space:nowrap; }
  .playtest-average { gap:1px 6px; padding:3px 6px; border-width:2px; }
  .playtest-average span,.playtest-average small { font-size:8px; }.playtest-average b { font-size:17px; }
  .playtest-report pre { padding:4px; border-width:2px; font-size:6px; line-height:1.05; }
  .playtest-report-actions { gap:5px; }
  .playtest-report-actions .kiosk-button { min-height:30px; border-width:3px; box-shadow:2px 3px 0 var(--ink); font-size:9px; }
}
#rotate-overlay { display: none; position: fixed; inset: 0; z-index: 100; background: #111; color: #fff; align-items: center; justify-content: center; flex-direction: column; text-align: center; font: 64px monospace; }
#rotate-overlay span { font-size: 24px; margin-top: 20px; }
#touch-controls { display: none; position: fixed; inset: 0; z-index: 40; pointer-events: none; }
#touch-controls button, .touch-control { pointer-events: auto; border: 4px solid #111; background: rgba(255,255,255,.55); color: #111; font: bold 28px monospace; touch-action: none; }
#joystick { position: absolute; left: max(24px, env(safe-area-inset-left)); bottom: max(28px, env(safe-area-inset-bottom)); width: 150px; height: 150px; border-radius: 50%; }
#joystick-knob { position: absolute; width: 70px; height: 70px; left: 36px; top: 36px; border: 4px solid #111; background: rgba(245,70,55,.75); border-radius: 50%; }
#weapon-buttons { position: absolute; top: max(96px, calc(env(safe-area-inset-top) + 82px)); right: max(16px, env(safe-area-inset-right)); display: flex; flex-direction: column; gap: 5px; padding: 5px; background:#17171b; border:4px solid #050505; box-shadow:inset 0 0 0 2px #666,5px 5px 0 rgba(0,0,0,.45); }
#weapon-buttons button { width: 58px; height: 58px; padding:3px 34px 31px 5px; color:#ffe24a; background-color:#30343a; background-repeat:no-repeat; background-position:center; background-size:44px; text-shadow:2px 2px #000; box-shadow:inset 0 0 0 2px #777; }
#weapon-buttons button[data-weapon="fist"] { background-image:url('assets/ui/icons/fist.png'); }
#weapon-buttons button[data-weapon="bat"] { background-image:url('assets/ui/icons/bat.png'); }
#weapon-buttons button[data-weapon="chainsaw"] { background-image:url('assets/ui/icons/chainsaw.png'); }
#weapon-buttons button[data-weapon="shotgun"] { background-image:url('assets/ui/icons/shotgun.png'); }
#weapon-buttons button.selected { background-color:#f0bd26; color:#111; box-shadow:inset 0 0 0 3px #fff; transform:translateX(-5px); }
#weapon-buttons button.empty,#weapon-buttons button[aria-disabled="true"] { opacity:.38; filter:grayscale(1); }
#weapon-buttons button::after { content:attr(data-amount); position:absolute; right:2px; bottom:1px; padding:1px 3px; color:#fff; background:#111; font:700 10px Consolas,monospace; }
#weapon-buttons button { position:relative; }
.action-button { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); width: 86px; height: 86px; border-radius: 50%; background:#e4e0ce !important; box-shadow:inset 0 0 0 5px #777,5px 6px 0 rgba(0,0,0,.35); }
#touch-jump { right: 130px; }
#touch-attack { right: 28px; background: #f3c62f !important; }
#touch-mute { position: absolute; right: 46px; bottom: 122px; width: 48px; height: 48px; border-radius:8px; background:#2d3430 !important; color:#f4c338 !important; box-shadow:4px 4px 0 rgba(0,0,0,.45); }
#touch-mute.muted { color:#fff !important; background:#9d3028 !important; }
body.gameplay.touch-device #touch-controls { display: block; }
body.touch-device .weapon-rack { display:none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate-overlay { display: flex; }
  #game, #touch-controls { visibility: hidden; }
}
@media (orientation: portrait) {
  body.touch-device #rotate-overlay { display: flex; }
  body.touch-device #game, body.touch-device #touch-controls { visibility: hidden; }
}
@media (max-height:560px) and (orientation:landscape) {
  #ui-layer.menu-ui { padding:max(3px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left)); }
  .kiosk-shell { width:min(980px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 10px)); height:min(520px,calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 6px)); padding:31px 20px 19px; border-width:6px; border-radius:12px 12px 18px 18px; box-shadow:0 0 0 3px #666,7px 8px 0 rgba(0,0,0,.42); }
  .kiosk-shell::before,.kiosk-shell::after { top:7px; width:13px; height:13px; border-width:2px; font-size:10px; line-height:9px; }
  .kiosk-shell::before { left:8px; }.kiosk-shell::after { right:8px; }
  .kiosk-brand-strip { left:20px; right:20px; top:3px; height:25px; gap:8px; border-width:3px; font-size:clamp(10px,2.2vw,14px); letter-spacing:.8px; }
  .kiosk-brand-strip .status-lamp { width:9px; height:9px; border-width:2px; }
  .kiosk-bezel { padding:5px; border-width:4px; box-shadow:inset 0 0 0 2px #626167; }
  .kiosk-status { height:23px; padding:0 7px; gap:6px; border-bottom-width:2px; font-size:9px; letter-spacing:.7px; }
  .kiosk-status .status-lamp { width:9px; height:9px; border-width:2px; }
  .kiosk-screen { height:calc(100% - 23px); padding:7px 11px 9px; }
  .kiosk-screen::-webkit-scrollbar { width:11px; }
  .kiosk-hardware { left:26px; right:26px; bottom:2px; height:14px; transform:none; }
  .card-reader { width:34px; height:15px; border-width:3px; box-shadow:inset -5px 0 #18171b; }
  .card-reader::after { right:2px; bottom:1px; width:3px; height:3px; box-shadow:0 -5px #f4c338; }
  .receipt-slot { top:2px; width:125px; height:10px; border-width:3px; box-shadow:inset 0 2px #555; }
  .speaker-grill { top:0; width:45px; height:14px; background-size:8px 8px; }
  .screen-heading { gap:8px; margin-bottom:5px; padding-bottom:4px; border-bottom-width:4px; }
  .screen-heading span { flex-basis:34px; height:28px; border-width:3px; font-size:12px; }
  .screen-heading h1 { font-size:clamp(18px,5.8vh,24px); }
  .screen-subtitle { margin-bottom:5px; font-size:9px; }
  .language-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
  .language-button { min-height:48px; padding:4px 4px 4px 29px; font-size:clamp(10px,1.65vw,14px); line-height:1.05; overflow-wrap:anywhere; }
  .language-button::before { width:25px; border-right-width:3px; font-size:9px; }
  .title-lockup { grid-template-columns:minmax(0,1fr) 70px; margin-bottom:6px; border-bottom-width:4px; }
  .tiny-label { font-size:8px; letter-spacing:.8px; }
  .title-lockup h1 { margin:1px 0 4px; font-size:clamp(25px,9.4vh,37px); letter-spacing:-2px; }
  .title-rule { width:65px; height:36px; margin-bottom:4px; border-bottom-width:7px; background-size:9px 100%; }
  .service-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .service-button { min-height:48px; padding:6px 22px 6px 8px; font-size:clamp(11px,2vw,16px); text-align:center; }
  .service-button::after { right:7px; font-size:21px; }
  .start-complaint { right:18px; bottom:30px; max-width:min(480px,72vw); min-height:42px; padding:8px 12px 9px; border-width:4px; box-shadow:4px 5px 0 #111; font-size:clamp(11px,2vw,16px); }
  .guide-panel { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:5px 0; }
  .control-diagram,.control-diagram.wide { grid-column:auto; min-height:82px; padding:5px; border-width:4px; gap:4px; font-size:10px; }
  kbd { min-width:27px; padding:4px; border-width:3px; box-shadow:2px 2px 0 #111; font-size:12px; }
  .guide-actions { position:sticky; bottom:0; z-index:3; margin-top:6px; padding:5px 0 2px; background:linear-gradient(transparent,#dfe8d0 22%); }
  .guide-actions .kiosk-button { min-width:120px; min-height:45px; font-size:clamp(11px,2vw,15px); }
  .credit-receipt { width:min(640px,95%); margin:4px auto; padding:8px 14px 15px; font-size:11px; }
  .credit-receipt p { display:inline-block; width:32%; margin:2px 0 7px; vertical-align:top; }
  .credit-receipt small { padding-top:5px; }
  #weapon-buttons { top:max(10px,env(safe-area-inset-top)); left:50%; right:auto; bottom:auto; flex-direction:row; transform:translateX(-50%); }
  #weapon-buttons button.selected { transform:translateY(5px); }
}