:root{color-scheme:dark;--night:#0b1020;--night2:#111b30;--cream:#fff4db;--mint:#72f5d5;--gold:#ffd482;--pink:#ff83a9;--muted:#8290aa;--line:#2d3850;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html{min-height:100%;background:var(--night)}
body{margin:0;min-width:300px;color:var(--cream);background:radial-gradient(ellipse at 50% -20%,#243052 0%,#0b1020 47%,#070a14 100%);min-height:100vh}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,canvas:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
[hidden]{display:none!important}
.app{width:min(1192px,calc(100% - 46px));margin:0 auto;padding:20px 0 26px}
.masthead{height:58px;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:1000;letter-spacing:-1.4px;line-height:.84;font-family:Impact,"Arial Black",ui-sans-serif,sans-serif}
.brand-icon{display:grid;place-items:center;width:42px;height:42px;color:#071b1b;background:var(--mint);border-radius:12px;transform:rotate(-10deg);font-size:26px;box-shadow:5px 5px 0 #21344c}
.brand-em{color:var(--mint);margin-left:3px}
.brand small{display:block;font:700 9px/1.7 ui-monospace,monospace;letter-spacing:2.6px;color:#8697b6;margin-top:2px}
.masthead-right{display:flex;align-items:center;gap:17px}
.edition{font:700 10px ui-monospace,monospace;letter-spacing:2px;color:#73839e}
.edition b{color:var(--mint);font-weight:900}
.icon-button{height:40px;width:40px;background:#1a263b;color:var(--cream);font-size:22px;border:1px solid #36435f;border-radius:11px}
.icon-button:hover,.hud-pause:hover{border-color:var(--mint);color:var(--mint)}
.game-frame{position:relative;width:100%;aspect-ratio:16/9;background:#0b1727;border-radius:19px;overflow:hidden;box-shadow:0 0 0 1px #40516e,0 18px 80px #0008,0 0 0 7px #111b2b}
.game-frame:after{content:"";position:absolute;inset:0;border:1px solid #71849b4d;border-radius:19px;pointer-events:none;z-index:6}
canvas{display:block;width:100%;height:100%;outline-offset:-5px}
.game-vignette{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse,#0000 53%,#0206106b 100%);z-index:1}
.hud{display:flex;gap:23px;align-items:center;position:absolute;inset:16px 19px auto;padding:12px 17px;min-height:61px;background:#0a1220e3;border:1px solid #47576c91;border-radius:12px;box-shadow:0 12px 30px #0005;z-index:3;backdrop-filter:blur(8px)}
.hud-group{display:flex;flex-direction:column;gap:4px;min-width:0}
.hud-label{font:800 9px ui-monospace,monospace;letter-spacing:1.6px;color:#8494ae}
.hud strong{font-family:Impact,"Arial Black",sans-serif;font-size:18px;letter-spacing:1px;white-space:nowrap;font-weight:900}
.hud-gems{margin-left:auto}
.hud-gems strong{color:var(--gold)}
.gem-sign{color:var(--mint)}
.hud-time{min-width:67px}
.hud-time strong{font-variant-numeric:tabular-nums}
.hud-pause{margin-left:3px;flex:none;width:40px;height:40px;color:var(--cream);border:1px solid #3b4a63;border-radius:10px;background:#1b2b41;font-size:21px}
.game-toast{position:absolute;z-index:4;bottom:21px;left:50%;transform:translate(-50%,12px);padding:9px 17px;background:#132034ee;border:1px solid #7188acaa;border-radius:100px;color:var(--cream);font:800 13px ui-monospace,monospace;letter-spacing:.5px;opacity:0;transition:transform .25s,opacity .25s;pointer-events:none;white-space:nowrap;max-width:90%;text-overflow:ellipsis;overflow:hidden}
.game-toast.show{transform:translate(-50%,0);opacity:1}
.overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:linear-gradient(100deg,#070c19e8 0%,#090e1cc9 60%,#0b1524d9 100%);padding:16px}
.menu-card{max-width:645px;width:100%;text-align:center;animation:pop-in .22s ease-out}
.eyebrow{font:900 11px ui-monospace,monospace;color:var(--mint);letter-spacing:3px;margin:0 0 9px}
.menu-title{font-family:Impact,"Arial Black",ui-sans-serif,sans-serif;font-weight:1000;letter-spacing:1px;font-size:clamp(65px,9vw,124px);line-height:.89;margin:0;text-shadow:5px 8px 0 #040910}
.menu-title span{color:var(--mint)}
.menu-lead{font-size:clamp(15px,1.7vw,19px);font-weight:700;letter-spacing:.2px;color:#e8e5dd;margin:22px auto 12px}
.menu-description{max-width:470px;margin:0 auto 23px;color:#9aacc5;line-height:1.5;font-size:14px}
.menu-actions{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.primary-btn,.secondary-btn{min-height:49px;border-radius:10px;padding:13px 23px;font-weight:1000;font-size:12px;letter-spacing:1px;border:1px solid #ffffff30;transition:transform .12s,box-shadow .12s;white-space:nowrap}
.primary-btn{color:#102020;background:var(--mint);box-shadow:4px 5px 0 #2f7267}
.secondary-btn{color:var(--cream);background:#24334c;box-shadow:4px 5px 0 #0e1523}
.primary-btn:hover,.secondary-btn:hover{transform:translateY(-2px)}
.primary-btn:active,.secondary-btn:active{transform:translateY(2px);box-shadow:none}
.meta-line{margin-top:22px;font:800 10px ui-monospace,monospace;letter-spacing:1.4px;color:#7b8da7}
.result-title{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(42px,6vw,74px);line-height:1.02;letter-spacing:1px;margin:3px 0 11px}
.result-title.danger{color:var(--pink)}
.result-sub{color:#aebbd0;margin:10px auto 20px;max-width:450px;line-height:1.5;font-size:14px}
.stars{font-size:clamp(35px,6vw,54px);letter-spacing:10px;color:var(--gold);margin:12px 0;text-shadow:0 0 25px #ffd48250}
.result-stats{display:flex;justify-content:center;gap:13px;flex-wrap:wrap;margin:0 auto 22px}
.result-stat{background:#142137;border:1px solid #334b60;border-radius:10px;padding:8px 13px;min-width:90px}
.result-stat small{display:block;color:#8b9db7;font:800 9px ui-monospace,monospace;letter-spacing:1.2px;margin-bottom:5px}
.result-stat strong{font:900 19px Impact,"Arial Black",sans-serif}
.mission-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:17px auto 21px;max-width:600px}
.mission-tile{position:relative;min-height:119px;text-align:left;padding:14px;color:var(--cream);background:#1a283f;border:1px solid #354d65;border-radius:12px;transition:border-color .2s,transform .15s}
.mission-tile:not(:disabled):hover{border-color:var(--mint);transform:translateY(-2px)}
.mission-tile:disabled{opacity:.46;cursor:not-allowed}
.mission-number{display:block;color:var(--mint);font:900 10px ui-monospace,monospace;letter-spacing:2px}
.mission-tile b{display:block;font:900 16px Impact,"Arial Black",sans-serif;letter-spacing:.5px;margin-top:14px}
.mission-tile small{display:block;margin-top:5px;color:var(--gold);font-size:13px}
.below-game{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 3px 8px}
.gadget-strip{display:flex;gap:25px}
.gadget{display:flex;align-items:center;gap:10px}
.gadget-key{font:800 10px ui-monospace,monospace;color:#8599b1;border:1px solid #35445e;padding:6px 7px;border-radius:5px;min-width:43px;text-align:center}
.gadget-emoji{font-size:27px;color:#ffbd55;line-height:1}
.rewind-symbol{color:#84e6ff;font-weight:900;font-size:29px}
.gadget b{font-size:11px;display:block;letter-spacing:.8px}
.gadget small{font-size:11px;display:block;color:#8e9eb5;margin-top:3px}
.key-guide{display:flex;align-items:center;gap:4px;white-space:nowrap;font:800 10px ui-monospace,monospace;color:#8b9db3}
.key-guide-label{font-size:10px;letter-spacing:1px;margin-right:6px}
kbd{font:800 11px ui-monospace,monospace;display:inline-grid;place-items:center;min-width:23px;height:24px;border:1px solid #455470;border-bottom-width:3px;background:#1c293e;border-radius:5px;color:#d2dded}
.key-or{padding:0 7px;color:#50617c}
.fine-print{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #27334b;padding-top:14px;margin-top:19px;color:#5c6d85;font:700 9px ui-monospace,monospace;letter-spacing:1px}
.fine-print span{color:#596a82}
.touch-controls{display:none}
.rotate-hint{display:none}
@keyframes pop-in{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:860px){.gadget-strip{gap:12px}.key-guide{display:none}.below-game{padding-top:18px}.edition{font-size:9px}}
@media(max-width:600px){
 .app{width:calc(100% - 20px);padding:9px 0 20px}
 .masthead{height:45px;margin-bottom:11px}
 .brand{font-size:19px}.brand-icon{width:32px;height:32px;font-size:19px;border-radius:8px}
 .brand small{font-size:7px;letter-spacing:1.7px}
 .edition{display:none}.icon-button{width:35px;height:35px}
 .game-frame{border-radius:11px;box-shadow:0 0 0 1px #4d5c76,0 8px 30px #0009}
 .hud{inset:6px 6px auto;padding:5px 7px;min-height:34px;gap:7px;border-radius:7px}
 .hud-label{font-size:6px;letter-spacing:.55px}
 .hud strong{font-size:10px;letter-spacing:.25px}.hud-gems{margin-left:auto}
 .hud-time{min-width:38px}.hud-pause{width:23px;height:23px;font-size:12px;border-radius:5px}
 .menu-title{font-size:clamp(31px,10vw,58px)}
 .eyebrow{font-size:7px;letter-spacing:1.4px;margin-bottom:4px}
 .menu-lead{font-size:10px;margin:8px 0 6px}
 .menu-description{font-size:9px;line-height:1.25;margin:0 0 9px}
 .menu-card{max-width:98%}
 .menu-actions{gap:6px}
 .primary-btn,.secondary-btn{min-height:28px;padding:7px 10px;font-size:8px;border-radius:6px;box-shadow:2px 3px 0 #152d2b}
 .meta-line{font-size:7px;margin-top:9px;letter-spacing:.6px}
 .result-title{font-size:31px;margin:0 0 4px}
 .result-sub{font-size:9px;margin:4px auto 9px}
 .stars{font-size:26px;margin:3px 0;letter-spacing:5px}
 .result-stats{gap:5px;margin:0 auto 8px}
 .result-stat{padding:4px 7px;min-width:55px;border-radius:5px}
 .result-stat small{font-size:6px;margin-bottom:2px}
 .result-stat strong{font-size:13px}
 .mission-list{gap:5px;margin:5px auto 7px}
 .mission-tile{min-height:58px;padding:6px;border-radius:6px}
 .mission-number{font-size:6px;letter-spacing:.5px}
 .mission-tile b{font-size:9px;margin-top:7px}
 .mission-tile small{font-size:8px;margin-top:2px}
 .game-toast{bottom:5px;padding:5px 10px;font-size:8px}
 .below-game{display:none}
 .touch-controls{display:flex;justify-content:space-between;align-items:center;padding:11px 13px 0;gap:16px}
 .touch-stick{position:relative;width:106px;height:106px;touch-action:none;background:#1e2a40;border:2px solid #465776;border-radius:50%;box-shadow:inset 0 0 0 10px #131e31}
 .stick-cross{position:absolute;inset:0;display:grid;place-items:center;font-size:62px;font-weight:100;color:#445673;user-select:none}
 .stick-knob{position:absolute;left:50%;top:50%;width:45px;height:45px;transform:translate(-50%,-50%);background:linear-gradient(135deg,#a5ffee,#52bfb0);border:3px solid #d9fff3;box-shadow:0 5px 18px #0009;border-radius:50%;pointer-events:none}
 .touch-actions{display:flex;gap:11px}
 .touch-action{width:72px;height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:15px;border:2px solid #576277;background:#28344b;color:var(--cream)}
 .touch-action span{font-size:35px;line-height:1;color:var(--gold)}
 .touch-rewind span{color:#9bf0ff}
 .touch-action small{font-size:8px;font-weight:900;letter-spacing:.7px}
 .touch-action:active{transform:scale(.95)}
 .fine-print{font-size:7px;line-height:1.4;letter-spacing:.4px;margin-top:10px}
}
@media(max-width:600px) and (orientation:portrait){.rotate-hint{display:block;position:absolute;bottom:7px;right:11px;color:#9aabc4;font:700 7px ui-monospace,monospace;letter-spacing:.5px;z-index:2;pointer-events:none}}
@media(max-height:450px) and (orientation:landscape){
 .app{width:min(930px,calc(100% - 18px));padding:5px 0}
 .masthead{height:30px;margin-bottom:5px}.brand{font-size:16px}.brand small{display:none}.brand-icon{width:28px;height:28px}
 .game-frame{max-height:calc(100vh - 52px);width:auto;aspect-ratio:16/9;margin:0 auto}
 .below-game,.touch-controls,.fine-print{display:none}
 .menu-title{font-size:clamp(40px,9vh,80px)}.menu-lead{font-size:13px;margin:8px 0}
 .menu-description{font-size:11px;margin-bottom:11px}.meta-line{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Fit the whole playfield on laptop screens without distorting its 8:5 coordinates. */
@media(min-width:601px) and (min-height:501px){
  .game-frame,.below-game{width:min(100%,calc(177.777dvh - 252px));margin-left:auto;margin-right:auto}
}

/* v0.2 — suspicion telemetry and stealth controls */
.hud-security{min-width:77px}
.hud-security strong{color:#81eccd;font-size:16px;letter-spacing:.8px;transition:color .15s}
.hud-security .alert-low{color:#7fe6c6}
.hud-security .alert-med{color:#ffcf75}
.hud-security .alert-high{color:#ff7398}
.alert-track{height:3px;border-radius:6px;background:#354454;overflow:hidden;margin-top:2px}
.alert-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd782,#ff5277);transition:width .12s}
.sneak-symbol{color:#8ef4db}
.result-badge{display:inline-block;font:900 10px ui-monospace,monospace;letter-spacing:1.4px;color:#70edda;margin:2px 0}
.touch-sneak span{color:#8ef4db}
.touch-sneak.is-sneaking{background:#254f50;border-color:#85eadb;box-shadow:0 0 20px #76efc343}
.touch-sneak.is-sneaking span{color:white}
@media(max-width:1020px) and (min-width:601px){
 .gadget-strip{gap:10px}
 .sneak-gadget small{display:none}
 .gadget{gap:6px}
 .gadget-emoji{font-size:22px}
}
@media(max-width:600px){
 .hud-security{min-width:36px}
 .hud-security strong{font-size:9px;letter-spacing:0}
 .hud-security .hud-label{display:none}
 .hud-security .alert-track{height:2px;margin-top:3px}
 .hud-group:first-child strong{font-size:9px}
 .touch-stick{width:94px;height:94px;flex:none}
 .touch-actions{gap:7px}
 .touch-action{width:60px;height:65px;border-radius:12px;flex:none}
 .touch-action span{font-size:29px}
 .touch-action small{font-size:7px}
 .result-badge{font-size:7px}
}
@media(max-width:374px){
 .touch-stick{width:81px;height:81px}
 .touch-actions{gap:4px}
 .touch-action{width:54px;height:57px}
 .hud{gap:5px}
}

/* Phone landscape: make the thumbstick and actions usable even with very little vertical space. */
@media(max-height:450px) and (orientation:landscape) and (pointer:coarse){
  .touch-controls{
    display:flex;position:fixed;inset:auto 13px 6px 13px;z-index:11;
    align-items:flex-end;justify-content:space-between;pointer-events:none;padding:0
  }
  .touch-stick,.touch-actions{pointer-events:auto}
  .touch-stick{width:83px;height:83px;opacity:.82;background:#162439cc}
  .stick-knob{width:39px;height:39px}
  .touch-actions{gap:7px}
  .touch-action{width:54px;height:56px;border-radius:10px;background:#233951db}
  .touch-action span{font-size:24px}
  .touch-action small{font-size:6px}
}


/* v0.3 / a small, dismissible mission-control radio. Keeps the playfield playable. */
.coach{
  z-index:3;position:absolute;bottom:17px;left:50%;transform:translateX(-50%);
  width:min(410px,72%);display:flex;align-items:center;gap:11px;
  padding:10px 13px;background:#0b1624e9;border:1px solid #56827d;
  box-shadow:0 7px 22px #0008,0 0 22px #47dbb31c;border-radius:12px;
  backdrop-filter:blur(7px);pointer-events:auto
}
.coach-icon{width:35px;height:35px;display:grid;place-items:center;flex-shrink:0;
  border-radius:8px;background:#2c6a65;color:#c3fff0;font-size:28px;font-weight:900}
.coach-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.coach-copy strong{font:900 10px ui-monospace,monospace;color:#7df6d4;letter-spacing:1.4px}
.coach-copy span{font:600 11px/1.35 ui-sans-serif,system-ui,sans-serif;color:#d5e3e9}
.coach-close{flex-shrink:0;align-self:flex-start;background:transparent;color:#a1b9b4;
  border:0;border-radius:5px;font-size:23px;padding:0 3px;line-height:1}
.coach-close:hover,.coach-close:focus-visible{color:#fff}
.coach[data-step="danger"]{border-color:#ff7998;box-shadow:0 7px 22px #0008,0 0 16px #ff799838}
.coach[data-step="danger"] .coach-icon{background:#703144;color:#ffe4eb}
.coach[data-step="danger"] .coach-copy strong{color:#ff9cb4}
.game-frame:has(.coach:not([hidden])) .game-toast{bottom:87px}
.medals-grid{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:-7px auto 17px}
.medal-item{font:900 10px ui-monospace,monospace;letter-spacing:.3px;
 border-radius:9px;border:1px solid #3c4c60;background:#1c293c;padding:9px 11px;white-space:nowrap}
.medal-item span{font-size:14px;margin-right:6px;color:#ffe099}
.medal-item.missed{opacity:.45}
.medal-item.earned{border-color:#ac9065;background:#433c2d;color:#fff1c8}
@media(max-width:650px){
  .coach{width:min(325px,78%);bottom:5px;gap:6px;padding:5px 7px;border-radius:7px}
  .coach-icon{width:23px;height:23px;font-size:18px;border-radius:4px}
  .coach-copy{gap:1px}
  .coach-copy strong{font-size:7px;letter-spacing:.3px}
  .coach-copy span{font-size:8px;line-height:1.15}
  .coach-close{font-size:15px}
  .game-frame:has(.coach:not([hidden])) .game-toast{bottom:52px}
  .masthead-right{gap:6px}
  .medals-grid{gap:4px;margin:-4px auto 9px}
  .medal-item{font-size:7px;padding:5px 6px}
  .medal-item span{font-size:9px;margin-right:3px}
}
@media(max-height:450px) and (orientation:landscape){
  .coach{bottom:3px;width:min(360px,55%);padding:4px 8px}
  .coach-copy span{font-size:9px}
}


/* v0.4 — reachable museum terminal, temporary security shutdown and mobile hack hold. */
.hack-symbol{color:#8ddfff}
.system-state{font:900 9px/1.4 ui-monospace,monospace;color:#8feedd;letter-spacing:.35px;white-space:nowrap;margin-top:2px}
.touch-hack{border-color:#4f9dc1;background:#1d4054}
.touch-hack span{color:#a5edff}
.touch-hack.is-hacking{border-color:#b3efff;background:#28627b;box-shadow:0 0 22px #7dcfff70}
.touch-hack.is-hacking span{color:#ffffff}
@media(max-width:1150px) and (min-width:601px) {
  .gadget-strip{gap:12px}
  .gadget{gap:7px}
  .gadget b{font-size:10px}
  .gadget small{font-size:9px}
  .key-guide{display:none}
}
@media(max-width:600px) {
  .system-state{font-size:6.5px;letter-spacing:0}
  .touch-controls:has(#touchHack:not([hidden])) .touch-stick{width:83px;height:83px}
  .touch-controls:has(#touchHack:not([hidden])) .touch-actions{gap:5px}
  .touch-controls:has(#touchHack:not([hidden])) .touch-action{width:53px;height:60px}
  .touch-controls:has(#touchHack:not([hidden])) .touch-action span{font-size:26px}
  .touch-controls:has(#touchHack:not([hidden])) .touch-action small{font-size:6px}
}
@media(max-width:374px) {
  .touch-controls:has(#touchHack:not([hidden])){gap:6px;padding-left:6px;padding-right:6px}
  .touch-controls:has(#touchHack:not([hidden])) .touch-stick{width:70px;height:70px}
  .touch-controls:has(#touchHack:not([hidden])) .touch-actions{gap:3px}
  .touch-controls:has(#touchHack:not([hidden])) .touch-action{width:44px;height:53px}
  .touch-controls:has(#touchHack:not([hidden])) .touch-action span{font-size:23px}
}
@media(max-height:450px) and (orientation:landscape) and (pointer:coarse){
  .touch-controls:has(#touchHack:not([hidden])) .touch-actions{gap:5px}
  .touch-controls:has(#touchHack:not([hidden])) .touch-action{width:51px;height:54px}
}


/* v0.5: five-mission board and a daily mini-contract. The overlay owns its
   scrolling so narrow phone landscape layouts never truncate buttons. */
.overlay .menu-card{max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:3px 3px 8px}
.menu-card-board{max-width:715px}
.menu-card-board .mission-list{max-width:680px}
.daily-contract{
  max-width:680px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:7px auto 13px;padding:12px 13px;border-radius:11px;
  border:1px solid #6ca4a4;background:linear-gradient(100deg,#132e3f,#203149);
  text-align:left
}
.daily-contract-copy{min-width:0;display:flex;flex-direction:column;gap:5px}
.daily-contract-copy b{font:900 17px Impact,"Arial Black",sans-serif;letter-spacing:.5px}
.daily-contract-copy small{color:#b7ccda;font:600 11px/1.4 ui-sans-serif,system-ui,sans-serif}
.daily-contract .primary-btn{flex-shrink:0}
.daily-hud-tag{color:#a1eaff;font:900 8px ui-monospace,monospace;letter-spacing:.6px;margin-top:2px}
.daily-menu-btn{border-color:#86c8dc;background:#274455}
.menu-card-board .mission-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.menu-card-board .mission-tile{min-height:95px}
.menu-card-board .mission-tile b{margin-top:9px}
@media(max-width:600px){
  .menu-card-board .result-title{font-size:26px}
  .menu-card-board .result-sub{margin-bottom:6px}
  .menu-card-board .mission-list{gap:4px;margin:4px auto 6px}
  .menu-card-board .mission-tile{min-height:48px;padding:6px}
  .menu-card-board .mission-tile b{font-size:9px;margin-top:5px;line-height:1.08}
  .menu-card-board .mission-tile small{font-size:7px;line-height:1.1}
  .daily-contract{margin:4px auto 6px;gap:6px;padding:6px;border-radius:7px}
  .daily-contract-copy{gap:3px}
  .daily-contract-copy .mission-number{font-size:6px}
  .daily-contract-copy b{font-size:10px}
  .daily-contract-copy small{font-size:7px;line-height:1.2}
  .daily-contract .primary-btn{padding:6px 7px;font-size:7px}
  .daily-hud-tag{font-size:6px;letter-spacing:0}
  .overlay .menu-card{padding-bottom:3px}
  .menu-actions{gap:5px}
}
@media(max-height:450px) and (orientation:landscape){
  .menu-card-board .mission-list{grid-template-columns:repeat(5,minmax(0,1fr))}
  .menu-card-board .mission-tile{min-height:55px}
  .menu-card-board .mission-tile b{font-size:10px}
  .menu-card-board .mission-tile small{font-size:7px}
  .daily-contract{padding:6px 10px}
  .daily-contract-copy b{font-size:12px}
  .daily-contract-copy small{font-size:8px}
}

/* v0.7: no-server personal ghost challenge and readable local Field Notes. */
.hud-ghost{
  flex:none;width:40px;height:40px;border-radius:10px;
  border:1px solid #6bacc2;color:#c4fff5;background:#1b3d4b;
  font-size:23px;box-shadow:0 0 15px #5fe7c319 inset
}
.hud-ghost:not(.ghost-off):hover{border-color:#d2fff7}
.hud-ghost.ghost-off{color:#73899a;background:#172335;border-color:#3c5265;opacity:.78}
.stats-menu-btn{background:#1c2b40;border-color:#436072}
.ghost-win-note{
  color:#9ef7df;letter-spacing:.6px;font:900 10px/1.3 ui-monospace,monospace;
  text-align:center;margin:-6px 0 12px
}
.field-notes{max-width:700px}
.field-notes .result-title{font-size:clamp(40px,6vw,62px)}
.field-notes .result-sub{margin:0 auto 13px}
.field-notes-totals{margin-bottom:12px;gap:8px}
.notes-sub{font:900 10px/1.6 ui-monospace,monospace;color:#b1c8d6;letter-spacing:.3px;margin:6px auto 10px}
.notes-list{border:1px solid #344f65;background:#101d30;border-radius:12px;overflow:hidden;margin:0 auto 10px;max-width:640px}
.notes-row{display:grid;grid-template-columns:minmax(115px,1.8fr) repeat(3,minmax(50px,1fr));align-items:center;text-align:left;gap:8px;padding:9px 12px;font:800 10px/1.4 ui-monospace,monospace;border-bottom:1px solid #33465c}
.notes-row:last-child{border-bottom:0}
.notes-row b{color:#eafdf9;font-weight:900}
.notes-row span{color:#a1b9c8;text-align:right}
.notes-copy-feedback{min-height:13px;color:#9af4d7;font:800 10px/1.4 ui-monospace,monospace;margin:7px 0}
.notes-manual{width:100%;height:74px;background:#0e1928;color:#bfe7e4;border:1px solid #60809b;border-radius:8px;padding:8px;font:11px ui-monospace,monospace}
@media(max-width:600px){
 .hud-ghost{width:23px;height:23px;border-radius:5px;font-size:13px}
 .field-notes .result-title{font-size:27px}
 .field-notes .result-sub{font-size:8px;line-height:1.3}
 .ghost-win-note{font-size:7px;margin:2px 0 6px}
 .notes-sub{font-size:6.5px;margin:2px auto 4px}
 .notes-list{margin:0 auto 5px;border-radius:6px}
 .notes-row{grid-template-columns:minmax(68px,1.6fr) repeat(3,minmax(28px,1fr));gap:3px;padding:4px 6px;font-size:6.5px}
 .notes-copy-feedback{font-size:7px;margin:3px 0}
 .field-notes-totals{gap:4px;margin-bottom:5px}
 .notes-manual{height:52px;font-size:7px}
}

/* Compact landscape HUD: fit all controls, including personal ghost, inside
   the letterboxed 8:5 stage on short phones. */
@media(max-height:450px) and (orientation:landscape){
  .hud{inset:5px 6px auto;padding:5px 7px;gap:6px;min-height:34px;border-radius:7px}
  .hud-group{gap:1px}
  .hud-label{font-size:7px;letter-spacing:.5px}
  .hud strong{font-size:11px;letter-spacing:.2px}
  .hud-security{min-width:44px}
  .hud-security strong{font-size:10px}
  .hud-time{min-width:42px}
  .hud-pause,.hud-ghost{width:25px;height:25px;border-radius:5px;font-size:15px}
  .daily-hud-tag{font-size:6px}
  .system-state{font-size:6px}
}


/* v0.8: widescreen playfield, portal-embed QA, preserving original museum
   collision coordinates and proportional artwork. The default site stays a
   normal page; ?embed=1 shows a self-contained game viewport for portals. */
html.embed-mode,html.embed-mode body{
  height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;
  margin:0;background:#0b1727;
}
html.embed-mode .app{
  width:100vw;max-width:none;height:100dvh;padding:0;margin:0;
  display:grid;place-items:center;
}
html.embed-mode .masthead,
html.embed-mode .below-game,
html.embed-mode .fine-print{display:none!important}
html.embed-mode main{
  width:100%;height:100%;display:grid;place-items:center;position:relative;
  overflow:hidden;
}
html.embed-mode .game-frame{
  width:min(100vw,177.7778dvh);
  height:min(100dvh,56.25vw);
  max-height:none;min-height:0;max-width:none;margin:0;
  border:0;border-radius:0;box-shadow:none;aspect-ratio:16/9;
}
html.embed-mode .game-frame:after{border-radius:0}
html.embed-mode #gameCanvas{display:block;width:100%;height:100%}
html.embed-mode .touch-controls{display:none}
html.embed-mode .rotate-hint{display:none}
@media(pointer:coarse) {
  html.embed-mode .touch-controls{
    display:flex;position:fixed;inset:auto 12px 11px 12px;z-index:11;
    padding:0;justify-content:space-between;align-items:flex-end;
    pointer-events:none;
  }
  html.embed-mode .touch-stick,html.embed-mode .touch-actions{
    pointer-events:auto;
  }
  html.embed-mode .touch-stick{width:90px;height:90px;opacity:.86;background:#15273cdd}
  html.embed-mode .touch-action{
    width:60px;height:62px;background:#273750e8;border-radius:11px;
  }
  html.embed-mode .touch-action span{font-size:29px}
  html.embed-mode .touch-action small{font-size:7px}
}
@media(pointer:coarse) and (orientation:landscape){
  html.embed-mode .touch-controls{bottom:8px}
  html.embed-mode .touch-stick{width:min(89px,22dvh);height:min(89px,22dvh)}
  html.embed-mode .touch-action{width:56px;height:57px}
  html.embed-mode .touch-action span{font-size:25px}
  html.embed-mode .touch-controls:has(#touchHack:not([hidden])) .touch-action{
    width:48px;height:53px
  }
}
@media(pointer:coarse) and (orientation:portrait){
  html.embed-mode .rotate-hint{
    display:block;position:absolute;z-index:7;
    top:12px;right:16px;color:#d5ebfb;background:#1a2b42dd;
    padding:6px 8px;border-radius:6px;font:800 10px ui-monospace,monospace;
  }
}

html.embed-mode canvas,html.embed-mode .touch-stick{touch-action:none}


/* v0.8.1 touch fix: the original thumbstick/button primitives were declared
   inside max-width:600px and disappeared on landscape phones/tablets.
   Explicitly render complete controls on ALL landscape coarse pointers. */
@media (pointer:coarse) and (orientation:landscape) {
  .touch-stick{
    position:relative;flex:none;
    border-radius:50%;border:2px solid #7ba5ac;
    box-shadow:inset 0 0 0 8px #122638,0 3px 20px #0009;
    touch-action:none;
  }
  .stick-cross{
    position:absolute;inset:0;display:grid;place-items:center;
    color:#6d8b9b;font-size:50px;font-weight:200;line-height:1;
    user-select:none;pointer-events:none;
  }
  .stick-knob{
    position:absolute;left:50%;top:50%;
    width:38px;height:38px;border-radius:50%;
    transform:translate(-50%,-50%);
    background:linear-gradient(145deg,#baffed,#6ae1ce);
    border:3px solid #e2fff5;
    box-shadow:0 3px 14px #020e1888;
    pointer-events:none;
  }
  .touch-actions{display:flex;align-items:center;gap:7px}
  .touch-action{
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:0;padding:0;
    border:2px solid #64809b;border-radius:12px;
    background:#243d54e8;color:#f4fffc;
    font-weight:900;line-height:1.1;
    touch-action:manipulation;
  }
  .touch-action span{display:block;font-size:27px;line-height:1.1}
  .touch-action small{display:block;font-size:7px;letter-spacing:.4px}
  .touch-sneak span{color:#9bf7dc}
  .touch-hack span{color:#a9e9ff}
  .touch-rewind span{color:#bbecff}
}

/* ============================================================
   v0.14 phone portrait (ux-mobile-1106). See DESIGN.md "Phone".
   Tall stage with a camera that follows the thief; the HUD is a
   strip above the museum, the radio coach a strip below it, so no
   interface ever sits on the playfield. Menus get readable type.
   ============================================================ */
@media (max-width:600px) and (orientation:portrait){
 html:not(.embed-mode) body{min-height:100svh;overscroll-behavior:none}
 html:not(.embed-mode) .app{width:calc(100% - 16px);height:100svh;min-height:560px;padding:max(6px,env(safe-area-inset-top)) 0 max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
 html:not(.embed-mode) .masthead{height:48px;margin-bottom:6px;flex:none}
 html:not(.embed-mode) .brand{font-size:21px}
 html:not(.embed-mode) .brand small{font-size:9px;letter-spacing:2px}
 html:not(.embed-mode) .icon-button{width:44px;height:44px;font-size:20px}
 html:not(.embed-mode) main{flex:1;display:flex;flex-direction:column;min-height:0}
 html:not(.embed-mode) .game-frame{flex:1 1 0;min-height:0;aspect-ratio:auto;width:100%;display:flex;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px #4d5c76,0 10px 34px #000a}
 html:not(.embed-mode) .game-frame:after{border-radius:16px}
 html:not(.embed-mode) #gameCanvas{flex:1 1 0;min-height:0;height:0;width:100%;touch-action:none}
 html:not(.embed-mode) .game-vignette{top:56px}
 /* HUD strip */
 html:not(.embed-mode) .hud{position:relative;inset:auto;order:-1;flex:none;margin:0;min-height:56px;padding:7px 8px 7px 12px;gap:10px;border-radius:0;border:0;border-bottom:1px solid #2f3e57;background:#0a1220;backdrop-filter:none;box-shadow:none}
 html:not(.embed-mode) .hud-group:first-child{display:none}
 html:not(.embed-mode) .hud-gems{margin-left:0}
 html:not(.embed-mode) .hud-label{font-size:9px;letter-spacing:1px}
 html:not(.embed-mode) .hud strong{font-size:17px}
 html:not(.embed-mode) .hud-time{min-width:52px}
 html:not(.embed-mode) .hud-security{margin-left:auto}
 html:not(.embed-mode) .hud-ghost,html:not(.embed-mode) .hud-pause{width:44px;height:44px;font-size:19px;border-radius:11px;flex:none}
 /* coach strip under the stage */
 html:not(.embed-mode) .coach{position:relative;order:3;flex:none;left:auto;bottom:auto;transform:none;width:100%;border-radius:0;border:0;border-top:1px solid #2f5b58;padding:8px 6px 8px 12px;gap:10px;backdrop-filter:none;background:#0b1624}
 html:not(.embed-mode) .coach-icon{width:32px;height:32px;font-size:22px}
 html:not(.embed-mode) .coach-copy strong{font-size:11px}
 html:not(.embed-mode) .coach-copy span{font-size:13px;line-height:1.35}
 html:not(.embed-mode) .coach-close{width:44px;height:44px;align-self:center;font-size:26px}
 html:not(.embed-mode) .game-toast{bottom:auto;top:66px;font-size:12px;line-height:1.35;padding:8px 14px;white-space:normal;text-align:center;width:max-content;max-width:92%;border-radius:12px}
 html:not(.embed-mode) .game-frame:has(.coach:not([hidden])) .game-toast{bottom:auto}
 html:not(.embed-mode) .rotate-hint{display:none}
 /* menus: readable on a phone */
 html:not(.embed-mode) .overlay{padding:18px 14px;align-items:center;overflow-y:auto}
 html:not(.embed-mode) .menu-card{max-width:100%}
 html:not(.embed-mode) .eyebrow{font-size:11px;letter-spacing:2.2px;margin-bottom:10px}
 html:not(.embed-mode) .menu-title{font-size:clamp(48px,15vw,68px)}
 html:not(.embed-mode) .menu-lead{font-size:15px;margin:16px auto 10px}
 html:not(.embed-mode) .menu-description{font-size:14px;line-height:1.5;margin:0 auto 20px}
 html:not(.embed-mode) .menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 html:not(.embed-mode) .menu-actions>:first-child{grid-column:1/-1}
 html:not(.embed-mode) .primary-btn,html:not(.embed-mode) .secondary-btn{min-height:48px;padding:12px 12px;font-size:12px;letter-spacing:.8px;border-radius:10px;white-space:normal}
 html:not(.embed-mode) .primary-btn{font-size:14px;min-height:56px}
 html:not(.embed-mode) .meta-line{font-size:11px;line-height:1.5;margin-top:16px;letter-spacing:.8px}
 html:not(.embed-mode) .result-title{font-size:44px}
 html:not(.embed-mode) .result-sub{font-size:14px;margin:8px auto 16px}
 html:not(.embed-mode) .stars{font-size:38px}
 html:not(.embed-mode) .result-stats{gap:8px}
 html:not(.embed-mode) .result-stat{min-width:88px;padding:8px 10px;border-radius:9px}
 html:not(.embed-mode) .result-stat small{font-size:10px}
 html:not(.embed-mode) .result-stat strong{font-size:18px}
 html:not(.embed-mode) .mission-list{grid-template-columns:1fr;gap:8px;margin:14px auto 16px}
 html:not(.embed-mode) .mission-tile{min-height:64px;padding:12px 14px;border-radius:10px}
 html:not(.embed-mode) .mission-number{font-size:10px}
 html:not(.embed-mode) .mission-tile b{font-size:17px;margin-top:4px}
 html:not(.embed-mode) .mission-tile small{font-size:13px}
 html:not(.embed-mode) .medal-item{font-size:11px;padding:9px 10px}
 /* thumb deck */
 html:not(.embed-mode) .touch-controls{flex:none;padding:12px 6px 4px;gap:12px;align-items:center}
 html:not(.embed-mode) .touch-stick{width:132px;height:132px}
 html:not(.embed-mode) .stick-knob{width:56px;height:56px}
 html:not(.embed-mode) .stick-cross{font-size:76px}
 html:not(.embed-mode) .touch-actions{display:grid;grid-template-columns:repeat(2,68px);gap:10px}
 html:not(.embed-mode) .touch-action{width:68px;height:62px;border-radius:14px}
 html:not(.embed-mode) .touch-action span{font-size:28px}
 html:not(.embed-mode) .touch-action small{font-size:10px;letter-spacing:.5px}
 html:not(.embed-mode) .fine-print{display:none}
}
@media (max-width:374px) and (orientation:portrait){
 html:not(.embed-mode) .touch-stick{width:118px;height:118px}
 html:not(.embed-mode) .touch-actions{grid-template-columns:repeat(2,62px)}
 html:not(.embed-mode) .touch-action{width:62px}
 html:not(.embed-mode) .hud strong{font-size:15px}
}
/* v0.14 desktop/tablet: same rule — HUD strip above the museum, coach strip below. */
@media (min-width:601px) and (min-height:501px){
 html:not(.embed-mode) .game-frame{aspect-ratio:auto;display:flex;flex-direction:column;max-width:calc((100svh - 250px) * 1.7778);margin:0 auto}
 html:not(.embed-mode) #gameCanvas{aspect-ratio:16/9;height:auto;width:100%}
 html:not(.embed-mode) .game-vignette{top:62px}
 html:not(.embed-mode) .hud{position:relative;inset:auto;order:-1;border-radius:0;border:0;border-bottom:1px solid #2f3e57;background:#0a1220;box-shadow:none;backdrop-filter:none}
 html:not(.embed-mode) .coach{position:relative;order:3;left:auto;bottom:auto;transform:none;width:100%;border-radius:0;border:0;border-top:1px solid #2f5b58;background:#0b1624;backdrop-filter:none}
 html:not(.embed-mode) .game-frame:has(.coach:not([hidden])) .game-toast{bottom:84px}
 html:not(.embed-mode) .below-game{max-width:calc((100svh - 250px) * 1.7778);margin:0 auto}
}