/* Iga no Kage arcade machine (js/iga.js). Everything is scoped under .igk. */
.igk{position:fixed;inset:0;z-index:9100;background:#04050a;display:flex;align-items:center;justify-content:center;padding:8px;color:#fff;font-family:"Barlow Condensed",sans-serif;overflow:auto}
.igk *{box-sizing:border-box}
.igk-box{position:relative;width:min(1100px,100%,calc((100vh - 150px) * 16 / 9));display:flex;flex-direction:column;gap:8px;margin:auto}
.igk-x{position:fixed;right:10px;top:8px;z-index:20;width:38px;height:38px;border-radius:50%;border:2px solid #fff;background:#000;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.igk-stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:3px solid #6e0f1c;border-radius:10px;background:#000;touch-action:none;user-select:none;-webkit-user-select:none;container-type:inline-size}
.igk-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.igk-stage.ouch{animation:igkouch .3s}
@keyframes igkouch{0%{box-shadow:inset 0 0 0 999px rgba(200,16,46,.35)}100%{box-shadow:inset 0 0 0 999px rgba(200,16,46,0)}}
/* HUD */
.igk-hud{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto 1fr;gap:2cqw;padding:1.2cqw 1.6cqw;z-index:5;pointer-events:none;font:400 max(9px,1.25cqw)/1.2 "Press Start 2P",monospace;text-shadow:0 2px 0 #000}
.igk-hud[hidden]{display:none}
.igk-hud .bar{display:block;height:max(7px,1.1cqw);margin-top:.5cqw;background:rgba(0,0,0,.6);border:2px solid #fff;border-radius:3px;overflow:hidden}
.igk-hud .bar i{display:block;height:100%;background:linear-gradient(#ffe066,#f2be1a 50%,#d98e00);transition:width .2s}
.igk-hud .r{text-align:right}.igk-hud .r .bar i{background:linear-gradient(#ff7a8a,#c8102e);margin-left:auto}
.igk-hud .sc{font-size:max(12px,2cqw);color:#f2be1a;text-align:center}
.igk-hud .sub{display:block;margin-top:.5cqw;color:#cfd6ff;font-size:max(8px,1cqw)}
/* messages, captions, talk */
.igk-msg{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.85);z-index:6;font:400 max(16px,4cqw)/1.1 "Press Start 2P",monospace;color:#fff;text-shadow:3px 3px 0 #c8102e,0 0 18px #000;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;text-align:center;white-space:nowrap}
.igk-msg.on{opacity:1;transform:translate(-50%,-50%) scale(1)}.igk-msg.ok{color:#f2be1a}.igk-msg.bad{color:#ff5b6e;text-shadow:3px 3px 0 #000}.igk-msg.sm{font-size:max(11px,2cqw)}
.igk-cap{position:absolute;left:3%;top:15%;max-width:62%;z-index:6;pointer-events:none;opacity:0;transform:translateX(-12px);transition:opacity .5s,transform .5s}
.igk-cap.on{opacity:1;transform:none}
.igk-cap b{display:inline-block;font:400 max(10px,1.5cqw)/1.3 "Press Start 2P",monospace;color:#f2be1a;background:rgba(0,0,0,.7);padding:.6cqw 1cqw;border-left:4px solid #c8102e}
.igk-cap span{display:block;margin-top:.5cqw;font:700 max(13px,1.9cqw)/1.3 "Barlow Condensed",sans-serif;background:rgba(0,0,0,.6);padding:.5cqw 1cqw;color:#eef}
.igk-cap span:empty{display:none}
.igk-talk{position:absolute;left:5%;right:5%;bottom:6%;z-index:7;background:rgba(0,0,0,.86);border:2px solid #fff;border-left:6px solid #c8102e;padding:1.2cqw 1.6cqw;font:700 max(14px,2.2cqw)/1.35 "Barlow Condensed",sans-serif;cursor:pointer}
.igk-talk[hidden]{display:none}
.igk-talk b{display:block;color:#ff5b6e;font:400 max(9px,1.2cqw)/1.4 "Press Start 2P",monospace;margin-bottom:.4cqw}
.igk-talk i{position:absolute;right:1cqw;bottom:.6cqw;font-style:normal;font-size:.8em;color:#f2be1a;animation:igkblink .6s steps(2) infinite}
@keyframes igkblink{50%{opacity:0}}
/* result + title panels */
.igk-panel{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2cqw;padding:3cqw;text-align:center;background:radial-gradient(ellipse at 50% 40%,rgba(30,8,14,.55),rgba(0,0,0,.88) 75%)}
.igk-panel[hidden]{display:none}
.igk-panel h3{margin:0;font:400 max(16px,3.4cqw)/1.15 "Press Start 2P",monospace;color:#f2be1a;text-shadow:3px 3px 0 #6e0f1c}
.igk-panel p{margin:0;max-width:70ch;font:700 max(13px,1.9cqw)/1.35 "Barlow Condensed",sans-serif;color:#e8e8f2}
.igk-panel p.unl{color:#8ef0a8;font:400 max(9px,1.3cqw)/1.4 "Press Start 2P",monospace}
.igk-btns{display:flex;flex-wrap:wrap;gap:1.2cqw;justify-content:center;margin-top:.8cqw}
.igk-b{font:400 max(10px,1.35cqw)/1.2 "Press Start 2P",monospace;color:#fff;background:#c8102e;border:2px solid #fff;border-radius:6px;padding:1cqw 1.6cqw;cursor:pointer;box-shadow:0 4px 0 #000}
.igk-b.ghost{background:#1b1d2a}
.igk-b:focus-visible{outline:3px solid #f2be1a;outline-offset:2px}
/* title menu */
.igk-title{background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.25) 40%,rgba(0,0,0,.78));justify-content:flex-start;padding-top:5cqw}
.igk-panel .igk-logo{margin:0;font:400 max(24px,6.6cqw)/1 "Press Start 2P",monospace;color:#fff;letter-spacing:.2cqw;text-shadow:.5cqw .5cqw 0 #c8102e,0 0 3cqw rgba(200,16,46,.6)}
.igk-panel .igk-kanji{margin:0;font:700 max(14px,2.6cqw)/1 serif;color:#f2be1a;letter-spacing:1.2cqw}
.igk-panel .igk-sub{font:400 max(8px,1.2cqw)/1.4 "Press Start 2P",monospace!important;color:#cfd6ff!important}
.igk-menu{display:flex;flex-direction:column;gap:1.2cqw;width:min(560px,86%);margin-top:1.8cqw}
.igk-mi{display:flex;flex-direction:column;align-items:flex-start;gap:.4cqw;text-align:left;width:100%;padding:1.2cqw 1.8cqw;border:2px solid rgba(255,255,255,.85);border-radius:8px;background:rgba(10,10,20,.78);color:#fff;cursor:pointer;position:relative}
.igk-mi b{font:400 max(11px,1.9cqw)/1.2 "Press Start 2P",monospace;color:#f2be1a}
.igk-mi span{font:700 max(12px,1.7cqw)/1.25 "Barlow Condensed",sans-serif;color:#dfe3f5}
.igk-mi:hover,.igk-mi:focus-visible{border-color:#f2be1a;box-shadow:0 0 2cqw rgba(242,190,26,.45);outline:none}
.igk-mi:focus-visible::before,.igk-mi:hover::before{content:"▶";position:absolute;left:-.2cqw;top:50%;transform:translate(-100%,-50%);color:#f2be1a;font-size:max(10px,1.6cqw)}
.igk-mi.locked{opacity:.62;border-style:dashed;cursor:not-allowed}
.igk-mi.locked b::after{content:" 🔒"}
.igk-mi.shake{animation:igkshake .35s}
@keyframes igkshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.igk-panel .igk-mem{position:absolute;left:0;right:0;max-width:none;bottom:1.2cqw;font:600 max(10px,1.3cqw)/1.3 "Barlow Condensed",sans-serif;color:#9aa3c8;text-align:center;margin:0}
/* touch pad */
.igk-pad{display:none;justify-content:space-between;align-items:center;gap:10px;padding:0 4px;touch-action:none;user-select:none;-webkit-user-select:none}
.igk-pad[hidden]{display:none!important}
.igk.touch .igk-pad,.igk-pad.show{display:flex}
.igk-dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);flex:0 0 auto}
.igk-pad button{touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;color:#fff;-webkit-tap-highlight-color:transparent}
.igk-dpad button{border-radius:10px;border:2px solid rgba(255,255,255,.85);background:rgba(20,20,30,.85);font:700 18px/1 sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0}
.igk-dpad button small{font:700 9px/1 "Barlow Condensed",sans-serif;letter-spacing:.5px;opacity:.85}
.igk-dpad [data-vk=up]{grid-column:2;grid-row:1}.igk-dpad [data-vk=left]{grid-column:1;grid-row:2}.igk-dpad [data-vk=right]{grid-column:3;grid-row:2}.igk-dpad [data-vk=down]{grid-column:2;grid-row:3}
.igk-acts{display:grid;gap:7px;grid-template-columns:repeat(2,74px);flex:0 0 auto}
.igk-pad.duel .igk-acts{grid-template-columns:repeat(4,minmax(56px,66px))}
.igk-acts button{min-height:52px;border-radius:14px;border:2px solid #fff;font:800 12px/1.05 "Barlow Condensed",sans-serif;letter-spacing:.5px;box-shadow:0 3px 0 #000;background:radial-gradient(circle at 35% 30%,#ff5b6e,#c8102e 60%,#7a0716);padding:2px}
.igk-acts .k{background:radial-gradient(circle at 35% 30%,#8af0a0,#1f9a3f 60%,#0b4a1c)}
.igk-acts .g{background:radial-gradient(circle at 35% 30%,#7ab8ff,#1f5fbf 60%,#0d2e66);grid-row:span 2}
.igk-acts .s{background:radial-gradient(circle at 35% 30%,#ffe98a,#c79100 60%,#5e4400)}
.igk-pad button.on{filter:brightness(1.5);transform:translateY(2px);box-shadow:0 1px 0 #000}
.igk-note{margin:0;text-align:center;font:600 13px/1.35 "Barlow Condensed",sans-serif;color:#aab}
.igk-note:empty{display:none}
.igk.touch .igk-note{display:none}
@media (hover:none),(pointer:coarse),(max-width:760px){.igk-pad{display:flex}.igk-note{display:none}}
@media (max-width:760px),(orientation:portrait){
 .igk{align-items:flex-start;padding:48px 6px 6px}
 .igk-box{width:100%}
}
@media (max-width:380px){.igk-dpad{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px)}.igk-pad.duel .igk-acts{grid-template-columns:repeat(4,52px)}}
/* short landscape phones: pad floats over the stage */
@media (orientation:landscape) and (max-height:520px){
 .igk{padding:4px;align-items:center}
 .igk-box{width:min(100%,calc((100vh - 8px) * 16 / 9))}
 .igk-pad{position:absolute;left:0;right:0;bottom:4px;z-index:9;pointer-events:none;opacity:.8}
 .igk-pad>*{pointer-events:auto}
 .igk-dpad{grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px)}
 .igk-acts button{min-height:40px}
}
/* duel pad: 7 buttons must fit next to the d-pad on a 390px phone */
.igk-pad.duel .igk-acts{flex:1 1 auto;min-width:0;max-width:320px;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.igk-pad.duel .igk-acts button{font-size:11px;min-height:50px}
@media (max-width:480px){.igk-pad.duel .igk-dpad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px)}.igk-pad{gap:6px;padding:0}}
/* small stages (phones): compact title and result panels, captions */
@container (max-width:560px){
 .igk-panel{gap:4px;padding:8px 10px}
 .igk-title{padding-top:10px}
 .igk-panel .igk-logo{font-size:20px}
 .igk-panel .igk-kanji{font-size:12px;letter-spacing:4px}
 .igk-panel .igk-sub{display:none}
 .igk-menu{gap:5px;margin-top:4px;width:92%}
 .igk-mi{padding:5px 10px;gap:2px}
 .igk-mi b{font-size:10px}.igk-mi span{font-size:11px;line-height:1.2}
 .igk-panel .igk-mem{bottom:3px;font-size:9px}
 .igk-panel h3{font-size:13px}
 .igk-panel p{font-size:11px;line-height:1.25}
 .igk-panel p.unl{font-size:8px}
 .igk-btns{gap:5px;margin-top:2px}
 .igk-b{font-size:8px;padding:6px 8px}
 .igk-cap{max-width:80%;top:17%}
 .igk-cap b{font-size:8px}.igk-cap span{font-size:11px;line-height:1.2}
 .igk-talk{font-size:12px;padding:5px 8px}.igk-talk b{font-size:7px}
 .igk-hud{font-size:7px}.igk-hud .sc{font-size:10px}.igk-hud .sub{font-size:6px}
 .igk-msg{font-size:14px}.igk-msg.sm{font-size:10px}
}
/* attack-sign legend (stand-offs and the Trial) */
.igk-legend{position:absolute;right:1cqw;top:8.5cqw;z-index:5;display:flex;flex-direction:column;gap:2px;padding:.5cqw .9cqw;background:rgba(0,0,0,.55);border-radius:6px;pointer-events:none;font:700 max(11px,1.35cqw)/1.2 "Barlow Condensed",sans-serif;text-shadow:0 1px 0 #000}
.igk-legend .hi{color:#ff6b78}.igk-legend .mi{color:#ffb35a}.igk-legend .lo{color:#f2e14a}
.igk-lesson.igk-prac{border-color:#8ecbff}
/* rotate hint (portrait phones) */
.igk-rot{position:absolute;left:10px;right:10px;z-index:9;display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.8);border:2px solid #f2be1a;border-radius:10px;padding:8px 10px;color:#fff;font:700 14px/1.25 "Barlow Condensed",sans-serif;bottom:calc(200px + env(safe-area-inset-bottom,0px))}
.igk-rot[hidden]{display:none}
.igk-rot span{flex:1 1 auto}.igk-rot button{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:#c8102e;color:#fff;font:700 16px/1 sans-serif;cursor:pointer}
/* portrait phones: the game fills the screen. The canvas is scaled up and pans with the action (js/iga.js igFit), the ground
   below reflects the scene, and the pad floats over it, semi-transparent. */
.igk.igkp{padding:0;overflow:hidden}
.igk.igkp .igk-box{position:fixed;inset:0;width:auto;margin:0;gap:0;display:block}
.igk.igkp .igk-stage{position:absolute;inset:0;width:auto;aspect-ratio:auto;border:0;border-radius:0;background:linear-gradient(#020309,#0b0d18 58%,#020309)}
.igk.igkp .igk-stage canvas{inset:auto;left:0;-webkit-box-reflect:below 0 linear-gradient(transparent 42%,rgba(0,0,0,.38))}
.igk.igkp .igk-pad{position:fixed;left:0;right:0;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:9;opacity:.66;padding:0 8px}
.igk.igkp .igk-note{display:none}
.igk.igkp .igk-hud{padding-right:52px}
.igk.igkp .igk-msg{top:calc(var(--ct,0px) + var(--ch,50vh) * .42)}
.igk.igkp .igk-cap{top:calc(var(--ct,0px) + 26px);max-width:92%}
.igk.igkp .igk-talk{bottom:auto;top:calc(var(--ct,0px) + var(--ch,50vh) + 8px)}
.igk.igkp .igk-stage .igk-lesson{bottom:auto;top:calc(var(--ct,0px) + var(--ch,50vh) + 8px);width:94%}
.igk.igkp .igk-legend{top:calc(var(--ct,0px) + 4px);right:6px}
.igk.igkp .igk-hud{font-size:9px}.igk.igkp .igk-hud .sc{font-size:12px}.igk.igkp .igk-hud .sub{font-size:8px}
/* short landscape phones: smaller, more transparent pad so the enemy stays visible */
@media (orientation:landscape) and (max-height:520px){
 .igk-pad{opacity:.55}
 .igk-pad.duel .igk-acts{max-width:270px;gap:4px}
 .igk-pad.duel .igk-acts button{min-height:36px;font-size:10px}
 .igk-pad .igk-dpad,.igk-pad.duel .igk-dpad{grid-template-columns:repeat(3,38px);grid-template-rows:repeat(3,38px)}
 .igk .igk-stage .igk-lesson{max-width:39%;left:38%;bottom:2%;padding:3px 6px;gap:6px;font-size:11px;line-height:1.2;z-index:10}
 .igk .igk-stage .igk-lesson .n{display:none}
}