:root{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;color:#f6f0dc;background:#132d2c;font-size:15px;color-scheme:dark;--gold:#d7bc76;--line:#57736b;--muted:#bdd0c1}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 10%,#2d4e41,#132d2c 70%);min-height:100vh}button,input,select{font:inherit}button,.file{min-height:44px;border:1px solid #738a75;border-radius:9px;background:#24483d;color:#fff9e5;padding:10px 14px;cursor:pointer}button:hover{background:#345c4c}button:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #f0d18e;outline-offset:2px}button:disabled{opacity:.45;cursor:not-allowed}.primary,#new,#reveal{background:#ead69e;color:#24392c;font-weight:700;border-color:#ead69e}h1,h2,h3,p{margin:0}p{line-height:1.7}h1{font-size:1.25rem}h2{font-size:1.1rem}h3{font-size:1rem}small,.foot{color:var(--muted)}a{color:#ead69e}[hidden]{display:none!important}
body>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px max(20px,env(safe-area-inset-left));border-bottom:1px solid #718c6b66}body>header small{font-size:10px;letter-spacing:.18em}.badge{font-size:.75rem;color:#d5c9a2}main{max-width:1440px;margin:auto;padding:14px max(16px,env(safe-area-inset-left)) 16px max(16px,env(safe-area-inset-right))}#welcome{max-width:820px;margin:24px auto;padding:28px;background:#1b3b33;border:1px solid #779173;border-radius:18px}#welcome>p{margin:16px 0}#welcome>button{margin:4px 6px 4px 0}#welcome>h2{font-size:1.6rem;color:#edd49a}.panel{border:1px solid #657c63;border-radius:12px;background:#203d34;padding:14px}.utility-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}.utility-nav .file{display:flex;align-items:center;gap:8px}.file input{max-width:190px;font-size:11px}#status{font-size:12px;min-height:18px;color:#ead69e}.foot{font-size:11px;margin-top:12px}
/* Shared card face: the approved 2:3 silhouette, gold botanical border and neutral stat panels. */
.card-face{position:relative;isolation:isolate;container-type:inline-size;aspect-ratio:2/3;width:100%;min-width:0;display:flex;flex-direction:column;gap:2%;padding:5% 5% 3%;overflow:hidden;border:1px solid #b49b54;border-radius:6%;background:linear-gradient(140deg,#ffffffb8,#ffffff5c),var(--card-color);box-shadow:inset 0 0 0 3px #f7ecc8,0 3px 8px #0004;color:#352a20;text-align:center}
.botanical{position:absolute;inset:0;width:100%;height:100%;color:#9e8139;z-index:-1;pointer-events:none}.card-heading{position:relative;flex:0 0 22%;display:flex;flex-direction:column;justify-content:center;padding:0 19%;min-height:0}.card-category{font-size:4.5cqw;color:#4a3c2d;font-weight:700;letter-spacing:.12em}.card-title{display:block;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:7cqw;line-height:1.15;overflow-wrap:anywhere;margin:2% 0}.card-species{font-size:4.6cqw;line-height:1.2}.card-attribute{position:absolute;top:12%;left:-1%;width:20%;display:flex;flex-direction:column;align-items:center;font-size:4.1cqw;line-height:1.2;color:#3a392d}.card-attribute .icon{width:15cqw;height:15cqw;padding:2cqw;border:1px solid #9f8a52;border-radius:50%;background:color-mix(in srgb,var(--card-color) 65%,white)}.card-cost{position:absolute;right:-1%;top:10%;width:18cqw;height:18cqw;display:grid;place-items:center;border:1px solid #9f8a52;border-radius:50%;background:#fff8e2c9;font-family:Georgia,serif;font-size:13cqw;line-height:1}.card-art{position:relative;flex:1 1 0;min-height:0;overflow:hidden;border:1px solid #b59b58;border-radius:13% 13% 10% 10%;background:radial-gradient(ellipse,#fff9db,var(--card-color));display:grid;place-items:center}.sprite-art{width:86%;height:100%;object-fit:contain;image-rendering:pixelated}.pupa-art{display:block;width:100%;height:100%;overflow:hidden}.art-note{position:absolute;bottom:1%;right:3%;font-size:3cqw;color:#3f4b3a;background:#fff9dbb8;border-radius:3px;padding:0 3px}.art-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#485640;opacity:.65}.art-placeholder .icon{width:30cqw;height:30cqw}.art-placeholder small{font-size:4cqw;color:inherit}.card-stats{display:grid;grid-template-columns:1fr 1fr;gap:3%;flex:0 0 10%;min-height:0}.card-stats>span{display:flex;align-items:center;justify-content:space-evenly;gap:3%;background:#fff8e7;border:1px solid #b59b58;border-radius:18%}.card-stats .icon{width:9cqw;height:9cqw;color:#8c7849}.card-stats small{font-size:4.5cqw;color:#493c2c}.card-stats b{font-family:Georgia,serif;font-size:10cqw}.card-copy{flex:0 0 25%;overflow:auto;background:#fffdf0db;border:1px solid #b59b58;border-radius:7%;padding:3%;text-align:left;font-size:4cqw;line-height:1.5;scrollbar-width:thin}.card-copy>strong{display:block;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:5cqw;margin-bottom:3%;border-bottom:1px solid #baa367}.card-copy p{line-height:1.5;white-space:pre-wrap}.long-copy .card-copy{flex-basis:35%}.card-footer{flex:0 0 3%;font-size:3cqw;color:#92753c;letter-spacing:.18em}.icon{display:inline-block;width:20px;height:20px;vertical-align:middle;flex-shrink:0}.card-back{aspect-ratio:2/3;overflow:hidden;border-radius:6%;height:100%;max-width:100%;margin:auto;background:#356b8f}.card-back img{display:block;width:100%;height:100%;object-fit:contain}.card-tap{padding:0;border:0;background:transparent;display:block;min-height:44px;min-width:0;max-width:100%;border-radius:6%;text-align:center;touch-action:manipulation}.card-tap:hover{background:transparent;filter:brightness(1.06)}
/* Approved pupa reference: title plaque, large attribute medallion, fine double gold frame,
   leaf sprigs and parchment stat/effect panels. Reference pixels remain unchanged. */
.card-face{padding:3.8% 4.4% 2.8%;gap:1.2%;border-color:#a28538;background:radial-gradient(ellipse at 15% 8%,#fffde8bb,transparent 35%),linear-gradient(125deg,#ffffff96,#ffffff59),var(--card-color);box-shadow:inset 0 0 0 2px #fff5c5,inset 0 0 0 4px #bda45b,0 3px 8px #0004;border-radius:5%}
.botanical{z-index:0;color:#a58843}.leaf-filagree{fill:color-mix(in srgb,var(--card-color) 65%,#6b8750);opacity:.5}.card-heading,.card-art,.card-stats,.card-copy,.card-footer{position:relative;z-index:1}.card-heading{flex-basis:15%;padding:0 23%;justify-content:center;background:linear-gradient(90deg,transparent 8%,#fffbe6e8 23% 77%,transparent 92%);border-radius:35% 35% 8% 8%}.card-category{align-self:center;white-space:nowrap;font-size:4.3cqw;border:1px solid #ad9048;border-radius:25%;padding:0 10%;background:#fffbed;box-shadow:inset 0 0 0 1px #ead8a6;line-height:1.25}.card-title{font-size:7.6cqw;line-height:1.15;margin:2% 0;letter-spacing:.02em}.main-face .card-title{font-size:10.5cqw}.card-species{font-size:4.8cqw;font-weight:600}.card-attribute{top:9%;left:0;width:22%;font-size:4.5cqw;font-weight:700}.card-attribute .icon{width:18cqw;height:18cqw;padding:2.5cqw;border:2px solid #b59a51;box-shadow:0 0 0 1px #fff5c9,inset 0 0 0 1px #fffae4;color:#fffdf1;background:radial-gradient(ellipse at 30% 20%,color-mix(in srgb,var(--card-color),white 20%),var(--card-color))}.card-attribute span{padding:0 10%;border:1px solid #ad9048;border-radius:30%;background:#fff9dd;min-width:95%;margin-top:-1cqw}.card-cost{right:0;top:9%;width:19cqw;height:19cqw;font-size:16cqw;border:2px solid #b59a51;box-shadow:0 0 0 1px #fff4c3,inset 0 0 0 1px #efe1ae;background:radial-gradient(ellipse,#fffdf2,#f3e8c2)}.card-art{border-radius:14% 14% 12% 12%;border-color:#aa8b40;box-shadow:0 0 0 1px #fff5cc}.card-stats{flex-basis:9%;gap:4%}.card-stats>span{background:linear-gradient(110deg,#f6eacb,#fffdf2 50%,#f3e6c3);border-radius:19%;border-color:#b49950;box-shadow:inset 0 0 0 1px #fff8dd,0 0 0 1px #d9c992}.card-stats .icon{width:10cqw;height:10cqw;color:#8b743e;stroke-width:2}.card-stats small{font-size:4.5cqw;font-weight:700}.card-stats b{font-size:12cqw}.card-copy{flex-basis:24%;font-size:3.8cqw;padding:3%;border-radius:8%;border-color:#ad9048;box-shadow:inset 0 0 0 1px #fff8da,0 0 0 1px #d4be82;background:linear-gradient(115deg,#fff4d9,#fffef3 50%,#f8edcc);overflow:hidden}.card-copy>strong{font-size:5.4cqw;line-height:1.3;border-bottom:1px solid #b79a51;padding-bottom:2%;margin-bottom:3%}.card-copy>strong:before{content:'❧';color:#6e8d4e;margin-right:3%}.card-footer{font-size:2.9cqw;flex-basis:2%;color:#94703c}.long-copy .card-copy{flex-basis:32%;font-size:3.5cqw}.compact .card-heading{flex-basis:27%;padding:0 23%}.compact.main-face .card-title{font-size:9cqw}
/* Deck editor keeps canonical IDs/copy limits; cards share the same renderer. */
#deck-editor{margin:20px 0;border-top:1px solid #718567;padding-top:16px}.deck-toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin:12px 0}.deck-toolbar label{display:flex;flex-direction:column;gap:6px;min-width:0}input,select{font:inherit;border:1px solid #738a75;border-radius:8px;background:#14372d;color:#fff;min-height:44px;padding:8px;max-width:100%}#deck-list{max-height:240px;overflow:auto;margin:12px 0}.deck-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #56705b}.deck-row span{overflow-wrap:anywhere}.deck-row button{flex-shrink:0;margin:4px 0}#catalog-list{max-height:560px;overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}.catalog-card{background:#133329;border:1px solid #607956;border-radius:10px;padding:10px;overflow-wrap:anywhere;min-width:0}.catalog-card>strong,.catalog-card>small{display:block;margin:8px 0}.catalog-card>small{font-size:10px}.catalog-card p{font-size:12px}.catalog-card>button:not(.catalog-preview){width:100%;margin-top:8px}.catalog-preview{width:110px;margin:auto}

/* Dedicated 60px operation guide in portrait; landscape keeps B-layout columns. */
.safe-area-probe{position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body.playing{position:fixed;top:var(--ui-vtop,0px);left:var(--ui-vleft,0px);width:var(--ui-vw,100vw);height:var(--ui-vh,100dvh);min-height:0;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.playing>header,.playing .foot{display:none}.playing main{width:100%;height:100%;max-width:none;min-height:0;padding:0 6px;display:flex;flex-direction:column}.playing #game{display:flex;flex-direction:column;min-height:0;flex:1;gap:4px}.playing #status{height:14px;min-height:14px;line-height:14px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.table-top{display:flex;gap:8px;align-items:center;height:44px;min-height:44px;flex:none}.table-top>div{flex:1;min-width:0}.table-top strong,.table-top small{display:block;font-size:12px}.table-top small{font-size:10px}.table-top button{min-height:44px;padding:6px 10px;font-size:11px;flex:none}
.battle-area{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.15fr);gap:6px;min-height:0;min-width:0;flex:1}.board-shell{min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;padding:2px;touch-action:pan-y}.player-board{width:100%;max-width:320px;margin:0 auto;padding:6px;background:linear-gradient(160deg,#274f43,#1a3b33);border:1px solid #d6b977;border-radius:10px}.player-board.opponent{max-width:260px;border-color:#74917b;background:#193b34}.player-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px;min-height:24px;font-size:10px}.player-heading strong{color:#f5dca0}.player-heading b{font-size:13px}.board-layout{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:4px}.board-field{min-width:0}.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.slot{position:relative;aspect-ratio:1.05;min-width:0;display:grid;grid-template-rows:12px minmax(0,1fr);padding:2px;border:1px solid #78906e;border-radius:5px;background:#102c2655;overflow:visible}.slot>small{font-size:8px;line-height:10px;text-align:center;white-space:nowrap}.slot-content{position:relative;min-height:0;min-width:0;width:100%;height:100%;display:grid;place-items:center}.slot-content .card-tap{display:block;width:auto;height:100%;aspect-ratio:2/3;min-height:0;max-width:100%}.slot .card-face,.slot .card-back{width:100%;height:100%;aspect-ratio:2/3}.board-card-name{display:none}.empty-slot{display:grid;place-items:center;color:#8fab8a77;font-size:16px}.attachment{position:absolute;bottom:2px;left:2px;right:2px;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:7px;background:#16392eea;text-align:center;pointer-events:none}.management{padding-top:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:4px;min-width:0}.management>[data-zone]{border:1px solid #78906e;border-radius:5px;background:#142e28;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:0;padding:2px;font-size:8px;overflow:hidden;gap:2px}.management b{font-size:13px}.management small{display:none}.management .card-back{width:12px;height:18px;flex:none}.board-metrics{display:flex;justify-content:center;gap:6px;min-height:20px;padding-top:4px;font-size:9px}.board-metrics .icon{width:12px;height:12px;color:#dcc68f}.opponent .board-metrics{font-size:8px;gap:3px}
#operation-panel{min-height:0;min-width:0;padding:3px;border:1px solid #9c9865;border-radius:10px;background:#193d32;overflow:auto;align-self:start;max-height:100%}#operation-panel:focus{outline:1px solid #e4c780;outline-offset:-2px}
.operation-notice{display:flex;flex-direction:column;gap:4px;min-width:0}.notice-expand{display:flex;align-items:center;gap:6px;min-width:0;min-height:44px;padding:4px;text-align:left;border:0;background:transparent}.notice-copy{flex:1;min-width:0}.notice-copy strong{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notice-copy>span{display:block;font-size:11px;line-height:1.35;margin-top:2px}.notice-more{font-size:9px;color:#e8d49c;flex:none}.notice-thumb{display:block;width:24px;height:36px;flex:none}.notice-thumb>.card-face{width:24px;height:36px}.notice-thumb .egg-image{width:24px;height:36px;object-fit:contain}.notice-actions{min-width:0}.notice-actions button{min-height:44px;font-size:12px;padding:5px 8px}.notice-actions .action-destination{display:none}
.operation-heading{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:12px;flex:none;min-height:20px}.operation-heading small{font-size:10px}.operation-guide,.operation-note{font-size:11px;line-height:1.4}.operation-guide{flex:none}.operation-scroll{min-height:44px;overflow:auto;overscroll-behavior:contain;flex:1;scrollbar-width:thin}.effect-focus{display:flex;align-items:center;gap:7px;min-width:0;flex:none;padding:5px;border-left:3px solid #e4c780;background:#d9bb7012;border-radius:5px}.effect-thumb{flex:none;width:32px;height:48px;display:grid;place-items:center}.effect-thumb .card-tap{width:32px;height:48px;min-height:0}.effect-thumb .egg-image{width:32px;height:44px;object-fit:contain;image-rendering:pixelated}.effect-focus>div:last-child{min-width:0}.effect-focus small{display:block;font-size:9px;line-height:1.3;color:#dfd0a1}.effect-focus strong{display:block;font-size:11px;line-height:1.4;overflow-wrap:anywhere}.effect-focus p{font-size:10px;line-height:1.4;margin-top:2px}.is-eligible{box-shadow:0 0 0 2px #8ed4ac,0 0 8px #84dfa655}.operation-scroll .chain{margin-top:8px;font-size:10px}.operation-scroll .actions button{font-size:12px;padding:7px;min-height:44px}.operation-scroll .selection-summary{margin:4px 0;padding-left:18px}.detail-copy>.effect-focus{max-width:100%}.detail-pass{flex:none}.detail-pass button{flex:none;min-height:44px}.detail-pass:empty{display:none}
.card-tap{padding:0;border:0;background:none;min-width:0;display:block;aspect-ratio:2/3;border-radius:6%;touch-action:manipulation}.card-tap:hover{background:none}.card-back{aspect-ratio:2/3;width:100%;height:100%;margin:0;border-radius:6%;overflow:hidden}.card-back img{display:block;width:100%;height:100%;object-fit:contain}
/* Each face has explicit bounded rows. Image intrinsic dimensions cannot push an image outside its art row. */
.card-face{display:grid;grid-template-rows:20% minmax(0,1fr) 10% 25% 3%;gap:1%;padding:4%;height:auto;aspect-ratio:2/3}.card-face:not(.main-face){grid-template-rows:20% minmax(0,1fr) 27% 3%}.card-heading{display:flex;justify-content:center;min-height:0;overflow:visible;padding:0 23%;gap:1px}.card-title,.main-face .card-title{font-size:var(--title-size,7cqw);line-height:1.13;margin:1% 0;flex:none;max-width:100%;overflow-wrap:anywhere}.card-category{font-size:3.6cqw;line-height:1.2;flex:none;margin:0}.card-species{font-size:3.8cqw;line-height:1.2;flex:none}.card-attribute{top:8%;font-size:3.7cqw}.card-cost{top:8%}.card-art{display:block;min-height:0;min-width:0;position:relative;overflow:hidden;border-radius:13%}.card-art>.sprite-art,.card-art>.pupa-art{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;display:block}.art-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.card-stats{min-height:0}.card-copy{min-height:0;overflow:hidden;font-size:3.7cqw;line-height:1.4;padding:3%}.card-copy p{line-height:1.4}.card-copy>strong{font-size:4.8cqw;margin-bottom:2%;padding-bottom:1%}.long-copy .card-copy{font-size:3.2cqw}.card-footer{font-size:2.7cqw}.compact.card-face{grid-template-rows:27% minmax(0,1fr) 16%}.compact.card-face:not(.main-face){grid-template-rows:27% minmax(0,1fr)}.compact .card-copy,.compact .card-footer{display:none}.compact .card-heading{padding:0 23%}.compact .card-title,.compact.main-face .card-title{font-size:var(--title-size,7cqw)}.compact .card-stats small{display:none}.compact .art-note{display:none}
.hand-panel{flex:none;min-width:0;border-top:1px solid #667c62;background:#183a30}.hand-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;height:32px}.hand-heading button{min-height:32px;padding:4px 9px;font-size:11px}.hand-heading small{font-size:9px;margin-left:8px}.hand-panel .cards{display:flex;align-items:flex-start;gap:10px;height:82px;overflow-x:auto;overflow-y:hidden;padding:5px 5px 9px;scrollbar-width:thin;overscroll-behavior:contain;touch-action:pan-x}.hand-entry{position:relative;flex:0 0 48px;width:48px}.hand-card{width:48px;height:72px;touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}.hand-card *{pointer-events:none}.hand-collapsed .cards{display:none}.hand-collapsed .hand-heading>button:first-child:after{content:' · 開く'}.reordering .cards{height:160px}.reordering .hand-entry{width:92px;flex-basis:92px;display:flex;flex-direction:column;align-items:center}.hand-moves{display:flex;width:100%;gap:4px;height:44px;margin-top:4px}.hand-moves button{width:44px;height:44px;min-height:44px;padding:0;font-size:18px}.drag-source>.hand-card{opacity:.2}.drag-ghost{position:fixed;z-index:100;pointer-events:none;transform:translate(-50%,-65%) scale(1.08) rotate(-3deg);filter:drop-shadow(0 10px 8px #0009);padding:0;border:0;background:none;min-height:0}.is-selected{outline:2px solid #ffdf88;outline-offset:1px}.is-destination{border:2px solid #ffe09a!important;background:#c9ab4b33!important}.is-target{outline:2px dashed #a7e2d8;outline-offset:1px}
/* One modal workspace for card actions and forced choices. */
dialog{color:#f9f1d9;background:#18392f;border:1px solid #c8ac6b;border-radius:14px;width:min(92vw,650px);max-height:calc(var(--ui-vh,100dvh) - 24px);padding:12px;overflow:auto;box-shadow:0 16px 60px #0009}dialog::backdrop{background:#071c18dc}.detail-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;font-size:12px;flex:none}.detail-toolbar h2{font-size:15px}.dialog-close{min-height:44px;padding:6px 12px;margin:0;flex:none}.card-detail,.workflow-dialog{position:fixed;inset:auto;margin:0;left:calc(var(--ui-vleft,0px) + env(safe-area-inset-left) + 8px);top:calc(var(--ui-vtop,0px) + env(safe-area-inset-top) + 8px);width:calc(var(--ui-vw,100vw) - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);height:calc(var(--ui-vh,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);max-width:none;max-height:none;padding:8px;overflow:hidden;grid-template-rows:44px minmax(0,1fr);gap:10px}.card-detail[open],.workflow-dialog[open]{display:grid}.detail-layout{display:grid;grid-template-columns:var(--detail-card-width,180px) minmax(0,1fr);gap:12px;min-height:0;height:100%;align-items:center;max-width:1050px;width:100%;margin:auto}.detail-image{width:var(--detail-card-width,180px);height:var(--detail-card-height,270px);margin:auto}.detail-card-canvas{width:320px;height:480px;transform:scale(var(--detail-scale,.5625));transform-origin:top left}.detail-card-canvas>.card-face,.detail-card-canvas>.card-back{width:320px;height:480px}.detail-copy{display:flex;flex-direction:column;gap:6px;height:100%;min-height:0;min-width:0;overflow-y:auto;overscroll-behavior:contain}.detail-summary{flex:none}.detail-summary h2{font-size:18px;line-height:1.2;overflow-wrap:anywhere}.detail-summary p{font-size:11px;line-height:1.3;margin:3px 0}.effect-scroll{flex:1 1 70px;min-height:44px;overflow:auto;overscroll-behavior:contain;border-block:1px solid #71856780;padding:6px 2px}.effect-scroll h3{font-size:14px;margin-bottom:6px}.effect-scroll p{font-size:14px;line-height:1.6;white-space:pre-wrap}.detail-command{display:flex;flex-direction:column;gap:5px;flex:0 1 auto;min-height:88px;max-height:60%}.detail-command:has(.choice-guide){min-height:100px}.detail-command h3{font-size:12px;flex:none}.detail-actions{flex:1 1 44px;min-height:44px;overflow:auto;overscroll-behavior:contain}.actions{display:flex;flex-direction:column;gap:6px}.actions button{min-height:44px;flex:none;font-size:13px;text-align:left;line-height:1.4;padding:8px 10px;overflow-wrap:anywhere}.single-action button,.actions button[data-kind=pass]{border-color:#e0c37f;background:#e9d69e;color:#253d30;font-weight:bold}.action-destination{display:block;font-size:11px;color:inherit;margin-top:3px}.selected-choice{border:2px solid #ffdf88}.choice-guide{font-size:12px;line-height:1.5;color:#e4dfc1}.unavailable{font-size:12px;line-height:1.5}.secondary{font-size:11px;padding:5px 8px;min-height:36px;flex:none}.workflow-body{overflow:auto;min-height:0;padding:0 5px;overscroll-behavior:contain}.workflow-body>p{margin:4px 0 10px}.workflow-options{margin:10px 0}.choice-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:12px}.choice-cards>div{font-size:11px;text-align:center;min-width:0}.choice-cards .card-tap{width:80px;height:120px;margin:0 auto 6px}.option-caption{font-size:11px;margin:8px 0}.chain,.history{border-top:1px solid #71856780;margin-top:12px;padding-top:8px;font-size:12px}.chain p{margin:8px 0}.history ol{padding-left:20px}summary{min-height:36px;cursor:pointer}.resource-strip{font-size:12px}.notice{border-left:3px solid #d7bc76;padding:7px;background:#f4d79514}.selection-summary{font-size:12px}.discard-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;margin-top:12px}.discard-cards .card-tap{width:80px;height:120px;margin:auto}.discard-cards .card-tap>.card-face,.activation-entry>.card-tap>.card-face{width:100%;height:100%;aspect-ratio:2/3}.confirmation-label{padding:10px;border-left:3px solid #d7bc76;font-size:16px;margin:12px 0}.dialog-buttons{display:flex;justify-content:flex-end;gap:8px;padding:8px 0;position:sticky;bottom:-12px;background:#18392f}#menu-dialog .utility-nav{display:flex;flex-direction:column;align-items:stretch;gap:10px}#menu-dialog .file{white-space:normal;display:block}#menu-dialog .file input{display:block;margin-top:8px;width:100%;max-width:100%}
#curtain{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse,#284a40,#0c2623)}#curtain section{text-align:center;max-width:430px}#curtain h2{font-size:1.5rem;color:#eed39b;margin:18px 0}#curtain p{color:#c9d4bd}#curtain button{margin-top:22px;min-width:180px}#result{flex:none;text-align:center;padding:12px}.table-top~#result+nav{display:none}
:root[data-detail-orientation=portrait] .detail-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--detail-card-height,180px) minmax(0,1fr);align-items:stretch}:root[data-detail-orientation=portrait] .detail-summary h2{font-size:17px}
@media(orientation:portrait){
 .badge{display:none}#welcome{padding:16px;margin:12px auto}#catalog-list{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-preview{width:90px}.table-top strong{font-size:11px}.table-top button{font-size:10px;padding:5px 7px}
 .battle-area{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,min(132px,40%)) minmax(0,1fr) 60px;gap:4px}.opponent-shell{overflow-y:auto;padding:0}.player-board.opponent{max-width:none;width:100%;height:132px;padding:3px 5px}.opponent .player-heading{min-height:18px;height:18px;flex-wrap:nowrap;font-size:9px}.opponent .player-heading b{font-size:11px}.opponent .board-layout{grid-template-columns:minmax(0,1fr) 38px;gap:4px}.opponent .slots{gap:3px}.opponent .slot{aspect-ratio:auto;height:28px;grid-template-rows:8px minmax(0,1fr);padding:1px 2px}.opponent .slot>small{font-size:7px;line-height:8px}.opponent .slot-content .card-tap{width:100%;height:16px;aspect-ratio:auto;display:flex;align-items:center;gap:3px;overflow:hidden}.opponent .slot .card-face,.opponent .slot .card-back{flex:none;width:10px;height:15px}.opponent .board-card-name{display:block;color:#efe2b5;font-size:8px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.opponent .management{padding-top:0;gap:3px}.opponent .management>[data-zone]{flex-direction:row;gap:3px;font-size:7px;padding:0}.opponent .management b{font-size:10px}.opponent .management .card-back{display:none}.opponent .board-metrics{min-height:14px;padding-top:2px;font-size:8px}.opponent .attachment{display:none}
 #operation-panel{padding:2px 4px;height:60px;max-height:60px;align-self:stretch;overflow:hidden}.operation-notice{height:100%;flex-direction:row;align-items:center;gap:4px}.notice-expand{flex:1;min-height:52px;height:100%;padding:2px}.notice-actions{flex:0 1 116px;max-height:52px;overflow-y:auto}.notice-copy strong{font-size:10px}.notice-copy>span{font-size:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notice-more{font-size:8px}.notice-actions button{font-size:11px;line-height:1.3}.hand-heading small{font-size:8px}
 .player-board.own{width:100%;max-width:none;height:100%;min-height:260px;display:grid;grid-template-rows:auto minmax(0,1fr) auto}.own .board-layout{min-height:0}.own .board-field{min-height:0;display:flex;flex-direction:column}.own .slots{flex:1;grid-template-rows:repeat(3,minmax(54px,1fr))}.own .slot{aspect-ratio:auto;height:auto;min-height:54px}.own .slot-content{container-type:size}.own .slot-content .card-tap{height:min(100cqh,150cqw);width:min(100cqw,66.6667cqh);aspect-ratio:2/3}
 .detail-copy>.effect-focus{display:flex;max-width:100%;align-self:stretch}.detail-copy>.effect-focus strong{font-size:11px}
}
@media(orientation:landscape){
 .hand-panel:not(.hand-collapsed){display:grid;grid-template-columns:106px minmax(0,1fr);gap:4px}.hand-panel:not(.hand-collapsed) .hand-heading{height:82px;flex-direction:column;justify-content:center;gap:2px}.hand-panel:not(.hand-collapsed) .hand-heading button{width:100%;min-height:32px;padding:3px;font-size:10px}.hand-heading small{display:none}
}
@media(orientation:landscape) and (max-height:330px){
 #operation-panel .operation-heading{display:none}.hand-panel:not(.hand-collapsed) .hand-heading{height:66px}.effect-focus strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.effect-focus p{max-height:2.8em;overflow-y:auto}.table-top{height:44px}.table-top small{font-size:9px}.hand-heading{height:28px}.hand-heading button{min-height:28px}.hand-panel .cards{height:66px;padding-top:3px;padding-bottom:3px}.hand-entry{width:40px;flex-basis:40px}.hand-card{width:40px;height:60px}.reordering .cards{height:112px}.reordering .hand-entry{width:92px;flex-basis:92px}.effect-focus{padding:3px;gap:4px}.effect-thumb,.effect-thumb .card-tap{width:24px;height:36px}.effect-thumb .egg-image{width:24px;height:34px}.effect-focus p{font-size:9px}.effect-focus small{font-size:8px}.effect-focus strong{font-size:10px}.operation-heading{min-height:16px;font-size:11px}.operation-scroll .actions button{font-size:11px}.detail-summary h2{font-size:15px}.detail-summary p{font-size:10px}.detail-command:has(.choice-guide){min-height:100px}.detail-command .choice-guide{font-size:10px}.detail-toolbar{font-size:10px}
}
@media(orientation:portrait) and (max-height:550px){.battle-area{grid-template-rows:minmax(0,min(132px,40%)) minmax(0,1fr) 60px}.hand-panel:not(.hand-collapsed) .cards{height:66px}.hand-entry{width:40px;flex-basis:40px}.hand-card{width:40px;height:60px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.drag-ghost{transform:translate(-50%,-65%)}}

/* Engine-projected response candidates only; other cards remain visibly present. */
.response-unavailable{opacity:.32;filter:grayscale(.75);cursor:default}
.response-options{display:flex;gap:6px;overflow-x:auto;padding:4px 8px;max-width:100%;align-items:center}
.response-options button{flex:0 0 auto;font-size:.8rem;padding:6px 10px;min-height:44px}
@media(orientation:portrait){
 .battle-area:has(.response-options){grid-template-rows:minmax(0,min(132px,40%)) minmax(0,1fr) 108px}
 #operation-panel:has(.response-options){height:108px;max-height:108px}
 #operation-panel:has(.response-options) .operation-notice{height:56px}
 .response-options{padding:0 2px;min-height:44px}
}

/* Results overlay the opponent grid cell; absolute positioning contributes no track size. */
#result-feedback{position:absolute;grid-column:1/2;grid-row:1/2;inset:4px 0 auto;justify-self:center;z-index:10;min-width:0;width:max-content;max-width:94%;max-height:100%;pointer-events:none;overflow:hidden}
#result-feedback:empty{display:none}
.result-notice{position:relative;min-height:64px;overflow:hidden;padding:5px 48px 5px 8px;border:1px solid #bdaa77;border-radius:8px;background:#122f2a;color:#fff2cf;pointer-events:none}
.result-notice>strong{font-size:11px;display:block;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-notice>small{display:block;font-size:9px;color:#d4d5bd;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-notice ul{list-style:none;padding:0;margin:2px 0}.result-notice li{display:flex;align-items:center;gap:5px;font-size:11px;min-height:24px;line-height:1.3}.result-notice li>span:last-child{min-width:0;white-space:normal;overflow-wrap:anywhere}
.result-mini{width:16px;height:24px;display:block;flex:none;overflow:hidden}.result-mini>.card-face{width:16px;height:24px}.result-return .result-mini{animation:result-return .38s ease-out}.result-draw .result-mini{animation:result-enter .38s ease-out}
.result-arrive{animation:result-card .45s ease-out}.result-deck{animation:result-card .45s ease-out}
.result-history section{border-bottom:1px solid #607b63;padding:6px 0}.result-history h3{font-size:13px;margin:5px 0}.result-history ul,.result-trace{padding-left:20px;font-size:12px}.result-history h3 small{font-weight:normal;color:#b9c8b1}
@keyframes result-enter{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes result-return{from{opacity:.4;transform:translateX(-10px) scale(.85)}to{opacity:1;transform:none}}
@keyframes result-card{from{opacity:.5;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.result-notice,.result-mini,.result-arrive,.result-deck{animation:none!important}}
.result-collapse{position:absolute;right:0;top:0;width:44px;height:44px;padding:0;border:0;background:transparent;pointer-events:auto;font-size:20px}
.table-top .result-reopen{flex:none;width:44px;min-height:44px;padding:2px;font-size:18px}.result-reopen small{display:block;font-size:9px}
.deck-preview{width:120px;height:180px;margin:12px auto}.zone-count{text-align:center;font-weight:bold}.zone-body>p{font-size:12px;margin:10px 0}.zone-body .discard-cards>div{min-width:0;text-align:center}.zone-body .discard-cards .zone-card-caption{display:block;font-size:11px;margin-top:6px;overflow-wrap:anywhere}
.activation-entry{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #71856780}.activation-entry>.card-tap{flex:none;width:70px;height:105px}.activation-entry>div{min-width:0}.activation-entry>div>strong{font-size:13px}.activation-entry>div>p{font-size:12px;overflow-wrap:anywhere}


/* Guide styling is scoped to its own copy, never to cards or results. */
#operation-panel{position:relative;z-index:auto;flex:none}.notice-copy strong{color:#f2dda4}.notice-copy>span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.notice-expand{min-width:0}.notice-more{white-space:nowrap}
@media(orientation:landscape){#operation-panel{max-height:100%;overflow-y:auto}.notice-expand{min-height:52px}}

@media(orientation:landscape) and (max-height:330px){.result-notice{min-height:48px}.result-notice>small{display:none}.result-notice li{min-height:20px}.result-mini,.result-mini>.card-face{width:12px;height:18px}}

.match-options{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}.match-options label{display:grid;gap:5px;min-width:130px;flex:1}.match-options select{width:100%;min-height:44px}.match-options [hidden]{display:none}.cpu-thinking{justify-content:center;min-height:44px;padding:4px 6px}

/* Face-to-face positions only: card content and canonical slot IDs stay upright. */
.opponent .board-layout{grid-template-columns:36px minmax(0,1fr)}
.opponent .board-field{grid-column:2;grid-row:1}
.opponent .management{grid-column:1;grid-row:1}
.opponent .management>[data-zone="deck"]{grid-row:1}
.opponent .management>[data-zone="activation"]{grid-row:2}
.opponent .management>[data-zone="discard"]{grid-row:3}

/* Both management columns align with the three grid rows. */
.opponent .board-field{display:flex;flex-direction:column}
.opponent .management{padding-top:0;padding-bottom:0}
@media(orientation:portrait){.opponent .management{padding-bottom:0}}
/* Same gold/ivory badge palette; reserve the existing heading side lane. */
.card-cost{width:22cqw;height:22cqw;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;font-size:18cqw;font-weight:900;font-variant-numeric:lining-nums tabular-nums;line-height:1;letter-spacing:0;color:#241b12;background:#fff8e2;border-width:max(1px,.8cqw);box-shadow:0 0 0 1px #fff5c9,inset 0 0 0 1px #ead8a6;isolation:isolate}

/* Turn status stays in the existing 44px header; no extra layout row. */
.table-top .turn-indicator{border-left:3px solid #91cfa4;border-radius:5px;padding:3px 5px;background:#204b3c;overflow:hidden}
.table-top .turn-other{border-color:#92bee9;background:#203e56}
.table-top .turn-finished{border-color:#e3cd93;background:#3b453e}
.table-top .turn-indicator strong{font-size:13px;line-height:17px;white-space:nowrap}
.table-top .turn-indicator small{font-size:10px;line-height:13px;white-space:nowrap}
.result-important{border-color:#ebc1ab;max-height:134px}
.milestone-symbol{display:inline-block;color:#f0bbc5;animation:milestone-glow 1.4s ease-out}
.milestone-cause{font-size:11px;line-height:14px;margin:2px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.milestone-values{display:flex;flex-wrap:wrap;gap:1px 8px;max-height:42px;overflow-y:auto;pointer-events:auto;font-size:11px;line-height:14px}
.milestone-values>span{display:block}
@keyframes milestone-glow{0%{transform:scale(.8)}30%{transform:scale(1.18);text-shadow:0 0 10px #f3c3b0}100%{transform:scale(1);text-shadow:none}}
@media(max-width:360px){.table-top .turn-indicator strong{font-size:12px}.table-top .turn-indicator small{font-size:9px}.table-top{gap:4px}}
@media(prefers-reduced-motion:reduce){.milestone-symbol{animation:none!important}}

/* Result replay joins the header only when available; hidden controls take no space. */
.table-top button{width:44px;min-width:44px;padding:2px;overflow-wrap:anywhere}

/* Overlay only: preserve gold border, field metrics and scroll geometry. */
.player-board{position:relative}
.player-board.field-turn-self{--field-turn-color:#83ffc0;--field-turn-glow:#61efaa80}
.player-board.field-turn-other{--field-turn-color:#75caff;--field-turn-glow:#59baff80}
.player-board.field-turn-active::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--field-turn-color),0 0 8px 2px var(--field-turn-glow);pointer-events:none;z-index:2}
.declaration-picker{display:grid;gap:6px;flex:none;font-size:13px;padding:4px 0}
.declaration-picker select{width:100%;min-width:0;min-height:44px;font-size:16px;color:#fff4d2;background:#18392f;border:1px solid #dfc17d;border-radius:6px;padding:8px}
.detail-command:has([data-declaration]){flex:none;max-height:none}
.detail-actions:has([data-declaration]){flex:none;overflow:visible}
@media(prefers-reduced-motion:reduce){.field-turn-active::after{animation:none!important;transition:none!important}}

/* Response never occupies the end-turn hit area. Empty slots retain their width. */
.pass-rail.actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;width:100%;flex:none}
.pass-rail>span{min-width:0;display:block}.pass-rail button{width:100%;min-height:44px;padding:4px;font-size:11px;text-align:center;touch-action:manipulation}
.actions button[data-pass-intent="response"]{background:#254e68;border-color:#91c7e8;color:#f1f9ff}
.actions button[data-pass-intent="end-turn"]{background:#edd49a;border-color:#edd49a;color:#34341d}
@media(orientation:portrait){.operation-notice:has(.pass-rail){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}.operation-notice:has(.pass-rail) .notice-expand{min-height:44px}.pass-rail button{font-size:10px}}
/* PR #393 artwork; the existing card/board boxes and viewport geometry stay fixed. */
.card-attribute .icon{color:var(--mark-ink)}
.card-art{background:#f5ead5}
.card-art>.dedicated-art{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;image-rendering:auto;z-index:1}
.card-art>.dedicated-art[hidden]{display:none}
.art-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;color:#63523d;visibility:hidden}
.art-fallback .icon{width:30%;height:40%}.art-fallback small{font-size:4cqw}
.card-art.art-unavailable .art-fallback,.card-art:not(:has(.dedicated-art)) .art-fallback{visibility:visible}
.card-face:not(.main-face):not(.compact){padding-inline:3%;grid-template-rows:20% auto minmax(0,1fr) 2%}
.card-face:not(.main-face):not(.compact) .card-art{aspect-ratio:3/2;width:100%;border-radius:8%;align-self:center}
.card-face:not(.main-face):not(.compact) .card-heading{padding-left:4%;padding-right:24%}
.card-face:not(.main-face):not(.compact) .card-copy{font-size:3.8cqw}
.history-cards{display:flex;flex-wrap:wrap;gap:5px;margin-block:6px}.history-cards>span{display:block;width:40px;height:60px;flex:none}.history-cards .card-face{width:100%;height:100%}
.deck-row .deck-preview-card{width:36px;height:54px;flex:none;padding:0;min-height:0}.deck-row .deck-preview-card>.card-face{width:100%;height:100%}
/* Adopted AB-soft: PR #397 0f6f9bcb, approved 2026-10-19. */
.card-face{--study-frame:1.4cqw;--study-band:55%;--band-ink:#211d18}
.card-face::before{
 content:"";position:absolute;inset:2.6%;border:var(--study-frame) solid var(--card-color);border-radius:4%;z-index:0;pointer-events:none;
}
.card-face .card-heading{
 background:linear-gradient(100deg,color-mix(in srgb,var(--card-color) var(--study-band),white),color-mix(in srgb,var(--card-color) var(--study-band),white));
 border-radius:12% 12% 8% 8%;box-shadow:inset 0 0 0 1px #b49950;color:var(--band-ink);
}
.card-face .card-stats>span{
 background:linear-gradient(110deg,color-mix(in srgb,var(--card-color) 35%,#fffdf2),#fffdf2 50%,color-mix(in srgb,var(--card-color) 35%,#fffdf2));
 box-shadow:inset 0 -1.6cqw var(--card-color),inset 0 0 0 1px #fff8dd,0 0 0 1px #d9c992;
}
.card-face::after{
 content:"";position:absolute;bottom:3.3%;left:8%;right:8%;height:2%;background:var(--card-color);border:1px solid #b49950;border-radius:50%;z-index:0;pointer-events:none;
}
/* End adopted AB-soft. */


/* Cost ink is independent of heading ink; no size/placement override of CPU work. */
.card-face .card-cost{color:#211d18}

/* Egg state card shares the normal 2:3 slot canvas, with no extra board row. */
.egg-card{width:100%;height:100%;aspect-ratio:2/3;overflow:hidden;border-radius:5%;background:#386885;position:relative}
.egg-card img{display:block;width:100%;height:100%;object-fit:contain}
.opponent .slot .egg-card{flex:none;width:10px;height:15px}
@media(orientation:landscape){.opponent .slot .egg-card{width:100%;height:100%}}
.detail-card-canvas>.egg-card{width:320px;height:480px}

.egg-card img{object-fit:contain}.effect-scroll ol{padding-left:22px;font-size:14px;line-height:1.6}

/* My decks: isolated pre-match editing, shared approved card faces. */
.match-decks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.match-decks label{display:flex;flex-direction:column;gap:8px;min-width:0}.match-decks small{color:#dfcf9e}
#deck-editor>summary{font-size:1.15rem;font-weight:700;color:#eedaa4;cursor:pointer;padding:12px 0;min-height:44px}#my-deck-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;max-height:240px;overflow:auto;overscroll-behavior:contain}.my-deck-item{border:1px solid #65765b;border-radius:12px;padding:10px;min-width:0;background:#123a2f}.my-deck-item.selected{border:2px solid #d3b875;background:#204c3c}.my-deck-item small{display:block;font-size:11px;color:#d2d8c5}.my-deck-open{width:100%;text-align:left;overflow-wrap:anywhere;margin:0 0 5px}.deck-name-label{flex:1;min-width:160px!important}#deck-name{width:100%}#deck-save-status{font-size:12px;overflow-wrap:anywhere;color:#ead5a1}
.deck-edit-sticky{position:sticky;top:0;z-index:3;background:#12392f;padding:10px 0 6px;border-bottom:1px solid #ad9766}.deck-edit-sticky>label{display:flex;flex-direction:column;gap:4px;font-size:12px}#deck-count{margin:0 0 8px;font-weight:bold;color:#f5dfa6}.deck-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}.deck-filters label{display:flex;flex-direction:column;font-size:11px;gap:4px;min-width:0}.deck-filters select{width:100%;font-size:14px;padding:6px}#filter-reset{font-size:12px;margin-top:6px}#catalog-count{margin:4px 0;font-size:12px}
#catalog-list{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));max-height:60vh;max-height:60dvh;min-height:180px;overscroll-behavior:contain;overflow-anchor:none;align-content:start;padding:4px}.catalog-card{padding:10px 8px;content-visibility:auto;contain-intrinsic-size:auto 240px}.catalog-preview{display:block;width:96px;max-width:100%;padding:0}.catalog-card>strong{font-size:13px;min-height:2.5em}.catalog-card>small{font-size:11px;min-height:2.5em}.deck-card-controls{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:2px;text-align:center}.deck-card-controls button{min-width:44px;min-height:44px;font-size:22px;margin:0;padding:4px}.deck-card-controls span{font-size:12px;font-variant-numeric:tabular-nums}#deck-editor button{touch-action:manipulation;min-height:44px}.deck-tools{margin:14px 0}.deck-tools summary,#deck-contents-count{cursor:pointer;min-height:44px;padding:12px 0}.deck-row>button:first-child{flex:1;flex-shrink:1;text-align:left;overflow-wrap:anywhere}.deck-row{font-size:13px}#deck-editor input{font-size:16px}
@media(max-width:480px){.match-decks{grid-template-columns:1fr}.deck-filters{grid-template-columns:repeat(2,minmax(0,1fr))}#catalog-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.catalog-preview{width:90px}.deck-card-controls{grid-template-columns:44px 1fr 44px}.deck-edit-sticky{position:static}}
@media(max-height:500px) and (orientation:landscape){.deck-edit-sticky{position:static}.deck-filters{grid-template-columns:repeat(4,minmax(0,1fr))}#catalog-list{max-height:62dvh}}
#deck-editor[open] #deck-count{position:fixed;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:0;z-index:12;margin:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#12392ff5;border:1px solid #b59b61;border-radius:12px 12px 0 0;box-shadow:0 -4px 18px #0004;font-size:13px;pointer-events:none}.playing #deck-count{display:none}body:has(#deck-editor[open]){padding-bottom:calc(64px + env(safe-area-inset-bottom))}

/* Main menu routes to the existing match, deck and learning controls. */
.main-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px}.main-menu button{min-height:58px;font-weight:700;padding:12px 8px}.main-menu #collection-open{margin:0;width:auto}
#match-setup{border-top:1px solid #718567;padding-top:20px;margin-top:18px}#match-setup h2{color:#edd49a}#mode-guide{font-size:13px;color:#d1d9c5}.match-start-actions{display:flex;flex-wrap:wrap;gap:8px}.save-note,.welcome-collection-count{font-size:12px;color:var(--muted);margin-top:12px}#welcome>.welcome-collection-count{margin-bottom:0}.main-menu button[aria-pressed=true]{border-color:#ead69e;box-shadow:inset 0 0 0 1px #ead69e}
@media(max-width:360px){.main-menu{gap:8px}.main-menu button{font-size:13px}}

/* Main names reserve two lines even for a one-line name. Only the text changes;
   heading/art/stats/copy/footer tracks retain their existing fixed coordinates. */
.main-face .card-heading{display:grid;grid-template-rows:6cqw 17cqw 5cqw;align-content:center;justify-content:stretch;justify-items:center;gap:0}
.main-face .card-title,.compact.main-face .card-title{font-size:7.2cqw;line-height:1.13;letter-spacing:.02em;margin:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-wrap:normal;word-break:normal}
.main-face .card-title>span{display:block;white-space:nowrap}
.main-face .card-category,.main-face .card-species{align-self:center}
/* Heading-local lanes: fixed center text tracks, equal inset side lanes.
   Proportional borders and explicit line boxes also hold at board-card sizes. */
.main-face .card-category{height:5.4cqw;line-height:1;display:grid;place-items:center;padding:0 2cqw;border-width:.45cqw;box-shadow:none}
.main-face .card-attribute{left:1%;top:50%;transform:translateY(-50%);width:21%;gap:0}
.main-face .card-attribute .icon{display:block;border-width:.65cqw;box-shadow:none}
.main-face .card-attribute span{display:grid;place-items:center;min-height:4.5cqw;line-height:1;padding:0 .5cqw;min-width:95%;margin-top:-.5cqw;border-width:.45cqw}
.main-face .card-cost{right:1%;top:50%;transform:translateY(-50%);width:20cqw;height:20cqw;font-size:16cqw;border-width:.65cqw;box-shadow:none}
/* One shared main-slot centering rule for ordinary matches and the tutorial.
   The outer slot label is separate; an inline duplicate name cannot displace art. */
.player-board .slot[data-slot="1"] .slot-content{container-type:size}
.player-board .slot[data-slot="1"] .slot-content .card-tap{display:grid;place-items:center;width:min(100cqw,66.6667cqh);height:min(100cqh,150cqw);aspect-ratio:2/3;gap:0;overflow:visible}
.player-board .slot[data-slot="1"] .card-tap>.card-face,.player-board .slot[data-slot="1"] .card-tap>.card-back,.player-board .slot[data-slot="1"] .card-tap>.egg-card{width:100%;height:100%;aspect-ratio:2/3}
.player-board .slot[data-slot="1"] .board-card-name{display:none}

/* Shared numeric lanes: lining tabular digits, no Georgia old-style figures or
   normal line-height intrinsic growth. The same box fits both 1 and 2 digits. */
.card-stats>span{display:grid;grid-template-columns:9cqw minmax(0,1fr) 15cqw;align-items:center;justify-content:normal;gap:1cqw;min-width:0;min-height:0;padding:0 1.4cqw}
.card-stats .icon{width:9cqw;height:9cqw;justify-self:center}
.card-stats small{display:grid;place-items:center;height:10cqw;min-width:0;white-space:nowrap;line-height:1}
.card-stats b{display:grid;place-items:center;width:15cqw;height:12cqw;min-width:0;min-height:0;padding:0;margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12cqw;font-weight:700;font-variant-numeric:lining-nums tabular-nums;line-height:1;letter-spacing:0;white-space:nowrap}
.compact .card-stats>span{grid-template-columns:10cqw 15cqw;justify-content:center;gap:4cqw}
/* The signature and the data-driven UI marker share the clear bottom margin,
   above the colored curve and between the botanical corner ornaments. */
.card-face .card-footer{position:absolute;left:35%;right:35%;bottom:3.1%;height:2.2%;display:grid;place-items:center;font-size:2.7cqw;line-height:1;letter-spacing:.18em;color:#94703c;white-space:nowrap;pointer-events:none}
.card-rarity{position:absolute;left:67%;bottom:3.1%;height:2.2%;display:grid;place-items:center;font-size:3.5cqw;line-height:1;color:#94703c;z-index:1;pointer-events:none}
.compact.card-face{grid-template-rows:27% minmax(0,1fr) 16% 3%}
.compact.card-face:not(.main-face){grid-template-rows:27% minmax(0,1fr) 3%}

.card-face::after{bottom:2%;height:.8%}
/* CPU strategy deck selection (welcome screen) */
.cpu-deck-guide{margin:.25rem 0 .5rem;font-size:.9rem;line-height:1.5;opacity:.85}
.cpu-deck-reveal{font-weight:600}

/* Card detail in play (#card-dialog), adopted from PR #467 (improved A).
   The ability text is never boxed in its own scroller: the whole detail scrolls once.
   Actions stay in a band pinned to the bottom. Portrait puts name/kind/cost/rarity beside the art;
   landscape lays choices side by side. Comparison material: detail-ui-ab-20261028/. */
#card-dialog.card-detail .effect-scroll{flex:none;min-height:0;max-height:none;overflow:visible;padding:4px 2px}
#card-dialog.card-detail .detail-copy>*{flex:none}
#card-dialog.card-detail .detail-command{position:sticky;bottom:0;z-index:2;min-height:0;gap:4px;padding:6px 0 0;background:#18392f;border-top:1px solid #c8ac6b80;box-shadow:0 -10px 12px -6px #0b2620;max-height:max(132px,calc(var(--ui-vh,100dvh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--detail-card-height,180px) - 150px))}
#card-dialog.card-detail .detail-command:has(.choice-guide){min-height:0}
#card-dialog.card-detail .detail-command h3{line-height:1.3}
#card-dialog.card-detail .detail-command .choice-guide{line-height:1.4}
#card-dialog.card-detail .detail-command:has([data-declaration]){position:static;max-height:none;box-shadow:none}
#card-dialog.card-detail .detail-actions{flex:0 1 auto;min-height:44px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
#card-dialog.card-detail .detail-pass{display:grid;gap:8px;margin-top:4px}
#card-dialog.card-detail .detail-command .actions button{padding:6px 10px;line-height:1.35}
#card-dialog.card-detail .detail-command .action-destination{display:inline;margin:0 0 0 .6em;opacity:.85;white-space:nowrap}
:root[data-detail-orientation=portrait] #card-dialog.card-detail .detail-layout{display:grid;grid-template-columns:var(--detail-card-width,180px) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;align-items:start;align-content:start;column-gap:12px;row-gap:8px;min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain;margin:0}
:root[data-detail-orientation=portrait] #card-dialog.card-detail .detail-image{grid-column:1;grid-row:1/span 2;margin:0}
:root[data-detail-orientation=portrait] #card-dialog.card-detail .detail-copy{display:contents}
:root[data-detail-orientation=portrait] #card-dialog.card-detail .detail-summary{grid-column:2;grid-row:1;min-width:0}
:root[data-detail-orientation=portrait] #card-dialog.card-detail .detail-summary p{display:block;font-size:12px;line-height:1.45;margin:2px 0}
:root[data-detail-orientation=portrait] #card-dialog.card-detail .detail-summary p+p::before{content:none}
:root[data-detail-orientation=portrait] #card-dialog.card-detail .learning-related{grid-column:2;grid-row:2;align-self:end;min-height:44px;margin:0;padding:6px 8px;font-size:12px}
:root[data-detail-orientation=portrait] #card-dialog.card-detail .detail-copy>:not(.detail-summary):not(.learning-related):not(.detail-command){grid-column:1/-1}
:root[data-detail-orientation=portrait] #card-dialog.card-detail .detail-command{grid-column:1/-1;grid-row:4;align-self:end}
:root[data-detail-orientation=landscape] #card-dialog.card-detail .detail-copy{position:relative;overflow-y:auto;gap:5px}
:root[data-detail-orientation=landscape] #card-dialog.card-detail .detail-summary{padding-right:124px;min-height:44px}
:root[data-detail-orientation=landscape] #card-dialog.card-detail .learning-related{position:absolute;top:0;right:0;width:116px;min-height:44px;margin:0;padding:4px 6px;font-size:12px}
:root[data-detail-orientation=landscape] #card-dialog.card-detail .detail-command{margin-top:auto;max-height:calc(var(--ui-vh,100dvh)*.55)}
:root[data-detail-orientation=landscape] #card-dialog.card-detail .detail-actions{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
:root[data-detail-orientation=landscape] #card-dialog.card-detail .detail-summary p{display:inline;font-size:11px;line-height:1.5;margin:0}
:root[data-detail-orientation=landscape] #card-dialog.card-detail .detail-summary p+p::before{content:" · "}
:root[data-detail-orientation=landscape] #card-dialog.card-detail .detail-summary h2{margin-bottom:2px}

/* Card detail in play: the official card, large, then only the actions (card stage, after PR #467).
   The card is a 320 × 480 canvas scaled by --stage-scale (set by fitStageCard). One scroll at most: the stage. */
#card-dialog.card-detail .card-stage{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;min-height:0;height:100%}
#card-dialog.card-detail .stage-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;align-items:center;padding:2px 0 4px}
#card-dialog.card-detail .stage-card{flex:none;position:relative;margin:auto;width:calc(320px * var(--stage-scale,.6));height:calc(480px * var(--stage-scale,.6));border-radius:4%;cursor:default;-webkit-tap-highlight-color:transparent;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#card-dialog.card-detail .stage-card[data-zoomable]{cursor:zoom-in}
#card-dialog.card-detail[data-stage-zoom="1"] .stage-card{cursor:zoom-out}
/* Shown only when tapping the card really changes its size. */
#card-dialog.card-detail .stage-zoom{flex:none;min-height:44px;margin:0 0 0 auto;padding:4px 10px;font-size:12px}
#card-dialog.card-detail .stage-card:focus-visible{outline:2px solid #ffdf88;outline-offset:3px}
#card-dialog.card-detail .stage-card-canvas{width:320px;height:480px;transform:scale(var(--stage-scale,.6));transform-origin:top left}
#card-dialog.card-detail .stage-card-canvas>.card-face,#card-dialog.card-detail .stage-card-canvas>.card-back{width:320px;height:480px}
#card-dialog.card-detail .stage-band{min-height:0;max-height:calc(var(--ui-vh,100dvh) * .46);overflow-y:auto;overscroll-behavior:contain;padding-top:8px;border-top:1px solid #c8ac6b80}
#card-dialog.card-detail .stage-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
#card-dialog.card-detail .stage-actions button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:48px;padding:7px 12px;line-height:1.3;text-align:left}
#card-dialog.card-detail .stage-actions .action-main{font-size:15px;font-weight:600}
#card-dialog.card-detail .stage-actions .action-note{font-size:11.5px;font-weight:400;opacity:.88}
#card-dialog.card-detail .stage-note{margin:4px 2px 2px;font-size:12px;line-height:1.5;color:#e4dfc1}
#card-dialog.card-detail .stage-band[data-more]::after{content:"▼ ほかの選択肢があります";position:sticky;bottom:0;display:block;padding:12px 0 2px;background:linear-gradient(#18392f00,#18392f 55%);color:#e4cf93;font-size:11px;text-align:center;pointer-events:none}
/* Landscape: card on the left of the stage, actions in a column on the right. */
:root[data-detail-orientation=landscape] #card-dialog.card-detail .card-stage{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) clamp(240px,44%,420px);gap:12px}
:root[data-detail-orientation=landscape] #card-dialog.card-detail .stage-actions button{min-height:44px;padding:5px 10px}
:root[data-detail-orientation=landscape] #card-dialog.card-detail .stage-actions .action-main{font-size:14px}
:root[data-detail-orientation=landscape] #card-dialog.card-detail .stage-band{max-height:none;padding-top:0;border-top:0;border-left:1px solid #c8ac6b80;padding-left:12px;align-self:stretch}

/* Landscape board: the whole table fits the screen without vertical scrolling (portrait is unchanged).
   Both boards fill the height they are given; the three slot rows share it and each card fits its slot. */
@media(orientation:landscape){
 .battle-area .board-shell{overflow:hidden;display:flex}
 .battle-area .player-board{height:100%;max-height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:4px 5px}
 .battle-area .player-heading{min-height:20px}
 .battle-area .board-layout{min-height:0;height:100%}
 .battle-area .board-field{min-height:0;display:flex;flex-direction:column}
 .battle-area .slots{flex:1;min-height:0;grid-template-rows:repeat(3,minmax(0,1fr));gap:3px}
 .battle-area .slot{aspect-ratio:auto;height:auto;min-height:0;grid-template-rows:10px minmax(0,1fr)}
 .battle-area .slot>small{line-height:10px}
 .battle-area .management{min-height:0;height:100%;gap:3px}
 .battle-area .board-metrics{min-height:16px;padding-top:2px}
 .battle-area .slot-content{container-type:size}
 .battle-area .slot-content .card-tap{width:min(100cqw,66.6667cqh);height:min(100cqh,150cqw);aspect-ratio:2/3}
 /* Opponent cards keep their small name under the card: the card takes the rest of the slot height. */
 .battle-area .opponent .slot:not([data-slot="1"]) .slot-content .card-tap{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;aspect-ratio:auto;overflow:hidden}
 .battle-area .opponent .slot:not([data-slot="1"]) .card-tap>.card-face,.battle-area .opponent .slot:not([data-slot="1"]) .card-tap>.card-back,.battle-area .opponent .slot:not([data-slot="1"]) .card-tap>.egg-card{flex:1 1 auto;min-height:0;width:auto;height:auto;max-width:100%;aspect-ratio:2/3}
 .battle-area .opponent .board-card-name{flex:none;max-width:100%;line-height:10px}
 /* Pile cells shrink with the board: drop the small deck icon, then tighten the label, so the count is never cut. */
 .battle-area .management>[data-zone]{container-type:size;line-height:1.1}
}
@container (max-height:60px){.battle-area .management>[data-zone]>.card-back{display:none}}
@container (max-height:40px){.battle-area .management>[data-zone]>span{font-size:7px;line-height:1}.battle-area .management>[data-zone]>b{line-height:1}}
/* Landscape card detail: the whole card fits the full height on the left; status, close and actions share the right column. */
:root[data-detail-orientation=landscape] #card-dialog.card-detail:has(>.card-stage){grid-template-columns:minmax(0,1fr) clamp(240px,44%,420px);grid-template-rows:44px minmax(0,1fr);column-gap:12px;row-gap:8px}
:root[data-detail-orientation=landscape] #card-dialog.card-detail:has(>.card-stage)>.detail-toolbar{grid-column:2;grid-row:1}
:root[data-detail-orientation=landscape] #card-dialog.card-detail>.card-stage{display:contents}
:root[data-detail-orientation=landscape] #card-dialog.card-detail .stage-scroll{grid-column:1;grid-row:1/span 2}
:root[data-detail-orientation=landscape] #card-dialog.card-detail .stage-band{grid-column:2;grid-row:2;border-left:0;padding-left:0;min-height:0}