*{box-sizing:border-box}body{margin:0;background:#11161b;color:#e9eef2;font-family:"Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;background:#182028;border-bottom:1px solid #34414b}h1,h2,h3,p{margin:0 0 8px}header p{color:#9eacb7}.panel{background:#1b242c;border:1px solid #34414b;border-radius:12px;padding:18px}.hidden{display:none!important}main{max-width:1400px;margin:auto;padding:18px}.row{display:flex;gap:20px;flex-wrap:wrap;margin:15px 0}input,select,button{font:inherit}input,select{background:#10151a;color:#fff;border:1px solid #46525c;border-radius:7px;padding:8px}button{background:#2b3741;color:#fff;border:1px solid #52616c;border-radius:8px;padding:9px 14px;cursor:pointer}button:hover{filter:brightness(1.15)}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:#3d6d51}.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.notice{margin-top:12px;padding:8px 10px;background:#10161b;border-radius:7px;color:#c8d4dc}.topbar{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:#1b242c;border:1px solid #34414b;border-radius:10px;padding:10px 14px;margin-bottom:12px}.topbar .notice{margin:0;flex:1}.board{display:grid;grid-template-columns:1fr 46px 1fr;gap:10px;align-items:stretch}.player{background:#182128;border:1px solid #34414b;border-radius:12px;padding:12px}.player-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:14px}.player-head h2{font-size:17px}.zone-title{font-size:12px;color:#9eacb7;margin:12px 0 6px}.field{min-height:155px;border:1px dashed #53616c;border-radius:10px;padding:10px;display:flex;gap:8px;flex-wrap:wrap;align-content:flex-start}.hand{min-height:175px;border:1px dashed #53616c;border-radius:10px;padding:10px;display:flex;gap:8px;flex-wrap:wrap;align-content:flex-start}.vs{display:flex;align-items:center;justify-content:center;font-weight:800;color:#d6b56b}.stats-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;color:#aebac3;font-size:13px}.food{display:inline-block;padding:3px 6px;border-radius:5px;background:#26332b;margin:2px}.card{width:142px;min-height:160px;position:relative;background:linear-gradient(145deg,#27343e,#141a20);border:1px solid #62717c;border-radius:9px;padding:7px;box-shadow:0 4px 10px #0007;user-select:none}.card .cost{position:absolute;top:5px;left:5px;width:22px;height:22px;border-radius:50%;background:#b68c42;color:#111;display:grid;place-items:center;font-weight:800}.card .name{font-weight:800;font-size:13px;text-align:center;padding:2px 20px 2px}.card .type{font-size:10px;color:#9eacb7;text-align:center}.card .art{font-size:38px;text-align:center;padding:9px 0}.card .stats{display:flex;justify-content:space-between;font-size:10px;font-weight:700}.card .effect{font-size:9px;color:#c5d0d7;margin-top:5px;line-height:1.25}.card.attackable{border-color:#8ecf9c;box-shadow:0 0 0 1px #8ecf9c66,0 4px 12px #0009}.card.playable{border-color:#d6b56b}.card .tag{font-size:9px;color:#e5c77c;margin-top:4px}.empty{color:#74818a}.actions{display:flex;gap:10px;margin-top:10px}.log{margin-top:12px;max-height:230px;overflow:auto}.log h2{font-size:15px}.log div{font-size:12px;color:#b7c2c9;margin:3px 0}.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;padding:20px;z-index:10}.modal-box{max-width:800px;width:100%;max-height:90vh;overflow:auto;background:#1b242c;border:1px solid #53616c;border-radius:12px;padding:18px}.modal-box h2{font-size:18px}.target,.choice{margin:5px}.target .card{pointer-events:none}.choice{min-width:130px}@media(max-width:900px){.board{grid-template-columns:1fr}.vs{height:25px}.lobby-grid{grid-template-columns:1fr}.card{width:126px}.field,.hand{min-height:140px}}
.card.playable{border-color:#e2c15b;box-shadow:0 0 0 2px #e2c15b55,0 4px 12px #0009;transform:translateY(-2px)}
.card:not(.playable){ }
.card.attackable{border-color:#8ecf9c;box-shadow:0 0 0 1px #8ecf9c66,0 4px 12px #0009}

.deck-builder{margin:14px 0;padding:14px;border:1px solid #34414b;border-radius:10px;background:#151d23}.deck-head{display:flex;justify-content:space-between;align-items:center}.deck-help{color:#9eacb7;font-size:13px}.deck-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.deck-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:360px;overflow:auto}.deck-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#202b33;border:1px solid #34414b;border-radius:8px;padding:7px}.deck-card-info{display:flex;flex-direction:column;min-width:0}.deck-card-info b{font-size:12px}.deck-card-info span{font-size:10px;color:#9eacb7}.deck-step{display:flex;align-items:center;gap:7px;white-space:nowrap}.deck-step button{padding:3px 8px}.deck-step b{min-width:12px;text-align:center}@media(max-width:900px){.deck-list{grid-template-columns:1fr}}

.deck-filters{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 12px;padding:10px;background:#10171c;border-radius:8px}.deck-filters>div{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.filter-label{font-size:12px;color:#9eacb7;margin-right:3px}.filter-btn{padding:5px 11px;font-size:12px}.filter-btn.active{background:#55745f;border-color:#88aa91;box-shadow:0 0 0 1px #88aa9144}.deck-workspace{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:12px;align-items:start}.deck-workspace h4,.deck-summary h4{margin:0 0 8px}.deck-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:440px}.deck-row.selected{border-color:#7f9d88;background:#26352e}.deck-summary{position:sticky;top:10px;background:#10171c;border:1px solid #34414b;border-radius:10px;padding:10px;max-height:440px;overflow:auto}.deck-summary.complete{border-color:#79aa86;box-shadow:0 0 0 1px #79aa8644}.deck-summary-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #34414b;padding-bottom:6px;margin-bottom:6px}.summary-row{display:flex;justify-content:space-between;gap:8px;padding:7px 4px;border-bottom:1px solid #26323a}.summary-row>div{display:flex;flex-direction:column}.summary-row b{font-size:12px}.summary-row span,.summary-empty,.filter-empty{font-size:10px;color:#9eacb7}.summary-row strong{white-space:nowrap;color:#e2c15b}.summary-empty,.filter-empty{padding:12px;text-align:center}@media(max-width:900px){.deck-workspace{grid-template-columns:1fr}.deck-summary{position:static;max-height:none}.deck-list{grid-template-columns:1fr}}


/* デッキ作成: カード効果詳細 */
.deck-card-info small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font-size:10px;line-height:1.35;color:#c8d3da}.deck-row{cursor:pointer}.deck-row:hover{border-color:#71828e}.deck-card-detail{margin-top:12px;background:#10171c;border:1px solid #34414b;border-radius:10px;padding:14px;min-height:96px}.detail-empty{color:#8f9ca5;text-align:center;padding:20px}.detail-title{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:10px;border-bottom:1px solid #34414b}.detail-title>div{display:flex;gap:10px;align-items:center}.detail-title h4{font-size:18px;margin:0}.detail-title span{font-size:12px;color:#9eacb7}.detail-title>b{color:#e2c15b}.detail-emoji{font-size:34px!important}.detail-stats{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}.detail-stats span{background:#202b33;border-radius:7px;padding:6px 10px;font-size:12px}.deck-card-detail h5{margin:12px 0 6px;color:#aebac3}.detail-effect{background:#1a242b;border-left:3px solid #70818c;border-radius:5px;padding:8px 10px;margin:6px 0}.detail-effect.ability{border-left-color:#d6b56b}.detail-effect-head{display:flex;justify-content:space-between;gap:10px}.detail-effect-head strong{color:#e2c15b}.detail-effect p{margin:4px 0 0;font-size:12px;line-height:1.55;color:#d4dde2}

/* 画面分離ナビゲーション */
.screen-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}.screen-help{color:#9eacb7}.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}.menu-card{min-height:150px;text-align:left;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:8px;background:#202b33}.menu-card b{font-size:22px}.menu-card span{color:#b7c3ca;line-height:1.6}.screen-actions{display:flex;justify-content:flex-end;margin-top:14px}.screen-actions .primary{padding:11px 20px}@media(max-width:700px){.menu-grid{grid-template-columns:1fr}.screen-head{flex-direction:column}.screen-head .back-menu{align-self:flex-start}}

/* 複数デッキ保存 */
.saved-decks{margin:12px 0 16px;padding:12px;background:#10171c;border:1px solid #34414b;border-radius:10px}.saved-decks-head{display:flex;justify-content:space-between;align-items:center}.saved-decks-head p{font-size:12px;color:#9eacb7}.saved-deck-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}.saved-deck{background:#202b33;border:1px solid #3b4a54;border-radius:9px;padding:10px}.saved-deck.active{border-color:#d6b56b}.saved-deck h4{margin:0 0 4px}.saved-deck p{font-size:11px;color:#9eacb7}.saved-deck-actions{display:flex;gap:5px;flex-wrap:wrap}.saved-deck-actions button{padding:5px 8px;font-size:11px}
/* TCG風対戦盤面（公式レイアウトのゾーン構成を参考にした独自UI） */
.tcg-board{max-width:1180px;margin:auto;border:8px solid #3a2a19;border-radius:20px;padding:14px;background:radial-gradient(circle at 50% 50%,#3e6b3d,#244727 65%,#17331d);box-shadow:inset 0 0 50px #0008,0 12px 35px #0008}.battle-half{padding:10px}.opponent-half{transform:none}.battle-meta{display:flex;justify-content:space-between;gap:10px;background:#15251ad9;border:1px solid #76906b;border-radius:8px;padding:7px 10px;margin:4px 0;color:#e9f2e5}.table-row{display:flex;gap:12px;align-items:center}.side-row{justify-content:center;margin:7px 0}.pile-zone{width:82px;height:108px;border:2px solid #d7c59a88;border-radius:8px;background:#162119aa;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 14px #0007}.pile-zone b{font-size:24px}.territory-zone{flex:1;min-width:0}.territory-cards{display:flex;justify-content:center;gap:5px;min-height:75px}.territory-card{width:50px;height:70px;border-radius:5px;border:2px solid #c9b078;background:repeating-linear-gradient(135deg,#162a20 0 6px,#263f2e 6px 12px);box-shadow:0 3px 6px #0008}.zone-label{display:block;text-align:center;font-size:11px;color:#e5d8b2;text-shadow:0 1px 2px #000;margin-bottom:3px}.field-zone,.food-zone,.hand-zone{border:1px solid #d7c59a55;border-radius:10px;padding:5px;background:#14251a55}.field-zone .field{min-height:170px;border:0;justify-content:center}.food-zone{margin:6px auto;max-width:900px}.food-cards{min-height:42px;display:flex;gap:5px;justify-content:center;flex-wrap:wrap}.food-cards .food{min-width:76px;text-align:center;border:1px solid #8a9b74}.center-line{height:30px;display:flex;align-items:center;justify-content:center;border-top:2px solid #d6b56b88;border-bottom:2px solid #d6b56b88;margin:5px -14px;background:#10251699}.center-line span{font-weight:900;letter-spacing:.5em;color:#d6b56b}.hand-zone{margin-top:7px;background:#101b14cc}.hand-zone .hand{border:0;justify-content:center}.tcg-board .card{background:linear-gradient(145deg,#f0e5c5,#bba978);color:#171b16;border:2px solid #4b3b24;box-shadow:0 5px 10px #0009}.tcg-board .card .type,.tcg-board .card .effect{color:#28342c}.tcg-board .card.playable{border-color:#ffe46b;box-shadow:0 0 0 3px #ffe46b88,0 5px 12px #0009}.tcg-board .card.attackable{border-color:#9dffad;box-shadow:0 0 0 3px #9dffad66,0 5px 12px #0009}.tcg-board .actions{justify-content:center}.log{max-width:1180px;margin-left:auto;margin-right:auto}@media(max-width:900px){.saved-deck-grid{grid-template-columns:1fr}.tcg-board{padding:6px;border-width:4px}.battle-half{padding:5px}.territory-card{width:34px;height:48px}.pile-zone{width:60px;height:82px}.tcg-board .card{width:118px}.battle-meta{font-size:11px;flex-wrap:wrap}}

/* 3カラム・1画面完結の対戦UI */
body.game-active{overflow:hidden}
body.game-active>header{display:none}
body.game-active main{max-width:none;margin:0;padding:0;height:100vh;overflow:hidden}
.game-screen{height:100vh;overflow:hidden}
.duel-layout{height:100vh;display:grid;grid-template-columns:240px minmax(620px,1fr) 250px;background:#09141b;overflow:hidden}
.card-inspector,.game-sidebar{min-width:0;background:linear-gradient(#0d2230,#081722);border-color:#315065;color:#eaf5fb;padding:10px;overflow:hidden}
.card-inspector{border-right:1px solid #315065}.game-sidebar{border-left:1px solid #315065;display:flex;flex-direction:column}
.side-title{font-weight:800;color:#e7c76f;border-bottom:1px solid #35566b;padding:5px 3px 8px;margin-bottom:8px}.log-title{margin-top:10px}
.duel-center{min-width:0;height:100vh;padding:7px;display:flex;align-items:stretch;justify-content:center;background:radial-gradient(circle,#16425a,#071923 75%);overflow:hidden}
.compact-board{width:100%;max-width:none;height:calc(100vh - 14px);margin:0;padding:6px 10px;border-width:5px;border-radius:10px;display:grid;grid-template-rows:minmax(0,1fr) 22px minmax(0,1.12fr);overflow:hidden}
.compact-board .battle-half{padding:3px 5px;min-height:0;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.compact-board .battle-meta{padding:3px 7px;margin:0;font-size:11px;min-height:24px}
.board-zone-row{display:grid;grid-template-columns:52px minmax(110px,.65fr) minmax(250px,1.5fr) 52px;gap:5px;align-items:center;min-height:56px}
.compact-board .pile-zone{width:52px;height:56px;font-size:9px}.compact-board .pile-zone b{font-size:15px}
.compact-board .food-zone,.compact-board .territory-zone{margin:0;padding:2px;max-width:none;min-width:0;border:1px solid #d7c59a44;border-radius:6px;background:#14251a55}
.compact-board .food-cards{min-height:34px;max-height:38px;overflow:hidden;flex-wrap:nowrap}.compact-board .food-cards .food{font-size:9px;min-width:44px;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compact-board .territory-cards{min-height:34px;gap:3px}.compact-board .territory-card{width:25px;height:34px;border-width:1px}
.compact-board .zone-label{font-size:9px;margin:0;line-height:11px}
.compact-board .field-zone{padding:2px;flex:1;min-height:0;overflow:hidden}.compact-board .field-zone .field{height:100%;min-height:0;padding:2px;gap:4px;flex-wrap:nowrap;align-items:center;justify-content:center;overflow:hidden}
.compact-board .center-line{height:22px;margin:0 -10px}.compact-board .center-line span{font-size:10px}
.compact-board .hand-zone{margin:0;padding:2px;min-height:0;height:100px;overflow:hidden}.compact-board .hand-zone .hand{height:84px;min-height:0;padding:2px;gap:3px;flex-wrap:nowrap;align-items:flex-end;overflow:hidden}
.compact-board .card{width:86px;min-width:70px;max-width:94px;min-height:100px;height:100%;max-height:122px;padding:3px;border-radius:5px;overflow:hidden}.compact-board .card .cost{width:16px;height:16px;font-size:9px;top:2px;left:2px}.compact-board .card .name{font-size:9px;padding:1px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-board .card .type{font-size:7px}.compact-board .card .art{font-size:20px;padding:3px 0}.compact-board .card .stats{font-size:7px}.compact-board .card .effect{font-size:6.5px;line-height:1.1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.compact-board .card .tag{font-size:7px}
.inspect-card-empty{color:#8ea6b5;font-size:12px;padding:12px 4px;line-height:1.6}.inspect-preview{border:2px solid #92773d;border-radius:8px;background:linear-gradient(145deg,#eee1bb,#b9a36d);color:#152018;padding:8px;box-shadow:0 6px 18px #0008}.inspect-preview .inspect-art{height:160px;display:grid;place-items:center;font-size:76px;background:#23392d22;border:1px solid #5d5139;margin:6px 0}.inspect-preview h3{font-size:15px;margin:0 0 5px}.inspect-meta{font-size:11px;font-weight:700}.inspect-stats{display:flex;justify-content:space-between;margin:7px 0;font-weight:800}.inspect-effect{font-size:11px;line-height:1.55;white-space:pre-wrap}.inspect-hint{font-size:10px;color:#9eb2bf;margin-top:8px}
.turn-panel{display:grid;grid-template-columns:1fr 1fr;gap:5px;font-size:11px}.turn-panel>div{background:#102633;border:1px solid #29495d;padding:6px;border-radius:5px}.phase-badge{color:#ffd86a;font-weight:800}.game-sidebar .notice{font-size:11px;margin-top:8px}.side-actions{display:grid;grid-template-columns:1fr;margin-top:8px}.side-actions button{font-size:11px;padding:7px}.side-log{flex:1;min-height:0;overflow-y:auto;border:1px solid #29495d;background:#07131b;padding:7px;border-radius:5px;font-size:10px;line-height:1.45}.side-log div{padding:4px 2px;border-bottom:1px solid #18313f;color:#bfd0da}
@media(max-width:1050px){.duel-layout{grid-template-columns:180px minmax(520px,1fr) 190px}.compact-board .card{width:72px}.inspect-preview .inspect-art{height:120px;font-size:58px}}

/* 盤面カードを一段大きく、手札を扇状、エサをカード画像風に表示 */
.compact-board .field-zone .card{width:108px;min-width:88px;max-width:118px;min-height:126px;max-height:142px;padding:4px}
.compact-board .field-zone .card .art{font-size:29px;padding:5px 0}
.compact-board .field-zone .card .name{font-size:10px}
.compact-board .field-zone .card .effect{font-size:7.5px;-webkit-line-clamp:4}
.compact-board .field-zone .card .stats{font-size:8px}

.compact-board .hand-zone{height:126px;overflow:visible;padding-top:3px}
.compact-board .hand-zone .hand{position:relative;height:116px;overflow:visible;display:flex;justify-content:center;align-items:flex-end;gap:0;padding:0 18px}
.compact-board .hand-zone .hand .hand-card{width:102px;min-width:102px;height:122px;max-height:122px;margin-left:-24px;transform-origin:50% 135%;transform:translateY(var(--fan-lift)) rotate(var(--fan-angle));z-index:var(--fan-z);transition:transform .16s ease,z-index .16s ease,filter .16s ease}
.compact-board .hand-zone .hand .hand-card:first-child{margin-left:0}
.compact-board .hand-zone .hand .hand-card:hover{transform:translateY(-20px) rotate(0deg) scale(1.12);z-index:100!important;filter:brightness(1.08)}

.compact-board .food-cards{height:54px;min-height:54px;max-height:54px;overflow:visible;display:flex;justify-content:center;align-items:center;gap:3px}
.food-card-visual{position:relative;width:42px;height:54px;flex:0 0 42px;border:1px solid #5c492b;border-radius:4px;background:linear-gradient(145deg,#eee0b9,#b59d68);color:#172017;box-shadow:0 2px 5px #0009;padding:2px;overflow:hidden;transform:none;transform-origin:center}
.food-card-visual .food-cost{position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;display:grid;place-items:center;background:#b78b3d;font-size:6px;font-weight:900}
.food-card-visual .food-name{font-size:6px;font-weight:900;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:8px}
.food-card-visual .food-art{height:28px;display:grid;place-items:center;font-size:17px;background:#263c2c22;margin-top:1px}
.food-card-visual .food-meta{font-size:4.8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 大きくしても1画面に収めるため、フィールド領域の比率を維持 */
.compact-board .field-zone .field{overflow:visible}
@media(max-width:1200px){.compact-board .field-zone .card{width:94px;min-width:80px}.compact-board .hand-zone .hand .hand-card{width:88px;min-width:88px;margin-left:-22px}}
\n/* perspective board update */
.cost-caption{font-size:8px;color:#c9d5ca;margin-left:2px}
.duel-center{perspective:1100px;overflow:hidden}
.compact-board{transform:perspective(1100px) rotateX(4deg);transform-origin:50% 72%;height:calc(100vh - 10px);grid-template-rows:minmax(0,.82fr) 20px minmax(0,1.28fr);background:radial-gradient(ellipse at 50% 82%,#52764a,#244727 56%,#142d1b 100%)}
.compact-board .opponent-half{transform:scale(.92);transform-origin:50% 0}
.compact-board .self-half{transform:scale(1.035);transform-origin:50% 100%;z-index:2}
.compact-board .self-half .field-zone .card{width:118px;min-width:96px;max-width:128px;min-height:136px;max-height:150px}
.compact-board .food-cards{height:60px;min-height:60px;max-height:60px;align-items:center}
.food-card-visual{width:43px;height:58px;flex:0 0 43px;transform:none!important}
.food-card-visual .food-art{height:31px;font-size:18px}
.card.playable{border-color:#ffe46b!important;box-shadow:0 0 0 3px #ffe46b88,0 5px 12px #0009!important}
.hand-card:not(.playable){filter:saturate(.72) brightness(.78)}
.hand-card.playable{filter:brightness(1.08)}
@media(max-width:1200px){.compact-board .self-half .field-zone .card{width:102px;min-width:86px}.compact-board{transform:perspective(1000px) rotateX(3deg)}}


/* 実カード画像表示 */
.art-image-wrap{display:grid;place-items:center;overflow:hidden}
.card-image,.food-image,.detail-thumb-image,.deck-mini-image,.summary-mini-image,.inspect-image{display:block;max-width:100%;max-height:100%;object-fit:contain}
.emoji-fallback,.backface{display:grid;place-items:center;width:100%;height:100%;font-weight:800}
.backface{background:radial-gradient(circle at 50% 50%,#532d16 0,#2b160d 55%,#140b07 100%);color:#e7c76f;font-size:11px;letter-spacing:.15em;border-radius:4px}
.card .art.card-image-wrap{padding:1px 0;height:58px}
.compact-board .field-zone .card .art.card-image-wrap{height:74px;background:#efe4c433;border:1px solid #604c2a;border-radius:3px}
.compact-board .hand-zone .hand .hand-card .art.card-image-wrap{height:68px;background:#efe4c433;border:1px solid #604c2a;border-radius:3px}
.food-card-visual{display:flex;flex-direction:column;justify-content:flex-start}
.food-card-visual .food-art{height:36px;background:#263c2c22;margin-top:2px;border:1px solid #5f512f;border-radius:2px;overflow:hidden}
.food-card-visual .food-image{width:100%;height:100%;object-fit:cover}
.inspect-preview .inspect-art{height:260px;padding:6px;background:#1b2a31;border:1px solid #4e6472;border-radius:6px;overflow:hidden}
.inspect-preview .inspect-image{width:100%;height:100%;object-fit:contain}
.detail-title{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.detail-head-left{display:flex;gap:10px;align-items:flex-start}
.detail-thumb{width:86px;height:120px;flex:0 0 86px;border:1px solid #5a6880;background:#0b1520;border-radius:6px;padding:4px}
.detail-thumb-image{width:100%;height:100%;object-fit:contain}
.detail-emoji{display:none}
.deck-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:8px;align-items:center}
.deck-mini{width:44px;height:60px;border:1px solid #6c7280;border-radius:4px;padding:2px;background:#121923}
.deck-mini-image{width:100%;height:100%;object-fit:contain}
.summary-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:center}
.summary-mini{width:40px;height:56px;border:1px solid #6c7280;border-radius:4px;padding:2px;background:#121923}.summary-mini-image{width:100%;height:100%;object-fit:contain}
@media(max-width:1050px){.detail-thumb{width:68px;height:96px;flex-basis:68px}.inspect-preview .inspect-art{height:180px}}


/* 2026-09-26: 手札・場・エサ場はカード画像のみ。強化カードは対象虫の脇に重ねて表示 */
.image-only-card{position:relative!important;padding:0!important;background:transparent!important;border:2px solid transparent!important;overflow:visible!important;box-shadow:none!important;aspect-ratio:5/7;min-height:0!important;height:auto!important}
.image-only-card .image-card-shell{width:100%;height:100%;overflow:hidden;border-radius:6px;box-shadow:0 5px 12px #000a;background:#151515}
.image-only-card .card-image{width:100%;height:100%;object-fit:cover;display:block}
.image-only-card>.cost,.image-only-card>.name,.image-only-card>.type,.image-only-card>.art,.image-only-card>.stats,.image-only-card>.effect{display:none!important}
.image-only-card.playable .image-card-shell{outline:3px solid #ffe46b;box-shadow:0 0 14px #ffe46bbb,0 5px 12px #000a}
.image-only-card.attackable .image-card-shell{outline:3px solid #68bfff;box-shadow:0 0 14px #68bfff99,0 5px 12px #000a}
.image-only-card.playable.attackable .image-card-shell{outline-color:#ffe46b}
.image-only-card .tag{position:absolute;left:4px;bottom:4px;z-index:20;background:#101820dd;color:#fff;padding:2px 4px;border-radius:3px;font-size:8px}

/* 強化カードは付与先の虫カードの右下に階段状に差し込む */
.attached-enhances{position:absolute;inset:0;pointer-events:none;z-index:-1}
.attached-enhance{--dx:calc(15px + var(--enhance-i)*13px);--dy:calc(12px + var(--enhance-i)*8px);position:absolute;right:calc(-1 * var(--dx));bottom:calc(-1 * var(--dy));width:46%;aspect-ratio:5/7;border:2px solid #f5cf5d;border-radius:4px;background:#17120b;box-shadow:0 3px 8px #000c;overflow:hidden;pointer-events:auto;z-index:calc(-1 - var(--enhance-i));transform:rotate(calc(3deg + var(--enhance-i)*2deg));transition:transform .15s ease,filter .15s ease}
.attached-enhance img{width:100%;height:100%;object-fit:cover;display:block}
.attached-enhance span{display:grid;place-items:center;width:100%;height:100%;font-weight:900;color:#f5cf5d}
.attached-enhance:hover{transform:translate(8px,-7px) rotate(0) scale(1.18);filter:brightness(1.1);z-index:30}
.compact-board .field-zone .field{gap:32px!important;padding-right:34px!important}
.compact-board .field-zone .image-only-card{width:112px!important;min-width:92px!important;max-width:120px!important}
.compact-board .self-half .field-zone .image-only-card{width:124px!important;min-width:102px!important;max-width:132px!important}

/* 手札も画像だけ。扇状表示は維持 */
.compact-board .hand-zone .hand .image-only-card{width:102px!important;min-width:102px!important;height:auto!important;max-height:none!important}
.compact-board .hand-zone .hand .image-only-card .image-card-shell{height:auto;aspect-ratio:5/7}

/* エサ場も画像だけ、縦向き */
.food-card-visual.image-only-food{width:43px!important;height:60px!important;flex:0 0 43px!important;padding:0!important;border:1px solid #8f793e!important;border-radius:4px!important;background:#151515!important;box-shadow:0 2px 6px #000a!important;overflow:hidden!important;transform:none!important}
.food-card-visual.image-only-food .food-image{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
.food-card-visual.image-only-food .food-cost,.food-card-visual.image-only-food .food-name,.food-card-visual.image-only-food .food-art,.food-card-visual.image-only-food .food-meta{display:none!important}

@media(max-width:1200px){
  .compact-board .field-zone .image-only-card{width:98px!important;min-width:84px!important}
  .compact-board .self-half .field-zone .image-only-card{width:108px!important;min-width:90px!important}
  .attached-enhance{width:43%}
}


/* 2026-09-26 修正: 視認性改善と捨て札確認 */
body{font-size:16px}
header h1{font-size:30px} header p{font-size:15px}
.notice,.screen-help,.battle-meta,.turn-panel,.side-log,.menu-card span,.saved-decks-head p{font-size:14px}
.side-title{font-size:18px}
.zone-label{font-size:13px}
.pile-zone span{font-size:13px}.pile-zone b{font-size:26px}
.phase-badge{font-size:16px}
.actions.side-actions button{font-size:15px;padding:10px 12px}
.image-only-card .image-card-shell{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:6px;box-shadow:0 5px 12px #000a;background:#0d1114}
.image-only-card .card-image{width:100%;height:100%;object-fit:contain;display:block;background:#0d1114}
.food-card-visual.image-only-food{width:46px!important;height:64px!important;flex:0 0 46px!important}
.food-card-visual.image-only-food .food-image{width:100%!important;height:100%!important;object-fit:contain!important;background:#0d1114}
.compact-board .field-zone .image-only-card{width:116px!important;min-width:96px!important;max-width:124px!important}
.compact-board .self-half .field-zone .image-only-card{width:130px!important;min-width:108px!important;max-width:138px!important}
.compact-board .hand-zone .hand .image-only-card{width:106px!important;min-width:106px!important}
.compact-board .field-zone .field{gap:34px!important;padding-right:36px!important}
#selfDiscardZone,#oppDiscardZone{cursor:pointer;transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease}
#selfDiscardZone:hover,#oppDiscardZone:hover{transform:translateY(-1px);border-color:#ffe189;box-shadow:0 0 0 2px #ffe18944,inset 0 0 14px #0007}
.discard-modal-box{max-width:980px}
.discard-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;margin-top:12px}
.discard-item{display:flex;flex-direction:column;gap:6px;align-items:center;background:#111920;border:1px solid #3d4d58;border-radius:10px;padding:8px;min-height:210px}
.discard-item:hover{border-color:#e2c15b;transform:translateY(-2px)}
.discard-item-image{width:100%;aspect-ratio:5/7;border-radius:6px;overflow:hidden;background:#0d1114;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px #0008}
.discard-image{width:100%;height:100%;object-fit:contain;background:#0d1114}
.discard-item span{font-size:13px;line-height:1.35;text-align:center}
.inspect-preview h3{font-size:18px}.inspect-meta{font-size:13px}.inspect-stats{font-size:15px}.inspect-effect{font-size:13px}
.inspect-section{margin-top:10px}
.inspect-section-title{font-weight:800;color:#273622;background:#dbc686;padding:5px 8px;border-radius:6px;margin-bottom:6px;font-size:13px}
.inspect-effect-block{background:#f4ecd2;border-left:4px solid #8a6f2e;border-radius:6px;padding:8px 10px;margin:6px 0;color:#182117}
.inspect-effect-block.ability{border-left-color:#d48d2a}
.inspect-effect-block p{margin:4px 0 0;white-space:pre-wrap;line-height:1.55;font-size:13px}
.inspect-effect-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;font-size:13px}
.inspect-effect-head strong{color:#7a5b17}
.inspect-attached-list{display:flex;flex-direction:column;gap:8px}
.inspect-attached-item{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;align-items:flex-start;background:#f4ecd2;border-radius:8px;padding:8px;color:#182117}
.inspect-attached-thumb{width:62px;height:86px;border:1px solid #7b6b50;border-radius:6px;overflow:hidden;background:#0d1114;display:flex;align-items:center;justify-content:center}
.inspect-attached-image{width:100%;height:100%;object-fit:contain;background:#0d1114}
.inspect-attached-body b{display:block;font-size:14px;margin-bottom:3px}
.inspect-attached-meta{font-size:12px;color:#47513a;margin-bottom:4px}
.inspect-attached-text{font-size:13px;line-height:1.5;white-space:pre-wrap}
@media(max-width:1200px){
  .compact-board .field-zone .image-only-card{width:102px!important;min-width:88px!important}
  .compact-board .self-half .field-zone .image-only-card{width:114px!important;min-width:96px!important}
  .compact-board .hand-zone .hand .image-only-card{width:94px!important;min-width:94px!important}
  .discard-list{grid-template-columns:repeat(auto-fill,minmax(116px,1fr))}
}


/* v5: 技選択のダメージ表示 / 手札右端の大型コスト表示 */
.skill-choice{display:block;width:100%;max-width:none;text-align:left;margin:8px 0;padding:12px 14px;background:#17252e;border:1px solid #526b78;border-radius:10px}
.skill-choice:hover{border-color:#e6c768;background:#1d303b}
.skill-choice-head{display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:16px}
.skill-choice-head strong{color:#ffd768;font-size:18px;white-space:nowrap}
.skill-calc{margin-top:7px;padding:6px 8px;border-radius:6px;background:#0e171d;color:#bcd1dc;font-size:13px;line-height:1.45}
.skill-effect{margin-top:7px;color:#eef5f8;font-size:14px;line-height:1.55;white-space:pre-wrap}
.skill-effect.muted{color:#8fa4ae}
.skill-note{margin-top:6px;color:#91a7b1;font-size:11px}
.self-player-meta{justify-content:flex-start!important;min-height:24px!important}
.hand-zone-with-cost{position:relative;padding-right:132px!important}
.hand-zone-with-cost .hand{padding-right:8px!important}
.hand-cost-panel{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:116px;min-height:84px;border:2px solid #e7c86b;border-radius:12px;background:linear-gradient(145deg,#162c20,#0e1d15);box-shadow:0 0 16px #0008,inset 0 0 16px #e7c86b18;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:40;color:#fff}
.hand-cost-panel span{font-size:16px;font-weight:800;letter-spacing:.05em;color:#e7c86b}
.hand-cost-panel b{font-size:32px;line-height:1.05;margin:3px 0}
.hand-cost-panel small{font-size:11px;color:#b9c9be}
@media(max-width:1200px){.hand-zone-with-cost{padding-right:112px!important}.hand-cost-panel{width:98px;min-height:76px}.hand-cost-panel b{font-size:27px}.hand-cost-panel span{font-size:14px}}


/* v6: 色選択ボタン / 継続効果ステータス */
.color-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:12px;margin:14px 0}
.color-choice{display:flex;align-items:center;justify-content:center;gap:10px;min-height:72px;font-size:20px;font-weight:900;border-width:2px}
.color-choice .color-dot{width:30px;height:30px;border-radius:50%;border:3px solid #fff8;box-shadow:0 2px 8px #0008}
.color-choice.color-赤{background:#5b1d20;border-color:#e65d65}.color-choice.color-赤 .color-dot{background:#db3038}
.color-choice.color-青{background:#153b61;border-color:#5aa2eb}.color-choice.color-青 .color-dot{background:#2d83dc}
.color-choice.color-緑{background:#1c5430;border-color:#6dc68a}.color-choice.color-緑 .color-dot{background:#38a95e}
.color-choice:hover{filter:brightness(1.16);transform:translateY(-2px)}
.effect-status-badges{position:absolute;left:4px;top:4px;z-index:35;display:flex;flex-direction:column;align-items:flex-start;gap:3px;pointer-events:none}
.status-badge{display:inline-flex;align-items:center;min-height:18px;padding:2px 5px;border-radius:5px;border:1px solid #fff7;background:#111d;color:#fff;font-size:10px;font-weight:900;line-height:1.15;box-shadow:0 2px 5px #000a;text-shadow:0 1px 2px #000}
.status-badge.camouflage{background:#435a2ee8;border-color:#b4ec7c}.status-badge.debuff{background:#76292de8;border-color:#ff8d94}.status-badge.buff{background:#1d5977e8;border-color:#78ccf3}.status-badge.colorchange{background:#604677e8;border-color:#d9a7ff}.status-badge.enhanced{background:#79601de8;border-color:#ffe078}.status-badge.facedown{background:#30343ae8;border-color:#cbd1d8}
@media(max-width:1050px){.color-choice-grid{grid-template-columns:1fr}.color-choice{min-height:54px}.status-badge{font-size:9px;padding:2px 4px}}


/* v9: 3-column deck editor inspired by the attached reference layout */
.deck-edit-screen{max-width:none!important;background:linear-gradient(135deg,#eefcff,#dff3f7)!important;color:#29343c;border:0!important;border-radius:0!important;min-height:calc(100vh - 80px);padding:14px!important}
.deck-edit-screen .screen-help{color:#667780}.deck-edit-screen button{background:#eaf4f7;color:#26333a;border-color:#91aab5}.deck-edit-screen button.primary{background:#547f8d;color:#fff}.deck-edit-head{margin-bottom:8px}.deck-edit-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;margin-bottom:10px;background:#ffffffc9;border:1px solid #acc4cd;border-radius:8px;box-shadow:0 2px 7px #58727c22}.deck-edit-toolbar input{background:#fff;color:#26333a;border-color:#9db2bb}.deck-edit-buttons{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.deck-edit-buttons button{padding:7px 10px;font-size:13px}.deck-editor-layout{display:grid;grid-template-columns:250px minmax(430px,1fr) minmax(360px,.9fr);gap:10px;align-items:stretch;height:660px}.deck-panel{background:#ffffffd9;border:2px solid #9fb9c3;border-radius:10px;box-shadow:0 4px 12px #49646e2a;min-width:0;overflow:hidden}.deck-panel-title{font-size:17px;font-weight:900;color:#4b5b64}.deck-panel-head{height:45px;padding:9px 12px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#f9feff,#dcebf0);border-bottom:1px solid #a9bec7}.deck-editor-left{display:grid;grid-template-rows:minmax(0,1fr) 215px;gap:10px;min-height:0}.deck-detail-panel{padding:10px;overflow:auto}.deck-detail-panel>.deck-panel-title{padding-bottom:8px;border-bottom:1px solid #b8c9cf;margin-bottom:8px}.game-like-detail{margin:0!important;padding:0!important;background:transparent!important;border:0!important;color:#27343a;min-height:0!important}.deck-detail-card-image{height:300px;display:flex;align-items:center;justify-content:center;background:#d8e7eb;border-radius:8px;padding:8px;border:1px solid #a9bcc3}.deck-detail-image{width:100%;height:100%;object-fit:contain}.deck-detail-name h3{font-size:18px;margin:8px 0 2px}.deck-detail-name span{font-size:12px;color:#64767e}.deck-detail-base{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.deck-detail-base span{background:#e7f0f3;border:1px solid #bfd0d6;padding:5px 8px;border-radius:6px;font-size:12px}.deck-detail-effects{font-size:12px}.deck-detail-effect{background:#edf4f6;border-left:4px solid #6e8c97;padding:7px 8px;border-radius:5px;margin:6px 0}.deck-detail-effect.ability{border-left-color:#b18945}.deck-detail-effect-head{display:flex;justify-content:space-between;gap:8px}.deck-detail-effect p{margin:4px 0 0;line-height:1.45}.deck-stats-panel{padding:10px}.deck-stats-panel>.deck-panel-title{padding-bottom:8px;border-bottom:1px solid #b8c9cf}.deck-total-line{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;font-size:14px}.deck-total-line strong{font-size:20px}.deck-type-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px}.deck-stat-row{display:flex;justify-content:space-between;background:#e8f1f4;border:1px solid #c1d2d8;border-radius:6px;padding:7px 9px;font-size:13px}.deck-stat-row b{font-size:16px}.deck-stat-divider{grid-column:1/-1;height:1px;background:#b7c9cf;margin:2px 0}.color-red{border-left:5px solid #c95151}.color-blue{border-left:5px solid #4c78c8}.color-green{border-left:5px solid #54a36d}.deck-current-panel,.deck-pool-panel{display:flex;flex-direction:column;min-height:0}.deck-current-grid{flex:1;padding:10px;display:grid;grid-template-columns:repeat(5,minmax(58px,1fr));grid-auto-rows:minmax(108px,1fr);gap:7px;overflow:auto;align-content:start;background:#f6fbfc}.deck-current-grid.complete{box-shadow:inset 0 0 0 3px #69a878}.deck-empty-slot{border:2px dashed #c4d2d7;border-radius:7px;background:#eaf2f4}.deck-image-tile{position:relative;padding:0!important;background:transparent!important;border:0!important;border-radius:6px!important;min-width:0;overflow:visible}.deck-image-wrap{width:100%;height:100%;min-height:100px;display:flex;align-items:center;justify-content:center;background:#c9dadd;border:1px solid #91a7af;border-radius:6px;overflow:hidden;box-shadow:0 2px 6px #48626e44}.deck-editor-card-image{width:100%;height:100%;object-fit:contain;background:#e5eef1}.deck-image-tile:hover .deck-image-wrap{outline:3px solid #f2c957;transform:translateY(-2px)}.deck-tile-qty{position:absolute;right:3px;bottom:3px;background:#26343ddd;color:#fff;border-radius:5px;padding:2px 5px;font-weight:900;font-size:12px;box-shadow:0 1px 3px #0006}.deck-image-tile.unavailable{opacity:.36;filter:grayscale(.35)}.deck-pool-panel .deck-filters{margin:0;padding:7px 8px;border-radius:0;background:#e6f0f3;border-bottom:1px solid #b5c8cf}.deck-pool-panel .filter-btn{padding:4px 7px;font-size:11px;background:#fff;color:#34454c}.deck-pool-panel .filter-btn.active{background:#668b96;color:#fff;border-color:#557783}.owned-card-grid{flex:1;overflow:auto;padding:10px;display:grid;grid-template-columns:repeat(5,minmax(54px,1fr));grid-auto-rows:138px;gap:7px;align-content:start;background:#f6fbfc}.owned-card-grid .deck-image-wrap{min-height:0}.compact-saved-decks{margin:10px 0 0!important;background:#ffffffc9!important;border-color:#abc2cb!important;color:#2c3940}.compact-saved-decks .saved-deck{background:#eef5f7;color:#26333a;border-color:#b7cbd2}.compact-saved-decks .saved-deck p{color:#6a7a81}.compact-saved-decks .saved-deck-actions button{background:#fff;color:#26333a}.deck-edit-screen .detail-empty{color:#6d7c83}
@media(max-width:1200px){.deck-editor-layout{grid-template-columns:220px minmax(380px,1fr) minmax(310px,.85fr);height:610px}.deck-current-grid{grid-template-columns:repeat(4,minmax(60px,1fr))}.owned-card-grid{grid-template-columns:repeat(4,minmax(58px,1fr));grid-auto-rows:132px}.deck-detail-card-image{height:255px}}
@media(max-width:900px){.deck-editor-layout{display:block;height:auto}.deck-editor-left{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:none;margin-bottom:10px}.deck-panel{margin-bottom:10px}.deck-current-grid,.owned-card-grid{min-height:420px}.deck-current-grid{grid-template-columns:repeat(4,1fr)}.owned-card-grid{grid-template-columns:repeat(4,1fr)}.deck-edit-toolbar{align-items:flex-start;flex-direction:column}}


/* v10: headerless app / deck chooser / one-screen deck editor */
body{overflow:hidden}
body>header{display:none!important}
main{max-width:none!important;width:100%;height:100vh;margin:0!important;padding:0!important;overflow:hidden}
.app-screen{height:100vh;max-height:100vh;overflow:hidden;border-radius:0!important}
#menu{padding:28px!important}
.deck-hub-screen{padding:0!important;background:linear-gradient(rgba(5,15,25,.80),rgba(5,15,25,.90)),radial-gradient(circle at 50% 40%,#1a4961,#07111c 72%)!important;color:#fff;border:0!important}
.deck-hub-topbar{height:56px;display:flex;align-items:center;gap:14px;padding:8px 14px;border-bottom:1px solid #40566a;background:#07131ecc}
.deck-hub-topbar h2{margin:0;color:#f1c85a;font-size:20px}
.deck-hub-topbar button{margin-left:auto;background:#1b2630;border-color:#8a7444}
.deck-hub-content{height:calc(100vh - 56px);padding:14px;display:flex;align-items:flex-start;gap:12px;overflow-x:auto;overflow-y:hidden;background:linear-gradient(180deg,#081421aa,#0a1824dd)}
.deck-hub-list{display:flex;gap:12px;align-items:flex-start;min-width:max-content}
.deck-select-card{width:150px;height:196px;flex:0 0 150px;border:2px solid #a8873a!important;border-radius:10px!important;background:linear-gradient(#18222e,#0c1219)!important;color:#fff!important;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:8px!important;box-shadow:0 4px 12px #0008;position:relative;text-align:center}
.deck-select-card:hover{transform:translateY(-3px);box-shadow:0 7px 18px #000b,0 0 0 2px #e0bf61}
.new-deck-card{border-style:dashed!important;justify-content:center}
.deck-select-plus{font-size:50px;color:#f4d578;line-height:1;margin-bottom:8px}
.deck-select-card>b{font-size:14px;margin-top:5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-select-card>span{font-size:11px;color:#b6c2ca;margin-top:4px}
.deck-select-cover{width:100%;height:108px;border-radius:6px;overflow:hidden;background:#101820;display:grid;place-items:center}
.deck-select-cover img{width:100%;height:100%;object-fit:contain}
.deck-select-cover-empty{font-size:40px;color:#8ea0aa}
.deck-select-actions{display:flex;gap:4px;margin-top:auto;width:100%}.deck-select-actions button{flex:1;padding:4px 2px;font-size:10px;background:#253441;border-color:#6d7e88}
.deck-hub-empty{align-self:center;color:#b5c4cc;padding:18px}

.deck-edit-screen{height:100vh!important;min-height:0!important;max-height:100vh!important;overflow:hidden!important;padding:8px!important;display:flex;flex-direction:column}
.deck-edit-head{flex:0 0 42px;margin:0 0 5px!important;align-items:center}.deck-edit-head h2{font-size:22px;margin:0}.deck-edit-head .screen-help{display:none}
.deck-edit-toolbar{flex:0 0 44px;margin:0 0 6px!important;padding:5px 8px!important}.deck-edit-toolbar input{padding:5px 7px}.deck-edit-buttons button{padding:5px 8px!important;font-size:12px!important}
.deck-editor-layout{flex:1;min-height:0;height:auto!important;grid-template-columns:238px minmax(430px,1fr) minmax(360px,.9fr);gap:7px!important}
.deck-editor-left{grid-template-rows:minmax(0,1fr) 180px;gap:7px!important}
.deck-detail-panel{padding:7px!important}.deck-detail-panel>.deck-panel-title{padding-bottom:5px!important;margin-bottom:5px!important;font-size:15px}
.deck-detail-card-image{height:min(29vh,235px)!important;padding:4px!important}.deck-detail-name h3{font-size:16px!important;margin:5px 0 1px!important}.deck-detail-base{margin:4px 0!important}.deck-detail-base span{padding:3px 6px!important;font-size:11px!important}.deck-detail-effect{padding:5px 7px!important;margin:4px 0!important}.deck-detail-effects{font-size:11px!important}.deck-detail-effect p{line-height:1.3!important;margin-top:2px!important}
.deck-stats-panel{padding:7px!important}.deck-stats-panel>.deck-panel-title{padding-bottom:5px!important;font-size:15px}.deck-total-line{padding:5px 3px!important}.deck-type-stats{gap:4px!important}.deck-stat-row{padding:4px 6px!important;font-size:11px!important}.deck-stat-row b{font-size:13px!important}
.deck-panel-head{height:38px!important;padding:6px 9px!important}.deck-panel-title{font-size:15px!important}
.deck-current-grid{padding:6px!important;gap:5px!important;grid-template-columns:repeat(5,minmax(52px,1fr));grid-auto-rows:minmax(88px,1fr);overflow:hidden!important}
.deck-image-wrap{min-height:76px!important}.deck-tile-qty{font-size:10px!important;padding:1px 4px!important}
.deck-pool-panel .deck-filters{padding:4px 6px!important}.deck-pool-panel .filter-btn{padding:3px 5px!important;font-size:10px!important}.filter-label{font-size:10px!important}.owned-card-grid{padding:6px!important;gap:5px!important;grid-template-columns:repeat(5,minmax(50px,1fr));grid-auto-rows:minmax(94px,1fr);overflow-y:auto!important}
.compact-saved-decks{display:none!important}
@media(max-width:1200px){.deck-editor-layout{grid-template-columns:210px minmax(360px,1fr) minmax(300px,.85fr)!important}.deck-current-grid{grid-template-columns:repeat(5,minmax(48px,1fr))!important}.owned-card-grid{grid-template-columns:repeat(4,minmax(52px,1fr))!important}.deck-detail-card-image{height:min(26vh,205px)!important}}


/* v11: deck composition panel - type counts and cost graph */
.deck-stats-panel{overflow:hidden}
.deck-total-line{border-bottom:1px solid #c3d0d5;margin-bottom:5px}
.deck-type-stats{display:flex!important;flex-direction:column;gap:7px!important;min-height:0}
.deck-breakdown-types{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.deck-type-count{display:flex;align-items:center;justify-content:center;gap:4px;background:#edf4f6;border:1px solid #c1d2d8;border-radius:7px;padding:5px 3px;min-width:0}
.deck-type-count b{font-size:15px;color:#26343b;white-space:nowrap}
.deck-type-icon{display:inline-grid;place-items:center;min-width:34px;height:25px;border-radius:6px;font-size:12px;font-weight:900;color:#fff;box-shadow:inset 0 0 0 1px #ffffff55}
.insect-icon{background:linear-gradient(145deg,#4d8765,#315c45)}
.spell-icon{background:linear-gradient(145deg,#5d7da8,#405f88)}
.enhance-icon{background:linear-gradient(145deg,#9a7743,#6e522c)}
.deck-cost-chart{display:flex;flex-direction:column;gap:3px;padding:2px 1px 0}
.deck-cost-row{display:grid;grid-template-columns:22px minmax(0,1fr) 20px;align-items:center;gap:5px;min-height:16px}
.deck-cost-label{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#f7fafb;border:1px solid #aebdc3;color:#33434a;font-weight:900;font-size:12px}
.deck-cost-track{height:9px;border-radius:5px;background:#d5dfe3;overflow:hidden;box-shadow:inset 0 1px 2px #87979d55}
.deck-cost-fill{height:100%;width:var(--cost-width);min-width:0;background:linear-gradient(90deg,#f0bd43,#d69025);border-radius:5px;transition:width .15s ease}
.deck-cost-row b{text-align:right;font-size:13px;color:#33434a}
@media(max-width:1200px){.deck-type-icon{min-width:29px;font-size:11px}.deck-type-count b{font-size:13px}.deck-cost-row{min-height:14px}.deck-cost-label{width:20px;height:20px;font-size:11px}}


/* v12: deck breakdown layout modeled on the supplied reference */
.deck-stats-panel{
  display:flex!important;
  flex-direction:column;
  min-height:0;
}
.deck-stats-panel .deck-panel-title{
  flex:0 0 auto;
}
.deck-type-stats{
  display:grid!important;
  grid-template-columns:minmax(92px,.72fr) minmax(120px,1.28fr);
  gap:10px!important;
  align-items:center;
  flex:1;
  min-height:0;
  padding:8px 4px 4px;
}
.deck-breakdown-types{
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  min-width:0;
}
.deck-type-count{
  display:grid!important;
  grid-template-columns:minmax(48px,1fr) auto;
  align-items:center;
  justify-content:stretch!important;
  gap:8px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:2px 1px!important;
}
.deck-type-count b{
  font-size:18px!important;
  color:#26343b;
  min-width:34px;
  text-align:left;
}
.deck-type-icon{
  min-width:50px!important;
  height:29px!important;
  border-radius:7px!important;
  font-size:14px!important;
  justify-self:start;
}
.deck-cost-chart{
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  gap:5px!important;
  padding:0!important;
  min-width:0;
}
.deck-cost-row{
  display:grid!important;
  grid-template-columns:25px minmax(0,1fr) 24px!important;
  align-items:center;
  gap:6px!important;
  min-height:24px!important;
}
.deck-cost-label{
  width:24px!important;
  height:24px!important;
  font-size:13px!important;
}
.deck-cost-track{
  height:11px!important;
}
.deck-cost-row b{
  font-size:14px!important;
}
@media(max-width:1200px){
  .deck-type-stats{
    grid-template-columns:minmax(82px,.7fr) minmax(108px,1.3fr);
    gap:7px!important;
    padding:5px 2px 2px;
  }
  .deck-breakdown-types{gap:7px}
  .deck-type-icon{min-width:44px!important;height:25px!important;font-size:12px!important}
  .deck-type-count b{font-size:15px!important}
  .deck-cost-row{grid-template-columns:22px minmax(0,1fr) 20px!important;gap:4px!important;min-height:20px!important}
  .deck-cost-label{width:21px!important;height:21px!important;font-size:11px!important}
  .deck-cost-track{height:9px!important}
  .deck-cost-row b{font-size:12px!important}
}


/* v13: larger deck-detail text + prevent deck-breakdown clipping */

/* Give the breakdown panel enough vertical room while keeping the page itself one-screen. */
.deck-editor-left{
  grid-template-rows:minmax(0,1fr) 218px!important;
}

/* Card detail text: slightly larger and easier to read. */
.deck-detail-panel>.deck-panel-title{
  font-size:17px!important;
}
.deck-detail-name h3{
  font-size:19px!important;
  line-height:1.25!important;
}
.deck-detail-name span{
  font-size:13px!important;
}
.deck-detail-base span{
  font-size:13px!important;
  padding:4px 7px!important;
}
.deck-detail-effects{
  font-size:13px!important;
}
.deck-detail-effect{
  padding:7px 9px!important;
  margin:6px 0!important;
}
.deck-detail-effect-head{
  font-size:13px!important;
}
.deck-detail-effect p{
  font-size:13px!important;
  line-height:1.45!important;
  margin-top:4px!important;
}

/* Slightly reduce preview height so the larger text still fits comfortably. */
.deck-detail-card-image{
  height:min(26vh,215px)!important;
}

/* Deck breakdown: fit the reference-style vertical layout without clipping. */
.deck-stats-panel{
  overflow:visible!important;
  padding:7px 8px!important;
}
.deck-stats-panel>.deck-panel-title{
  font-size:16px!important;
  padding-bottom:4px!important;
}
.deck-type-stats{
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  grid-template-columns:minmax(90px,.72fr) minmax(118px,1.28fr)!important;
  gap:8px!important;
  padding:5px 2px 1px!important;
}
.deck-breakdown-types{
  gap:7px!important;
}
.deck-type-count{
  min-height:27px!important;
}
.deck-type-icon{
  min-width:46px!important;
  height:26px!important;
  font-size:13px!important;
}
.deck-type-count b{
  font-size:16px!important;
}
.deck-cost-chart{
  gap:3px!important;
}
.deck-cost-row{
  grid-template-columns:23px minmax(0,1fr) 22px!important;
  gap:5px!important;
  min-height:20px!important;
}
.deck-cost-label{
  width:21px!important;
  height:21px!important;
  font-size:12px!important;
}
.deck-cost-track{
  height:9px!important;
}
.deck-cost-row b{
  font-size:13px!important;
}

@media(max-width:1200px){
  .deck-editor-left{
    grid-template-rows:minmax(0,1fr) 210px!important;
  }
  .deck-detail-name h3{font-size:17px!important}
  .deck-detail-name span,
  .deck-detail-base span,
  .deck-detail-effects,
  .deck-detail-effect p{font-size:12px!important}
  .deck-detail-card-image{height:min(23vh,190px)!important}
  .deck-type-stats{
    grid-template-columns:minmax(80px,.7fr) minmax(104px,1.3fr)!important;
    gap:6px!important;
  }
  .deck-type-icon{min-width:41px!important;height:24px!important;font-size:11px!important}
  .deck-type-count b{font-size:14px!important}
  .deck-cost-row{
    grid-template-columns:21px minmax(0,1fr) 19px!important;
    gap:4px!important;
    min-height:18px!important;
  }
  .deck-cost-label{width:19px!important;height:19px!important;font-size:10px!important}
  .deck-cost-row b{font-size:11px!important}
}

.saved-deck.incomplete{border-color:#8b7045}
.saved-deck.incomplete p{color:#e0b86c;font-weight:700}


/* v15: current deck sort controls and no quantity badge on current deck */
.deck-current-head-actions{display:flex;align-items:center;gap:10px;min-width:0}
.deck-current-head-actions label{display:flex;align-items:center;gap:5px;font-size:12px;color:#54656d;white-space:nowrap}
.deck-current-head-actions select{padding:4px 7px;background:#fff;color:#26333a;border:1px solid #9fb5be;border-radius:6px;font-size:12px;max-width:120px}
.deck-image-tile.deck .deck-tile-qty{display:none!important}
@media(max-width:1200px){.deck-current-head-actions{gap:6px}.deck-current-head-actions label{font-size:11px}.deck-current-head-actions select{font-size:11px;max-width:100px;padding:3px 5px}}


/* v16: deck-list cover cleanup */
.deck-select-card.saved-deck-card{
  padding:0!important;
  overflow:hidden;
}
.deck-select-card.saved-deck-card .deck-select-cover{
  width:100%!important;
  height:124px!important;
  border-radius:0!important;
  margin:0!important;
  background:#0b1015!important;
}
.deck-select-card.saved-deck-card .deck-select-cover img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  /* Crop away most of the card-name/cost strip and prioritize the illustration. */
  object-position:center 39%!important;
  transform:scale(1.34);
  transform-origin:center 41%;
}
.deck-select-card.saved-deck-card>b{
  width:100%;
  margin:0!important;
  padding:7px 7px 0!important;
  line-height:1.2;
}
.deck-select-card.saved-deck-card>span{
  width:100%;
  margin:0!important;
  padding:3px 7px 5px!important;
}
.deck-select-card.saved-deck-card .deck-select-actions{
  padding:0 6px 6px;
  margin-top:auto;
}


/* v17: keep the full card image; visually suppress only the name/cost strip */
.deck-select-card.saved-deck-card .deck-select-cover{
  position:relative!important;
  overflow:hidden!important;
}
.deck-select-card.saved-deck-card .deck-select-cover img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  background:#0b1015!important;
}

/* Do not crop/zoom the source image.
   Cover the very top strip so the card name/cost area is less prominent. */
.deck-select-card.saved-deck-card .deck-select-cover::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:23%;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(11,16,21,.98) 0%,
    rgba(11,16,21,.92) 68%,
    rgba(11,16,21,.45) 88%,
    rgba(11,16,21,0) 100%
  );
}


/* v18: saved-deck cover shows the middle illustration area.
   Remove the dark mask and crop only the top card name/cost strip. */
.deck-select-card.saved-deck-card .deck-select-cover{
  position:relative!important;
  overflow:hidden!important;
  background:#0b1015!important;
}
.deck-select-card.saved-deck-card .deck-select-cover::after{
  content:none!important;
  display:none!important;
}
.deck-select-card.saved-deck-card .deck-select-cover img{
  position:absolute!important;
  left:0!important;
  top:-18%!important;
  width:100%!important;
  height:118%!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center top!important;
  transform:none!important;
  background:#0b1015!important;
}


/* v19: saved-deck cover matches the reference more closely.
   - no inner whitespace around the image
   - hide the top card-name/cost strip by shifting the full-width image upward
   - show the middle illustration area clearly
   - no dark mask */
.deck-select-card.saved-deck-card{
  padding:0!important;
  overflow:hidden!important;
}
.deck-select-card.saved-deck-card .deck-select-cover{
  width:100%!important;
  height:124px!important;
  margin:0!important;
  border-radius:0!important;
  position:relative!important;
  overflow:hidden!important;
  display:block!important;
  background:#0b1015!important;
}
.deck-select-card.saved-deck-card .deck-select-cover::after{
  content:none!important;
  display:none!important;
}
.deck-select-card.saved-deck-card .deck-select-cover img{
  position:absolute!important;
  left:0!important;
  top:-24px!important;
  width:100%!important;
  height:auto!important;
  min-height:calc(100% + 24px)!important;
  max-width:none!important;
  object-fit:unset!important;
  object-position:initial!important;
  transform:none!important;
  background:transparent!important;
}
.deck-select-card.saved-deck-card>b{
  width:100%!important;
  margin:0!important;
  padding:7px 7px 0!important;
  line-height:1.2!important;
}
.deck-select-card.saved-deck-card>span{
  width:100%!important;
  margin:0!important;
  padding:3px 7px 5px!important;
}
.deck-select-card.saved-deck-card .deck-select-actions{
  padding:0 6px 6px!important;
  margin-top:auto!important;
}


/* v20: menu username registration */
.menu-username-wrap{margin-top:16px;margin-bottom:4px;max-width:720px}
.username-register-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:6px 10px;background:linear-gradient(180deg,#26495d,#183141);border:1px solid #c89a3b;border-radius:8px;box-shadow:0 0 0 1px #394f5c inset,0 3px 12px #0004}
.username-register-label{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 12px;font-weight:900;font-size:18px;letter-spacing:.02em;color:#f1d47b;text-shadow:0 1px 0 #0009;white-space:nowrap}
#menuUsername{width:100%;height:38px;padding:0 14px;border-radius:8px;border:1px solid #d4a84c;background:linear-gradient(180deg,#081118,#111b22);color:#f4e7bf;font-size:16px;box-shadow:inset 0 0 0 1px #0008,0 0 10px #0002}
#menuUsername::placeholder{color:#d2b775;opacity:.88}
#menuUsername:focus{outline:none;border-color:#f4cb67;box-shadow:0 0 0 2px #f4cb6744,inset 0 0 0 1px #0008}
.username-register-hint{margin:8px 8px 0;color:#cfdae0;font-size:12px;line-height:1.4}
@media(max-width:700px){
  .username-register-card{grid-template-columns:1fr;gap:8px;padding:10px}
  .username-register-label{justify-content:flex-start;padding:0 4px;font-size:16px;min-height:auto}
}


/* v21: create/join rooms directly from the main menu */
.menu-home-screen{overflow:auto!important;background:radial-gradient(circle at 50% 20%,#17384c,#0c1620 68%)!important;border:0!important}
.menu-home-inner{width:min(920px,calc(100% - 28px));margin:0 auto;padding:26px 0 32px}
.menu-home-inner>h2{font-size:28px;color:#f2d271;margin-bottom:4px}
.menu-home-inner>.screen-help{margin-bottom:12px}
.menu-home-inner .menu-username-wrap{max-width:none;margin:0 0 14px}
.menu-room-panel{padding:14px;border:1px solid #9e7c35;border-radius:10px;background:linear-gradient(180deg,#172833ee,#101b23ee);box-shadow:0 5px 18px #0006,inset 0 0 0 1px #314653}
.menu-room-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:10px;border-bottom:1px solid #344b58}
.menu-room-head h3{margin:0 0 5px;color:#f0ca67;font-size:19px}
.menu-room-head p{margin:0;color:#cad4da;font-size:13px}
.menu-room-head select{margin:0 6px;min-width:230px;padding:6px 8px}
.menu-room-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.menu-room-create,.menu-room-join{padding:12px;border:1px solid #3d5360;border-radius:8px;background:#0d171e}
.menu-room-label{display:block;margin-bottom:8px;color:#f0d98f;font-weight:800;font-size:14px}
.menu-room-create button,.menu-room-code-row button{min-width:110px}
.menu-room-code-row{display:flex;gap:8px}
.menu-room-code-row input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.15em;font-weight:800}
.menu-room-result{display:inline-block;margin:0 0 0 10px;color:#f3d37a;font-weight:800}
.menu-room-waiting{margin-top:12px!important}
.menu-room-start{display:block;margin:10px auto 0;min-width:220px;font-weight:900}
.menu-deck-action{margin-top:14px}
.menu-deck-card{width:100%;min-height:92px!important;padding:16px 20px!important;background:linear-gradient(180deg,#243541,#18242d)!important;border-color:#5c7180!important}
.menu-deck-card b{font-size:20px!important;color:#fff0bd}
.menu-deck-card span{font-size:13px!important}
@media(max-width:700px){
  .menu-home-inner{width:min(100% - 18px,920px);padding-top:14px}
  .menu-room-actions{grid-template-columns:1fr}
  .menu-room-head p{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
  .menu-room-head select{min-width:0;width:100%;margin:4px 0}
}


/* v22: make Deck Creation match the other main-menu panels */
.menu-deck-panel{
  margin-top:14px;
  padding:14px;
  border:1px solid #9e7c35;
  border-radius:10px;
  background:linear-gradient(180deg,#172833ee,#101b23ee);
  box-shadow:0 5px 18px #0006,inset 0 0 0 1px #314653;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.menu-deck-info h3{
  margin:0 0 5px;
  color:#f0ca67;
  font-size:19px;
}
.menu-deck-info p{
  margin:0;
  color:#cad4da;
  font-size:13px;
}
.menu-deck-open{
  min-width:150px;
  padding:10px 18px;
  font-weight:900;
}
@media(max-width:700px){
  .menu-deck-panel{
    align-items:stretch;
    flex-direction:column;
  }
  .menu-deck-open{
    width:100%;
  }
}


/* v23: use the supplied forest image as the background for all screens */
html,body{min-height:100%}
body{
  background:#07111a url("assets/ui/forest_bg.jpg") center center / cover no-repeat fixed !important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(rgba(4,10,18,.40),rgba(4,10,18,.56));
  z-index:-1;
}
main{
  max-width:1400px;
  margin:auto;
  padding:18px;
  position:relative;
  z-index:0;
}
header,
.panel,
.topbar,
.player,
.modal-box,
.notice,
.deck-builder,
.saved-decks,
.menu-room-panel,
.menu-deck-panel,
.username-register-card,
.menu-room-create,
.menu-room-join,
.deck-panel,
.deck-edit-toolbar,
.compact-saved-decks,
.deck-hub-topbar,
.deck-hub-content,
.deck-select-card,
.tcg-board,
.turn-panel,
.side-panel,
.side-log,
.inspect-panel,
.log-panel{
  backdrop-filter: blur(3px);
}
.menu-home-screen,
.deck-hub-screen,
.deck-edit-screen{
  background:transparent !important;
}
.deck-hub-content{
  background:transparent !important;
}
.deck-hub-topbar{
  background:rgba(7,19,30,.82) !important;
}
.deck-edit-screen{
  color:#eef6fb;
}
.deck-edit-screen .screen-help,
.deck-edit-screen .deck-detail-name span,
.deck-edit-screen .detail-empty,
.deck-edit-screen .saved-deck p,
.deck-edit-screen .compact-saved-decks .saved-deck p,
.deck-edit-screen .deck-panel-title,
.deck-edit-screen .deck-cost-row b,
.deck-edit-screen .deck-type-count b,
.deck-edit-screen .deck-detail-effects,
.deck-edit-screen .deck-detail-effect p{
  color:#26333a;
}
.panel{
  background:rgba(14,24,34,.76);
  border-color:#4e6170;
}
#menu.panel,
#roomScreen.panel,
#deckSelectScreen.panel{
  background:rgba(8,18,28,.68);
}


/* v24: battle-screen card presentation */
.tcg-board .image-only-card{border:0!important;padding:0!important;background:transparent!important;box-shadow:none!important}
.tcg-board .image-only-card .image-card-shell{width:100%!important;height:100%!important;padding:0!important;margin:0!important;overflow:hidden!important;border:2px solid #c6a15a!important;border-radius:7px!important;background:transparent!important;box-shadow:0 5px 12px #000a!important}
.tcg-board .image-only-card .card-image{width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;margin:0!important;padding:0!important;background:transparent!important}
.tcg-board .image-only-card.attackable{border-color:transparent!important;box-shadow:none!important}
.tcg-board .image-only-card.attackable .image-card-shell{outline:none!important;box-shadow:0 5px 12px #000a!important}
.tcg-board .image-only-card.playable .image-card-shell{outline:3px solid #ffe46b!important;outline-offset:1px!important;box-shadow:0 0 14px #ffe46bbb,0 5px 12px #000a!important}
.tcg-board .image-only-card.playable.attackable .image-card-shell{outline:3px solid #ffe46b!important}
.card-back-image{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;border-radius:5px}
.compact-board .field-zone .image-only-card{width:138px!important;min-width:118px!important;max-width:148px!important}
.compact-board .self-half .field-zone .image-only-card{width:150px!important;min-width:128px!important;max-width:160px!important}
.compact-board .field-zone .field{gap:26px!important;padding-right:28px!important}
.compact-board .territory-cards{min-height:64px!important;max-height:68px!important;gap:4px!important;align-items:center!important;overflow:visible!important}
.compact-board .territory-card{width:46px!important;height:64px!important;flex:0 0 46px!important;padding:0!important;border:1px solid #8f793e!important;border-radius:4px!important;overflow:hidden!important;background:#151515!important;box-shadow:0 2px 6px #000a!important}
.compact-board .territory-card img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
.board-zone-row{min-height:76px!important}
.compact-board .food-cards{min-height:64px!important;max-height:68px!important;align-items:center!important}
.territory-choice-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;padding:10px 4px 16px}
.territory-choice-card{position:relative;width:104px;height:146px;padding:0!important;border:2px solid #b9964e!important;border-radius:8px!important;overflow:hidden;background:#10161b!important;box-shadow:0 6px 14px #0009;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.territory-choice-card:hover{transform:translateY(-6px) scale(1.03);border-color:#ffe276!important;box-shadow:0 0 0 3px #ffe27655,0 10px 20px #000b}
.territory-choice-card img{width:100%;height:100%;display:block;object-fit:cover}
.territory-choice-card span{position:absolute;right:5px;bottom:5px;min-width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#091118d9;color:#fff1b5;font-size:12px;font-weight:900;border:1px solid #d0ad62}
@media(max-width:1200px){.compact-board .field-zone .image-only-card{width:118px!important;min-width:102px!important}.compact-board .self-half .field-zone .image-only-card{width:130px!important;min-width:112px!important}.compact-board .field-zone .field{gap:22px!important;padding-right:24px!important}}


/* v25: center-screen temporary message for insufficient cost */
.center-toast{
  position:fixed;
  left:50%;
  top:50%;
  width:min(760px,78vw);
  min-height:112px;
  padding:22px 34px;
  transform:translate(-50%,-50%) translateY(12px) scale(.985);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:linear-gradient(90deg,rgba(6,30,45,.94),rgba(8,52,70,.94),rgba(6,30,45,.94));
  border-top:2px solid #4bd9ff;
  border-bottom:2px solid #4bd9ff;
  box-shadow:0 0 28px #1dbfe944,0 12px 34px #0009;
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .18s;
}
.center-toast.show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) translateY(0) scale(1);
  transition:opacity .16s ease,transform .16s ease,visibility 0s;
}
.center-toast span{
  color:#f0c75d;
  font-size:15px;
  font-weight:900;
  letter-spacing:.04em;
  text-shadow:0 2px 3px #000;
  white-space:nowrap;
}
.center-toast strong{
  color:#fff;
  font-size:30px;
  font-weight:1000;
  letter-spacing:.07em;
  text-shadow:0 2px 5px #000;
  white-space:nowrap;
}
@media(max-width:700px){
  .center-toast{width:92vw;min-height:92px;padding:16px 18px;gap:10px;flex-direction:column}
  .center-toast span{font-size:12px}
  .center-toast strong{font-size:24px}
}


/* v26: remove field/hand card frames, simplify cost toast text, enlarge field cards */
.tcg-board .image-only-card .image-card-shell{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.tcg-board .image-only-card .card-image,
.tcg-board .image-only-card .card-back-image{
  border-radius:0!important;
}
.tcg-board .image-only-card.playable .image-card-shell{
  outline:3px solid #ffe46b!important;
  outline-offset:1px!important;
  box-shadow:0 0 14px #ffe46bbb!important;
}

/* Slightly larger field cards */
.compact-board .field-zone .image-only-card{
  width:148px!important;
  min-width:126px!important;
  max-width:158px!important;
}
.compact-board .self-half .field-zone .image-only-card{
  width:162px!important;
  min-width:138px!important;
  max-width:172px!important;
}
.compact-board .field-zone .field{
  gap:24px!important;
  padding-right:24px!important;
}

@media(max-width:1200px){
  .compact-board .field-zone .image-only-card{
    width:126px!important;
    min-width:108px!important;
    max-width:136px!important;
  }
  .compact-board .self-half .field-zone .image-only-card{
    width:140px!important;
    min-width:120px!important;
    max-width:150px!important;
  }
}

/* Center toast: only show one message */
.center-toast{
  min-height:96px!important;
  padding:18px 28px!important;
}
.center-toast span{
  display:none!important;
}
.center-toast strong{
  font-size:32px!important;
  letter-spacing:.04em!important;
}
@media(max-width:700px){
  .center-toast{
    min-height:84px!important;
    padding:14px 18px!important;
  }
  .center-toast strong{
    font-size:24px!important;
  }
}


/* v27: tighten field spacing and add phase transition banner */
.compact-board .field-zone{
  padding-left:0!important;
  padding-right:0!important;
}
.compact-board .field-zone .field{
  gap:6px!important;
  padding-left:0!important;
  padding-right:0!important;
  margin-left:0!important;
  margin-right:0!important;
}

.phase-banner{
  position:fixed;
  left:50%;
  top:50%;
  width:min(720px,76vw);
  min-height:96px;
  padding:18px 28px;
  transform:translate(-50%,-50%) translateY(10px) scale(.985);
  z-index:999;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  color:#fff;
  font-size:32px;
  font-weight:1000;
  letter-spacing:.08em;
  text-shadow:0 2px 5px #000;
  border-top:2px solid rgba(255,255,255,.75);
  border-bottom:2px solid rgba(255,255,255,.75);
  box-shadow:0 12px 34px #0009;
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .18s;
}
.phase-banner.own{
  background:linear-gradient(90deg,rgba(8,34,70,.95),rgba(18,93,150,.95),rgba(8,34,70,.95));
  border-color:#5cc7ff;
  box-shadow:0 0 28px #279ce055,0 12px 34px #0009;
}
.phase-banner.opp{
  background:linear-gradient(90deg,rgba(74,13,18,.95),rgba(153,42,49,.95),rgba(74,13,18,.95));
  border-color:#ff7278;
  box-shadow:0 0 28px #dd3e4955,0 12px 34px #0009;
}
.phase-banner.show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) translateY(0) scale(1);
  transition:opacity .16s ease,transform .16s ease,visibility 0s;
}
@media(max-width:700px){
  .phase-banner{width:92vw;min-height:82px;padding:14px 18px;font-size:24px}
}


/* v28: exact-ratio field cards + hand action confirmation */
/* The old fixed field-card height made the 300x422 card art sit inside a wider box.
   Let the card element follow the real card ratio so only the image is visible. */
.compact-board .field-zone .image-only-card{
  aspect-ratio:300 / 422!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  width:118px!important;
  min-width:118px!important;
  max-width:118px!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  overflow:visible!important;
}
.compact-board .self-half .field-zone .image-only-card{
  width:132px!important;
  min-width:132px!important;
  max-width:132px!important;
}
.compact-board .field-zone .image-only-card .image-card-shell{
  width:100%!important;
  height:100%!important;
  aspect-ratio:300 / 422!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  overflow:hidden!important;
}
.compact-board .field-zone .image-only-card .card-image{
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  display:block!important;
  padding:0!important;
  margin:0!important;
}
@media(max-width:1200px){
  .compact-board .field-zone .image-only-card{
    width:104px!important;
    min-width:104px!important;
    max-width:104px!important;
  }
  .compact-board .self-half .field-zone .image-only-card{
    width:116px!important;
    min-width:116px!important;
    max-width:116px!important;
  }
}

.hand-action-modal-box{
  width:min(360px,92vw)!important;
  max-width:360px!important;
  padding:16px!important;
  text-align:center;
  background:linear-gradient(180deg,#172833,#0c171e)!important;
  border:1px solid #a7863e!important;
  box-shadow:0 14px 38px #000b!important;
}
.hand-action-modal-box h2{
  margin:0 0 12px!important;
  color:#f1cf75;
  font-size:18px!important;
}
.hand-action-preview{
  height:230px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
}
.hand-action-preview img{
  height:100%;
  width:auto;
  max-width:100%;
  display:block;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 6px 16px #000a;
}
.hand-action-fallback{
  font-size:72px;
}
.hand-action-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.hand-action-buttons button{
  min-height:44px;
  font-weight:900;
}


/* v29: territory waiting status + optional ＜とびだす＞ choice */
.territory-waiting-banner{
  position:fixed;
  left:50%;
  top:14px;
  transform:translateX(-50%) translateY(-14px);
  z-index:1002;
  min-width:340px;
  max-width:80vw;
  padding:10px 22px;
  border:1px solid #f1c65d;
  border-radius:8px;
  background:rgba(8,25,36,.94);
  color:#fff1bc;
  font-size:16px;
  font-weight:900;
  text-align:center;
  box-shadow:0 6px 18px #0009,0 0 14px #e5bd4a33;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .16s;
}
.territory-waiting-banner.show{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
  transition:opacity .15s ease,transform .15s ease,visibility 0s;
}
.jump-choice-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:8px 4px 12px;
}
.jump-choice-card{
  width:150px;
  aspect-ratio:300/422;
  overflow:hidden;
  border-radius:7px;
  box-shadow:0 7px 18px #000b;
}
.jump-choice-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.jump-choice-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.jump-choice-actions button{
  min-width:150px;
  padding:10px 16px;
  font-weight:900;
}
@media(max-width:700px){
  .territory-waiting-banner{min-width:0;width:90vw;font-size:14px;top:8px}
}

/* v30: AI battle menu */
.menu-ai-panel{
  margin-top:14px;
  padding:14px;
  border:1px solid #9e7c35;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(23,40,51,.94),rgba(16,27,35,.94));
  box-shadow:0 5px 18px #0006,inset 0 0 0 1px #314653;
}
.menu-ai-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:10px;border-bottom:1px solid #344b58}
.menu-ai-head h3{margin:0 0 5px;color:#f0ca67;font-size:19px}
.menu-ai-head p{margin:0;color:#cad4da;font-size:13px}
.menu-ai-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:12px}
.menu-ai-options label{display:grid;gap:5px;color:#f0d98f;font-weight:800;font-size:13px}
.menu-ai-options select{width:100%;min-width:0;padding:7px 8px}
.menu-ai-start{min-width:150px;height:39px;font-weight:900}
.menu-ai-note{margin:8px 0 0;color:#9fb1bc;font-size:11px}
@media(max-width:700px){.menu-ai-options{grid-template-columns:1fr}.menu-ai-start{width:100%}}


/* v31: richer hand-action popup + color-coded battle log */
.hand-action-modal-box{
  width:min(620px,92vw)!important;
  max-width:620px!important;
  min-height:330px;
  padding:16px 18px 14px!important;
  text-align:center;
  background:linear-gradient(180deg,rgba(3,17,38,.94),rgba(4,16,34,.95))!important;
  border:1px solid #29b9ff!important;
  border-radius:12px!important;
  box-shadow:0 16px 40px #000c,0 0 0 1px rgba(255,210,97,.18) inset!important;
  position:relative;
}
.hand-action-peek{
  position:absolute;
  left:10px;
  top:10px;
  min-height:0!important;
  padding:5px 12px!important;
  border-radius:999px!important;
  border:1px solid #d5aa53!important;
  background:rgba(13,16,22,.82)!important;
  color:#ffdf8d!important;
  font-size:12px!important;
  font-weight:900!important;
}
.hand-action-card-name{
  margin:8px 0 6px;
  color:#f4cb61;
  font-size:15px;
  font-weight:900;
  letter-spacing:.05em;
}
.hand-action-modal-box h2{
  margin:0 0 14px!important;
  color:#eef6ff;
  font-size:26px!important;
  line-height:1.25;
  letter-spacing:.03em;
}
.hand-action-preview{
  height:180px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
}
.hand-action-preview img{
  height:100%;
  width:auto;
  max-width:100%;
  display:block;
  object-fit:contain;
  border-radius:0;
  box-shadow:0 8px 18px #0009;
}
.hand-action-fallback{
  font-size:80px;
}
.hand-action-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:8px;
}
.hand-action-buttons button{
  min-height:48px;
  border-radius:8px!important;
  font-weight:1000!important;
  font-size:16px!important;
  border:1px solid #b68b3c!important;
  background:linear-gradient(180deg,#191d24,#0f1218)!important;
  box-shadow:inset 0 0 0 1px rgba(255,220,150,.06);
}
.hand-action-buttons .primary{
  color:#fff8de!important;
  background:linear-gradient(180deg,#3f3520,#1c1610)!important;
}
@media(max-width:700px){
  .hand-action-modal-box{
    min-height:300px;
    padding:14px 14px 12px!important;
  }
  .hand-action-modal-box h2{
    font-size:22px!important;
  }
  .hand-action-preview{
    height:160px;
  }
  .hand-action-buttons button{
    min-height:44px;
    font-size:15px!important;
  }
}

/* Battle log colors: self blue, opponent red */
.side-log{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.side-log .log-entry{
  padding:6px 8px!important;
  border-bottom:none!important;
  border-left:3px solid transparent;
  border-radius:6px;
  color:#d7e2e8;
  background:rgba(255,255,255,.02);
}
.side-log .log-entry.self{
  color:#bfe8ff;
  border-left-color:#48b7ff;
  background:rgba(42,124,194,.16);
}
.side-log .log-entry.opp{
  color:#ffc3c6;
  border-left-color:#ff7078;
  background:rgba(191,62,73,.14);
}
.side-log .log-entry.neutral{
  color:#d8dee4;
  border-left-color:#a9b6c1;
  background:rgba(255,255,255,.03);
}


/* v32: hand-action dialog lower, fixed, no scrolling */
#handActionModal{
  place-items:stretch center!important;
  overflow:hidden!important;
  padding:0 12px!important;
}
#handActionModal .hand-action-modal-box{
  position:fixed!important;
  left:50%!important;
  top:58%!important;
  transform:translate(-50%,-50%)!important;
  width:min(620px,calc(100vw - 24px))!important;
  max-width:620px!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  padding:10px 16px 12px!important;
  border:1px solid #2aa5f1!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,rgba(4,18,40,.96),rgba(4,17,36,.96))!important;
  box-shadow:0 18px 42px #000d,0 0 0 1px rgba(82,180,255,.12) inset!important;
}
#handActionModal .hand-action-peek{
  left:8px!important;
  top:6px!important;
  padding:4px 12px!important;
  font-size:12px!important;
  line-height:1.2!important;
}
#handActionModal .hand-action-card-name{
  margin:6px 0 4px!important;
  font-size:15px!important;
}
#handActionModal .hand-action-modal-box h2{
  margin:0 0 10px!important;
  font-size:15px!important;
  color:#f1f5fb!important;
  font-weight:900!important;
}
#handActionModal .hand-action-preview{
  height:180px!important;
  margin-bottom:12px!important;
}
#handActionModal .hand-action-preview img{
  height:100%!important;
  max-height:180px!important;
  width:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
  box-shadow:0 8px 18px #0009!important;
}
#handActionModal .hand-action-buttons{
  gap:12px!important;
  margin-top:0!important;
}
#handActionModal .hand-action-buttons button{
  min-height:48px!important;
  padding:10px 14px!important;
  font-size:15px!important;
}
@media(max-width:700px){
  #handActionModal .hand-action-modal-box{
    top:61%!important;
    width:calc(100vw - 18px)!important;
    padding:9px 10px 10px!important;
  }
  #handActionModal .hand-action-card-name{font-size:14px!important}
  #handActionModal .hand-action-modal-box h2{font-size:14px!important}
  #handActionModal .hand-action-preview{height:150px!important;margin-bottom:10px!important}
  #handActionModal .hand-action-preview img{max-height:150px!important}
  #handActionModal .hand-action-buttons button{min-height:42px!important;font-size:14px!important}
}


/* v34: always show current HP on field insects */
.field-hp-badge{
  position:absolute;
  right:4px;
  top:4px;
  z-index:34;
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
  min-height:22px;
  padding:3px 7px 4px;
  border-radius:999px;
  border:1px solid #ffffff99;
  background:linear-gradient(180deg,rgba(18,28,36,.94),rgba(7,13,18,.94));
  color:#ffffff;
  box-shadow:0 2px 8px #000b;
  text-shadow:0 1px 2px #000;
  font-weight:900;
  line-height:1;
  pointer-events:none;
}
.field-hp-badge span{
  font-size:9px;
  opacity:.92;
  letter-spacing:.04em;
}
.field-hp-badge b{
  font-size:16px;
}
.field-hp-badge small{
  font-size:10px;
  opacity:.92;
  margin-left:1px;
}
.field-hp-badge.high{
  border-color:#8fe7a4;
  background:linear-gradient(180deg,rgba(22,88,42,.94),rgba(10,48,22,.94));
}
.field-hp-badge.mid{
  border-color:#ffd97b;
  background:linear-gradient(180deg,rgba(115,79,16,.95),rgba(70,46,8,.95));
}
.field-hp-badge.low{
  border-color:#ff9a9a;
  background:linear-gradient(180deg,rgba(120,32,32,.96),rgba(76,16,16,.96));
}
@media(max-width:1200px){
  .field-hp-badge{
    right:3px;
    top:3px;
    min-height:20px;
    padding:3px 6px 4px;
  }
  .field-hp-badge span{font-size:8px}
  .field-hp-badge b{font-size:14px}
  .field-hp-badge small{font-size:9px}
}


/* v35: opponent hand strip, fit board width better, and move HP display away from status badges */
.duel-layout{grid-template-columns:220px minmax(640px,1fr) 220px!important}
.duel-center{padding:5px!important}
.compact-board{padding:6px 8px!important}
.board-zone-row{grid-template-columns:48px minmax(96px,.62fr) minmax(230px,1.42fr) 48px!important;gap:4px!important}
.compact-board .pile-zone{width:48px!important;height:56px!important}
.compact-board .field-zone{overflow:visible!important}
.compact-board .field-zone .field{justify-content:space-evenly!important;gap:10px!important;padding-left:4px!important;padding-right:4px!important;overflow:visible!important}
.compact-board .field-zone .image-only-card{width:108px!important;min-width:108px!important;max-width:108px!important}
.compact-board .self-half .field-zone .image-only-card{width:120px!important;min-width:120px!important;max-width:120px!important}
.compact-board .battle-half{gap:2px!important}
@media(max-width:1200px){
  .duel-layout{grid-template-columns:190px minmax(520px,1fr) 190px!important}
  .compact-board .field-zone .image-only-card{width:96px!important;min-width:96px!important;max-width:96px!important}
  .compact-board .self-half .field-zone .image-only-card{width:108px!important;min-width:108px!important;max-width:108px!important}
  .compact-board .field-zone .field{gap:8px!important}
}

.opp-hand-visual-wrap{display:flex;justify-content:center;align-items:flex-end;min-height:72px;margin:4px 0 2px;overflow:hidden}
.opp-hand-visual{display:flex;justify-content:center;align-items:flex-end;gap:8px;min-height:68px;padding:2px 0}
.opp-hand-card{width:60px;height:84px;flex:0 0 60px;border-radius:6px;overflow:hidden;box-shadow:0 5px 10px #0008;transform:translateY(0);z-index:var(--opp-hand-z)}
.opp-hand-card img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:1200px){
  .opp-hand-visual-wrap{min-height:60px}
  .opp-hand-visual{gap:6px;min-height:56px}
  .opp-hand-card{width:50px;height:70px;flex-basis:50px}
}

.effect-status-badges{max-width:56%!important}
.compact-board .field-zone .status-badge{font-size:9px!important;padding:2px 4px!important;min-height:16px!important}
.field-hp-badge{left:50%!important;right:auto!important;top:auto!important;bottom:6px!important;transform:translateX(-50%)!important;min-height:20px!important;padding:3px 8px 4px!important;gap:3px!important;z-index:38!important}
.field-hp-badge span{font-size:8px!important}
.field-hp-badge b{font-size:14px!important}
.field-hp-badge small{display:none!important}
.compact-board .self-half .field-zone .field .field-hp-badge b{font-size:15px!important}
@media(max-width:1200px){
  .field-hp-badge{bottom:5px!important;padding:3px 7px 4px!important}
  .field-hp-badge span{font-size:7px!important}
  .field-hp-badge b{font-size:12px!important}
}


/* v35r2: move only the opponent hand visual; preserve v35 battlefield sizing exactly. */
.duel-center{
  position:relative!important;
}
/* This spacer occupies the same normal-flow space as the v35 hand strip,
   so the board/field height and width calculations remain unchanged. */
.opp-hand-layout-spacer{
  display:block;
  flex:0 0 auto;
  min-height:72px;
  margin:4px 0 2px;
}
/* The actual hand cards are taken out of layout and drawn at the top of the
   center background. This does not alter compact-board or duel-center sizing. */
.duel-center > .opp-hand-top-background{
  position:absolute!important;
  left:50%!important;
  top:5px!important;
  transform:translateX(-50%)!important;
  z-index:50!important;
  width:min(430px,calc(100% - 24px))!important;
  min-height:0!important;
  margin:0!important;
  display:flex!important;
  justify-content:center!important;
  align-items:flex-start!important;
  overflow:visible!important;
  pointer-events:none!important;
  background:transparent!important;
}
.duel-center > .opp-hand-top-background .opp-hand-visual{
  min-height:0!important;
  padding:0!important;
}
@media(max-width:1200px){
  .opp-hand-layout-spacer{
    min-height:60px;
  }
}


/* v35r3: make only the opponent field frame slightly taller upward */
.compact-board .opponent-half > .field-zone{
  margin-top:-10px!important;
}
@media(max-width:1200px){
  .compact-board .opponent-half > .field-zone{
    margin-top:-8px!important;
  }
}


/* v35r4: make the opponent field use the same visual layout as the player's field */
.compact-board .opponent-half{
  transform:scale(1.035)!important;
  transform-origin:50% 0!important;
}
.compact-board .opponent-half > .field-zone{
  margin-top:0!important;
}
.compact-board .opponent-half .field-zone .image-only-card{
  width:120px!important;
  min-width:120px!important;
  max-width:120px!important;
}

@media(max-width:1200px){
  .compact-board .opponent-half{
    transform:scale(1.035)!important;
  }
  .compact-board .opponent-half > .field-zone{
    margin-top:0!important;
  }
  .compact-board .opponent-half .field-zone .image-only-card{
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
  }
}


/* v35r5: remove redundant player info bars from the battlefield */
.compact-board .opponent-half > .battle-meta,
.compact-board .self-half > .self-player-meta{
  display:none!important;
}


/* v35r6: slightly taller opponent field and move the cost panel left */
.compact-board .opponent-half > .field-zone{
  margin-top:-14px!important;
  padding-top:8px!important;
}
.hand-cost-panel{
  right:20px!important;
}
@media(max-width:1200px){
  .compact-board .opponent-half > .field-zone{
    margin-top:-11px!important;
    padding-top:7px!important;
  }
  .hand-cost-panel{
    right:16px!important;
  }
}


/* v35r7: extend opponent field upward and move its food/territory row upward with it */
.compact-board .opponent-half > .opponent-zone-row{
  position:relative!important;
  top:-14px!important;
}
.compact-board .opponent-half > .field-zone{
  margin-top:-14px!important;
  padding-top:8px!important;
}

@media(max-width:1200px){
  .compact-board .opponent-half > .opponent-zone-row{
    top:-11px!important;
  }
  .compact-board .opponent-half > .field-zone{
    margin-top:-11px!important;
    padding-top:7px!important;
  }
}

/* v35r8: extend the opponent field a little farther upward */
.compact-board .opponent-half > .opponent-zone-row{
  top:-22px!important;
}
.compact-board .opponent-half > .field-zone{
  margin-top:-22px!important;
  padding-top:8px!important;
}

@media(max-width:1200px){
  .compact-board .opponent-half > .opponent-zone-row{
    top:-17px!important;
  }
  .compact-board .opponent-half > .field-zone{
    margin-top:-17px!important;
    padding-top:7px!important;
  }
}


/* v35r9: swap opponent deck/discard sides and show only the lower edge of opponent hand */
.duel-center > .opp-hand-top-background{
  top:-56px!important;
}
.duel-center > .opp-hand-top-background .opp-hand-visual{
  align-items:flex-end!important;
}
@media(max-width:1200px){
  .duel-center > .opp-hand-top-background{
    top:-45px!important;
  }
}


/* v35r10: extend opponent field farther upward and swap territory/food positions */
.compact-board .opponent-half > .opponent-zone-row{
  top:-30px!important;
}
.compact-board .opponent-half > .field-zone{
  margin-top:-30px!important;
  padding-top:8px!important;
}

@media(max-width:1200px){
  .compact-board .opponent-half > .opponent-zone-row{
    top:-24px!important;
  }
  .compact-board .opponent-half > .field-zone{
    margin-top:-24px!important;
    padding-top:7px!important;
  }
}

/* v35r11: move opponent territory/food row close to the upper border and pack field insects tighter */
.compact-board .opponent-half > .opponent-zone-row{
  top:-46px!important;
}
.compact-board .opponent-half > .field-zone{
  margin-top:-46px!important;
  padding-top:8px!important;
}

/* Keep insects close together instead of distributing them across the whole field. */
.compact-board .field-zone .field{
  justify-content:center!important;
  gap:4px!important;
  padding-left:2px!important;
  padding-right:2px!important;
}

@media(max-width:1200px){
  .compact-board .opponent-half > .opponent-zone-row{
    top:-37px!important;
  }
  .compact-board .opponent-half > .field-zone{
    margin-top:-37px!important;
    padding-top:7px!important;
  }
  .compact-board .field-zone .field{
    gap:3px!important;
  }
}


/* v35r12: move opponent territory/food farther upward, remove center banner,
   and swap the self food/territory frame widths. */

/* Opponent upper row farther toward the top edge; grow opponent field upward to match. */
.compact-board .opponent-half > .opponent-zone-row{
  top:-58px!important;
}
.compact-board .opponent-half > .field-zone{
  margin-top:-58px!important;
  padding-top:8px!important;
}

/* The center "蟲神器" strip was removed from HTML, so use two board rows. */
.compact-board{
  grid-template-rows:minmax(0,1fr) minmax(0,1.12fr)!important;
}

/* Self side: swap only the widths assigned to Food and Territory.
   Structure stays: discard / food / territory / deck. */
.compact-board .self-half > .self-zone-row{
  grid-template-columns:48px minmax(230px,1.42fr) minmax(96px,.62fr) 48px!important;
}

@media(max-width:1200px){
  .compact-board .opponent-half > .opponent-zone-row{
    top:-47px!important;
  }
  .compact-board .opponent-half > .field-zone{
    margin-top:-47px!important;
    padding-top:7px!important;
  }

  .compact-board .self-half > .self-zone-row{
    grid-template-columns:48px minmax(190px,1.42fr) minmax(82px,.62fr) 48px!important;
  }
}


/* v35r13: move both discard piles inward toward the food area,
   and narrow the food frames so they do not overlap. */

/* Opponent: discard is on the right, so move it left toward Food. */
.compact-board .opponent-half > .opponent-zone-row .discard-zone{
  position:relative!important;
  left:-12px!important;
}
.compact-board .opponent-half > .opponent-zone-row .food-zone{
  margin-right:12px!important;
}

/* Self: discard is on the left, so move it right toward Food. */
.compact-board .self-half > .self-zone-row .discard-zone{
  position:relative!important;
  left:12px!important;
}
.compact-board .self-half > .self-zone-row .food-zone{
  margin-left:12px!important;
}

@media(max-width:1200px){
  .compact-board .opponent-half > .opponent-zone-row .discard-zone{
    left:-9px!important;
  }
  .compact-board .opponent-half > .opponent-zone-row .food-zone{
    margin-right:9px!important;
  }

  .compact-board .self-half > .self-zone-row .discard-zone{
    left:9px!important;
  }
  .compact-board .self-half > .self-zone-row .food-zone{
    margin-left:9px!important;
  }
}


/* v35r14: enlarge the card-detail frame slightly, move the opponent side a little higher,
   and move both deck piles inward while narrowing the food areas. */

/* Slightly larger card-detail frame on the left */
.duel-layout{
  grid-template-columns:236px minmax(0,1fr) 220px!important;
}
.card-inspector{
  padding:12px!important;
}
@media(max-width:1200px){
  .duel-layout{
    grid-template-columns:206px minmax(0,1fr) 190px!important;
  }
  .card-inspector{
    padding:11px!important;
  }
}

/* Move the opponent side a little farther upward, and move its upper row with it */
.compact-board .opponent-half > .opponent-zone-row{
  top:-68px!important;
}
.compact-board .opponent-half > .field-zone{
  margin-top:-68px!important;
  padding-top:8px!important;
}
@media(max-width:1200px){
  .compact-board .opponent-half > .opponent-zone-row{
    top:-55px!important;
  }
  .compact-board .opponent-half > .field-zone{
    margin-top:-55px!important;
    padding-top:7px!important;
  }
}

/* Move both deck piles toward Territory */
.compact-board .opponent-half > .opponent-zone-row .deck-zone{
  position:relative!important;
  left:12px!important;
}
.compact-board .self-half > .self-zone-row .deck-zone{
  position:relative!important;
  left:-12px!important;
}

/* Narrow Food on both sides so the shifted deck piles do not collide with neighboring frames */
.compact-board .opponent-half > .opponent-zone-row{
  grid-template-columns:48px minmax(96px,.62fr) minmax(214px,1.28fr) 48px!important;
}
.compact-board .self-half > .self-zone-row{
  grid-template-columns:48px minmax(214px,1.28fr) minmax(96px,.62fr) 48px!important;
}

@media(max-width:1200px){
  .compact-board .opponent-half > .opponent-zone-row .deck-zone{
    left:9px!important;
  }
  .compact-board .self-half > .self-zone-row .deck-zone{
    left:-9px!important;
  }
  .compact-board .opponent-half > .opponent-zone-row{
    grid-template-columns:48px minmax(90px,.62fr) minmax(182px,1.22fr) 48px!important;
  }
  .compact-board .self-half > .self-zone-row{
    grid-template-columns:48px minmax(182px,1.22fr) minmax(90px,.62fr) 48px!important;
  }
}


/* v35r15: narrow Food so Territory no longer overlaps Deck/Food on either side. */

/* Opponent side row order: deck / territory / food / discard */
.compact-board .opponent-half > .opponent-zone-row{
  grid-template-columns:48px minmax(96px,.62fr) minmax(178px,1.08fr) 48px!important;
}

/* Self side row order: discard / food / territory / deck */
.compact-board .self-half > .self-zone-row{
  grid-template-columns:48px minmax(178px,1.08fr) minmax(96px,.62fr) 48px!important;
}

/* Slightly reduce Food frame visual footprint on the Territory side */
.compact-board .opponent-half > .opponent-zone-row .food-zone{
  margin-left:2px!important;
  margin-right:12px!important;
}
.compact-board .self-half > .self-zone-row .food-zone{
  margin-left:12px!important;
  margin-right:2px!important;
}

@media(max-width:1200px){
  .compact-board .opponent-half > .opponent-zone-row{
    grid-template-columns:48px minmax(88px,.60fr) minmax(154px,1.00fr) 48px!important;
  }
  .compact-board .self-half > .self-zone-row{
    grid-template-columns:48px minmax(154px,1.00fr) minmax(88px,.60fr) 48px!important;
  }

  .compact-board .opponent-half > .opponent-zone-row .food-zone{
    margin-left:2px!important;
    margin-right:9px!important;
  }
  .compact-board .self-half > .self-zone-row .food-zone{
    margin-left:9px!important;
    margin-right:2px!important;
  }
}


/* v35r16: make both Territory frames slightly narrower so they clear Deck,
   and give the player's half a taller vertical share than the opponent half. */

/* Give the two board halves different vertical shares. */
.compact-board{
  grid-template-rows:minmax(0,.94fr) minmax(0,1.20fr)!important;
}

/* Opponent side row order: deck / territory / food / discard
   Make Territory a little narrower. */
.compact-board .opponent-half > .opponent-zone-row{
  grid-template-columns:48px minmax(82px,.54fr) minmax(178px,1.08fr) 48px!important;
}

/* Self side row order: discard / food / territory / deck
   Make Territory a little narrower. */
.compact-board .self-half > .self-zone-row{
  grid-template-columns:48px minmax(178px,1.08fr) minmax(82px,.54fr) 48px!important;
}

/* Create a little breathing room between Territory and Deck on both sides. */
.compact-board .opponent-half > .opponent-zone-row .territory-zone{
  margin-left:2px!important;
  margin-right:8px!important;
}
.compact-board .self-half > .self-zone-row .territory-zone{
  margin-left:8px!important;
  margin-right:2px!important;
}

@media(max-width:1200px){
  .compact-board{
    grid-template-rows:minmax(0,.96fr) minmax(0,1.18fr)!important;
  }

  .compact-board .opponent-half > .opponent-zone-row{
    grid-template-columns:48px minmax(76px,.52fr) minmax(154px,1.00fr) 48px!important;
  }
  .compact-board .self-half > .self-zone-row{
    grid-template-columns:48px minmax(154px,1.00fr) minmax(76px,.52fr) 48px!important;
  }

  .compact-board .opponent-half > .opponent-zone-row .territory-zone{
    margin-left:2px!important;
    margin-right:6px!important;
  }
  .compact-board .self-half > .self-zone-row .territory-zone{
    margin-left:6px!important;
    margin-right:2px!important;
  }
}


/* v35r17: narrow Food a little more, move Territory toward Food, and remove "自分の場" label. */

/* Opponent side: deck / territory / food / discard */
.compact-board .opponent-half > .opponent-zone-row{
  grid-template-columns:48px minmax(82px,.54fr) minmax(154px,.94fr) 48px!important;
}

/* Self side: discard / food / territory / deck */
.compact-board .self-half > .self-zone-row{
  grid-template-columns:48px minmax(154px,.94fr) minmax(82px,.54fr) 48px!important;
}

/* Move Territory toward Food without changing Deck/Discard positions. */
.compact-board .opponent-half > .opponent-zone-row .territory-zone{
  position:relative!important;
  left:8px!important;
  margin-left:0!important;
  margin-right:2px!important;
}
.compact-board .self-half > .self-zone-row .territory-zone{
  position:relative!important;
  left:-8px!important;
  margin-left:2px!important;
  margin-right:0!important;
}

/* Food is slightly narrower; keep a small gap from Territory. */
.compact-board .opponent-half > .opponent-zone-row .food-zone{
  margin-left:6px!important;
  margin-right:12px!important;
}
.compact-board .self-half > .self-zone-row .food-zone{
  margin-left:12px!important;
  margin-right:6px!important;
}

@media(max-width:1200px){
  .compact-board .opponent-half > .opponent-zone-row{
    grid-template-columns:48px minmax(76px,.52fr) minmax(136px,.90fr) 48px!important;
  }
  .compact-board .self-half > .self-zone-row{
    grid-template-columns:48px minmax(136px,.90fr) minmax(76px,.52fr) 48px!important;
  }

  .compact-board .opponent-half > .opponent-zone-row .territory-zone{
    left:6px!important;
  }
  .compact-board .self-half > .self-zone-row .territory-zone{
    left:-6px!important;
  }

  .compact-board .opponent-half > .opponent-zone-row .food-zone{
    margin-left:5px!important;
    margin-right:9px!important;
  }
  .compact-board .self-half > .self-zone-row .food-zone{
    margin-left:9px!important;
    margin-right:5px!important;
  }
}


/* v35r18: confirmation dialog for insects that currently have only one usable attack skill */
.single-attack-confirm{
  margin:12px 0 4px;
}
.single-attack-skill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  margin-bottom:14px;
  border:1px solid #526b78;
  border-radius:10px;
  background:#17252e;
}
.single-attack-skill b{
  font-size:16px;
}
.single-attack-skill span{
  color:#ffd768;
  font-size:16px;
  font-weight:800;
  white-space:nowrap;
}
.single-attack-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.single-attack-actions button{
  min-width:130px;
}
@media(max-width:700px){
  .single-attack-actions{
    flex-direction:column-reverse;
  }
  .single-attack-actions button{
    width:100%;
  }
}


/* v35r19: show an arrow over the opponent insect currently hovered during attack target selection */
#oppField.attack-target-mode .image-only-card{
  cursor:crosshair!important;
}
#oppField.attack-target-mode .image-only-card:hover{
  z-index:80!important;
}
#oppField.attack-target-mode .image-only-card:hover::before{
  content:"▼";
  position:absolute;
  left:50%;
  top:-34px;
  transform:translateX(-50%);
  z-index:120;
  font-size:30px;
  line-height:1;
  color:#ffe35f;
  text-shadow:
    0 2px 0 #5f4100,
    0 0 5px #000,
    0 0 10px #ffd84a;
  pointer-events:none;
  animation:attack-target-arrow-bob .55s ease-in-out infinite alternate;
}
#oppField.attack-target-mode .image-only-card:hover .image-card-shell{
  outline:3px solid #ffe35f!important;
  outline-offset:2px!important;
  box-shadow:0 0 16px #ffe35faa,0 5px 12px #000a!important;
}
@keyframes attack-target-arrow-bob{
  from{transform:translate(-50%,-2px)}
  to{transform:translate(-50%,4px)}
}
@media(max-width:1200px){
  #oppField.attack-target-mode .image-only-card:hover::before{
    top:-29px;
    font-size:25px;
  }
}


/* v35r24: tighter owned-card thumbnails + card-text search */
.deck-pool-panel .deck-text-search-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 26px;
  align-items:center;
  gap:5px;
  margin-top:3px;
}
.deck-pool-panel .deck-text-search{
  width:100%;
  min-width:0;
  height:25px;
  padding:3px 7px;
  border:1px solid #9eb4bd;
  border-radius:5px;
  background:#fff;
  color:#26333a;
  font-size:11px;
  outline:none;
}
.deck-pool-panel .deck-text-search:focus{
  border-color:#5d8795;
  box-shadow:0 0 0 2px #6d9aaa33;
}
.deck-pool-panel .deck-search-clear{
  width:26px;
  height:25px;
  min-width:26px;
  padding:0!important;
  display:grid;
  place-items:center;
  background:#fff!important;
  color:#4d6068!important;
  border:1px solid #9eb4bd!important;
  border-radius:5px;
  font-size:15px!important;
  line-height:1;
}

/* Use each card image's natural aspect ratio in the owned-card list.
   This removes the empty bands at the left/right of the thumbnail. */
.owned-card-grid{
  grid-auto-rows:auto!important;
  align-items:start!important;
}
.owned-card-grid .deck-image-tile{
  align-self:start!important;
  height:auto!important;
}
.owned-card-grid .deck-image-wrap{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
  background:transparent!important;
}
.owned-card-grid .deck-editor-card-image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  background:transparent!important;
}

@media(max-width:1200px){
  .deck-pool-panel .deck-text-search{
    height:24px;
    font-size:10px;
  }
  .deck-pool-panel .deck-search-clear{
    height:24px;
  }
}


/* v35r27: deck-name readability, simplified text-search wording, no duplicate active deck in selectors */
.deck-edit-toolbar > label{
  color:#26333a!important;
  font-weight:800!important;
  text-shadow:none!important;
}
.deck-edit-toolbar > label #deckName{
  color:#1f2d34!important;
  font-weight:700!important;
}
.deck-pool-panel .deck-text-search-row{
  grid-template-columns:minmax(0,1fr) 26px!important;
}


/* v35r31: deck navigation + surrender */
.deck-head-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.surrender-button{
  margin-top:8px!important;
  width:100%;
  background:#5c2730!important;
  border-color:#9b4b59!important;
  color:#fff!important;
  font-weight:800;
}
.surrender-button:hover{
  background:#73313d!important;
}
\n\n/* v35r32: portable bug-report diagnostics */
.bug-report-button{margin-top:8px!important;width:100%;background:#f4f7f8!important;border-color:#71868f!important;color:#263840!important;font-weight:800}
.bug-report-button:hover{background:#e7eef1!important}
.bug-report-modal-box{width:min(560px,92vw)}
.bug-report-help{margin:0 0 10px;color:#53656d;font-size:13px;line-height:1.6}
#bugReportComment{width:100%;min-height:140px;resize:vertical;box-sizing:border-box;padding:10px;border:1px solid #9eb4bd;border-radius:7px;background:#fff;color:#26333a;font:inherit}
.bug-report-status{min-height:22px;margin-top:8px;font-size:12px;font-weight:700;color:#37545f}
.bug-report-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}


/* v35r33: single-skill attack width, field spacing, turn ownership banner */
#targetModal.single-attack-mode .modal-box{
  max-width:620px!important;
}
.compact-board .field-zone .field{
  gap:7px!important;
}
@media(max-width:1200px){
  .compact-board .field-zone .field{
    gap:6px!important;
  }
}
@media(max-width:700px){
  #targetModal.single-attack-mode .modal-box{
    max-width:92vw!important;
  }
}


/* v35r34: softer bug-report hover + slightly larger / wider-spaced field insects */
.bug-report-button{
  background:#34434d!important;
  border-color:#647681!important;
  color:#fff!important;
}
.bug-report-button:hover{
  background:#40515d!important;
  border-color:#738894!important;
  color:#fff!important;
  filter:none!important;
  box-shadow:none!important;
}
.compact-board .field-zone .image-only-card{
  width:122px!important;
  min-width:122px!important;
  max-width:122px!important;
}
.compact-board .self-half .field-zone .image-only-card{
  width:136px!important;
  min-width:136px!important;
  max-width:136px!important;
}
.compact-board .field-zone .field{
  gap:10px!important;
}
@media(max-width:1200px){
  .compact-board .field-zone .image-only-card{
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
  }
  .compact-board .self-half .field-zone .image-only-card{
    width:120px!important;
    min-width:120px!important;
    max-width:120px!important;
  }
  .compact-board .field-zone .field{
    gap:8px!important;
  }
}
.connection-status{display:none;position:fixed;top:0;left:0;right:0;z-index:10000;padding:10px 16px;text-align:center;background:#704215;color:white;font-weight:700;box-shadow:0 2px 8px #0004}
.connection-status.show{display:block}
body.connection-paused #game button,body.connection-paused #game .card{pointer-events:none;opacity:.65}