/* MOJI KINGDOM — original typography-led game interface. */
:root{--bg:#071c50;--bg2:#0c2d68;--bg3:#103f82;--ink:#f5fbff;--ink-dim:#bbd9ec;--line:#3765a0;--line-bright:#54dffa;--hp-good:#39edcc;--hp-mid:#ffdc68;--hp-bad:#ff6687;--exp:#58c7ff;--accent:#20dcff;--blue:#0068f0;--glass:#082257;--glass-heavy:#081e51;--glass-edge:#326098;--radius-l:4px;--radius-xl:5px}
html,body,button,input,select,textarea{font-family:var(--game-font)}
html,body{background:#040e2c}
body{align-items:center}
#game{max-width:1440px;height:100dvh;max-height:1100px;background:#061b4b;box-shadow:0 0 100px #020613}
button,button.ghost,button.primary{border-radius:2px;border-width:1px;box-shadow:none;font-weight:750;letter-spacing:.055em;transition:background .14s,color .14s,transform .14s;border-color:#4276ac}
button{background:#0d3776}
button:hover:not(:disabled){background:#eafaff;color:#092357;transform:translateX(3px)}
button:active:not(:disabled){transform:translateX(3px) scale(.98)}
button:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #0089fa}
button.primary{background:var(--accent);color:#052050;border-color:var(--accent)}
button.ghost{color:#c5edfa}
.screen{min-height:0}
#screen-title{display:grid;grid-template-columns:minmax(320px,1.1fr) 1fr;grid-template-rows:auto 1fr auto;align-items:start;justify-items:stretch;gap:0;padding:clamp(24px,4vw,60px);text-align:left;overflow:hidden;isolation:isolate;background:linear-gradient(112deg,#082654 0%,#064fc0 58%,#057ee0 100%)}
#screen-title::before{content:'';position:absolute;inset:0;z-index:-1;opacity:1;background:linear-gradient(113deg,transparent 53%,#32d4f3 53%,#08a8ed 76%,#022b87 76%);pointer-events:none;animation:none;filter:none}
#screen-title::after{content:'MOJI';position:absolute;font:900 clamp(200px,34vw,480px)/.9 'Arial Black',sans-serif;letter-spacing:-.1em;right:-.04em;bottom:.1em;color:#009ae7;opacity:.4;z-index:-1;pointer-events:none;transform:rotate(-10deg)}
.title-brand{grid-column:1/3;display:flex;justify-content:space-between;align-items:center;color:#b9f4ff;text-transform:uppercase;letter-spacing:.2em;font-size:11px;font-weight:800;border-top:2px solid #b5f4ff;padding-top:13px;z-index:3}
.title-brand b{font-size:14px;letter-spacing:.24em;color:#fff}
.title-main{grid-column:1;grid-row:2;align-self:center;z-index:4;position:relative;padding:18px 0 25px}
.title-overline{font-size:11px;letter-spacing:.4em;color:#82eafa;font-weight:800;margin-bottom:14px}
#screen-title h1{font-size:clamp(39px,5.8vw,82px);font-weight:950;line-height:1.05;letter-spacing:-.07em;text-shadow:none;transform:skewY(-5deg);margin:8px 0 18px;white-space:nowrap}
.title-en{font:900 clamp(18px,2.8vw,37px)/1 'Arial Black',sans-serif;letter-spacing:.14em;color:#81f0ff;margin-bottom:20px;transform:skewY(-5deg)}
#screen-title .subtitle{font-size:12px;color:#e1f5ff;letter-spacing:.08em;margin:24px 0 28px;line-height:1.8;max-width:390px}
.mode-menu{width:min(100%,410px);gap:8px;align-items:stretch}
.mode-menu button,.mode-menu button.primary{width:100%;padding:17px 28px;min-height:66px;border:0;border-radius:0;font-size:19px;display:flex;align-items:center;justify-content:space-between;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);text-align:left}
.mode-menu button small{font:800 11px/1 Arial,sans-serif;letter-spacing:.12em;opacity:.75}
.mode-menu #btn-story{background:#fff;color:#0047ab}
.mode-menu #btn-story:hover{background:#34dfff;color:#001d50}
.mode-menu #btn-start{background:#052956;color:#b8f8ff}
.title-art{position:absolute!important;right:2%;bottom:2%;width:48%;height:84%;pointer-events:none;z-index:2!important;display:flex;align-items:flex-end;justify-content:center}
.title-orbit{position:absolute;width:130%;aspect-ratio:1;border:1px solid #e0fcff66;border-radius:50%;left:-13%;top:10%;transform:rotate(-22deg)}
.title-orbit::before{content:'';position:absolute;inset:11%;border:1px dashed #c4f4ff77;border-radius:50%}
.title-art .title-hina{position:relative;height:100%;max-height:810px;width:auto;aspect-ratio:3/4;z-index:2;filter:drop-shadow(15px 10px 0 #07296d55);transform:rotate(-3deg)}
.title-character-label{position:absolute;bottom:12%;right:5%;z-index:3;writing-mode:vertical-rl;font:900 17px Arial,sans-serif;letter-spacing:.25em;color:#fff}
#screen-title .record{background:none;border:0;border-left:2px solid #7befff;border-radius:0;padding:3px 10px;max-width:400px;font-size:11px;color:#b8e5fa;text-align:left;margin-top:8px}
.title-bottom{grid-column:1/3;grid-row:3;position:relative;z-index:5;display:flex;gap:30px;align-items:flex-end;border-bottom:1px solid #83d1f580;padding-bottom:16px;background:linear-gradient(90deg,#063e9688,transparent)}
.title-menu{display:flex;flex-wrap:wrap;width:min(100%,720px);max-width:none;gap:3px 14px;justify-content:flex-start}
.title-menu button.ghost{padding:8px 0;border:0;border-bottom:1px solid transparent;border-radius:0;font-size:12px;background:none;color:#f2faff;min-height:36px}
.title-menu button:hover{border-bottom-color:#b6f7ff;background:none;color:#fff}
.title-edition{margin-left:auto;white-space:nowrap;align-self:flex-end;text-align:right;font:800 10px/1.8 Arial,sans-serif;color:#beeeff;letter-spacing:.13em}
.character-figure{display:inline-block;background-repeat:no-repeat;background-size:400% 100%;background-position:var(--character-frame,0%) 0;image-rendering:auto;flex-shrink:0}
[data-character='hina']{background-image:url('assets/characters/hina-directions.png');aspect-ratio:3/4}
#hina-sprite{width:42px;height:56px;image-rendering:auto;background-size:400% 100%;background-repeat:no-repeat;background-position:var(--character-frame,0%) 0;filter:drop-shadow(0 3px 2px #031b3866);z-index:5;object-fit:fill;transition:left .15s linear,top .15s linear}
#hina-sprite[data-step='1']{transform:translateY(-3px) rotate(-2deg)}
.story-object.character-figure{width:34px;height:68px;font-size:0;transform:translate(-1px,-36px);z-index:4;filter:drop-shadow(0 3px 2px #0005)}
.character-portrait{width:74px;height:90px;aspect-ratio:auto;background-size:400% 220%;background-position:0 0;filter:drop-shadow(4px 0 0 #16cafa55)}
.op-hina-wrap .character-figure{height:230px;width:173px}
#battle-header,#story-header{background:#062456;border:0;border-bottom:3px solid #13c4f4;border-radius:0;box-shadow:none;backdrop-filter:none;padding:15px 24px;min-height:67px;gap:10px}
#floor-label,#story-map-name{font-size:17px;font-weight:850;letter-spacing:.08em}
.menu-btns{gap:5px;flex-shrink:0}.menu-btns button.ghost{border:0;background:#124885;padding:9px 13px;min-height:38px}
#screen-story{background:#081c41}
#story-viewport{flex:1;min-height:0;margin:0 18px;outline:1px solid #3165a0;background:#061934;box-shadow:none;border-radius:0}
.story-tile{font-family:'Segoe UI Emoji','Apple Color Emoji',sans-serif;border:0;text-shadow:0 1px 2px #0003}
.story-tile.story-terrain-atlas{background-image:none!important}
.story-tile.has-pixel-sprite::after{display:none!important}
#story-msgbox{left:18px;right:18px;bottom:18px;padding:17px 20px;min-height:125px;gap:18px;background:#f3fbff;color:#0b2553;border:0;border-left:8px solid #0098df;border-radius:0;box-shadow:10px 10px 0 #063670bb;backdrop-filter:none;font-size:16px;font-weight:650;line-height:1.8;align-items:center}
#story-speaker{min-width:34px;display:flex;align-items:center;align-self:stretch;justify-content:center}
#story-msgbox #btn-scene-skip{position:absolute;top:-38px;right:0;z-index:12;color:#194e8c;border:0;font-size:10px;white-space:nowrap;padding:5px 9px}
#story-msgbox.portrait-right #btn-scene-skip{right:auto;left:0}
#story-text{max-height:150px;overflow:auto}
#story-controls{padding:12px 24px;background:#062456;min-height:105px;gap:18px;border-top:1px solid #315f99}
.dpad{grid-template-columns:repeat(3,32px);grid-auto-rows:28px;gap:2px}.dpad button{border:0;background:#135392;font-size:13px}.ab-pad button{width:48px;height:48px;border-radius:50%;background:#19d2f4;color:#073064;border:0;box-shadow:4px 4px 0 #0b65a5}.ab-pad{gap:12px;display:flex}
.story-hint{font-size:11px;line-height:1.8;color:#bcdded;text-align:left!important}
.explore-context{font-size:12px;line-height:1.6;color:#d0edf8;border-left:2px solid #25d1f5;padding-left:14px;max-width:50%;margin-right:auto}
.explore-context b{display:block;color:#4ce7ff;font-size:10px;letter-spacing:.17em;margin-bottom:3px}
.overlay{inset:22px 28px 0;padding:28px clamp(20px,4vw,60px) 48px;border:0;border-top:6px solid #25d9fa;border-radius:0;background:linear-gradient(115deg,#063b9a,#09214e 70%);backdrop-filter:none;box-shadow:-12px 10px 0 #00123290;overflow:auto;scrollbar-width:thin;scrollbar-color:#58caee #06275a}
.overlay::before{content:attr(data-section);display:block;font:900 clamp(36px,7vw,88px)/1 'Arial Black',sans-serif;letter-spacing:-.04em;color:#35cce9;margin-bottom:8px;transform:skewY(-3deg);transform-origin:left}
.overlay:not(.hidden){animation:kingdom-slide .24s cubic-bezier(.22,.8,.3,1)}
.overlay h2{font-size:22px;margin-bottom:22px;line-height:1.3;border-bottom:1px solid #6191bb;padding-bottom:15px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:15px}
.overlay h2 button{font-size:12px;min-width:65px;border:1px solid #80d8ec;color:#fff}
.party-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.party-card,.detail-move,.dex-cell,.setting-row,.setting-group,.achievement-card,.collection-card{border-radius:2px!important;background:#0b2f65!important;border-color:#2e68a1!important;box-shadow:none!important}
.party-card{padding:18px!important;border-left:4px solid #29cff0!important;transition:background .16s,transform .16s}
.party-card:hover{background:#1559a1!important;transform:translateX(4px)}
.dex-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:9px}
.detail-move{padding:13px 15px!important;line-height:1.7;border-left:3px solid #1abfec!important}
.detail-move.clickable{cursor:pointer}.detail-move.clickable:hover{background:#145aa1!important;outline:1px solid #46d9f0}
.dim{color:#b7d2e9!important}.dd-title{color:#4cdef9!important;letter-spacing:.08em}
.dialog-backdrop{background:#031329c9;backdrop-filter:blur(3px);padding:22px}
.dialog{max-width:680px;width:100%;border:0;border-left:8px solid #16d8f4;border-radius:0;background:#062e76;box-shadow:12px 12px 0 #01113380;backdrop-filter:none;padding:26px;max-height:88dvh;overflow:auto}
.dialog .d-emoji{font-size:52px;margin-bottom:14px}.dialog .d-text{font-size:16px;line-height:1.8}.dialog .d-btns{gap:7px}.dialog button{min-height:44px;font-size:13px;padding:12px 16px}
#screen-battle{overflow:auto;background:linear-gradient(155deg,#004fba,#05183e)}
#stage{flex:1;min-height:280px;height:auto;max-height:600px;margin:0 25px;background:radial-gradient(ellipse at 70% 22%,#30bcde55,transparent 54%),linear-gradient(155deg,#0b5391,#041943 73%);border:0;overflow:hidden}
#stage::before{background:repeating-linear-gradient(135deg,transparent 0 48px,#8adfff10 48px 49px);opacity:1}
.combatant .sprite{font-family:'Segoe UI Emoji','Apple Color Emoji',sans-serif;font-size:clamp(70px,11vw,150px);filter:drop-shadow(4px 8px 0 #00102d66)}
#enemy-side{right:17%;top:16%;bottom:auto}#player-side{left:18%;bottom:12%;top:auto}
.platform{background:#42d8e02a;border:1px solid #30dcee66;box-shadow:none;width:160px;height:34px}
.info-plate{background:#f0faff;color:#0b2857;border:0;border-left:6px solid #27cfff;border-radius:0;backdrop-filter:none;box-shadow:6px 6px 0 #04285466;width:clamp(190px,25vw,300px);padding:14px 17px;z-index:4}
#enemy-plate{left:4%;top:8%}#player-plate{right:4%;bottom:8%}
.info-plate .row1{align-items:flex-start}.info-plate .name{min-width:0;font-weight:900;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.info-plate .lv,.info-plate .hp-num{color:#22537a}.info-plate .bar{background:#abc7d5;border:0;height:8px;transform:skewX(-18deg);overflow:hidden;border-radius:0}.info-plate .exp-bar{height:4px}.type-badge{border-radius:0;color:#1e4167}
#enemy-plate .row1{display:block;margin-bottom:4px}
.enemy-meta-row{display:flex;align-items:center;flex-wrap:wrap;column-gap:4px;row-gap:2px;min-width:0;min-height:20px;margin-bottom:5px;white-space:nowrap;overflow:visible}
.enemy-meta-row .lv{font-size:10px;line-height:1.2}
#enemy-plate .name{display:block;text-overflow:clip}
.enemy-meta-row .type-badge,.enemy-meta-row .status-badge,.enemy-meta-row .foe-badge,.enemy-meta-row .item-badge{flex:0 0 auto;min-width:0;margin:0;padding:1px 4px;font-size:9px;line-height:1.25;overflow:visible;white-space:nowrap}
#msg-window{margin:0 25px;background:#062458;border:0;border-left:5px solid #21d0f1;padding:13px 22px;min-height:54px;font-size:16px;border-radius:0;box-shadow:none;font-weight:650}
#commands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:16px 25px 23px;flex-shrink:0;max-height:42dvh;overflow:auto}
#commands button{border-radius:0!important;min-height:76px;text-align:left;padding:12px 18px;background:#0e3e83;border:1px solid #3576b6;border-left:4px solid var(--type-color,#34daff);clip-path:polygon(1% 0,100% 0,99% 100%,0 100%)}
#commands button:hover:not(:disabled){background:#edfcff;color:#002863}#commands button:hover .mv-meta,#commands button:hover .mv-detail{color:#285784}
.mv-name{font-weight:900!important;font-size:18px!important}.mv-meta{font-size:11px!important;color:#bddef3!important}.mv-detail{font-size:10px!important;color:#a2c9e7!important;line-height:1.5}.mv-eff{margin-left:8px}.mv-eff.super{color:#58efca}
#commands .sys-btn{min-height:42px;background:#07295d;font-size:13px}#commands .ougi-btn{grid-column:1/-1;background:#0953bc;color:#99f8ff;min-height:42px}
.pp-label{float:right;font:800 11px/1.8 Arial,sans-serif;color:#74e9ff}
.learnset-next{margin-top:24px;padding:18px;background:#092c60;border-top:2px solid #26cfea;line-height:1.8}.learnset-next h3{font-size:13px;color:#5cecff;margin-bottom:8px}.learnset-next li{list-style:none;font-size:13px;padding:5px 0;border-bottom:1px solid #285488}.learnset-next .learn-level{display:inline-block;min-width:65px;color:#94d5f4;font-weight:800}
.journey-map-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.journey-map-card{padding:16px;background:#103f7c;border-left:3px solid #48d6ed;font-size:12px;line-height:1.7}.journey-map-card b{display:block;font-size:15px}.journey-map-card button{font-size:11px;padding:7px;margin-top:8px}
@keyframes kingdom-slide{from{opacity:0;transform:translateX(45px) skewX(-2deg)}to{opacity:1;transform:none}}
@media(min-width:1000px){#game{border-left:1px solid #184f86;border-right:1px solid #184f86}.overlay{left:9%;right:6%}#story-viewport{margin:0 45px}#story-controls{padding-left:45px;padding-right:45px}#commands{grid-template-columns:repeat(2,minmax(0,1fr));padding-left:8%;padding-right:8%}#stage{margin:0 7%}#msg-window{margin:0 7%}}
@media(max-width:700px){#screen-title{padding:25px 21px 20px;grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.title-brand{grid-column:1;font-size:9px}.title-brand b{font-size:11px}.title-main{grid-column:1;max-width:75%;align-self:center;padding:20px 0 15px}#screen-title h1{font-size:clamp(34px,8.5vw,56px)}.title-en{font-size:clamp(14px,3.5vw,23px)}.title-overline{font-size:8px;letter-spacing:.2em}#screen-title .subtitle{font-size:10px;max-width:200px;line-height:1.8;margin-bottom:22px}.title-art{width:56%;height:64%;right:-8%;bottom:14%;opacity:.85}.title-main .mode-menu{max-width:280px}.mode-menu button,.mode-menu button.primary{font-size:16px;min-height:56px;padding:14px 18px}.mode-menu small{font-size:8px!important}.title-bottom{grid-column:1;gap:0}.title-menu{gap:1px 13px;max-width:95%}.title-menu button.ghost{font-size:11px;padding:7px 0}.title-edition{display:none}.title-character-label{display:none}#screen-title .record{font-size:10px}#battle-header,#story-header{padding:10px 13px;min-height:58px}#story-map-name,#floor-label{font-size:13px}.menu-btns button.ghost{padding:8px;font-size:11px;min-height:34px}#story-viewport{margin:0 8px}#story-controls{padding:9px 14px;gap:8px}.story-hint{font-size:9px}.explore-context{font-size:10px;max-width:40%;padding-left:8px}.explore-context b{font-size:8px}#story-msgbox{left:8px;right:8px;bottom:12px;padding:12px;gap:10px;min-height:118px;font-size:13px;line-height:1.7;border-left-width:5px}.character-portrait{width:51px;height:76px}#story-msgbox #btn-scene-skip{font-size:8px;padding:4px 7px;position:absolute;right:0;left:auto;top:-32px}#story-msgbox.portrait-right #btn-scene-skip{right:auto;left:0}#story-text{padding-top:9px;max-height:148px}.overlay{inset:10px 9px 0;padding:22px 16px 32px}.overlay::before{font-size:43px}.overlay h2{font-size:19px}.party-list{grid-template-columns:1fr}.dex-grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}.dialog{padding:20px 16px}.dialog-backdrop{padding:15px}.dialog .d-text{font-size:14px}#stage{min-height:245px;margin:0 8px}.combatant .sprite{font-size:86px}#enemy-side{right:12%;top:15%}#player-side{left:12%;bottom:12%}.info-plate{width:182px;padding:10px 12px}.info-plate .name{font-size:14px}#enemy-plate{left:2%;top:7%}#player-plate{right:2%;bottom:7%}.platform{width:120px}#commands{padding:10px 9px 14px;gap:6px;max-height:45dvh}#commands button{padding:10px 12px;min-height:90px}.mv-name{font-size:14px!important}.mv-meta{font-size:10px!important}.mv-detail{font-size:9px!important}#msg-window{margin:0 9px;font-size:13px;padding:11px 13px;min-height:48px}.journey-map-list{grid-template-columns:1fr 1fr}}
/* 390px battle regression: keep every post-Ougi field inside its card and
   make the fifth temporary move reachable without scrolling the whole screen. */
@media(max-width:700px){
  #commands{min-height:0;grid-auto-rows:max-content;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
  #commands button{min-width:0;height:auto}
  #commands .move-btn>span{display:block;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  #commands .mv-name{line-height:1.35}
  #commands .mv-eff{max-width:100%;margin-left:4px;white-space:normal;overflow-wrap:anywhere}
}
@media(max-height:650px) and (min-width:701px){#screen-title{padding:20px 35px}.title-main{padding:12px 0}#screen-title h1{font-size:48px}.title-en{font-size:23px}#screen-title .subtitle{margin:14px 0;font-size:10px}.title-overline{margin-bottom:6px}.mode-menu button,.mode-menu button.primary{min-height:48px;padding:10px 20px}.title-menu button.ghost{font-size:10px}.title-art{height:89%;bottom:-3%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.kingdom-terrain{position:absolute;left:0;top:0;image-rendering:auto;pointer-events:none}
.title-brand,.title-bottom{z-index:5}
#screen-opening.op-fadeout{pointer-events:none}
#screen-title h1{color:#fff;background:none;-webkit-text-fill-color:#fff}
.character-portrait{background-size:800% auto;background-position:-37px -3px}
.move-pp{display:block;color:#74f0ff;font:800 11px/1.5 Arial,sans-serif;margin-top:4px}
#story-msgbox #btn-scene-skip{background:#e0edf4;color:#174676;border:1px solid #aacbda}
#commands button:disabled{opacity:.4;filter:saturate(.2)}
#moves-future{margin-top:25px;padding:18px;background:#082351;border-top:2px solid #48dbee}
#moves-future h3{font-size:16px;color:#8aefff;margin-bottom:14px}.future-move{padding:10px 0;border-bottom:1px solid #27598c}.future-move b{display:inline-block;width:60px;color:#58daff}.future-move small{color:#b2cee0}.future-move:last-child{border:0}
#kingdom-minimap{position:absolute;right:12px;top:12px;z-index:8;width:154px;padding:7px;background:#06264bdc;border:1px solid #a4e8ed55;box-shadow:4px 4px 0 #12384833;text-align:left;backdrop-filter:blur(5px)}
#kingdom-minimap span{display:block;font:700 9px Arial;letter-spacing:.2em;color:#9deded;margin-bottom:6px}#kingdom-minimap canvas{display:block;width:140px;height:100px}
.atlas-tabs{display:flex;gap:8px;margin:22px 0}.atlas-tabs button{min-height:42px;padding:10px 20px}.atlas-summary{color:#b3e2f0;font-size:13px;line-height:1.7}.atlas-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.atlas-region{background:#0d356b;border:1px solid #2f6aa0;padding:0 0 14px}.atlas-card{display:block;width:100%;min-height:90px;padding:18px;text-align:left;background:#0d3977;border-left:4px solid #2cdaef}.atlas-card strong{display:block;font-size:19px;line-height:1.5;margin-bottom:8px}.atlas-card small{color:#b9deed;font-size:11px;line-height:1.7;display:block}.atlas-card:disabled{opacity:.55}.atlas-progress{padding:15px 18px;font-size:11px;line-height:2;color:#b3d4e2}.atlas-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 18px;font-size:11px;color:#7eeedf}.atlas-actions button{font-size:12px;padding:8px 12px;margin-left:auto}
@media(max-width:700px){#kingdom-minimap{width:90px;right:7px;top:8px;padding:4px}#kingdom-minimap canvas{width:80px;height:57px}#kingdom-minimap span{font-size:7px;margin-bottom:3px}.atlas-content{grid-template-columns:1fr}.atlas-card strong{font-size:16px}.atlas-tabs{gap:4px}.atlas-tabs button{padding:8px 12px;font-size:12px}.character-portrait{background-position:-25.5px -2px}.story-hint{display:none}#story-controls{gap:12px}.explore-context{max-width:none;flex:1}.ab-pad{gap:7px}.ab-pad button{width:40px;height:40px}.menu-btns{gap:2px}#story-header .menu-btns button{padding:7px;font-size:10px}#story-map-name{max-width:34%;line-height:1.5}#save-indicator{display:none}}

/* Main visual follows canon: Hina, the two kings, and their mediator.
   Kirisaki remains the original single emoji and has no title illustration. */
.title-art{right:0;bottom:5%;width:47%;height:80%}
.title-art .title-hina{height:91%;right:7%;bottom:0;filter:drop-shadow(12px 8px 0 #07296d55)}
.royal-emblems{position:absolute;right:7%;top:0;display:flex;flex-direction:column;gap:22px;z-index:3;transform:rotate(3deg)}
.royal-emblems>span{display:grid;grid-template-columns:50px 1fr;align-items:center;gap:0 6px;padding:6px 12px 6px 4px;background:#032962e8;border-left:2px solid #8eeeff;box-shadow:5px 5px 0 #00266544}
.royal-emblems i{grid-row:1/3;font:normal 42px/1.25 'Segoe UI Emoji',sans-serif}.royal-emblems small{font-size:9px;color:#87eaff;letter-spacing:.2em}.royal-emblems b{font-size:11px;color:#fff;white-space:nowrap}
@media(max-width:700px){.title-art{height:64%;width:57%;right:-10%;bottom:15%}.title-art .title-hina{right:0;height:100%}.royal-emblems{top:-17%;right:30%;width:330px;flex-direction:row;gap:5px;transform:none}.royal-emblems>span{flex:1;grid-template-columns:26px 1fr;gap:0 3px;padding:5px 6px 5px 2px}.royal-emblems i{font-size:25px}.royal-emblems small{font-size:7px}.royal-emblems b{font-size:9px}}

/* Long section labels must fit on phones without breaking off a final letter. */
@media(max-width:700px){
  .overlay::before{
    font-size:clamp(22px,7vw,40px);
    line-height:1.15;
    letter-spacing:-.025em;
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:normal;
    transform:none;
  }
  .overlay h2 button{flex-shrink:0;min-height:44px}
}

/* Phone usability pass: preserve the command-window style while making every
   primary control reachable by touch and keeping long sheets dismissible. */
.overlay:not(#overlay-roster):not(#overlay-detail)>h2{
  position:sticky;
  top:-22px;
  z-index:20;
  margin-right:-4px;
  margin-left:-4px;
  padding:12px 4px 13px;
  background:#0a3576f2;
  box-shadow:0 8px 14px #031a4566;
}
.setting-row input[type="range"]{min-height:44px;touch-action:pan-x}
.setting-choices{flex-wrap:wrap}
.setting-choices button,#set-mute{min-width:44px;min-height:44px;padding:10px 12px}
.setting-choices button.choice-on,#set-mute[aria-pressed="true"]{
  border-color:#dffaff;
  background:#eafaff;
  color:#082653;
  box-shadow:inset 4px 0 0 #18cdec;
}
.setting-choices button.choice-on::before{content:'✓';margin-right:.35em;font-weight:950}
.atlas-tabs button{min-height:44px}
.collection-tools input,.collection-tools select,.collection-tools button{min-height:44px}
.favorite-toggle{
  width:44px;
  height:44px;
  line-height:44px;
  background:radial-gradient(circle,rgba(16,28,60,.9) 0 15px,transparent 16px);
}

@media(max-width:700px){
  #battle-header,#story-header{min-height:60px;padding:7px 8px;gap:4px}
  #floor-label,#story-map-name{
    flex:1;
    min-width:0;
    max-width:none;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
  }
  .menu-btns{min-width:0;gap:2px}
  #battle-header .menu-btns button,#story-header .menu-btns button{
    min-width:44px;
    min-height:44px;
    height:44px;
    padding:7px 8px;
    font-size:10px;
  }
  #story-controls{padding-bottom:max(9px,env(safe-area-inset-bottom))}
  .atlas-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .atlas-tabs button{width:100%;padding:8px 5px;white-space:nowrap}
  .collection-tools input,.collection-tools select,.collection-tools button{min-height:44px}
}

/* 320px級の端末では7操作を2段にし、44pxのタップ領域を守る。 */
@media(max-width:340px){
  #battle-header{flex-wrap:wrap}
  #battle-header #floor-label{flex:1 0 100%;width:100%}
  #battle-header .menu-btns{
    display:grid;
    grid-template-columns:repeat(4,minmax(44px,1fr));
    width:100%;
    gap:3px;
  }
  #battle-header .menu-btns button{width:100%;min-width:44px}
}