:root{
  --lime:#ccff38;
  --lime-soft:#eaff9b;
  --mint:#84f0cf;
  --ink:#0e1110;
  --charcoal:#181d1b;
  --panel:#f3efdf;
  --panel-2:#ddd6c1;
  --frame:#252b28;
  --frame-2:#37403c;
  --ui:#111614;
  --danger:#ff6a5c;
  --blue:#73b5ff;
  --gold:#ffde87;
  --shadow:0 24px 60px rgba(0,0,0,.42);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at top,#303734 0%,#121615 55%,#080a09 100%);font-family:Arial,"Noto Sans KR",sans-serif;color:#111;touch-action:none;user-select:none}
body{display:flex;align-items:center;justify-content:center;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));}
button{font:inherit;border:0;cursor:pointer;color:inherit}
.console{width:min(1240px,99vw);height:min(710px,96vh);min-height:500px;border-radius:38px;position:relative;overflow:hidden;background:
linear-gradient(155deg,#f0f1ee 0%,#d4d5cf 38%,#bfc3bc 68%,#9ea39c 100%);
border:3px solid #889089;box-shadow:0 30px 90px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.8),inset 0 -10px 18px rgba(84,88,82,.28);display:grid;grid-template-rows:44px 1fr 54px;padding:14px 18px 12px}
.console:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(130deg,rgba(255,255,255,.14),transparent 18%,transparent 82%,rgba(255,255,255,.14));opacity:.9}
.brand-strip{display:flex;align-items:center;gap:12px;padding:0 16px;color:#2c322d;letter-spacing:.08em;z-index:2}
.brand-dot{width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px rgba(204,255,56,.9)}
.brand-sub{margin-left:auto;font-size:10px;opacity:.62;font-weight:700}
.hardware{display:grid;grid-template-columns:164px minmax(0,1fr) 164px;gap:18px;min-height:0;z-index:2}
.control-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#343a35}
.control-side small{font-size:9px;letter-spacing:.14em;font-weight:900;opacity:.66;text-align:center;line-height:1.45}
.screen-shell{background:linear-gradient(180deg,#3d4440 0%,#292f2c 100%);padding:12px 14px 10px;border-radius:26px 26px 36px 24px;box-shadow:inset 0 0 0 2px #121514,0 12px 22px rgba(0,0,0,.28);display:grid;grid-template-rows:24px minmax(0,1fr) 20px;min-width:0;min-height:0}
.screen-header,.screen-footer{color:#b7beb4;display:flex;align-items:center;justify-content:space-between;font:bold 9px/1 monospace;letter-spacing:.1em;padding:0 6px}
.screen-wrap{position:relative;overflow:hidden;border-radius:10px;background:#0a0f0c;box-shadow:inset 0 0 0 2px #0b100d,inset 0 0 24px rgba(0,0,0,.75);border:2px solid #111513}
#game{display:block;width:100%;height:100%;image-rendering:pixelated;background:#101810}
.scanlines{position:absolute;inset:0;pointer-events:none;z-index:10;opacity:.14;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.95) 4px 4px);mix-blend-mode:multiply}
.screen-vignette{position:absolute;inset:0;pointer-events:none;z-index:11;box-shadow:inset 0 0 80px rgba(0,0,0,.45), inset 0 0 160px rgba(0,0,0,.34)}
.ui-layer{position:absolute;inset:0;z-index:20;pointer-events:none}
.ui-layer .clickable{pointer-events:auto}
.dpad{width:124px;height:124px;position:relative;filter:drop-shadow(0 6px 3px rgba(0,0,0,.25))}
.dpad-btn,.dpad-center{position:absolute;width:44px;height:44px;background:linear-gradient(180deg,#40453f,#232723);color:#d9deda;border:2px solid #151715;box-shadow:inset 0 2px 1px rgba(255,255,255,.15),inset 0 -3px 2px rgba(0,0,0,.65);border-radius:5px}
.dpad-btn{font-size:16px;font-weight:900}
.dpad-btn:active,.dpad-btn.active{transform:translateY(2px);filter:brightness(.86)}
.dpad-btn.up{left:40px;top:0}.dpad-btn.down{left:40px;bottom:0}.dpad-btn.left{left:0;top:40px}.dpad-btn.right{right:0;top:40px}.dpad-center{left:40px;top:40px;border-radius:3px}
.action-cluster{position:relative;width:140px;height:108px;transform:rotate(-12deg)}
.action-btn{position:absolute;width:60px;height:60px;border-radius:50%;background:linear-gradient(180deg,#272c28,#151816);color:#dce0da;border:3px solid #121412;box-shadow:inset 0 2px 2px rgba(255,255,255,.1),inset 0 -5px 3px rgba(0,0,0,.75),0 7px 8px rgba(0,0,0,.18);font-weight:900;font-size:18px}
.action-btn:active{transform:translateY(3px)}
.action-btn.a{right:4px;top:3px;background:linear-gradient(180deg,#d8ff61,#7fa516);color:#111b08}.action-btn.b{left:10px;bottom:4px}
.lower-controls{display:flex;align-items:center;justify-content:center;gap:30px;z-index:2}
.pill-btn{background:linear-gradient(180deg,#6a6d66,#525650);color:#f4f6f2;border-radius:12px;padding:7px 20px;font:bold 9px monospace;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 0 rgba(0,0,0,.45);transform:skew(-16deg)}
.speaker{letter-spacing:4px;color:#70756f;font-size:12px;transform:rotate(-8deg)}
.rotate-notice{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:999;align-items:center;justify-content:center;padding:24px}
.rotate-card{background:#eff3e7;border:3px solid #121412;border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;box-shadow:var(--shadow)}
.rotate-icon{font-size:42px;color:#6f9700}

/* overlay UI */
.intro-screen,.dialogue-box,.choice-box,.finance-panel,.ending-panel,.menu-panel,.hint-toast,.story-card,.cutscene-stage{position:absolute}
.intro-screen{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:white;background:linear-gradient(180deg,rgba(5,8,7,.24) 0%,rgba(7,10,9,.82) 100%);padding:26px;pointer-events:auto}
.intro-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(204,255,56,.45);padding:6px 12px;border-radius:999px;background:rgba(10,15,12,.45);backdrop-filter:blur(3px);font:bold 10px monospace;letter-spacing:.16em;color:var(--lime-soft);text-transform:uppercase;margin-bottom:14px}
.intro-logo{font-size:clamp(28px,4vw,54px);font-weight:1000;letter-spacing:-.04em;text-shadow:0 4px 18px rgba(0,0,0,.42);margin:0 0 8px;line-height:1.05}
.intro-logo em{color:var(--lime);font-style:normal}
.intro-sub{font-size:clamp(14px,1.6vw,20px);font-weight:900;background:rgba(10,14,12,.6);padding:11px 16px;border-left:5px solid var(--lime);backdrop-filter:blur(3px);max-width:80%}
.tap-prompt{margin-top:28px;font:bold 11px monospace;letter-spacing:.18em;animation:blink 1s steps(2,end) infinite;color:#f2ffd1}
@keyframes blink{50%{opacity:.25}}
.intro-buttons{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;justify-content:center}
.game-btn{pointer-events:auto;border:2px solid #111;background:var(--panel);padding:10px 22px;font-weight:1000;box-shadow:4px 4px 0 #111;min-width:110px;border-radius:6px}
.game-btn.primary{background:var(--lime)}.game-btn.secondary{background:#d8f8ef}.game-btn.danger{background:#ffe1dd}.game-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #111}
.dialogue-box{left:3.5%;right:3.5%;bottom:4%;display:grid;grid-template-columns:108px minmax(0,1fr);gap:14px;align-items:stretch;background:linear-gradient(180deg,#f7f4ea 0%,#ede7d3 100%);border:3px solid #111;box-shadow:7px 7px 0 rgba(0,0,0,.62);padding:12px 14px;color:#111;pointer-events:auto;min-height:96px;border-radius:10px}
.dialogue-portrait{border:2px solid #111;border-radius:8px;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--portrait-top,#42504a),var(--portrait-bottom,#171b18));display:flex;align-items:flex-end;justify-content:center}
.dialogue-portrait:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.35),transparent 28%)}
.portrait-silhouette{width:72px;height:84px;border-radius:44px 44px 0 0;background:var(--portrait-figure,#212624);position:absolute;bottom:-3px;box-shadow:0 -24px 0 0 var(--portrait-head,#f0bf9e) inset}
.portrait-silhouette:before{content:"";position:absolute;width:60px;height:28px;border-radius:24px 24px 16px 16px;background:var(--portrait-hair,#121514);left:6px;top:-6px}
.portrait-tag{position:absolute;left:6px;top:6px;padding:3px 6px;border-radius:999px;background:rgba(0,0,0,.48);font:bold 8px monospace;color:#eef8e2;letter-spacing:.12em}
.dialogue-copy{position:relative;padding-right:24px}
.dialogue-name{font:bold 11px monospace;color:#5e7214;margin-bottom:8px;letter-spacing:.08em}.dialogue-role{font-size:10px;color:#6d7266;margin-left:6px}
.dialogue-text{font-weight:900;font-size:clamp(13px,1.7vw,18px);line-height:1.45;white-space:pre-line}
.dialogue-next{position:absolute;right:2px;bottom:0;font:bold 9px monospace;opacity:.6}
.choice-box{inset:0;background:rgba(0,0,0,.36);display:flex;align-items:center;justify-content:center;padding:18px;pointer-events:auto}
.choice-card{width:min(560px,90%);background:linear-gradient(180deg,#eee9da 0%,#ddd5c0 100%);border:3px solid #111;box-shadow:8px 8px 0 rgba(0,0,0,.68);padding:16px;border-radius:10px}
.choice-kicker{display:inline-block;margin-bottom:8px;font:bold 10px monospace;letter-spacing:.14em;color:#5e7214}
.choice-title{font-size:15px;font-weight:1000;line-height:1.5;margin-bottom:14px}
.choice-list{display:grid;gap:10px}.choice-btn{text-align:left;background:white;border:2px solid #111;padding:12px;font-weight:900;box-shadow:3px 3px 0 #111;border-radius:6px;line-height:1.45}.choice-btn:hover,.choice-btn:active{background:var(--lime)}
.finance-panel{inset:5%;background:linear-gradient(180deg,#0a130e 0%,#111b15 100%);color:#d6ffcf;border:3px solid #758a69;box-shadow:0 0 0 3px #101,12px 12px 0 rgba(0,0,0,.62);padding:16px 18px;pointer-events:auto;font-family:monospace;overflow:auto;border-radius:12px}
.finance-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #65765e;padding-bottom:8px;margin-bottom:12px;gap:12px}.finance-head strong{color:var(--lime);font-size:16px}.finance-status{display:inline-flex;align-items:center;gap:6px;color:#d8e4d2}.finance-status b{color:#fff}
.finance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}.metric{display:flex;justify-content:space-between;border-bottom:1px dashed #3e4c3a;padding:7px 0;font-size:12px;gap:10px}.metric b{color:white;text-align:right}.metric.good b{color:#83c7ff}.metric.bad b{color:#ff8b81}.finance-summary{margin-top:14px;padding:12px;border:1px solid #6f8269;background:#121d14;line-height:1.6;font-size:11px;border-radius:8px}.finance-close{float:right;margin-top:12px;background:var(--lime);padding:8px 14px;font-weight:900;border-radius:6px}
.ending-panel{inset:0;display:flex;align-items:center;justify-content:center;background:rgba(8,10,8,.83);color:white;text-align:center;padding:20px;pointer-events:auto}.ending-card{width:min(620px,92%);border:4px solid white;background:linear-gradient(180deg,#0f1411 0%,#181e1b 100%);padding:24px;box-shadow:12px 12px 0 rgba(0,0,0,.58);border-radius:16px}
.ending-title{font-size:clamp(32px,5vw,64px);font-weight:1000;letter-spacing:-.05em;margin-bottom:14px}.ending-title.over{color:var(--danger)}.ending-title.clear{color:var(--lime)}
.ending-desc{font-size:clamp(14px,1.8vw,20px);line-height:1.65;white-space:pre-line;opacity:.96}.ending-actions{margin-top:20px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.secret-unlock{margin-top:18px;padding:12px 14px;background:rgba(204,255,56,.14);border:1px solid rgba(204,255,56,.48);color:#f0ffd1;font-weight:900;border-radius:10px}
.menu-panel{top:50%;left:50%;transform:translate(-50%,-50%);width:min(520px,90%);background:linear-gradient(180deg,#f2eee0 0%,#ddd5bf 100%);border:3px solid #111;box-shadow:8px 8px 0 rgba(0,0,0,.62);padding:18px;border-radius:12px;pointer-events:auto;text-align:center}
.menu-panel h2{margin:0 0 10px;font-size:28px;letter-spacing:-.03em}.menu-panel p{margin:0 0 16px;line-height:1.65;font-weight:700}.menu-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hint-toast{left:50%;top:18px;transform:translateX(-50%);background:rgba(9,13,11,.92);color:#f4ffd1;padding:9px 14px;border-radius:999px;border:1px solid rgba(204,255,56,.36);font:bold 11px monospace;box-shadow:0 8px 18px rgba(0,0,0,.28);max-width:80%;text-align:center}
.story-card,.cutscene-stage{inset:0;display:flex;align-items:center;justify-content:center;padding:18px;pointer-events:auto}
.story-card{background:linear-gradient(180deg,rgba(5,9,7,.26),rgba(4,6,5,.74))}
.story-panel{width:min(560px,92%);background:linear-gradient(180deg,#eff4e9 0%,#dce2d5 100%);border:3px solid #111;box-shadow:10px 10px 0 rgba(0,0,0,.58);padding:20px;border-radius:14px;text-align:center}
.story-label{font:bold 10px monospace;letter-spacing:.18em;color:#648400;margin-bottom:10px}.story-title{font-size:clamp(28px,4vw,44px);font-weight:1000;letter-spacing:-.05em;margin:0 0 8px}.story-text{line-height:1.7;font-weight:800;color:#222}.story-actions{margin-top:16px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.cutscene-stage{background:linear-gradient(180deg,rgba(4,6,5,.18),rgba(6,8,7,.82))}
.cutscene-panel{width:min(660px,95%);background:linear-gradient(180deg,#0e1512 0%,#131b17 100%);border:2px solid rgba(255,255,255,.8);box-shadow:10px 10px 0 rgba(0,0,0,.6);border-radius:18px;overflow:hidden;color:white}
.cutscene-visual{height:250px;position:relative;background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.32),transparent 20%), linear-gradient(180deg,#1b2622 0%,#101513 70%,#0a0d0c 100%)}
.spotlight{position:absolute;left:50%;top:-34px;width:180px;height:220px;transform:translateX(-50%);background:radial-gradient(ellipse at top,rgba(255,255,255,.32),rgba(255,255,255,.04) 44%,transparent 70%)}
.performer{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:96px;height:158px;background:linear-gradient(180deg,#4b5252,#222);clip-path:polygon(44% 0,56% 0,62% 18%,70% 36%,86% 66%,76% 70%,67% 50%,63% 100%,37% 100%,33% 50%,24% 70%,14% 66%,30% 36%,38% 18%);border-radius:10px}
.performer:before{content:"";position:absolute;left:25px;top:-26px;width:46px;height:46px;border-radius:50%;background:#d7a07c;box-shadow:0 -9px 0 0 #181c1a inset}
.audience-bar{position:absolute;left:0;right:0;bottom:0;height:58px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.5) 22%,rgba(0,0,0,.92) 100%)}
.react-bubble{position:absolute;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);font:bold 11px monospace;color:#effad0;backdrop-filter:blur(2px)}
.cutscene-copy{padding:16px 20px 18px}.cutscene-kicker{font:bold 10px monospace;letter-spacing:.18em;color:#ddff86;margin-bottom:8px}.cutscene-title{font-size:28px;font-weight:1000;letter-spacing:-.04em;margin:0 0 8px}.cutscene-text{line-height:1.7;font-weight:800;color:#edf2ec}.cutscene-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 20px 18px}

@media (max-width:980px){
  .console{width:100vw;height:100vh;border-radius:0;min-height:100vh;padding:10px 10px 8px}
  .hardware{grid-template-columns:130px minmax(0,1fr) 130px;gap:10px}
  .dialogue-box{grid-template-columns:92px minmax(0,1fr)}
}
@media (max-width:820px){
  .hardware{grid-template-columns:118px minmax(0,1fr) 118px}
  .brand-sub{display:none}
  .screen-shell{padding:10px}
  .dialogue-box{left:2.5%;right:2.5%;bottom:3.5%;gap:10px}
  .dialogue-text{font-size:14px}
}
@media (orientation:portrait){
  .rotate-notice{display:flex}
  .console{filter:blur(5px);pointer-events:none}
}

.dialogue-portrait.has-image{background:linear-gradient(180deg,rgba(13,18,15,.12),rgba(13,18,15,.02));padding-top:22px;border-color:#111;display:flex;align-items:flex-end;justify-content:center}
.dialogue-portrait.has-image:before{background:radial-gradient(circle at 50% 16%,color-mix(in srgb,var(--accent,#ccff38) 38%, white 62%),transparent 35%)}
.portrait-image{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;filter:drop-shadow(0 10px 10px rgba(0,0,0,.18))}
.cutscene-char{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:118px;height:182px;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(0,0,0,.4))}
.lower-controls .pill-btn{min-width:92px;text-align:center}
@supports not (color: color-mix(in srgb, white, black)){
  .dialogue-portrait.has-image:before{background:radial-gradient(circle at 50% 16%,rgba(204,255,56,.35),transparent 35%)}
}

/* === Full-screen mobile game layout v2 === */
html,body{background:#080b09;padding:0!important;overscroll-behavior:none}
.console{
  position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;min-height:0!important;
  padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#080b09!important;
  display:block!important;
}
.console:before{display:none!important}
.hardware{position:absolute!important;inset:0!important;display:block!important;z-index:1!important}
.screen-shell{
  position:absolute!important;inset:0!important;z-index:1!important;padding:0!important;border-radius:0!important;
  display:block!important;background:#0a0f0c!important;box-shadow:none!important;
}
.screen-wrap{position:absolute!important;inset:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#0a0f0c!important}
#game{position:absolute;inset:0;width:100%!important;height:100%!important;image-rendering:auto!important}
.scanlines{opacity:.07!important}
.screen-vignette{box-shadow:inset 0 0 36px rgba(0,0,0,.24)!important}
.screen-header{
  position:absolute!important;z-index:115!important;top:max(7px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  width:auto!important;min-width:180px;height:24px;padding:0 12px!important;border-radius:999px;
  background:rgba(8,12,10,.48);backdrop-filter:blur(6px);color:#e8eee4!important;gap:18px;pointer-events:none;
}
.screen-footer{display:none!important}
.brand-strip{
  position:absolute!important;z-index:116!important;top:max(7px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));
  height:24px;padding:0 9px!important;border-radius:999px;background:rgba(8,12,10,.48);backdrop-filter:blur(6px);
  color:#ecf1e9!important;font-size:9px;gap:6px!important;pointer-events:none;
}
.brand-dot{width:7px!important;height:7px!important}.brand-sub{display:none!important}
.lower-controls{
  position:absolute!important;z-index:116!important;top:max(6px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));
  display:flex!important;gap:6px!important;align-items:center!important;justify-content:flex-end!important;
}
.lower-controls .pill-btn{
  min-width:0!important;padding:6px 9px!important;border-radius:999px!important;transform:none!important;
  background:rgba(16,20,18,.58)!important;color:#edf3e7!important;border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:none!important;font-size:8px!important;backdrop-filter:blur(5px);
}
.speaker{display:none!important}
.control-side{
  position:absolute!important;z-index:130!important;bottom:max(14px,env(safe-area-inset-bottom));
  display:block!important;color:white!important;pointer-events:none!important;
}
.left-controls{left:max(14px,env(safe-area-inset-left))!important}
.right-controls{right:max(14px,env(safe-area-inset-right))!important}
.control-side small{display:none!important}
.dpad{width:104px!important;height:104px!important;opacity:.76;filter:drop-shadow(0 5px 7px rgba(0,0,0,.35))!important;pointer-events:auto!important}
.dpad-btn,.dpad-center{width:38px!important;height:38px!important;border-radius:9px!important;background:rgba(24,29,26,.82)!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 7px rgba(0,0,0,.28)!important}
.dpad-btn{font-size:12px!important;color:#f3f6f0!important}
.dpad-btn.up{left:33px!important;top:0!important}.dpad-btn.down{left:33px!important;bottom:0!important}.dpad-btn.left{left:0!important;top:33px!important}.dpad-btn.right{right:0!important;top:33px!important}.dpad-center{left:33px!important;top:33px!important}
.action-cluster{width:116px!important;height:90px!important;transform:rotate(-8deg)!important;opacity:.82;pointer-events:auto!important}
.action-btn{width:52px!important;height:52px!important;border:2px solid rgba(255,255,255,.22)!important;box-shadow:0 4px 8px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.16)!important;font-size:15px!important}
.action-btn.a{right:2px!important;top:2px!important;background:rgba(194,245,47,.88)!important}
.action-btn.b{left:4px!important;bottom:2px!important;background:rgba(28,33,30,.82)!important}
.ui-layer{z-index:40!important}

/* Keep narrative UI readable between the overlaid controls */
.dialogue-box{left:15%!important;right:15%!important;bottom:3%!important;min-height:82px!important;grid-template-columns:82px minmax(0,1fr)!important;padding:9px 11px!important;box-shadow:4px 4px 0 rgba(0,0,0,.55)!important}
.dialogue-text{font-size:clamp(12px,2.05vw,17px)!important}.dialogue-name{margin-bottom:5px!important}.dialogue-next{font-size:8px!important}
.choice-box,.story-card,.cutscene-stage,.ending-panel{padding:38px 14% 14px!important}
.choice-card{width:min(600px,100%)!important;padding:13px!important}.choice-title{font-size:clamp(12px,2vw,16px)!important;margin-bottom:10px!important}
.choice-list{gap:7px!important}.choice-btn{padding:9px 12px!important;font-size:clamp(11px,1.7vw,15px)!important;box-shadow:2px 2px 0 #111!important}
.finance-panel{inset:7% 14% 7%!important;padding:12px 14px!important}.finance-grid{gap:5px 14px!important}.metric{padding:5px 0!important;font-size:10px!important}.finance-summary{font-size:9px!important;margin-top:8px!important;padding:8px!important}
.story-panel,.ending-card,.menu-panel{max-height:82vh;overflow:auto}
.cutscene-panel{max-height:88vh}.cutscene-visual{height:min(42vh,220px)!important}.cutscene-copy{padding:11px 16px!important}.cutscene-text{font-size:11px!important}.cutscene-title{font-size:22px!important}

/* D-pad + A controlled menus */
.nav-option{pointer-events:none!important;position:relative;transition:transform .08s ease,background .08s ease,box-shadow .08s ease,border-color .08s ease}
.nav-option.selected{background:var(--lime)!important;color:#111!important;border-color:#111!important;box-shadow:0 0 0 2px #111,0 0 0 5px rgba(204,255,56,.45)!important;transform:translateX(4px)}
.nav-option.selected:before{content:'▶';position:absolute;left:-18px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--lime);filter:drop-shadow(0 1px 1px #000)}
.nav-stack{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;width:min(320px,72vw)!important;margin-left:auto!important;margin-right:auto!important}
.control-hint{margin-top:11px;text-align:center;font:900 9px/1.3 monospace;color:#4e5c27;letter-spacing:.04em}
.control-hint.dark{color:#d9efa0}
.finance-close{float:none!important;display:inline-block;margin:10px auto 0!important;min-width:90px;text-align:center}

/* Small player/NPC scale parity */
@media (max-height:500px){
  .dpad{transform:scale(.88);transform-origin:left bottom}
  .action-cluster{transform:rotate(-8deg) scale(.88)!important;transform-origin:right bottom}
  .dialogue-box{left:14%!important;right:14%!important;bottom:2%!important;grid-template-columns:70px minmax(0,1fr)!important;min-height:70px!important}
  .choice-box,.story-card,.cutscene-stage,.ending-panel{padding-top:28px!important}
  .intro-logo{font-size:clamp(22px,5vw,38px)!important}.intro-sub{font-size:12px!important;padding:8px 11px!important}.intro-badge{font-size:8px!important;margin-bottom:7px!important}
}
@media (orientation:portrait){
  .rotate-notice{display:flex!important;z-index:9999!important}
  .console{filter:blur(4px);pointer-events:none}
}


/* === Mobile touch hardening === */
html,body,.console,.console *,button,[role="button"],canvas,img{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
  -webkit-user-drag:none!important;
}
button,.dpad,.dpad-btn,.dpad-center,.action-cluster,.action-btn,.pill-btn{
  touch-action:none!important;
  -webkit-tap-highlight-color:transparent!important;
  outline:none!important;
}
img{draggable:false;pointer-events:none}
.dpad-btn,.action-btn,.pill-btn{cursor:default!important}


/* === Mobile interaction & dialogue compact pass v4 === */
/* Larger, more forgiving controls for Safari / Instagram / Kakao in-app browsers. */
.left-controls{left:max(10px,env(safe-area-inset-left))!important}
.right-controls{right:max(10px,env(safe-area-inset-right))!important}
.dpad{
  width:142px!important;height:142px!important;opacity:.64!important;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.3))!important;
}
.dpad-btn,.dpad-center{
  width:48px!important;height:48px!important;border-radius:11px!important;
  background:rgba(22,28,25,.62)!important;
  border:1px solid rgba(255,255,255,.2)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 7px rgba(0,0,0,.24)!important;
}
.dpad-btn{font-size:13px!important}
.dpad-btn.up{left:47px!important;top:0!important}.dpad-btn.down{left:47px!important;bottom:0!important}
.dpad-btn.left{left:0!important;top:47px!important}.dpad-btn.right{right:0!important;top:47px!important}
.dpad-center{left:47px!important;top:47px!important;opacity:.72}

.action-cluster{width:142px!important;height:112px!important;opacity:.7!important;pointer-events:auto!important}
.action-btn{
  width:64px!important;height:64px!important;font-size:17px!important;
  border:2px solid rgba(255,255,255,.2)!important;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  box-shadow:0 4px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.action-btn.a{right:0!important;top:0!important;background:rgba(196,245,52,.58)!important;color:#152000!important}
.action-btn.b{left:0!important;bottom:0!important;background:rgba(22,28,25,.58)!important;color:#f2f5ef!important}

/* Compact dialogue: faces only, minimal padding, keeps the audition panel visible. */
.dialogue-box{
  left:17%!important;right:17%!important;bottom:max(7px,env(safe-area-inset-bottom))!important;
  min-height:0!important;max-height:25vh!important;
  grid-template-columns:54px minmax(0,1fr)!important;gap:8px!important;
  align-items:center!important;padding:6px 9px!important;border-width:2px!important;border-radius:8px!important;
  box-shadow:3px 3px 0 rgba(0,0,0,.52)!important;
  overflow:hidden!important;touch-action:manipulation!important;
}
.dialogue-box.system-dialogue{grid-template-columns:minmax(0,1fr)!important;left:20%!important;right:20%!important}
.dialogue-portrait,.dialogue-portrait.has-image{
  width:54px!important;height:54px!important;min-height:54px!important;align-self:center!important;
  padding:0!important;border-width:1.5px!important;border-radius:7px!important;background:#232925!important;
}
.dialogue-portrait.has-image:before{display:none!important}
.dialogue-portrait .portrait-tag{display:none!important}
.portrait-image{
  width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 5%!important;
  transform:scale(1.62)!important;transform-origin:50% 10%!important;
  filter:none!important;
}
.dialogue-copy{padding:0 20px 0 0!important;min-width:0!important;align-self:center!important}
.dialogue-name{font-size:9px!important;line-height:1.1!important;margin-bottom:3px!important;letter-spacing:.05em!important}
.dialogue-text{
  font-size:clamp(10px,1.55vw,13px)!important;line-height:1.3!important;font-weight:850!important;
  max-height:15vh!important;overflow:auto!important;-webkit-overflow-scrolling:touch;
}
.dialogue-next{right:0!important;bottom:-1px!important;font-size:7px!important;opacity:.55!important;white-space:nowrap!important}

/* Final unlock / ending card: never let the secret-route copy overflow or clip. */
.ending-panel{padding:30px 15% 10px!important}
.ending-card{
  width:min(560px,100%)!important;max-height:88dvh!important;overflow:auto!important;
  padding:14px 16px!important;border-width:2px!important;border-radius:12px!important;
  -webkit-overflow-scrolling:touch;
}
.ending-title{font-size:clamp(24px,4.4vw,40px)!important;line-height:1!important;margin-bottom:8px!important}
.ending-desc{font-size:clamp(10px,1.45vw,13px)!important;line-height:1.38!important}
.secret-unlock{
  margin-top:10px!important;padding:8px 10px!important;font-size:clamp(9px,1.35vw,12px)!important;
  line-height:1.35!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:keep-all!important;
  max-width:100%!important;
}
.ending-actions{margin-top:10px!important;gap:8px!important}.ending-actions .game-btn{padding:7px 14px!important;font-size:10px!important}
.ending-card .control-hint{margin-top:7px!important;font-size:7px!important}

@media (max-height:500px){
  .dpad{transform:scale(.96)!important;transform-origin:left bottom!important}
  .action-cluster{transform:rotate(-8deg) scale(.96)!important;transform-origin:right bottom!important}
  .dialogue-box{
    left:16%!important;right:16%!important;bottom:max(5px,env(safe-area-inset-bottom))!important;
    grid-template-columns:48px minmax(0,1fr)!important;gap:7px!important;padding:5px 8px!important;max-height:23vh!important;
  }
  .dialogue-box.system-dialogue{left:19%!important;right:19%!important}
  .dialogue-portrait,.dialogue-portrait.has-image{width:48px!important;height:48px!important;min-height:48px!important}
  .dialogue-text{font-size:clamp(9px,1.45vw,12px)!important;line-height:1.25!important;max-height:13vh!important}
  .ending-panel{padding:24px 14% 8px!important}
  .ending-card{padding:10px 13px!important;max-height:90dvh!important}
  .ending-title{font-size:clamp(21px,4vw,34px)!important;margin-bottom:6px!important}
  .ending-desc{font-size:clamp(9px,1.3vw,11px)!important;line-height:1.28!important}
  .secret-unlock{font-size:clamp(8px,1.2vw,10px)!important;padding:6px 8px!important;margin-top:7px!important}
}

/* === Audition cutscene overflow fix v5 ===
   Keeps the pre-Sunwoo-stage card inside short mobile landscape viewports
   (Safari / Instagram / Kakao in-app browsers included). */
.cutscene-stage{
  padding:max(8px,env(safe-area-inset-top)) max(12%,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12%,env(safe-area-inset-left))!important;
}
.cutscene-panel{
  width:min(620px,100%)!important;
  max-height:calc(100vh - 16px)!important;
  max-height:calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)))!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
.cutscene-visual{
  height:clamp(125px,34dvh,190px)!important;
  min-height:0!important;
}
.cutscene-char{
  width:clamp(78px,16dvh,104px)!important;
  height:clamp(118px,27dvh,158px)!important;
  bottom:6px!important;
}
.cutscene-copy{padding:8px 14px 7px!important}
.cutscene-kicker{font-size:8px!important;line-height:1.1!important;margin-bottom:4px!important}
.cutscene-title{font-size:clamp(16px,3.2dvh,21px)!important;line-height:1.02!important;margin:0 0 4px!important}
.cutscene-text{
  font-size:clamp(9px,1.55dvh,11px)!important;
  line-height:1.32!important;
  font-weight:800!important;
  overflow-wrap:anywhere!important;
  word-break:keep-all!important;
}
.cutscene-actions{padding:0 14px 8px!important;gap:6px!important}
.cutscene-actions .game-btn{padding:6px 14px!important;font-size:9px!important}
.cutscene-panel .control-hint{font-size:7px!important;line-height:1!important;margin-bottom:5px!important}

@media (max-height:430px){
  .cutscene-stage{
    align-items:flex-start!important;
    padding:max(5px,env(safe-area-inset-top)) max(13%,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(13%,env(safe-area-inset-left))!important;
  }
  .cutscene-panel{max-height:calc(100vh - 10px)!important;max-height:calc(100dvh - 10px)!important;border-radius:11px!important}
  .cutscene-visual{height:clamp(96px,29dvh,124px)!important}
  .cutscene-char{width:72px!important;height:108px!important;bottom:2px!important}
  .react-bubble{font-size:7px!important;padding:3px 5px!important}
  .cutscene-copy{padding:5px 11px 4px!important}
  .cutscene-kicker{font-size:6.5px!important;margin-bottom:2px!important}
  .cutscene-title{font-size:15px!important;margin-bottom:2px!important}
  .cutscene-text{font-size:8.5px!important;line-height:1.22!important}
  .cutscene-actions{padding:0 11px 5px!important}
  .cutscene-actions .game-btn{padding:4px 12px!important;font-size:8px!important}
  .cutscene-panel .control-hint{font-size:6px!important;margin-bottom:3px!important}
}

@media (max-height:350px){
  .cutscene-visual{height:88px!important}
  .cutscene-char{width:60px!important;height:88px!important}
  .cutscene-text{font-size:8px!important;line-height:1.18!important}
  .cutscene-actions .game-btn{padding:3px 10px!important}
}

/* v6: secret unlock bridge copy */
.secret-unlock small{
  display:block;
  margin-top:4px;
  font-size:.86em;
  line-height:1.35;
  font-weight:750;
  opacity:.82;
}


/* === v7 portrait-native mobile layout ===
   Portrait orientation is a first-class play mode. No rotation prompt or
   orientation-lock change is required on iPhone / in-app browsers. */
@media (orientation:portrait){
  .rotate-notice{display:none!important}
  .console{filter:none!important;pointer-events:auto!important}

  /* Use the phone as a vertical handheld: 16:9 game stage on top,
     narrative UI in the dark area below, controls at the bottom. */
  .screen-wrap{
    top:max(34px,env(safe-area-inset-top))!important;
    bottom:max(176px,calc(env(safe-area-inset-bottom) + 164px))!important;
    left:0!important;right:0!important;
    background:linear-gradient(180deg,#09100c 0%,#09100c 37%,#050806 37%,#080b09 100%)!important;
    overflow:hidden!important;
  }
  #game{
    inset:auto!important;top:0!important;left:0!important;
    width:100%!important;height:auto!important;aspect-ratio:16/9!important;
    object-fit:contain!important;object-position:center top!important;
    background:#0a0f0c!important;
  }
  .scanlines,.screen-vignette{
    top:0!important;left:0!important;right:0!important;bottom:auto!important;
    height:56.25vw!important;max-height:42dvh!important;
  }
  .ui-layer{inset:0!important}

  /* Declutter the narrow top bar. */
  .brand-strip{display:none!important}
  .screen-header{
    top:max(5px,env(safe-area-inset-top))!important;
    left:8px!important;right:auto!important;transform:none!important;
    min-width:146px!important;width:auto!important;height:24px!important;
    padding:0 9px!important;gap:9px!important;font-size:7px!important;
  }
  .lower-controls{
    top:max(4px,env(safe-area-inset-top))!important;
    right:max(6px,env(safe-area-inset-right))!important;
    left:auto!important;gap:3px!important;
  }
  .lower-controls .pill-btn{
    padding:5px 6px!important;font-size:6.5px!important;border-radius:999px!important;
  }

  /* Thumb controls stay large but move into a dedicated lower control zone. */
  .control-side{bottom:max(16px,env(safe-area-inset-bottom))!important}
  .left-controls{left:max(14px,env(safe-area-inset-left))!important}
  .right-controls{right:max(14px,env(safe-area-inset-right))!important}
  .dpad{width:136px!important;height:136px!important;opacity:.68!important;transform:none!important}
  .dpad-btn,.dpad-center{width:46px!important;height:46px!important;border-radius:11px!important}
  .dpad-btn.up{left:45px!important;top:0!important}.dpad-btn.down{left:45px!important;bottom:0!important}
  .dpad-btn.left{left:0!important;top:45px!important}.dpad-btn.right{right:0!important;top:45px!important}
  .dpad-center{left:45px!important;top:45px!important}
  .action-cluster{width:136px!important;height:108px!important;transform:rotate(-7deg)!important;opacity:.72!important}
  .action-btn{width:62px!important;height:62px!important;font-size:16px!important}

  /* Dialogue becomes a compact lower-third card instead of covering the scene. */
  .dialogue-box{
    left:4%!important;right:4%!important;
    bottom:12px!important;max-height:190px!important;
    grid-template-columns:58px minmax(0,1fr)!important;gap:9px!important;
    padding:9px 10px!important;border-radius:9px!important;
    overflow:auto!important;-webkit-overflow-scrolling:touch!important;
  }
  .dialogue-box.system-dialogue{left:6%!important;right:6%!important;grid-template-columns:minmax(0,1fr)!important}
  .dialogue-portrait,.dialogue-portrait.has-image{width:58px!important;height:58px!important;min-height:58px!important}
  .dialogue-copy{padding-right:18px!important}
  .dialogue-name{font-size:9px!important;margin-bottom:4px!important}
  .dialogue-text{font-size:12.5px!important;line-height:1.38!important;max-height:132px!important;overflow:auto!important}
  .dialogue-next{font-size:7px!important}

  /* Menus / story / results use the full vertical space below the game stage. */
  .intro-screen{padding:18px 18px 24px!important;justify-content:center!important}
  .intro-badge{font-size:8px!important;margin-bottom:10px!important;padding:5px 9px!important}
  .intro-logo{font-size:clamp(28px,8.2vw,38px)!important;line-height:1.05!important}
  .intro-sub{font-size:12px!important;line-height:1.45!important;max-width:94%!important;padding:9px 11px!important}
  .tap-prompt{margin-top:20px!important;font-size:9px!important}
  .intro-buttons{margin-top:18px!important}
  .nav-stack{width:min(330px,86vw)!important}

  .choice-box,.story-card,.cutscene-stage,.ending-panel{
    inset:0!important;padding:18px 4% 16px!important;align-items:center!important;
  }
  .choice-card,.story-panel,.cutscene-panel,.ending-card{
    width:min(420px,94vw)!important;max-width:94vw!important;
  }
  .choice-card{padding:14px!important}
  .choice-title{font-size:14px!important;line-height:1.42!important}
  .choice-btn{font-size:12px!important;padding:11px 12px!important}
  .control-hint{font-size:7.5px!important}

  .story-panel{max-height:88%!important;overflow:auto!important;padding:18px!important}
  .story-title{font-size:24px!important;line-height:1.08!important}
  .story-text{font-size:12px!important;line-height:1.55!important}

  .cutscene-panel{max-height:92%!important;overflow:auto!important}
  .cutscene-visual{height:190px!important;min-height:160px!important}
  .cutscene-char{width:102px!important;height:154px!important}
  .cutscene-copy{padding:10px 14px 8px!important}
  .cutscene-title{font-size:21px!important}
  .cutscene-text{font-size:10.5px!important;line-height:1.42!important}
  .cutscene-actions{padding:0 14px 9px!important}

  .finance-panel{
    inset:4%!important;max-height:92%!important;overflow:auto!important;
    padding:14px!important;border-radius:10px!important;-webkit-overflow-scrolling:touch!important;
  }
  .finance-head{font-size:8px!important}
  .finance-grid{grid-template-columns:1fr!important;gap:0!important}
  .metric{font-size:9px!important;padding:5px 0!important}
  .finance-summary{font-size:9px!important;line-height:1.35!important}

  .ending-panel{padding:18px 4%!important}
  .ending-card{max-height:90%!important;overflow:auto!important;padding:16px!important}
  .ending-title{font-size:34px!important}
  .ending-desc{font-size:12px!important;line-height:1.45!important}
  .secret-unlock{font-size:11px!important;line-height:1.38!important;padding:9px 10px!important}
  .ending-actions .game-btn{font-size:10px!important;padding:9px 14px!important}

  .hint-toast{
    left:50%!important;right:auto!important;top:auto!important;bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px))!important;
    transform:translateX(-50%)!important;
    width:auto!important;max-width:min(88vw,360px)!important;height:auto!important;min-height:0!important;max-height:none!important;
    padding:9px 13px!important;border-radius:12px!important;box-sizing:border-box!important;
    text-align:center!important;font-size:10px!important;line-height:1.35!important;white-space:normal!important;
  }
}

/* Extra-narrow iPhones / in-app browser viewports */
@media (orientation:portrait) and (max-width:390px){
  .screen-wrap{bottom:max(168px,calc(env(safe-area-inset-bottom) + 156px))!important}
  .dpad{transform:scale(.92)!important;transform-origin:left bottom!important}
  .action-cluster{transform:rotate(-7deg) scale(.92)!important;transform-origin:right bottom!important}
  .dialogue-box{left:3%!important;right:3%!important;grid-template-columns:52px minmax(0,1fr)!important;padding:8px!important}
  .dialogue-portrait,.dialogue-portrait.has-image{width:52px!important;height:52px!important;min-height:52px!important}
  .dialogue-text{font-size:11.5px!important}
}