@import url("https://fonts.googleapis.com/css2?family=DotGothic16&display=swap");
:root{
 --black:#000;--white:#fcfcfc;--gray:#7c7c7c;--soft:#bcbcbc;--blue:#0000bc;
 --green:#00a800;--red:#f83800;--yellow:#fce0a8;
 --dot:"DotGothic16","MS Gothic","Yu Gothic UI",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;min-width:256px;min-height:100%;background:#000;color:var(--white);font-family:var(--dot);font-size:8px;line-height:1.45}
body{min-height:100vh;display:grid;place-items:center;overflow:auto}
button,input{font:inherit}
button{cursor:pointer;color:inherit}
button:focus-visible,label:focus-within{outline:2px solid var(--yellow);outline-offset:2px}
main#top{position:relative;width:256px;height:240px;margin:auto}
.game-shell{position:relative;width:256px;height:240px;padding:4px;background:#000;border:4px solid var(--white);overflow:hidden;image-rendering:pixelated}
.phase-view{display:none;position:absolute;inset:45px 4px 4px;min-width:0}
body[data-phase=select] #select-view,body[data-phase=ready] #select-view{display:block}
body[data-phase=battle] #battle-view,body[data-phase=result] #battle-view{display:block}
.title-screen{height:38px;position:absolute;top:4px;left:5px;right:5px;display:flex;align-items:center;justify-content:space-between}
.pixel-logo{display:flex;align-items:center;gap:3px;color:var(--yellow);font:900 13px/1 var(--dot);letter-spacing:-1px;text-shadow:1px 0 var(--yellow),-1px 0 var(--yellow)}
.pixel-logo strong{font:900 15px/1 var(--dot);color:var(--white);letter-spacing:-1px}
.push-start{margin:0;color:var(--white);font:700 7px/1 var(--dot);animation:blink 1s steps(2,end) infinite}
.game-shell:before,.game-shell:after{content:none}
.machine-switches,.site-header,.intro,.page-footer{display:none!important}
body[data-phase=battle] .title-screen,body[data-phase=result] .title-screen{display:none}
body[data-phase=battle] #battle-view,body[data-phase=result] #battle-view{top:5px}
.section-top{height:47px;margin:0 0 4px;padding:3px 6px;border:3px solid var(--white);background:var(--black);text-align:center}
.section-top h1,.section-top h2{margin:0;color:var(--white);font:700 10px/1.45 var(--dot)}
.section-top p{margin:0;color:var(--soft);font:7px/1.3 var(--dot)}
.selection-grid{height:112px;display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);align-items:stretch;gap:3px}
.slot{position:relative;min-width:0;padding:4px;border:2px solid var(--white);background:var(--black);overflow:hidden}
.slot-top{height:12px;display:flex;justify-content:space-between;align-items:center;margin:0 0 3px;color:var(--white);font:7px/1 var(--dot)}
.slot-index{color:var(--yellow)}
.slot-side{color:var(--soft)}
.upload-zone{position:relative;min-height:83px;height:calc(100% - 15px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:10px 3px 9px;border:2px solid var(--gray);background:var(--black);text-align:center;cursor:pointer;color:var(--white)}
.upload-zone:before{content:"";position:absolute;top:4px;left:12%;right:12%;height:4px;background:#333;border-top:1px solid var(--gray);border-bottom:1px solid var(--gray)}
.upload-zone:after{content:"カードスロット";position:absolute;bottom:2px;left:0;right:0;color:var(--gray);font-size:6px}
.upload-zone:after{content:"カードスロット";position:absolute;bottom:2px;left:0;right:0;color:var(--gray);font-size:6px}
.upload-zone strong{font:700 8px/1.4 var(--dot)}
.upload-zone small{font:6px/1.2 var(--dot);color:var(--soft)}
.upload-orb{display:grid;place-items:center;width:18px;height:15px;color:var(--yellow);font-size:10px}
.upload-types{display:none}
.slot-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.slot[data-state=filled] .upload-zone{display:none}
.slot[data-state=loading] .upload-zone:after{content:"よみこみちゅう";top:50%;bottom:auto;color:var(--yellow)}
.slot[data-state=error] .upload-zone:after{content:"エラー！もういちど";top:50%;bottom:auto;color:var(--red)}
.versus-mark{display:grid;place-items:center;color:var(--yellow);font:700 7px var(--dot)}
.card{height:calc(100% - 15px);display:grid;grid-template-columns:37px minmax(0,1fr);border:2px solid var(--white);background:var(--black);overflow:hidden}
.card[hidden],[hidden]{display:none!important}
.card-art{position:relative;min-width:0;min-height:0;overflow:hidden;background:#111}
.card-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.art-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:var(--gray);font-size:6px;text-align:center}
.card-number{position:absolute;top:1px;left:1px;padding:0 2px;background:var(--black);color:var(--white);font-size:5px}
.card-element{position:absolute;left:1px;bottom:1px;display:flex;align-items:center;gap:1px;padding:1px;background:var(--black);color:var(--yellow);font-size:5px}
.element-glyph{display:inline-block;width:5px;height:5px;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%)}
.card-info{min-width:0;padding:3px;background:var(--black)}
.card-heading{display:flex;align-items:center;justify-content:space-between;gap:2px;border-bottom:1px solid var(--gray)}
.card-name{overflow:hidden;margin:0;color:var(--white);font:700 7px/1.3 var(--dot);text-overflow:ellipsis;white-space:nowrap}
.card-rarity{padding:0 2px;border:1px solid var(--white);color:var(--white);font-size:5px}
.card-rarity[data-rarity=R]{color:var(--soft);border-color:var(--soft)}
.card-rarity[data-rarity=SR]{color:var(--yellow);border-color:var(--yellow)}
.card-rarity[data-rarity=SSR]{color:var(--yellow);border-color:var(--yellow);animation:pixel-flash 1s steps(2,end) infinite}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:2px 3px;margin:3px 0}
.stat{display:grid;grid-template-columns:13px 1fr;align-items:center;gap:1px}
.stat-label{color:var(--soft);font-size:5px}
.stat-value{color:var(--yellow);font:700 7px/1 var(--dot);font-variant-numeric:tabular-nums}
.stat-bar{grid-column:1/-1;height:3px;background:#333}
.stat-bar i{display:block;width:calc(var(--ratio,0)*100%);height:100%;background:var(--green)}
.card-skill{display:flex;align-items:center;gap:2px;border-top:1px solid var(--gray);padding-top:2px;color:var(--soft);font-size:5px}
.skill-icon{color:var(--yellow)}
.skill-name{display:block;color:var(--white);font:6px var(--dot)}
.skill-desc{display:block}
.selection-footer{height:27px;display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:4px}
.selection-note{margin:0;color:var(--soft);font-size:6px}
.primary-button,.ghost-button{position:relative;min-height:20px;padding:2px 5px;border:2px solid var(--white);border-radius:0;background:var(--black);color:var(--white);font:700 8px/1.3 var(--dot);text-align:left}
.primary-button:before,.ghost-button:before{content:"▶";display:inline-block;margin-right:4px;color:var(--yellow)}
.primary-button:disabled{color:var(--gray);border-color:var(--gray)}
.primary-button:disabled:before{color:var(--gray)}
.primary-button b{display:none}
.ready-banner{display:none;position:absolute;left:0;right:0;bottom:0;padding:4px;border:2px solid var(--white);background:var(--black);color:var(--yellow);font-size:7px;text-align:center}
body[data-phase=ready] .ready-banner{display:block}
.ready-light{display:none}
.battle-heading{height:20px;display:flex;align-items:center;gap:8px;margin:0 0 4px;padding:0 2px;color:var(--white)}
.battle-heading h2{margin:0;font:700 9px var(--dot)}
.turn-display{color:var(--soft);font-size:7px}
.turn-number{color:var(--yellow);font:700 9px var(--dot);font-variant-numeric:tabular-nums}
.battle-heading .ghost-button{margin-left:auto;min-height:17px;font-size:6px}
.battle-layout{height:147px;display:grid;grid-template-columns:minmax(0,1fr) 66px;gap:3px}
.arena{position:relative;isolation:isolate;min-width:0;height:147px;display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);align-items:center;gap:2px;padding:12px 3px 3px;overflow:hidden;border:3px solid var(--white);background:#000}
.lcd-backdrop{position:absolute;z-index:-1;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;opacity:.42;pointer-events:none}
.arena-grid,.arena-scanline{display:none}
.fighter{position:relative;z-index:1;min-width:0;padding:3px;border:2px solid var(--white);background:#000;color:var(--white);transition:none}
.fighter[data-side=a],.fighter[data-side=b]{border-color:var(--white)}
.fighter-top{display:flex;align-items:center;justify-content:space-between;gap:1px;margin-bottom:2px;color:var(--soft);font-size:5px}
.fighter-element{display:flex;align-items:center;gap:1px;color:var(--yellow);font-size:5px}
.fighter-art{position:relative;height:39px;overflow:hidden;background:#111}
.fighter-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;filter:none}
.fighter-fallback{position:absolute;inset:0;display:grid;place-items:center;color:var(--white);font:6px var(--dot);text-align:center}
.fallback-sigil{display:none}
.fighter-name{overflow:hidden;margin:2px 0;color:var(--white);font:700 7px var(--dot);text-overflow:ellipsis;white-space:nowrap}
.fighter-meta{display:flex;justify-content:space-between;gap:1px;margin-bottom:2px;color:var(--soft);font-size:5px}
.fighter-rarity{color:var(--yellow)}
.fighter-skill{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-row{display:flex;justify-content:space-between;gap:1px;color:var(--white);font-size:5px}
.hp-text{color:var(--yellow);font:700 6px var(--dot);font-variant-numeric:tabular-nums;white-space:nowrap}
.hp-bar{height:5px;margin-top:2px;border:1px solid var(--white);background:#111;overflow:hidden}
.hp-fill{display:block;width:calc(var(--ratio,1)*100%);height:100%;background:var(--green)}
.arena-vs{position:relative;z-index:2;display:grid;place-items:center;color:var(--yellow);font:700 6px var(--dot)}
.battle-sidebar{min-width:0;display:flex;flex-direction:column;gap:3px}
.side-panel{min-width:0;padding:3px;border:2px solid var(--white);background:var(--black)}
.panel-kicker,.log-heading{margin:0;color:var(--soft);font-size:6px}
.matchup{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1px}
.matchup-side{display:flex;align-items:center;padding:1px;border:1px solid var(--white);color:var(--white)}
.matchup-side[data-element=fire],.matchup-side[data-element=light],.matchup-side[data-element=grass],.matchup-side[data-element=water],.matchup-side[data-element=dark]{background:var(--black)}
.matchup-label{font-size:6px}
.match-arrow{font-size:5px}
.match-result{width:100%;color:var(--yellow);font-size:5px;text-align:center}
.log-panel{flex:1;overflow:hidden}
.log-panel ol{max-height:98px;overflow:auto;margin:2px 0;padding:0;list-style:none}
.log-entry{padding:2px 0;border:0;color:var(--white);font:6px/1.4 var(--dot)}
.log-entry:before{content:"";display:none}
.log-entry[data-type=crit],.log-entry[data-type=ko]{color:var(--red)}
.result{position:absolute;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%);width:220px;max-height:198px;display:none;grid-template-columns:minmax(0,1fr) 82px;align-items:center;gap:6px;padding:14px 7px 6px;border:3px solid var(--white);border-radius:0;background:var(--black);color:var(--white);overflow:auto;box-shadow:none}
body[data-phase=result] .result:not([hidden]){display:grid}
.result:before{content:"WINNER  P1";position:absolute;top:2px;left:50%;transform:translateX(-50%);color:var(--yellow);font:700 7px var(--dot);white-space:nowrap;animation:blink 1s steps(2,end) infinite}
.result[data-winner=b]:before{content:"WINNER  P2"}
.result[data-winner=draw]:before{content:"DRAW"}
.result-emblem{display:none}
.result-copy{min-width:0}
.result-label{margin:0;color:var(--soft);font-size:6px}
.result-title{margin:3px 0;color:var(--yellow);font:700 10px/1.4 var(--dot);overflow-wrap:anywhere}
.result-detail{margin:0;color:var(--white);font-size:6px}
.result-actions{width:auto;display:flex;flex-direction:column;gap:3px}
.result-actions button{width:100%;min-height:19px;padding:2px;font:7px/1.3 var(--dot)}
.result-actions button:before{content:"　"}
.result-actions button:first-child:before{content:"▶"}
.result-actions .new-battle-button{min-height:17px;border-color:var(--gray);color:var(--soft);font-size:6px}
.result-actions .new-battle-button:before{color:var(--gray)}
.win-streak{display:flex;align-items:center;gap:3px;width:max-content;max-width:100%;margin-top:4px;padding:1px 3px;border:1px solid var(--yellow);color:var(--yellow);font-size:6px}
.win-streak[hidden]{display:none!important}
.streak-star,.streak-stars{color:var(--yellow)}
.damage-pop{position:absolute;z-index:8;top:35%;left:50%;transform:translate(-50%,-50%);color:var(--yellow);font:700 12px/1 var(--dot);font-variant-numeric:tabular-nums;text-shadow:none;pointer-events:none;animation:damage-pop .6s steps(3,end) forwards}
.damage-pop[data-type=crit]{color:var(--red);font-size:14px}
.damage-pop[data-type=heal]{color:var(--green)}
.damage-pop[data-type=miss]{color:var(--soft);font-size:9px}
.card-image,.fighter-image{image-rendering:pixelated}
.is-attacking{animation:shake .18s steps(2,end) 3}
.is-hit{animation:flash .5s steps(2,end)}
.is-crit{animation:shake .12s steps(2,end) 4,flash .48s steps(2,end)}
.is-miss{animation:dodge .35s steps(3,end)}
.is-skill{animation:flash .5s steps(2,end)}
.fighter.is-ko{filter:none;opacity:.55}
.fighter.is-ko .fighter-art{animation:flash .6s steps(2,end) 2}
@keyframes blink{50%{visibility:hidden}}
@keyframes pixel-flash{50%{color:var(--red)}}
@keyframes flash{0%,100%{filter:brightness(1)}50%{filter:brightness(.55) sepia(.45)}}
@keyframes shake{0%,100%{translate:0 0}25%{translate:-2px 0}75%{translate:2px 0}}
@keyframes dodge{0%,100%{translate:0 0}35%{translate:-4px 0}70%{translate:3px 0}}
@keyframes damage-pop{0%{opacity:0;translate:0 3px}20%,80%{opacity:1}100%{opacity:0;translate:0 -5px}}
@media(min-width:520px){main#top{zoom:2}}
@media(min-width:768px){main#top{zoom:3}}
@media(max-width:519px){
 body{display:block}
 main#top{width:256px;height:auto;min-height:240px;margin:0 auto;zoom:1}
 .game-shell{height:auto;min-height:240px;overflow:visible}
 .phase-view{position:relative;inset:auto;margin-top:45px}
 .title-screen{position:absolute;top:4px}
 .selection-grid{height:auto;grid-template-columns:1fr;gap:4px}
 .slot{min-height:105px}
 .upload-zone{min-height:82px}
 .versus-mark{height:9px}
 .selection-footer{height:auto;min-height:27px;margin:5px 0;flex-wrap:wrap}
 .selection-note{font-size:6px}
 .ready-banner{position:relative;margin-top:3px}
 .battle-heading{height:20px}
 .battle-layout{height:auto;grid-template-columns:1fr}
 .arena{height:147px}
 .battle-sidebar{display:grid;grid-template-columns:1fr}
 .log-panel ol{max-height:56px}
 body[data-phase=result] .title-screen,body[data-phase=result] .battle-heading,body[data-phase=result] .battle-layout{display:none}
 body[data-phase=result] #battle-view{display:block}
 body[data-phase=result] #battle-view{margin-top:8px}
 body[data-phase=result] .result{position:relative;top:auto;left:auto;transform:none;width:100%;max-height:none;min-height:150px;margin-top:0;grid-template-columns:minmax(0,1fr) 100px;overflow:visible}
}




@media(max-width:340px){
 main#top{width:100%}.game-shell{width:100%;min-width:256px}
}

body.mock .push-start{display:none}

/* Ready state: keep the confirmation inside the prompt window, never over the command. */
.prompt-ready{display:none}
.ready-banner{position:static;left:auto;right:auto;bottom:auto;margin:2px auto 0;padding:0;border:0;background:transparent;font-size:7px;line-height:1.2}
body[data-phase=ready] .prompt-select,body[data-phase=ready] .select-hint{display:none}
body[data-phase=ready] .prompt-ready{display:inline}
body[data-phase=ready] .ready-banner{display:block}
body[data-phase=ready] .section-top{height:57px}
body[data-phase=ready] .selection-grid{height:94px}
body[data-phase=ready] .selection-footer{height:23px}

/* The fallback label is only for an empty image slot. */
img.card-image[src]:not([src=""]) ~ .art-placeholder,
img.fighter-image[src]:not([src=""]) ~ .fighter-fallback{display:none}

/* RPG result message window follows the arena, so the fighters stay visible. */
.battle-layout{height:132px;grid-template-columns:minmax(0,1fr) 66px}
.arena{height:132px}
.result{position:relative;z-index:2;top:auto;left:auto;transform:none;width:100%;max-height:none;min-height:49px;margin-top:4px;grid-template-columns:minmax(0,1fr) 82px;gap:5px;padding:13px 6px 5px;overflow:visible}

@media(max-width:519px){
 body{display:block;min-width:0}
 main#top{width:256px;height:auto;min-height:0;margin:0 auto;zoom:1.5}
 .game-shell{width:256px;height:auto;min-height:0;overflow:visible}
 .phase-view{position:relative;inset:auto;margin-top:45px}
 #battle-view{margin-top:5px}
 .section-top{height:auto;min-height:53px;padding:4px}
 .section-top h1,.section-top h2{font-size:10px}
 .section-top p{font-size:8px}
 .ready-banner{font-size:8px}
 .selection-grid{height:auto;grid-template-columns:1fr;gap:4px}
 .slot{min-height:118px;padding:5px}
 .slot-top{height:14px;font-size:8px}
 .upload-zone{height:90px;min-height:90px;gap:4px}
 .upload-zone strong{font-size:9px}
 .upload-zone small{font-size:8px}
 .upload-zone:after{font-size:8px}
 .upload-orb{width:22px;height:19px;font-size:12px}
 .versus-mark{height:10px;font-size:8px}
 .card{height:96px;grid-template-columns:58px minmax(0,1fr)}
 .card-info{padding:4px}
 .card-name{font-size:9px}
 .card-rarity,.stat-label,.card-skill,.skill-name{font-size:8px}
 .stat{grid-template-columns:22px 1fr}
 .stat-value{font-size:9px}
 .stat-bar{height:4px}
 .card-element{font-size:8px}
 .card-number{font-size:8px}
 .selection-footer{height:auto;min-height:31px;margin:5px 0;flex-wrap:wrap}
 .selection-note{font-size:8px}
 .primary-button,.ghost-button{min-height:24px;font-size:9px}
 body[data-phase=ready] .section-top{height:auto;min-height:60px}
 body[data-phase=ready] .selection-grid{height:auto}
 body[data-phase=ready] .selection-footer{height:auto}
 .battle-heading{height:20px}
 .battle-heading h2{font-size:9px}
 .battle-layout{height:auto;grid-template-columns:1fr;gap:4px}
 .arena{height:140px;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);padding:10px 4px 4px}
 .fighter{padding:4px}
 .fighter-top,.fighter-element,.fighter-meta,.hp-row{font-size:8px}
 .fighter-art{height:43px}
 .fighter-name{font-size:9px}
 .hp-text{font-size:8px}
 .arena-vs{font-size:8px}
 .battle-sidebar{display:grid;grid-template-columns:1fr;gap:4px}
 .side-panel{padding:4px}
 .panel-kicker,.log-heading,.matchup-label,.match-result,.log-entry{font-size:8px}
 .match-arrow{font-size:8px}
 .log-panel ol{max-height:62px}
 .result{width:100%;min-height:78px;margin-top:4px;grid-template-columns:minmax(0,1fr) 100px;gap:5px;padding:14px 6px 6px}
 .result-title{font-size:10px}
 .result-label,.result-detail,.win-streak{font-size:8px}
 .result-actions{gap:4px}
 .result-actions button{min-height:25px;padding:3px;font-size:8px}
 .result-actions .new-battle-button{min-height:23px;font-size:8px}
 .skill-desc,.skill-icon,.fighter-skill,.fighter-rarity,.card-rarity,.result:before,.turn-display,.turn-number,.battle-heading .ghost-button,.fighter-label,.fighter-element,.fighter-meta,.hp-row,.element-name,.matchup-side,.match-result,.match-arrow,.log-entry,.card-number,.card-element,.slot-side,.slot-index,.push-start{font-size:8px}
 body[data-phase=result] .battle-heading,body[data-phase=result] .battle-layout{display:flex}
 body[data-phase=result] .battle-layout{display:grid}
 body[data-phase=result] #battle-view{margin-top:5px}
}





@media(min-width:520px){
 /* Fit all result commands and let card text use the lower slot area. */
 .battle-layout{height:120px}
 .arena{height:120px}
 .result{padding-top:10px;padding-bottom:3px}
 .result-actions{gap:2px}
 .result-actions button{min-height:17px}
 .result-actions .new-battle-button{min-height:16px}
 .slot{overflow:visible}
 .card{height:calc(100% - 8px);grid-template-columns:34px minmax(0,1fr)}
 .card-info{overflow:hidden}
 .card-skill{align-items:flex-start}
 .skill-desc{line-height:1.15;overflow-wrap:anywhere}
 .card-element{bottom:2px;padding:2px}
}
/* 選択前（select）は窓が高いぶん「たたかう」が外枠からはみ出すので、PC幅ではカードスロットを詰める */
@media(min-width:520px){body[data-phase=select] .selection-grid{height:100px}body[data-phase=select] .upload-zone{min-height:71px;padding-top:8px;padding-bottom:8px}}
/* 写真はドット化せずそのまま表示するので、縮小時になめらかに描く */
.card-image,.fighter-image{image-rendering:auto}
/* 2枚そろった後（ready）の PC 幅：カードの中身に 72px 要るので、カードの段を 99px に広げ、その分メッセージ窓を 5px 詰める */
@media(min-width:520px){body[data-phase=ready] .selection-grid{height:99px;grid-template-rows:99px}body[data-phase=ready] .section-top{height:52px}}
/* PC 幅：どの段階でもカードの高さを枠の中（slot-top 12px＋余白 3px を引いた分）にそろえる。1枚目だけ読み込んだときも P2 の差し込み口と下端がそろう */
@media(min-width:520px){.slot .card{height:calc(100% - 15px)}}
/* スマホ幅：カードの高さを固定せず、特技の説明が2行になっても切れないようにする */
@media(max-width:519px){.slot .card{height:auto;min-height:96px}}