:root{color-scheme:dark;--bg:#080c18;--panel:#151e32;--text:#f7f1e4;--gold:#e8c981;--edge:rgba(232,201,129,.34)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;overscroll-behavior:none}
button{font:inherit;cursor:pointer;touch-action:none}
#game-app{position:fixed;inset:0;inset-block-end:env(safe-area-inset-bottom);display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#192038 0%,#070a16 70%)}
#stage{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate;overflow:hidden}
#unity-canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;outline:0;background:#0b0a16;image-rendering:pixelated}
#toolbar{display:flex;align-items:center;justify-content:space-between;min-height:43px;gap:12px;padding:4px max(14px,env(safe-area-inset-right)) 4px max(14px,env(safe-area-inset-left));background:rgba(8,11,24,.96);border-top:1px solid rgba(255,255,255,.09);z-index:3}
.game-name{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--gold);white-space:nowrap}.game-name .small{font-size:10px;color:#929cad;margin-left:6px}
.tools{display:flex;gap:8px}.tool-btn{background:#202a40;border:1px solid #546078;color:#f0f2f6;border-radius:7px;font-size:12px;padding:7px 11px;white-space:nowrap}
#loader{position:absolute;z-index:4;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:radial-gradient(ellipse at center,#231a37 0%,#070914 65%)}
.loader-mark{font-size:clamp(20px,6vw,43px);letter-spacing:.13em;color:var(--gold);font-family:Georgia,serif;text-shadow:0 2px 17px rgba(215,164,87,.27);text-align:center}.loader-name{font-size:15px;color:#d8c5df}.progress-shell{width:min(320px,75vw);height:10px;border:1px solid var(--edge);background:#161d30;border-radius:100px;overflow:hidden}.progress-shell>div{width:0%;height:100%;background:linear-gradient(90deg,#926e5c,#efca88);transition:width .12s}
#progress-label{font-size:13px;color:#ddd1b9}#loader-note{color:#999aac;font-size:11px;text-align:center}
#warning{position:absolute;top:12px;left:12px;right:12px;z-index:7;padding:12px 16px;background:#3d1b25;color:#fff;border:1px solid #ff8d92;border-radius:9px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
#landscape-note{display:none;position:absolute;z-index:2;left:50%;bottom:8px;transform:translateX(-50%);color:#e3e0d8;background:#13192bd9;border:1px solid #655879;padding:7px 12px;white-space:nowrap;font-size:12px;border-radius:50px;pointer-events:none}#landscape-note span{font-size:16px}
#touch-controls{display:none;flex:0 0 134px;min-height:134px;position:relative;align-items:center;justify-content:space-between;gap:8px;z-index:3;padding:3px max(12px,env(safe-area-inset-right)) 3px max(12px,env(safe-area-inset-left));background:linear-gradient(180deg,rgba(11,14,29,.84),rgba(5,8,18,.99));border-top:1px solid rgba(221,185,116,.15);touch-action:none;user-select:none;-webkit-user-select:none}
.dpad-wrap{position:relative;display:flex;align-items:center;gap:8px;flex:0 0 182px;height:100%;touch-action:none}
.joystick{width:120px;height:120px;flex:0 0 120px;position:relative;border-radius:50%;border:2px solid rgba(189,177,239,.45);background:radial-gradient(circle,rgba(90,84,140,.42),rgba(29,38,66,.77));box-shadow:inset 0 1px 10px rgba(255,255,255,.12),0 5px 20px #0007;touch-action:none;user-select:none}
.joystick:before,.joystick:after{content:"";position:absolute;background:rgba(211,208,231,.13)}.joystick:before{width:1px;height:80%;left:50%;top:10%}.joystick:after{height:1px;width:80%;top:50%;left:10%}
.stick{position:absolute;z-index:1;left:50%;top:50%;width:55px;height:55px;border-radius:50%;transform:translate(-50%,-50%);background:linear-gradient(145deg,#8c82bf,#3c3d68);border:2px solid #c4b8e4;box-shadow:0 4px 12px #0009;pointer-events:none}
.joystick-label{position:absolute;z-index:2;left:50%;bottom:7px;transform:translateX(-50%);font-size:10px;color:#d2c8ed;pointer-events:none}
.extra-key{align-self:center;max-width:50px}.up-key{position:absolute;left:128px;top:12px}.down-key{position:absolute;left:128px;bottom:12px}
.action-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:7px;min-width:0;flex:1;max-width:385px}
.top-actions,.main-actions{display:flex;gap:7px;align-items:center;justify-content:flex-end;width:100%}
.touch-button{flex:none;width:50px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid #646b8e;border-radius:12px;color:#f3edff;background:linear-gradient(#39405f,#242a49);font-size:18px;font-weight:800;box-shadow:0 3px 0 #111829;touch-action:none;user-select:none;-webkit-user-select:none}
.touch-button small{font-size:10px;line-height:1;color:#d0cbdc;font-weight:600}.touch-button.util{height:27px;width:54px;flex-direction:row;font-size:11px;background:#252b40;box-shadow:none}.touch-button.util small{font-size:9px}
.touch-button.primary{background:linear-gradient(#9a5c5b,#562e4d);border-color:#e9aaa2}.touch-button.jump{background:linear-gradient(#567ca4,#294365);border-color:#90c2e5}
.touch-button.is-pressed,.touch-button:active{transform:translateY(2px);filter:brightness(1.4);box-shadow:0 1px 0 #090b12}
#help-dialog{border:1px solid #82698f;border-radius:14px;background:#151a2f;color:#f7f1e4;padding:20px 22px;width:min(94vw,510px);max-height:min(90dvh,700px);overflow:auto;box-shadow:0 12px 50px #000a}
#help-dialog::backdrop{background:#030513b8}#help-dialog h2{margin:0 0 12px;color:#eed4a5;font-size:19px}#help-dialog p{margin:6px 0 13px;line-height:1.6;font-size:13px;color:#d1d6e4}#help-dialog dl{display:grid;grid-template-columns:minmax(95px,1fr) 2.1fr;gap:7px 12px;font-size:13px;line-height:1.5}#help-dialog dt{color:#eace9b;font-weight:700}#help-dialog dd{margin:0;color:#e7eaf5}#help-dialog .notice{font-size:11px;color:#b5b8c8}.close-help{width:100%;background:#dec08f;color:#221727;border:0;border-radius:8px;padding:11px;font-size:14px;font-weight:800;margin-top:4px}
@media (pointer:coarse),(max-width:800px){#touch-controls{display:flex}#toolbar{min-height:36px}.game-name{font-size:11px}.game-name .small{display:none}.tool-btn{padding:5px 8px;font-size:11px}}
@media (max-width:560px){#touch-controls{flex:0 0 118px;min-height:118px;padding-inline:5px}.dpad-wrap{flex-basis:143px}.joystick{width:99px;height:99px;flex-basis:99px}.stick{width:45px;height:45px}.up-key,.down-key{left:102px}.touch-button{width:37px;height:42px;border-radius:9px;font-size:14px}.touch-button small{font-size:8px}.touch-button.util{width:42px;height:25px}.action-wrap{gap:6px}.top-actions,.main-actions{gap:4px}}
@media (orientation:portrait) and (pointer:coarse){#landscape-note{display:block}#stage{flex:1}#touch-controls{flex:0 0 152px;min-height:152px}}
@media (max-height:420px) and (orientation:landscape){#touch-controls{flex:0 0 104px;min-height:104px}.joystick{width:91px;height:91px;flex-basis:91px}.dpad-wrap{flex-basis:142px}.up-key,.down-key{left:95px}.touch-button{height:39px;width:43px}.touch-button.util{height:23px}.action-wrap{gap:4px}}
@media (pointer:fine) and (min-width:801px){#touch-controls{display:none}#game-app{max-width:100vw}#stage{min-height:0}}
/* Keep the 16:9 game viewport as large as possible in landscape. Controls overlay instead of shrinking it. */
@media (pointer:coarse),(max-width:800px){
  #stage{flex:1 1 auto;min-height:0}
  #touch-controls{position:absolute;bottom:43px;left:0;right:0;z-index:5;display:flex;flex:none;height:132px;min-height:0;max-height:39dvh;background:linear-gradient(180deg,transparent 0%,rgba(5,8,18,.05) 70%,rgba(5,8,18,.32) 100%);border-top:0;pointer-events:none}
  #touch-controls .joystick,#touch-controls button{pointer-events:auto;opacity:.88}
  #touch-controls .touch-button.is-pressed{opacity:1}
}
@media (pointer:coarse) and (orientation:portrait){#touch-controls{height:152px}}
@media (pointer:coarse) and (orientation:landscape) and (max-height:430px){#touch-controls{height:104px}}