/* 画面は 1600x900 の舞台に固定し、ウィンドウに合わせて拡縮する（--s は main.js が入れる）。
   配置を1つの大きさで決められ、どのPCでも同じ見え方になるため */
html,body{height:100%;margin:0;background:#1b1916;overflow:hidden}
#app{position:fixed;left:50%;top:50%;width:1600px;height:900px;transform:translate(-50%,-50%) scale(var(--s,1));
  background:#d8d4cb;color:#222;font-family:sans-serif;font-size:18px;overflow:hidden;box-sizing:border-box;
  --cw:150px}
#app.fade>*{animation:fade .25s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.pop{animation:fade .25s ease-out}

/* ボタン：押した感触（沈む）を出す */
button{font:inherit;font-size:20px;padding:12px 30px;border:2px solid #555;border-radius:10px;background:#fff;cursor:pointer;
  box-shadow:0 4px 0 #0003;transition:transform .06s,box-shadow .06s,background .15s}
@media (hover:hover){button:hover:not(:disabled){background:#f0ede6}}
button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #0003}
button:disabled{opacity:.4;cursor:default}
button.primary{background:#3b3832;color:#fff;border-color:#3b3832;font-weight:bold}
@media (hover:hover){button.primary:hover:not(:disabled){background:#56514a}}

/* 画面中央に大きく置く共通の器 */
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;height:100%;text-align:center;box-sizing:border-box;padding:30px 40px}
.center h1{font-size:96px;margin:0;letter-spacing:.08em}
.edition{font-size:28px;margin:4px 0 28px;color:#555;letter-spacing:.1em}
h2{font-size:40px;margin:0}
h3{font-size:26px;margin:0}
.label{font-size:16px;color:#555}
.big{font-size:72px;font-weight:bold}
.sub{font-size:22px;color:#444}
.btnrow{display:flex;gap:16px;justify-content:center}
.ver{position:absolute;right:14px;bottom:10px;font-size:14px;color:#777}
.errors{background:#fff;border:3px solid #c00;padding:24px;font-size:20px;margin:40px;max-height:800px;overflow:auto}
.errors li{margin:8px 0}

/* カード（完成画像。印刷と違う値だけ上に重ねる） */
.card{width:var(--cw);cursor:default;position:relative;flex:none}
.card .art{position:relative;border-radius:6px;transition:transform .15s .3s;transform-origin:center}
.card img{display:block;width:100%;border-radius:6px}
@media (hover:hover){.card:hover .art{transform:scale(1.2);z-index:10;box-shadow:0 8px 22px #0008}}
.card .name{font-size:14px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}
.card.sel .art{outline:5px solid #36c;outline-offset:1px}
.card.sac .art{outline:5px solid #c33;outline-offset:1px}
.card.sac img{filter:grayscale(.7) brightness(.8)}
.card.off{opacity:.35;cursor:default}
.card.noimg .art{background:#fff;border:1px solid #555;padding:4px;aspect-ratio:242/340;box-sizing:border-box;font-size:13px}
.ov{position:absolute;top:69%;width:21%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:bold;font-size:calc(var(--cw) * .17);color:#fff;border:2px solid #fff;box-shadow:0 1px 4px #000}
.ov.atk{left:4%}.ov.hp{right:4%}.ov.cost{top:3%;left:4%;width:17%}
.ov.down{background:#c22}.ov.up{background:#2a7}
.marks{position:absolute;top:24%;left:4%;display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.mark{background:#222d;color:#fff;border-radius:3px;padding:0 5px;font-size:calc(var(--cw) * .085)}
.stat{font-size:15px;font-weight:bold}
.cnt{position:absolute;right:-6px;top:-6px;background:#3b3832;color:#fff;border-radius:12px;padding:0 8px;font-size:16px;font-weight:bold;z-index:2}

/* 並べたカード（選択画面・デッキ） */
.hand{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.hand .card{cursor:pointer}
.hand .card.off{cursor:default}
.cands{--cw:220px;gap:28px}
.deckrow{--cw:110px;gap:8px;max-width:1500px}
.tray{min-height:170px;--cw:110px}
.story{max-width:900px;line-height:1.8;font-size:22px;margin:0}
.warn{color:#a22;font-weight:bold;font-size:22px;margin:0}

/* 右クリックの拡大表示 */
.zoom{position:absolute;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:100;--cw:380px;cursor:pointer}
.zoom .card:hover .art{transform:none;box-shadow:none}
.zoom .card .name{color:#fff;font-size:22px;line-height:32px}
.zoom .fxlist{color:#fff;margin-left:30px;max-width:480px;text-align:left}

/* ホーム */
button.box{width:240px;height:170px;font-size:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
button.box small{font-size:16px;font-weight:normal}

/* 地図：下がスタート、上が大ボス */
.mapwrap{display:flex;height:100%;padding:24px 40px;box-sizing:border-box;gap:40px}
.path{display:flex;flex-direction:column-reverse;justify-content:center;width:520px;position:relative}
.path::before{content:"";position:absolute;left:31px;top:40px;bottom:40px;border-left:4px dotted #8a8478}
.node{display:flex;align-items:center;gap:16px;height:52px;font-size:20px;position:relative;color:#333}
.node .dot{width:42px;height:42px;border-radius:50%;background:#efece5;border:3px solid #7a756b;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:bold;flex:none;margin-left:10px}
.node.battle .dot{background:#e9c9c0}.node.midboss .dot{background:#d99a8a}.node.boss .dot{background:#b4473a;color:#fff;width:52px;height:52px;margin-left:5px}
.node.done{color:#999}.node.done .dot{opacity:.5}
.node.cur{font-weight:bold;font-size:24px}
.node.cur .dot{outline:5px solid #36c;outline-offset:3px;animation:pulse 1.2s infinite alternate}
@keyframes pulse{to{outline-color:#36c5}}
.node .here{white-space:nowrap;flex:none;background:#36c;color:#fff;border-radius:6px;padding:2px 10px;font-size:16px}
.mapside{flex:1;display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:flex-start}
.mapside .deckrow{justify-content:flex-start;--cw:96px}

/* 戦闘（materials/screens/battle/BATTLE_LAYOUT_V001.png の配置）
   左：生命ゲージ・ターン終了ベル　中央：予測列・敵盤面・自分盤面　下：手札（扇）　右：墓地・情報・ログ・山札 */
.bt{position:relative;height:100%;--cw:112px}
.bt-left{position:absolute;left:36px;top:28px;width:210px;display:flex;flex-direction:column;align-items:center;gap:22px}
.bt-center{position:absolute;left:300px;top:14px;width:760px}
.bt-right{position:absolute;left:1110px;top:20px;width:460px;display:flex;flex-direction:column;gap:12px}
.zone{font-size:14px;color:#555;text-align:center;letter-spacing:.2em;margin:4px 0 2px}
.row{display:flex;justify-content:center;gap:16px}
.slot{width:var(--cw);height:calc(var(--cw) * 1.405 + 20px);border:2px dashed #9a9488;border-radius:8px;background:#e6e2d9;box-sizing:border-box}
.slot.target{background:#cfe8cf;border:3px solid #383;cursor:pointer}
.fc{width:calc(var(--cw) * .8);height:calc(var(--cw) * .8 * 1.405);border:2px dashed #b3ada1;border-radius:6px;background:#ebe8e1;overflow:hidden;font-size:12px;text-align:center}
.fc img{width:100%;opacity:.7;filter:grayscale(.3)}
.gauge{width:110px;height:400px;border:3px solid #555;border-radius:12px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:#bbb;position:relative}
.gauge .e{background:#c66;display:flex;align-items:flex-start;justify-content:center;color:#fff;font-weight:bold;transition:height .3s}
.gauge .p{background:#5a5;display:flex;align-items:flex-end;justify-content:center;color:#fff;font-weight:bold;transition:height .3s}
.gauge span{padding:6px 0;font-size:22px}
.glabel{font-size:15px;color:#555;text-align:center}
.bell{white-space:pre-line;width:150px;height:150px;border-radius:50%;padding:0;font-size:22px;line-height:1.3;background:#b8913f;border-color:#7a5d20;color:#fff;font-weight:bold;box-shadow:0 6px 0 #6a5020}
@media (hover:hover){.bell:hover:not(:disabled){background:#c9a252}}
.bell:active:not(:disabled){box-shadow:0 2px 0 #6a5020;transform:translateY(4px)}
.prompt{position:absolute;left:300px;width:760px;top:590px;text-align:center;font-weight:bold;font-size:18px;color:#333}
.fan{position:absolute;left:250px;width:860px;top:662px;display:flex;justify-content:center;--cw:140px}
.fan .card{margin:0 -10px;transform:rotate(var(--r)) translateY(var(--y));transform-origin:bottom center;transition:transform .15s;cursor:pointer}
.fan .card.sel{transform:translateY(-22px) scale(1.08);z-index:5}
@media (hover:hover){.fan .card:hover{transform:translateY(-22px) scale(1.08);z-index:5}}
@media (hover:hover){.fan .card:hover .art{transform:none;box-shadow:0 8px 22px #0008}}
.piles{display:flex;gap:16px;justify-content:center}
.pile{width:130px;text-align:center;font-size:15px;color:#444}
.pile .stack{width:96px;height:135px;margin:4px auto;border-radius:8px;border:2px solid #555;background:#3d3a35;color:#eee;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:bold;position:relative;overflow:hidden}
.pile .stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.pile .stack b{position:relative}
.deckpile{position:absolute;right:40px;bottom:30px}
.panel{background:#ece9e2;border:1px solid #a49e92;border-radius:8px;padding:10px 14px}
.panel h3{margin:0 0 6px;font-size:18px}
.stat-row{display:flex;justify-content:space-between;margin:2px 0;font-size:17px}
#log,.logfull{height:230px;overflow-y:auto;font-size:14px;background:#fff;padding:6px;border-radius:4px}
.l.turn{font-weight:bold;margin-top:4px}.l.muted{color:#888}.l.fx{color:#640}.l.en{color:#a33}.l.pl{color:#262}

/* 効果の一覧（図鑑・説明書） */
.fxlist{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;text-align:left;max-width:1300px}
.fxrow{display:flex;gap:12px;align-items:center;font-size:17px}
.fxrow img{width:48px;height:48px;background:#3b3832;border-radius:8px;padding:4px;flex:none}
.fxrow b{display:block;font-size:19px}
.modal{position:absolute;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:50}
.modal .box{background:#ece9e2;border-radius:12px;padding:30px;max-height:780px;overflow:auto}
.scroll{overflow-y:auto;max-height:640px;padding:8px}

.logbox{width:1100px;height:420px;font-size:14px;box-sizing:border-box}

/* 戦闘の演出（ルールの記録を順に再生する。src/screens/battle.js の play） */
.card.lunge{animation:lunge .7s ease-in-out;z-index:20}
@keyframes lunge{45%{transform:translate(var(--dx),var(--dy))}}
.card.hit .art{animation:hit .35s}
@keyframes hit{30%{transform:translateX(-6px);filter:brightness(1.6) sepia(1) hue-rotate(-40deg)}60%{transform:translateX(6px)}}
.card.dying{animation:dying .7s forwards}
@keyframes dying{30%{filter:grayscale(1)}to{filter:grayscale(1);opacity:0;transform:scale(.9)}}
.pile.open{cursor:pointer}@media (hover:hover){.pile.open:hover .stack{outline:3px solid #36c}}
.gravelist{display:flex;justify-content:center;padding:30px 60px 10px;--cw:150px;max-width:1300px}
.gravelist .card{margin-left:-70px}.gravelist .card:first-child{margin-left:0}
@media (hover:hover){.gravelist .card:hover{z-index:5}}
#gear{position:fixed;left:12px;bottom:12px;z-index:200;font-size:26px;line-height:1;padding:6px 12px;opacity:.85}
.fc{position:relative}
.waitn{position:absolute;right:2px;bottom:2px;background:#a33;color:#fff;border-radius:4px;padding:0 5px;font-size:13px;font-weight:bold}

/* カード獲得：裏向きのヒント・中ボスの報酬の箱（0.3.6） */
.card.hint{cursor:pointer}
.card.hint .face{aspect-ratio:242/340;box-sizing:border-box;background:#fbfaf6;border:2px solid #b9b2a3;border-radius:10px;box-shadow:inset 0 0 0 8px #fff,inset 0 0 0 10px #e3ddd0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;gap:10px;padding:16px}
.crop{--S:calc(var(--cw) * .55);width:var(--S);height:var(--S);border-radius:50%;background-repeat:no-repeat;background-size:calc(var(--S) * 242 / var(--w)) auto;background-position:calc(var(--S) * var(--x) / var(--w) * -1) calc(var(--S) * var(--y) / var(--w) * -1)}
.hint .fxi{width:calc(var(--cw) * .38);padding:calc(var(--cw) * .05);box-sizing:border-box;background:#3b3832;border-radius:50%}
.hint .rolei{width:calc(var(--cw) * .6);aspect-ratio:1;border-radius:50%}
.hint .none{font-size:calc(var(--cw) * .16);color:#999}
.cands .card .name{font-size:18px;line-height:28px}
.card.passed{opacity:.55}
.card.reveal{animation:fade .35s ease-out backwards;animation-delay:var(--d)}
.chest{position:relative;width:280px;height:220px;margin:40px auto 10px;cursor:pointer}
.chest .body{position:absolute;bottom:0;left:0;right:0;height:140px;background:linear-gradient(#8a5a2b,#5e3b1a);border:4px solid #3b2410;border-radius:8px;box-shadow:inset 0 0 0 10px #a8783e}
.chest .lid{position:absolute;top:30px;left:-6px;right:-6px;height:60px;background:linear-gradient(#a06a33,#6d4520);border:4px solid #3b2410;border-radius:30px 30px 6px 6px;transform-origin:10% 100%;transition:transform .5s .35s;z-index:1}
.chest.opening{animation:shake .35s}
.chest.opening .lid{transform:rotate(-28deg) translateY(-20px)}
.chest.opening::after{content:"";position:absolute;left:50%;top:60px;width:20px;height:20px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 120px 90px #fff3b0;opacity:0;animation:glow .5s .4s forwards}
@keyframes shake{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@keyframes glow{to{opacity:1}}

/* 0.3.9 設定・図鑑の3状態 */
.settings{display:flex;flex-direction:column;gap:12px;font-size:20px;text-align:left;min-width:520px}
.settings h3{margin:10px 0 0}
.loglist{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.logrow{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:17px}
.settings .logbox{width:100%;height:200px}
.settings .set{display:flex;align-items:center;gap:12px;cursor:pointer}
.settings input{width:22px;height:22px}
.card.seen img{filter:grayscale(1)}
.card.hiding .art>img{filter:grayscale(1) brightness(.75)}
.hidebadge{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:none}
.hidebadge img{width:55%;filter:drop-shadow(0 2px 4px #000a)}
.hidebadge span{background:#222d;color:#fff;border-radius:4px;padding:0 8px;font-size:calc(var(--cw) * .11)}
.card.unknown img{filter:brightness(0);opacity:.75}
.card.unknown .art{transform:none!important;box-shadow:none!important}
.tabs{display:flex;gap:8px;justify-content:center;margin:4px 0 10px}
.tabs button.on{background:#3b3832;color:#fff}
.fxlist.one{grid-template-columns:1fr;max-width:900px;margin:0 auto 8px;padding:6px 10px;border-radius:8px;cursor:pointer}
.fxlist.one.on{background:#fff8}@media (hover:hover){.fxlist.one:hover{background:#fff8}}
.rest{align-self:center;font-size:18px;color:#555;padding:0 16px}

/* ===== スマホ横向き（2026-11-08 遼）=====
   main.js が #app と body に .phone を付け、舞台を 1200x560 にする。PCの配置は上のまま、ここで上書きだけする */
#app,#app *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
#app textarea{-webkit-user-select:text;user-select:text}
#app img{-webkit-user-drag:none}
.logbtn{display:none}
#full{display:none;position:fixed;left:72px;bottom:12px;z-index:200;font-size:26px;line-height:1;padding:6px 12px;opacity:.85}
body.phone #full:not([hidden]){display:block}
/* スマホでは歯車と全画面を左下に小さく縦に積む。画面側は左を60pxほど空けておく */
body.phone #gear,body.phone #full{left:6px;font-size:18px;padding:4px 7px}
body.phone #gear{bottom:6px}body.phone #full{bottom:46px}
/* 諦める：ラン中だけ。地図でも戦闘でも同じ場所（PCは歯車の右、スマホは右下。左は地図の道とベルが近く押し間違えやすい）で、目立たせない（2026-11-09 遼） */
#giveup{position:fixed;left:72px;bottom:12px;z-index:200;font-size:15px;padding:8px 12px;opacity:.7}
#giveup[hidden]{display:none}
body.phone #giveup{left:auto;right:6px;bottom:6px;font-size:12px;padding:4px 6px}
#rotate{display:none}
/* 縦向きのスマホだけ。指で操作するパソコン（タッチ画面）で窓が縦長だと、ここから進めなくなっていた（0.3.22で友人の報告。2026-11-09）。
   スマホの判定（main.js の BL.phone：短い辺が600未満）と同じ基準にする */
@media (orientation:portrait) and (pointer:coarse) and (max-width:599px){
  #rotate{display:flex;position:fixed;inset:0;z-index:300;background:#1b1916;color:#eee;align-items:center;justify-content:center;font:bold 22px sans-serif;padding:20px;text-align:center}
}
#app.phone{width:1200px;height:560px;font-size:20px}
.phone .center{justify-content:safe center;overflow-y:auto;padding:14px 80px;gap:12px}
.phone .center h1{font-size:80px}
.phone .edition{margin:0 0 16px}
.phone h2{font-size:32px}
.phone .label{font-size:18px}
.phone button{padding:10px 26px;font-size:21px}
.phone .card .name{font-size:16px}
.phone .deckrow{--cw:96px;max-width:1040px}
.phone .tray{min-height:150px}
.phone .cands{--cw:165px}
.phone .cands .card .name{font-size:19px}
.phone .story{font-size:21px;line-height:1.6}
.phone .chest{margin:10px auto 0;transform:scale(.8)}
.phone .modal .box{max-height:520px;max-width:1100px;padding:16px 24px;box-sizing:border-box}
.phone .zoom{--cw:250px}
.phone .zoom .fxlist{max-width:560px}
.phone .fxrow{font-size:18px}
.phone .scroll{max-height:none;flex:1 1 auto;min-height:0}
.phone .logbox{width:1000px;height:240px;font-size:15px;flex:none}
.phone .settings{font-size:20px;min-width:0}
.phone .settings .logbox{height:140px}
/* 地図：15マスを縦に収める */
.phone .mapwrap{padding:8px 30px 8px 70px;gap:30px}
.phone .path{width:470px}
.phone .path::before{left:25px;top:20px;bottom:20px}
.phone .node{height:34px;font-size:18px}
.phone .node .dot{width:30px;height:30px;font-size:15px}
.phone .node.boss .dot{width:36px;height:36px;margin-left:7px}
.phone .node.cur{font-size:20px}
.phone .mapside{overflow-y:auto;justify-content:safe center;gap:12px}
.phone .mapside .deckrow{--cw:88px}
/* 戦闘：左＝ゲージとベル　中央＝予告・敵・自分　右＝墓地・情報・案内・手札・山札。ログはボタンで開く */
.phone .bt{--cw:96px}
.phone .bt-left{left:62px;top:8px;width:120px;gap:8px}
.phone .gauge{width:80px;height:220px}
.phone .gauge span{font-size:21px}
.phone .glabel{font-size:17px}
.phone .bell{width:116px;height:116px;font-size:20px;padding:0}
.phone .bt-center{left:196px;top:0;width:540px}
.phone .zone{font-size:15px;margin:1px 0}
.phone .row{gap:14px}
.phone .fc{width:calc(var(--cw) * .58);height:calc(var(--cw) * .58 * 1.405)}
.phone .waitn{font-size:14px}
.phone .bt-right{left:760px;top:8px;width:290px;gap:8px}
.phone .piles{justify-content:flex-start;gap:10px}
.phone .pile{width:100px;font-size:15px}
.phone .pile .stack{width:60px;height:84px;font-size:24px}
.phone .deckpile{right:auto;left:1080px;bottom:auto;top:8px}
.phone .panel{padding:6px 12px;width:420px;box-sizing:border-box;position:relative}
.phone .panel h3{font-size:18px;margin:0 0 4px;min-height:34px}
.phone .stat-row{font-size:17px}
.phone .logbtn{display:block;position:absolute;right:10px;top:6px;padding:3px 14px;font-size:17px}
.phone .logpanel{display:none}
.phone .logfull{width:900px;height:360px;font-size:17px}
.phone .prompt{left:760px;width:420px;top:282px;font-size:18px;text-align:left}
.phone .fan{left:740px;width:460px;top:362px;--cw:84px}
.phone .fan .card{margin:0 -6px}
.phone .fan .card.sel{transform:translateY(-14px) scale(1.06)}
.phone .gravelist{--cw:110px;padding:10px 40px 10px 80px}
.phone .gravelist .card{margin-left:-50px}

/* チュートリアル：灰色の覆いに光る穴、文字は上に薄い灰色の帯＋白の太字・明朝（2026-11-09 遼 案B）。
   文字が光らせる場所と重なる時だけ下へ。tut-lift は手札の隣のカードが穴に重ならないよう、光らせるカードを覆いの上へ出す */
.tut{position:absolute;inset:0;z-index:150;pointer-events:none}
.tut-hole{position:absolute;border-radius:10px;box-shadow:0 0 0 4000px rgba(40,38,34,.5),0 0 0 3px #fffc inset}
.tut-hole.none{box-shadow:0 0 0 4000px rgba(40,38,34,.5)}
.tut.idle .tut-hole{box-shadow:none}
.tut-text{position:absolute;left:0;right:0;top:0;min-height:3em;padding:14px 80px;background:rgba(20,20,20,.45);color:#fff;
  font:800 34px/1.5 "Hiragino Mincho ProN","Yu Mincho",serif;text-shadow:0 2px 4px #000c;text-align:center;
  display:flex;align-items:center;justify-content:center;white-space:pre-line} /* 1行でも帯の上下の真ん中に出す */
.tut-lift{z-index:151!important}
#app.tutorial .prompt{display:none}
.phone .tut-text{font-size:24px;padding:8px 40px}