/* 舞台・文字は1倍のまま配置します。基準画面を超える余白は黒帯です。 */
:root{
 --win-top:rgb(104,104,192);--win-bottom:rgb(0,0,40);
 --frame-light:rgb(248,248,248);--frame-dark:rgb(0,0,0);
 --text:rgb(248,248,248);--text-shadow:rgb(0,0,0);--name-active:rgb(248,216,0);
 --text-dim:#8890b8;--hp-low:rgb(248,216,0);--ko:#e46060;--heal:#82f082;--mp:#86c4ff;--cursor:#f6f6fc;
 --sky-top:#05030c;--sky-bottom:#22101a;--stone-a:#34252a;--stone-b:#3b2b30;--stone-c:#413035;--stone-joint:#1b151a;--boss-main:#6a1e2e;--boss-sub:#d8b048;
 --hero-1:#d84848;--hero-2:#5878c8;--hero-3:#f0e0b0;--hero-4:#3a3a58;
 --stage-h:min(100dvh,1080px);
 --window-fill:linear-gradient(to bottom,rgb(104,104,192) 0% 5%, rgb(96,96,184) 5% 10%, rgb(88,88,176) 10% 15%, rgb(80,80,168) 15% 20%, rgb(72,72,160) 20% 25%, rgb(64,64,152) 25% 30%, rgb(56,56,144) 30% 35%, rgb(48,48,136) 35% 40%, rgb(40,40,128) 40% 45%, rgb(32,32,120) 45% 50%, rgb(24,24,112) 50% 55%, rgb(16,16,104) 55% 60%, rgb(8,8,96) 60% 65%, rgb(0,0,88) 65% 70%, rgb(0,0,80) 70% 75%, rgb(0,0,72) 75% 80%, rgb(0,0,64) 80% 85%, rgb(0,0,56) 85% 90%, rgb(0,0,48) 90% 95%, rgb(0,0,40) 95% 100%);
}
*{box-sizing:border-box;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:rgb(0,0,0);color:var(--text)}
body{display:grid;place-items:center}
body,button{font:400 24px/30px PixelMplus12,monospace;text-shadow:1px 1px var(--text-shadow);font-synthesis:none}
button{appearance:none;border:0;border-radius:0;color:inherit;background:transparent;cursor:pointer;position:relative;min-width:0;padding:0 6px;text-align:left;color-scheme:dark}
button:hover,button:focus-visible,button.cursor{outline:none}
.button-label{display:inline-block;pointer-events:none}
button:active>.button-label{transform:translate(1px,1px)}
button:disabled,button[aria-disabled="true"]{color:var(--text-dim);cursor:default}
button.cursor:not(:disabled):not([aria-disabled="true"]):before,button:focus-visible:not(:disabled):not([aria-disabled="true"]):before{content:'';position:absolute;left:4px;top:calc(50% - 6px);border-left:10px solid var(--cursor);border-top:6px solid transparent;border-bottom:6px solid transparent}
button.cursor,button:focus-visible{padding-left:20px}
[hidden]{display:none!important}
#stage{position:relative;width:min(100%,1920px);height:var(--stage-h);overflow:hidden;background:rgb(0,0,0)}
.layer{position:absolute;inset:0;pointer-events:none}.layer button,.layer nav{pointer-events:auto}.layer[inert]{pointer-events:none}.layer[inert] button,.layer[inert] nav{pointer-events:none}
/* 外側1px＋内側2層で、ぼけのない3pxの面取りを描きます。 */
.window{background:var(--window-fill);border:1px solid;border-top-color:var(--frame-light);border-left-color:var(--frame-light);border-bottom-color:var(--frame-dark);border-right-color:var(--frame-dark);border-radius:3px;
 box-shadow:inset 1px 1px rgb(192,192,192),inset -1px -1px rgb(32,32,32),inset 2px 2px rgb(144,144,144),inset -2px -2px rgb(88,88,88);padding:7px}
#field{position:absolute;top:0;left:3%;width:94%;height:calc(100% - 198px);image-rendering:pixelated;pointer-events:none}
#skill-win{position:absolute;top:calc(100% - 254px);height:56px;left:3%;width:47%;z-index:4;padding:5px 7px;display:flex;flex-direction:column;justify-content:center}
#skill-win.active{z-index:6}
#skill-win,#skill-win button,#world-win,#boss-row,#title-record,#hero-result,#save-error{font-family:PixelMplus10,monospace;font-size:20px;line-height:24px}
#skill-title,#help-text{display:block;text-align:left;white-space:nowrap;min-height:20px;line-height:20px}
#world-win{position:absolute;top:0;left:3%;width:94%;height:64px;z-index:6;text-align:left;pointer-events:none;overflow-wrap:anywhere;white-space:normal;line-height:24px}
#btn-pause{position:absolute;top:2%;height:5%;left:97%;width:3%;z-index:7;text-align:center;padding:0}
#status-win{position:absolute;top:calc(100% - 198px);height:168px;left:50%;width:47%;z-index:5;padding:6px 3px}
.party-row{height:30px;display:grid;grid-template-columns:84px minmax(122px,1fr) 40px 24px 92px;align-items:center}
.party-row>span,.party-row>.party-state{min-width:0;padding-left:0;padding-right:0}
.party-row .hp,.party-row .mp{text-align:right}.party-row .hp{padding-right:12px;font:400 20px/30px PixelMplus10,monospace;white-space:nowrap}.party-name{white-space:nowrap}.party-state{padding:0 0 0 4px;text-align:left;white-space:nowrap;overflow:hidden;height:30px;line-height:30px}
.party-state:hover:before,.party-state:focus-visible:before{display:none}.party-row>.party-state:focus-visible{padding-left:8px}
.party-row.ko .party-name{color:var(--ko)}.hp.low{color:var(--hp-low)}.party-row.ko .hp{color:var(--text)}
.resist{position:relative;display:inline-block}.resist:after{content:'';position:absolute;inset:4px 0;background:linear-gradient(135deg,transparent 46%,var(--text) 46% 54%,transparent 54%);pointer-events:none}
.party-row>.party-state{padding-left:2px}.party-row .mp{padding-right:2px}.party-state>.button-label{display:flex;align-items:center;gap:0;font:400 20px/30px PixelMplus10,monospace}
.limit-gauge{display:inline-flex;gap:1px;align-items:center;height:20px}.limit-pip{display:inline-block;width:4px;height:4px;background:var(--text)}.limit-pip.empty{background:var(--text-dim)}
.status-more{font:400 20px/30px PixelMplus10,monospace}
#items-row{display:flex;align-items:center;justify-content:space-between;height:30px;white-space:nowrap}#items-row button{padding:0;height:30px;font:400 24px/30px PixelMplus12,monospace}.item-content{display:flex;align-items:center;gap:3px}.item-pict{display:block;flex:none;shape-rendering:crispEdges}
#boss-row{position:absolute;top:calc(100% - 30px);left:50%;width:47%;height:30px;display:flex;justify-content:space-between;align-items:center;padding:0 7px 0 19px;white-space:nowrap}
#boss-row .boss-name{color:var(--name-active)}#boss-row.commanding:before{content:'';position:absolute;left:5px;top:calc(50% - 5px);border-left:8px solid var(--cursor);border-top:5px solid transparent;border-bottom:5px solid transparent}
#cmd-win,#sub-win,#replay-win{position:absolute;z-index:5}
#cmd-win{top:calc(100% - 198px);height:198px;left:3%;width:47%}
#replay-win{top:calc(100% - 198px);height:198px;left:3%;width:47%}
#cmd-win.sub-open{visibility:hidden}
#sub-win{top:calc(100% - 198px);height:198px;left:3%;width:47%}
#categories{display:grid;grid-template-rows:repeat(4,30px)}#categories button{padding-left:24px}
#techs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:30px;gap:0}
#sub-heading{display:block}
#techs button{padding:0 0 0 12px;white-space:nowrap;line-height:30px}#techs button.cursor:before{left:0;border-left-width:8px}
#techs .cooldown,#techs .used{color:var(--text-dim)}
#targets{z-index:4}.target-hit{position:absolute;padding:0;border:0;background:transparent;color:var(--cursor)}
.target-hit:focus-visible:before{display:none}
.target-arrow{position:absolute;left:-16px;top:18%;border-left:11px solid var(--cursor);border-top:7px solid transparent;border-bottom:7px solid transparent;pointer-events:none}
#screen-fade{position:absolute;inset:0;background:rgb(0,0,0);pointer-events:none;z-index:25}
#game-title{position:absolute;top:22%;height:10%;left:10%;width:80%;margin:0;display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:400;text-align:center}
#title-record{position:absolute;top:38%;height:8%;left:25%;width:50%;display:flex;flex-direction:column;justify-content:center;text-align:center}
#title-record p{margin:0}#title-actions{position:absolute;top:50%;height:20%;left:25%;width:50%;display:flex;flex-direction:column;justify-content:space-evenly}
#title-actions button{min-height:36px;padding-left:20px}#btn-lang{position:absolute;top:74%;height:5%;left:70%;width:26%;padding:0 4px;text-align:center}
#hero-result{position:absolute;top:10%;height:30%;left:8%;width:84%;display:flex;flex-direction:column;justify-content:space-evenly;text-align:center}
#hero-result p{margin:0;overflow-wrap:anywhere}#score-win{position:absolute;top:44%;height:40%;left:8%;width:84%;display:flex;flex-direction:column;justify-content:space-evenly;padding:8px 14px}
#score-win p{margin:0}#score-win .score-detail{display:flex;justify-content:space-between}
#result-actions{position:absolute;top:87%;height:9%;left:30%;width:40%;display:flex;align-items:center;justify-content:center}#result-actions button{text-align:center}
#modal-shade{position:absolute;inset:0;z-index:20;background:rgba(5,3,12,.52);pointer-events:auto}
#pause-win{position:absolute;top:30%;height:40%;left:25%;width:50%;padding:12px}
#pause-content,#confirm-content,#detail-content{height:100%;display:flex;flex-direction:column;justify-content:space-evenly}#speed-row{display:flex;align-items:center;justify-content:space-between}
#pause-win button{min-height:30px;padding-left:20px}#records-content{height:100%;display:flex;flex-direction:column}#records-list{flex:1;overflow-y:auto;min-height:0}#records-list p{margin:0 0 14px}
#save-error{position:absolute;bottom:1%;left:1%;z-index:30}#detail-text{margin:0}

@media(max-height:500px){
 #pause-win{top:18%;height:66%;left:15%;width:70%}#score-win{top:6%;height:77%}#hero-result{top:6%;height:77%}
 #game-title{top:10%;height:18%}#title-record{top:30%;height:16%}#title-actions{top:50%;height:34%}#btn-lang{top:88%;height:8%}
 #btn-pause{min-height:28px;left:96%;width:4%}
}

.pause-bars{display:inline-block;width:12px;height:16px;border-left:4px solid var(--text);border-right:4px solid var(--text);vertical-align:middle}
/* 台詞は戦場上端、技名と効果は左下の専用窓です。 */
#sub-top{height:30px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px;align-items:start}#tech-back{padding-left:20px;height:30px}
#sub-heading{position:static;height:24px;padding:0 4px;font:400 20px/24px PixelMplus10,monospace;white-space:nowrap}
.party-row>.party-name{padding:0 4px;height:30px;line-height:30px}
.party-name:focus-visible:before{display:none}

#detail-text{flex:1;min-height:0;overflow-y:auto}
#detail-content>button{flex-shrink:0}

/* Phase R: 題字の背面には採用済みの等倍タイトル絵を置きます。 */
#title-screen{background:#000 url("assets/r_title.png") center / cover no-repeat;image-rendering:pixelated}
/* 文字待ちの間は窓のスクロール領域と無効ボタンより前でタップを受けます。 */
#text-advance{position:absolute;inset:0;z-index:8;pointer-events:auto;touch-action:none}
#btn-pause{z-index:9}

/* 勝敗カットは全画面、勇者リザルトとスコアは順番に表示します。 */
#ending-message{position:absolute;left:0;top:0;width:100%;height:64px;font:400 20px/24px PixelMplus10,monospace;text-align:left}
#hero-result,#score-win{left:8%;width:84%;top:18%;height:64%}
#result-actions{top:87%;height:9%}
#btn-lang,#result-actions{border-radius:0}
#btn-lang,#result-actions button{padding-left:22px;text-align:left}
#btn-lang:before,#result-actions button:before,#title-actions:not(:has(button:focus-visible)) button:first-child:before{content:'';position:absolute;left:5px;top:calc(50% - 6px);border-left:10px solid var(--cursor);border-top:6px solid transparent;border-bottom:6px solid transparent}
.limit-gauge{width:24px;display:flex;gap:2px;align-items:center;justify-content:center;height:20px}
.limit-pip{width:6px;height:6px;border:1px solid var(--text);border-radius:50%;background:var(--text);flex:none}
.limit-pip.empty{background:transparent}
#wait-action{height:30px;padding-left:24px}
#replay-win{display:grid;grid-template-rows:30px 30px 30px;align-content:start;padding:7px}
#replay-heading{height:30px;line-height:30px;white-space:nowrap}
#replay-from-row{height:30px;display:grid;grid-template-columns:30px minmax(0,1fr) 30px}
#replay-from-row button,#btn-replay-start{height:30px;line-height:30px}
#btn-replay-left,#btn-replay-right{padding:0;text-align:center}
#btn-replay-from,#btn-replay-start{padding-left:24px;white-space:nowrap}
#btn-replay-left:focus-visible:before,#btn-replay-right:focus-visible:before{display:none}
@media(max-height:500px){#hero-result,#score-win{top:6%;height:77%}}
/* 横持ち専用の題字絵を全面へ敷きます。 */
#title-screen{background-image:url("assets/r_title_pc.png"),url("assets/r_title.png")}

/* 横持ちの左下は技名窓56px、その直下に2列の一覧を置きます。 */
/* タイトルの窓は左25%・右75%の1列に面を合わせます（密着はさせない）。言語ボタンは列の右端へ寄せます。 */
#btn-lang{left:auto;right:25%;width:120px;min-width:112px}
@media(max-height:500px){
 #techs button{padding-left:8px}
 #techs button.cursor:before{left:0;border-left-width:6px}
 #status-win,#cmd-win,#sub-win,#replay-win,#skill-win,#world-win,#boss-row{padding:3px}
 #boss-row{padding:3px 5px 3px 15px} /* 左5pxのカーソル三角(8px)と名前を重ねません。 */
 #status-win,#status-win button,#cmd-win,#cmd-win button,#sub-win,#sub-win button,#replay-win,#replay-win button,#skill-win,#world-win,#boss-row{font:400 12px/var(--battle-row) PixelMplus12,monospace}
 .party-row{height:var(--battle-row);grid-template-columns:48px minmax(74px,1fr) 28px 24px 60px}
 .party-row>.party-name,.party-state,#items-row,#items-row button,#categories button,#wait-action,#sub-top,#tech-back,#techs button,#replay-heading,#replay-from-row,#replay-from-row button,#btn-replay-start{height:var(--battle-row);line-height:var(--battle-row)}
 .party-row .hp,.party-state>.button-label,.status-more,#items-row button,#sub-heading{font:400 12px/var(--battle-row) PixelMplus12,monospace}
 .party-row .hp{padding-right:6px}.party-row>.party-name{padding:0 2px}.party-state{padding-left:2px}
 .party-state>.button-label{height:var(--battle-row)}.limit-gauge{height:var(--battle-row)}
 #items-row{height:var(--battle-row)}#items-row button{padding:0}
 #categories{grid-template-rows:repeat(4,var(--battle-row))}#categories button{padding-left:16px}
 #sub-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px}#tech-back{padding-left:16px}
 #sub-heading{height:var(--battle-row);padding:0 2px}
 #techs{grid-auto-rows:var(--battle-row)}#techs button{line-height:var(--battle-row)}
 #skill-title,#help-text{min-height:var(--battle-row);height:var(--battle-row);line-height:var(--battle-row)}
 #world-win{line-height:var(--battle-row)}
 #replay-win{grid-template-rows:repeat(3,var(--battle-row));align-content:start}
}

/* 縦向きではゲームを隠し、CSSだけの回転ピクトを全面表示します。 */
#orientation-guard{display:none}
@media(orientation:portrait){
 #stage{display:none}
 #orientation-guard{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:#000;color:var(--text);z-index:100;font:400 24px/30px PixelMplus12,monospace;text-shadow:1px 1px var(--text-shadow)}
 .rotate-pict{position:relative;width:136px;height:120px}
 .rotate-device{position:absolute;left:42px;top:28px;width:76px;height:48px;border:6px solid var(--text);border-radius:8px}
 .rotate-device:after{content:'';position:absolute;right:5px;top:15px;width:6px;height:6px;border:2px solid var(--text);border-radius:50%}
 .rotate-arrow{position:absolute;left:8px;top:4px;width:88px;height:88px;border:7px solid transparent;border-top-color:var(--text);border-left-color:var(--text);border-radius:50%;transform:rotate(-25deg)}
 .rotate-arrow:after{content:'';position:absolute;left:-10px;bottom:3px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:18px solid var(--text);transform:rotate(-20deg)}
}