/* Native duel geometry: the 980 x 810 field uses the same portrait coordinates as the desktop player. */
.match-page{max-width:1800px}
#app:has(.is-active-match) .site-footer{display:none}
.match-page.is-active-match{position:relative;max-width:none;margin:0;padding:12px 24px 8px;min-height:100dvh;background:#111115 url('./assets/art/grain.png') center/480px;overflow-x:hidden}
.match-layout{--scene: min(calc(100vw - 48px),calc((100dvh - 20px)*1.7777778));width:var(--scene);max-width:100%;aspect-ratio:16/9;margin:auto;display:grid;grid-template-columns:400fr 980fr 400fr;gap:1.63%;container-type:inline-size;position:relative}
.match-left,.match-sidebar{display:flex;flex-direction:column;min-width:0;min-height:0;gap:2cqw}
.match-left{gap:1.1cqw}
.duel-turn{min-height:6.4cqw;padding:.4cqw .4cqw 0}
.duel-turn h1{font:900 clamp(27px,2.7cqw,46px)/1 var(--display);text-transform:uppercase;margin:0 0 .6cqw}
.duel-turn p,.duel-turn small{font-size:clamp(8px,.64cqw,12px);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);line-height:1.6;display:block}
.duel-turn small{color:var(--muted);margin-top:.5cqw;letter-spacing:.1em}
.match-page .panel{background:#101014 url('./assets/art/grain.png') center/400px;border:1px solid #47404b;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.match-inspector{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 1cqw 1cqw;overflow:hidden}
.inspector-heading{font:900 clamp(18px,1.5cqw,28px)/1.1 var(--display);text-transform:uppercase;align-self:start;margin:0 0 .8cqw -1cqw;padding:.6cqw 1.3cqw;min-width:55%;background:var(--gold);color:#100d10;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.is-magic .inspector-heading{background:#6eb8df}
.match-inspector .inspector-art{width:100%;aspect-ratio:352/210;max-height:20cqh;object-fit:cover;flex-shrink:0}
.match-inspector h3{font:900 clamp(19px,1.7cqw,32px)/1.05 var(--display);text-transform:uppercase;margin:1cqw 0 .5cqw;overflow-wrap:anywhere}
.inspector-type,.inspector-stats{font-size:clamp(10px,.8cqw,15px);line-height:1.4;margin:.35cqw 0;color:var(--soft)}
.inspector-stats{color:var(--gold)}
.inspector-rules{min-height:0;flex:1;overflow:auto;padding:.8cqw 0;margin-top:.5cqw;border-top:1px solid #b08d3f45;scrollbar-width:thin}
.inspector-rules .rules-text{font-size:clamp(11px,.82cqw,15px);line-height:1.5;color:var(--soft)}
.inspector-rules p{margin:0 0 .7em}
.match-inspector>.button{font-size:clamp(13px,.9cqw,17px);min-height:30px;margin-top:.5cqw;align-self:start}
.inspect-placeholder{display:grid;place-content:center;text-align:center;gap:20px;flex:1;color:var(--muted);font-size:13px}
.inspect-placeholder img{width:64px;height:64px;object-fit:contain;justify-self:center;opacity:.45}
.player-strip{flex:0 0 auto;padding:1cqw;min-width:0}
.player-identity{display:flex;align-items:center;gap:.9cqw;min-width:0}
.player-avatar{width:3.2cqw;height:3.2cqw;object-fit:contain;border:1px solid var(--gold);border-radius:50%;padding:6px;flex-shrink:0}
.opponent .player-avatar{border-color:#9a86ba}
.player-identity>div{min-width:0}
.player-name{font:900 clamp(18px,1.6cqw,30px)/1.08 var(--display);margin:0;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
.player-subtitle{font-size:clamp(7px,.55cqw,10px);letter-spacing:.13em;color:var(--muted);text-transform:uppercase;margin:.5cqw 0 0;line-height:1.4}
.life-row{display:flex;align-items:center;gap:.7cqw;margin:1cqw 0 .65cqw;min-width:0}
.life-row>span{font-size:clamp(10px,.8cqw,15px);text-transform:uppercase;color:var(--gold)}
.player-life{font:700 clamp(29px,2.6cqw,48px)/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.life-track{height:6px;flex:1;min-width:20px;background:#353039;margin-left:auto;overflow:hidden}
.life-track>span{display:block;height:100%;background:var(--gold);max-width:100%}
.is-magic .life-track>span{background:#6eb8df}
.player-counts{display:flex;border-top:1px solid #363039;padding-top:.7cqw;gap:0;min-width:0}
.pile-stat{flex:1;display:grid;gap:.25cqw;place-items:center;text-align:center;background:none;border:0;border-right:1px solid #39323e;padding:.2cqw;min-width:0;color:var(--soft)}
.pile-stat:last-child{border-right:0}
.pile-stat strong{font:700 clamp(23px,1.85cqw,35px)/1 var(--display);color:var(--text)}
.pile-stat span{font:400 clamp(8px,.59cqw,11px)/1.4 var(--body);text-transform:uppercase;color:var(--muted)}
button.pile-stat{cursor:pointer}button.pile-stat:hover span{color:var(--gold)}
.command-zone-link{margin-top:.7cqw;width:100%;font-size:clamp(12px,.8cqw,16px)!important;min-height:30px!important}
.board-shell{min-width:0;min-height:0;display:flex;flex-direction:column}
.playmat{position:relative;width:100%;aspect-ratio:980/810;flex:0 0 auto;background-image:url('./assets/art/playmat-ygo.png');background-size:195.918367% 133.333333%;background-position:50% 22.222222%;isolation:isolate}
.ygo-board{position:absolute;inset:0}
.board-zone{position:absolute;border:1px solid #a8853c66;background:#07070a1c;display:flex;align-items:center;justify-content:center;padding:0;border-radius:0;min-width:0;color:var(--muted);box-sizing:border-box}
.board-zone:before{content:'';position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(var(--gold),var(--gold)) left top/12px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) left top/2px 12px no-repeat,linear-gradient(var(--gold),var(--gold)) right top/12px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) right top/2px 12px no-repeat,linear-gradient(var(--gold),var(--gold)) left bottom/12px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) left bottom/2px 12px no-repeat,linear-gradient(var(--gold),var(--gold)) right bottom/12px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) right bottom/2px 12px no-repeat;opacity:.75}
.board-zone.extra-zone{border-color:#8e71c799}.board-zone.extra-zone:before{filter:hue-rotate(190deg)}
.board-zone .zone-name{position:absolute;left:-12%;right:-12%;bottom:3px;text-align:center;font-size:clamp(6px,.49cqw,10px);font-weight:400;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;color:#b4a9b766;pointer-events:none}
.board-zone[data-zone-row='0'] .zone-name,.board-zone[data-zone-row='1'] .zone-name,.board-zone[data-zone-row='3'] .zone-name,.board-zone[data-zone-row='4'] .zone-name{visibility:hidden}
.board-zone[data-zone-column='0'] .zone-name,.board-zone[data-zone-column='6'] .zone-name{visibility:visible}
.board-zone.target-zone{cursor:pointer;border:2px solid #efd185;background:#cfa4441f;box-shadow:0 0 12px #e8c45d33}
.board-zone.target-zone:hover,.board-zone.target-zone:focus-visible{background:#e8c45d55;outline:2px solid #f5df9b;outline-offset:2px}
.board-zone.selected-zone{background:#e8c45d55;outline:2px solid var(--gold)}
.zone-card{height:100%;width:100%;padding:0;border:0;background:none;position:relative;cursor:pointer;min-width:0}
.zone-card>.card-image{height:100%;width:100%;object-fit:contain;border-radius:2px}
.zone-card.defense>.card-image,.zone-card.defense>.card-back{transform:rotate(90deg) scale(.75)}
.zone-count{position:absolute;bottom:3px;right:3px;min-width:25%;padding:1px 4px;background:#e6d9a6;color:#151008;font:700 clamp(10px,.8cqw,15px)/1.2 var(--display);text-align:center;pointer-events:none}
.zone-attack{position:absolute;bottom:-1cqw;left:-20%;right:-20%;text-align:center;color:var(--text);font:700 clamp(10px,.75cqw,14px)/1.3 var(--display);background:#0a090cda;pointer-events:none}
.card-back{width:100%;height:100%;position:relative;background:#0d0c12 url('./assets/logo.png') center/55% no-repeat;border:1px solid #b7a7d5;box-shadow:inset 0 0 0 3px #121019,inset 0 0 0 4px #635574}
.opponent-hand{position:absolute;top:-4.8%;left:15%;right:15%;display:flex;justify-content:center;gap:.5cqw;height:7%;overflow:hidden;pointer-events:none;z-index:1}
.opponent-hand>.card-back{width:7.2%;height:140%;flex-shrink:0}
.hand-tray{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:start;padding-top:.6cqw}
.hand-caption{font-size:clamp(7px,.52cqw,10px);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:8px;padding:0 .4cqw .5cqw}
.hand-caption small{font:inherit;letter-spacing:0;text-transform:none}
.hand{display:flex;justify-content:safe center;align-items:start;gap:.5cqw;min-height:0;overflow-x:auto;padding:.35cqw .3cqw 0;scrollbar-width:thin}
.hand-card{position:relative;flex:0 0 13%;max-width:132px;min-width:0;aspect-ratio:132/193;border:2px solid transparent;padding:0;background:none;border-radius:2px;cursor:pointer;transition:transform .15s,border-color .15s}
.hand-card>.card-image{display:block;width:100%;height:100%;object-fit:contain;border-radius:2px}
.hand-card:hover,.hand-card:focus-visible{transform:translateY(-.4cqw);z-index:2}
.hand-card.available{border-color:#b79a51}.hand-card.selected{border-color:var(--cyan)}
.hand-card-name{position:absolute;bottom:0;left:0;right:0;font-size:9px;text-align:center;background:#09090de0;color:var(--soft);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;opacity:0}
.hand-card:hover .hand-card-name,.hand-card:focus-visible .hand-card-name{opacity:1}
.match-sidebar{gap:1.1cqw;overflow:hidden}
.match-controls{display:flex;gap:.6cqw}.match-controls>.button{min-width:0;flex:1;min-height:32px;padding:.4cqw .5cqw;font-size:clamp(13px,1cqw,20px)}
.phase-panel{display:flex;flex-direction:column;gap:.45cqw;min-width:0}
.phase-label{font-size:clamp(8px,.6cqw,11px);text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin:0 0 .15cqw}
.phase-chip{border:1px solid #65513280;background:#101014;color:#c3bbc9;font:700 clamp(14px,1.2cqw,24px)/1 var(--display);text-transform:uppercase;padding:.6cqw 1cqw;text-align:center;clip-path:polygon(8px 0,calc(100% - 5px) 0,100% 6px,calc(100% - 8px) 100%,0 100%);min-width:0}
button.phase-chip{cursor:pointer}button.phase-chip:hover{border-color:var(--gold);color:var(--gold)}
.phase-chip.active{background:var(--gold);color:#111015;border-color:var(--gold)}.is-magic .phase-chip.active{background:#6eb8df;border-color:#6eb8df}
.prompt-panel{padding:.8cqw;min-height:0;flex:1;overflow:auto;scrollbar-width:thin}
.prompt-panel[hidden]{display:none}
.ygo-picker-toolbar>input{min-width:0;min-height:40px;padding:9px 12px;border:1px solid #504652;background:#0b0a0e;color:#f4f1f6;font:13px var(--body);caret-color:#e3b348}.ygo-picker-toolbar>input::placeholder{color:#a89eaf}.ygo-picker-toolbar>input:focus-visible{outline:2px solid #e3b348;outline-offset:2px}
.prompt-panel h2,.chain-rail h2,.stack-panel h2{font:900 clamp(18px,1.3cqw,26px)/1.1 var(--display);text-transform:uppercase;margin:0 0 .6cqw}
.prompt-options{display:grid;gap:.45cqw;min-height:0}
.prompt-option{width:100%;min-width:0;min-height:36px;display:flex;align-items:center;gap:.5cqw;background:#151118;border:1px solid #605039;padding:.5cqw .6cqw;color:var(--text);font-size:clamp(11px,.74cqw,14px);text-align:left;line-height:1.4;cursor:pointer}
.prompt-option:hover{border-color:var(--gold)}.prompt-option.selected{background:#423725;border-color:var(--gold)}
.prompt-option img{width:2.5cqw;height:3.65cqw;object-fit:contain;flex-shrink:0}.option-label{min-width:0;overflow-wrap:anywhere}
.prompt-panel .button{font-size:clamp(13px,.85cqw,17px);min-height:32px;padding:.4cqw .6cqw}
.prompt-source{display:flex;gap:.65cqw;margin-bottom:.7cqw}.prompt-source img{width:3.8cqw;height:5.5cqw;object-fit:contain}.prompt-source p{font-size:clamp(11px,.78cqw,15px);margin:0 0 .3cqw}
.prompt-hint{font-size:clamp(11px,.72cqw,14px);color:var(--soft);line-height:1.5;margin:.5cqw 0}
.prompt-controls{display:flex;gap:6px;margin-top:.7cqw;flex-wrap:wrap}.prompt-controls>.button{flex:1}
.source-rules{max-height:14cqw;overflow:auto;font-size:clamp(11px,.74cqw,14px);line-height:1.5;color:var(--soft);margin-bottom:.7cqw}
.selection-counter{display:flex;gap:6px}.selection-counter .prompt-option{flex:1}.counter-input{width:60px;background:#151118;color:var(--text);border:1px solid #65513a}
.thinking{position:absolute;top:4px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 14px;background:#141016eb;color:var(--gold);font-size:12px;z-index:4}.thinking .spinner{width:14px;height:14px}
.match-error,.result-banner{position:absolute;top:25%;left:50%;transform:translateX(-50%);width:min(560px,90%);padding:30px;z-index:20;background:#121015f5;border:1px solid var(--gold);text-align:center}
.result-banner h2{font:900 48px var(--display);color:var(--gold)}.result-banner p{margin:16px}
.chain-rail{padding:.7cqw;max-height:12cqw;overflow:auto}.chain-link{display:flex;gap:.5cqw;align-items:center;font-size:clamp(11px,.7cqw,14px)}.chain-link strong{font:700 28px var(--display);color:var(--cyan)}.chain-link img{width:2.5cqw;height:3.65cqw;object-fit:contain}
.magic-playmat{background-image:url('./assets/art/playmat-magic.png')}
.magic-card{position:relative;width:11.5%;aspect-ratio:110/153;flex:0 0 11.5%;padding:0;border:0;background:transparent;cursor:pointer;margin-right:1%;margin-bottom:2%}
.magic-card>.card-image{display:block;width:100%;height:100%;object-fit:contain;border-radius:2px}
.card-inspector>.inspect-hidden-back{width:100%;height:auto;min-height:220px;aspect-ratio:86/126}
.is-magic .prompt-panel>.magic-numeric-form{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;min-width:0}.magic-numeric-fields{flex:1;min-height:0;overflow:auto;display:grid;gap:12px;align-content:start;scrollbar-width:thin}.magic-numeric-fields .field{gap:4px}.magic-numeric-fields label{font-size:11px;overflow-wrap:anywhere}.magic-numeric-fields input{width:100%;min-width:0;height:38px;min-height:38px;padding:7px 9px;font-size:15px}.magic-numeric-form>.prompt-hint,.magic-numeric-form>.button{flex:0 0 auto;margin:0}.magic-numeric-cancel{flex:0 0 auto}
.magic-card.tapped{transform:rotate(-90deg);margin-right:5%;margin-left:2%}.magic-card.available{outline:2px solid #b49b55;outline-offset:2px}
.magic-card .power{position:absolute;bottom:0;right:0;min-width:30%;padding:1px 4px;font-size:clamp(9px,.65cqw,13px);background:#09090eea;color:#fff;border:1px solid #746651}
.magic-counters{display:flex;flex-wrap:wrap;gap:4px;min-width:0}.magic-counter{display:inline-block;max-width:100%;padding:2px 5px;border:1px solid #b29450;background:#211b12f5;color:#fff1cc;font:600 11px/1.35 var(--body);overflow-wrap:anywhere}.piece-counters{position:absolute;left:2%;right:2%;top:17%;gap:2px;pointer-events:none}.piece-counters .magic-counter{padding:1px 3px;font-size:clamp(8px,.65cqw,13px);line-height:1.25;box-shadow:0 1px 3px #000b}.player-counters{margin:.4cqw 0}.player-counters .magic-counter{font-size:clamp(9px,.65cqw,13px)}.inspector-live{padding:.6cqw 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:.6cqw 0}.inspector-live>p,.inspector-instance-zone{font-size:clamp(11px,.72cqw,14px);color:var(--soft);text-transform:capitalize}.inspector-counters{margin:8px 0}.inspector-counters .magic-counter{font-size:12px}.inspector-token>h3{font-size:24px;margin:12px 0}.optional-mana{margin:8px 0}.optional-mana>summary{padding:8px 0;min-height:32px;cursor:pointer;color:var(--soft);font-size:clamp(11px,.74cqw,14px)}.optional-mana>.prompt-options{margin-top:5px}
.magic-library{position:absolute;width:8.78%;height:15.56%}.library-1{left:2.3%;top:3.5%}.library-0{right:2.3%;bottom:3.5%}
.mana-pool{position:absolute;bottom:22%;right:3%;display:flex;align-items:center;gap:.8cqw;background:#0e0c12e8;border:1px solid #3f3445;padding:.45cqw .6cqw;font-size:clamp(10px,.75cqw,15px);color:var(--soft)}
.mana-pool>span{display:flex;align-items:center;gap:3px}.mana-pool small{text-transform:uppercase;letter-spacing:.13em;font-size:.55cqw;color:var(--muted)}.mana-pool img{width:1.15cqw;height:1.15cqw;vertical-align:middle}
.stack-cards{display:flex;gap:.6cqw;overflow-x:auto}.stack-cards .magic-card{width:16%;flex-basis:16%;margin:0}.stack-panel h2{font-size:clamp(14px,1cqw,20px)}
.combat-strip{position:absolute;left:17%;right:17%;top:46%;text-align:center;z-index:2;background:#541a20cc;border:1px solid #cf7474;color:#ffe0db;padding:.3cqw;font-size:clamp(10px,.75cqw,14px)}
.cut-in{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:80;background:#111019f5;border:1px solid var(--gold);padding:20px 36px;display:flex;align-items:center;gap:24px;box-shadow:0 0 120px #000b;animation:cut-in 1.4s both}.cut-in img{width:100px;max-height:146px;object-fit:contain}.cut-in strong{font:900 34px var(--display);text-transform:uppercase;max-width:340px}.cut-in p{color:var(--gold);font-size:11px;letter-spacing:2px;text-transform:uppercase}
@keyframes cut-in{0%{opacity:0;transform:translate(-55%,-50%)}15%,75%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-45%,-50%)}}
@media(max-width:900px){.match-page.is-active-match{padding:12px}.match-layout{--scene:calc(100vw - 24px);aspect-ratio:auto;grid-template-columns:minmax(0,1fr) 230px;gap:12px}.board-shell{grid-column:1;grid-row:1;min-width:0}.match-sidebar{grid-column:2;grid-row:1;gap:12px;overflow:visible}.player-strip{padding:12px}.player-avatar{width:38px;height:38px}.player-name{font-size:20px}.player-subtitle{font-size:8px}.player-life{font-size:32px}.life-row{margin:12px 0;gap:9px}.player-counts{padding-top:10px}.pile-stat strong{font-size:22px}.pile-stat span{font-size:8px}.hand-tray{min-height:120px}.hand-card{flex-basis:16%;}.hand-caption small{display:none}.phase-chip{font-size:15px;padding:8px}.phase-panel{gap:5px}.phase-label{font-size:10px}.prompt-panel{padding:12px}.prompt-panel h2{font-size:21px}.prompt-option{font-size:12px;padding:8px;min-height:44px}.prompt-option img{width:35px;height:51px}.prompt-source img{width:44px;height:64px}.prompt-source p{font-size:12px}.prompt-hint{font-size:12px}.match-controls>.button{font-size:15px;min-height:38px}.zone-attack{font-size:10px;bottom:-12px}}
@media(max-width:620px){#app:has(.is-active-match) .app-header{height:auto;min-height:56px;padding:8px 12px;gap:10px}#app:has(.is-active-match) .header-nav{display:none}#app:has(.is-active-match) .brand span{font-size:24px}.match-page.is-active-match{padding:10px 6px}.match-layout{width:100%;grid-template-columns:1fr;gap:12px}.board-shell{grid-column:1;grid-row:1}.match-sidebar{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:10px}.match-controls{grid-column:1/3}.phase-panel{grid-column:1;grid-row:2}.prompt-panel{grid-column:2;grid-row:2;padding:8px;max-height:400px}.hand-tray{min-height:110px}.hand{gap:3px;padding-top:8px}.hand-card{flex-basis:15%}.hand-caption{font-size:8px}.board-zone .zone-name{font-size:6px;letter-spacing:0}.prompt-panel h2{font-size:19px}.prompt-option{font-size:11px;padding:7px 6px}.prompt-option img{display:none}.mana-pool{gap:6px;font-size:9px}.mana-pool img{width:13px;height:13px}.mana-pool small{font-size:7px}.cut-in{width:92%;padding:15px;gap:15px}.cut-in img{width:70px}.cut-in strong{font-size:25px}}
@media(prefers-reduced-motion:reduce){.hand-card,.cut-in{transition:none;animation:none}.cut-in{opacity:1}}
/* Native Magic has distinct stable land and nonland rows on each mat. */
.magic-playmat .battlefield{position:absolute;left:4.08%;right:4.08%;height:19%;display:flex;gap:2%;padding:0;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;align-content:start;align-items:start;scrollbar-width:thin}
.magic-playmat .battlefield-opponent.land-row{top:4%;left:14%;right:4%;height:16%}
.magic-playmat .battlefield-opponent.permanent-row{top:27%;height:21%}
.magic-playmat .battlefield-you.permanent-row{top:52.8%;height:21%}
.magic-playmat .battlefield-you.land-row{top:81.2%;right:13%;height:16%}
.magic-playmat .permanent-row>.magic-card{width:12.22%;flex-basis:12.22%;margin-bottom:0}
.magic-playmat .land-row>.magic-card{width:10.85%;flex-basis:10.85%;margin-bottom:0}
.magic-playmat .magic-card.tapped{transform:rotate(-90deg);margin-top:2%;margin-right:5%;margin-left:2%}
.zone-card-collection{display:flex;flex-wrap:wrap;gap:18px;padding:10px}
.zone-card-collection>.magic-card{width:110px;flex-basis:110px;margin:0}
.zone-card-collection .magic-card>.card-image{height:154px}
.zone-card-collection .magic-card.tapped{margin:22px;transform:rotate(-90deg)}
.modal .source-rules{font-size:14px}
.match-log{overflow:auto;line-height:1.6;color:var(--soft);font-size:13px}.match-log p{padding:8px 0;border-bottom:1px solid var(--line)}
.combat-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;filter:drop-shadow(0 1px 3px #000c)}
.combat-strip{clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0;border:0}
/* In Magic the spell stack sits beside the narrower phase rail, as in the native client. */
.is-magic .match-sidebar{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-rows:auto auto max(174px,16.2cqw) minmax(0,1fr);align-content:start;gap:1cqw}
.is-magic .match-sidebar>.player-strip{grid-column:1/3;grid-row:1}
.is-magic .match-controls{grid-column:1/3;grid-row:2}
.is-magic .phase-panel{grid-column:2;grid-row:3}
.is-magic .prompt-panel{grid-column:1/3;grid-row:4}
.is-magic .phase-panel,.is-magic .prompt-panel{min-width:0;max-width:100%}.is-magic .phase-chip{max-width:100%;white-space:normal;overflow-wrap:anywhere}.is-magic .prompt-panel{display:flex;flex-direction:column;overflow:hidden}.is-magic .prompt-panel[hidden]{display:none}.is-magic .prompt-panel>h2,.is-magic .prompt-panel>.button,.is-magic .prompt-panel>.prompt-hint{flex:0 0 auto}.is-magic .prompt-panel>.prompt-options{min-height:0;flex:1 1 auto;overflow:auto;scrollbar-width:thin}.is-magic .prompt-panel>.mana-mode{margin-top:6px}.is-magic .prompt-panel>.optional-mana{flex:0 0 auto;min-width:0}.is-magic .prompt-panel>.optional-mana[open]{flex:1 1 auto;min-height:64px;overflow:auto;scrollbar-width:thin}
.is-magic .prompt-panel>.prompt-options{align-content:start;grid-auto-rows:minmax(36px,max-content)}
/* The photo's two large opening choices fill the panel; ordinary game actions stay compact. */
@media(min-width:901px){.is-magic .prompt-panel{height:100%;min-height:0}.is-magic .prompt-panel>.prompt-options{height:0;min-height:0;flex:1 1 0}.is-magic .opening-hand-prompt>.prompt-options{align-content:stretch;grid-auto-rows:minmax(36px,1fr)}}
/* The stack shares the phase track without changing the photographed rail's anchors. */
.is-magic .stack-panel{position:static;grid-column:1;grid-row:3;display:flex;flex-direction:column;min-width:0;min-height:0;max-height:100%;overflow:hidden;margin:0;padding:.5cqw}
.is-magic .stack-panel>h2{flex:0 0 auto}
.is-magic .stack-cards{flex:1;min-height:0;flex-direction:column;align-items:start;overflow:auto}
.is-magic .stack-cards .magic-card{flex:0 0 auto;width:100%;max-width:150px}
@media(max-width:900px){
 .match-left{display:contents}.match-left>.duel-turn,.match-left>.match-inspector{display:none}
 .match-left>.player-strip{grid-column:1;grid-row:2}
 .is-magic .match-sidebar{gap:10px;grid-template-rows:auto auto auto minmax(180px,1fr)}
 .is-magic .stack-panel{max-height:220px;padding:8px}.is-magic .stack-panel h2{font-size:18px}.is-magic .stack-cards{height:180px}
}
@media(max-width:620px){
 .match-layout{grid-template-columns:1fr 1fr;gap:8px}
 .match-left>.player-strip{grid-column:1;grid-row:1}
 .match-sidebar,.is-magic .match-sidebar{display:contents}
 .match-sidebar>.player-strip,.is-magic .match-sidebar>.player-strip{display:block;grid-column:2;grid-row:1}
 .board-shell{grid-column:1/3;grid-row:2}
 .match-controls,.is-magic .match-controls{grid-column:1/3;grid-row:3}
 .phase-panel,.is-magic .phase-panel{grid-column:1;grid-row:4}
 .prompt-panel,.is-magic .prompt-panel{grid-column:2;grid-row:4}
 .is-magic .stack-panel{grid-column:1;grid-row:5;max-height:230px}
 .player-strip{padding:9px}.player-avatar{width:25px;height:25px;padding:3px}.player-identity{gap:7px}.player-name{font-size:17px}.player-subtitle{font-size:6px;letter-spacing:.04em}.life-row{margin:8px 0;gap:7px}.player-life{font-size:28px}.life-row>span{font-size:9px}.life-track{height:4px}.pile-stat strong{font-size:20px}.pile-stat span{font-size:6px}.player-counts{padding-top:5px}.command-zone-link{font-size:12px!important;margin-top:6px;min-height:28px!important}
}
.zone-card.available{outline:2px solid var(--gold);outline-offset:2px}
.magic-card.selected{outline-color:var(--cyan)}
.board-zone-hint{position:absolute;top:0;left:20%;right:20%;min-height:4%;padding:.5cqw;background:#101014f2;border:1px solid #a98747;color:var(--text);font:900 clamp(12px,1.1cqw,22px)/1.2 var(--display);text-align:center;text-transform:uppercase;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%,0 8px);z-index:3;pointer-events:none}

/* Active games use the native full-screen canvas; in-game menu controls remain available. */
#app:has(.is-active-match) .app-header{display:none}
/* Keep a continuous outline around the slanted phase shape; a CSS border is clipped at the diagonal. */
.phase-chip{position:relative;isolation:isolate;border-color:transparent;background:#746034}
.phase-chip:before{content:'';position:absolute;inset:0;z-index:-1;background:#101014;clip-path:polygon(8px 0,calc(100% - 5px) 0,100% 6px,calc(100% - 8px) 100%,0 100%);pointer-events:none}
button.phase-chip:hover{background:var(--gold);border-color:transparent}
button.phase-chip:hover:before{background:#201b16}
.phase-chip.active,.phase-chip.active:hover{background:var(--gold);border-color:transparent;color:#111015}
.phase-chip.active:before,.phase-chip.active:hover:before{background:var(--gold)}
.is-magic .phase-chip.active,.is-magic .phase-chip.active:hover{background:#6eb8df;border-color:transparent}
.is-magic .phase-chip.active:before,.is-magic .phase-chip.active:hover:before{background:#6eb8df}
.phase-chip:focus-visible{background:#f4d693;outline:0}

.magic-shell .hand-card{aspect-ratio:134/185}
/* Yu-Gi-Oh direct actions and engine-offered card selections. */
.ygo-card-menu{position:absolute;z-index:12;width:min(330px,calc(100% - 20px));transform:translateX(-50%);padding:12px;box-shadow:0 10px 45px #000c;display:grid;gap:8px;clip-path:none!important}
.ygo-menu-heading{display:flex;align-items:center;gap:8px;justify-content:space-between}.ygo-menu-heading strong{font:900 22px/1.1 var(--display);text-transform:uppercase;min-width:0;overflow-wrap:anywhere}.ygo-menu-heading>.button{font-size:14px;padding:5px;min-height:30px}
.ygo-context-action.button{width:100%;font-size:20px;min-height:46px;padding:10px 15px;white-space:normal;text-align:left;justify-content:start;line-height:1.2}
.ygo-effect-context{display:flex;gap:12px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #76613b66;align-items:start;min-width:0}.ygo-effect-context>.card-image{width:68px;height:100px;object-fit:contain;flex-shrink:0}.ygo-effect-context>div{min-width:0;flex:1}.ygo-effect-context h3{font:900 clamp(19px,1.6vw,28px)/1.1 var(--display);text-transform:uppercase;margin:0 0 7px}.ygo-effect-context .rules-text{font-size:13px;line-height:1.5;color:var(--soft);max-height:220px;overflow:auto}.ygo-effect-instruction{font-size:13px;line-height:1.5;color:var(--soft);margin-bottom:8px}.ygo-effect-trigger{font:700 17px var(--display);text-transform:uppercase;color:var(--gold);margin-bottom:8px}.ygo-effect-context summary{font-size:12px;color:var(--gold);cursor:pointer;margin:7px 0}
.ygo-choice-dialog.modal.wide-modal{width:min(1220px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
.ygo-choice-dialog .modal-heading{padding:13px 22px}.ygo-choice-dialog .modal-content{padding:20px}.ygo-choice-dialog .ygo-effect-context{margin-bottom:14px;padding-bottom:12px}.ygo-choice-dialog .ygo-effect-context>.card-image{width:82px;height:120px}.ygo-choice-dialog .ygo-effect-context .rules-text{max-height:240px;font-size:14px}
.ygo-picker-toolbar{display:flex;gap:18px;align-items:center;margin:12px 0 18px;position:sticky;top:65px;background:#121114f5;padding:10px 0;z-index:2}.ygo-picker-toolbar input{flex:1;min-width:100px;max-width:520px}.ygo-selection-count{font-size:13px;color:var(--gold);margin:0}
.ygo-candidate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:18px 14px;align-items:start}.ygo-candidate{min-width:0;padding:5px;border:2px solid transparent;background:#0d0c11;display:flex;flex-direction:column;gap:5px}.ygo-candidate.selected{border-color:var(--gold);background:#2b2317}
.ygo-candidate-select{border:0;background:none;padding:0;display:flex;flex-direction:column;gap:7px;text-align:left;min-width:0;cursor:pointer;color:var(--text)}.ygo-candidate-select>.card-image,.ygo-candidate-select>.card-back{width:100%;aspect-ratio:86/126;object-fit:contain;display:block}.ygo-candidate-select strong{font:700 20px/1.1 var(--display);overflow-wrap:anywhere}.ygo-candidate-select small{font-size:10px;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}.ygo-candidate>.button{font-size:15px;min-height:34px;width:100%;padding:6px 8px}
.ygo-picker-controls{display:flex;gap:12px;flex-wrap:wrap;position:sticky;bottom:-20px;padding:16px 0;background:#121114f5;border-top:1px solid var(--line);margin-top:18px;z-index:2}.ygo-picker-controls>.button{flex:1;min-width:140px}
.ygo-effect-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0}.ygo-effect-tabs>.button{flex:1;min-width:110px}.ygo-selected-effect{padding:20px;background:#0c0b10;border:1px solid #685736;margin-bottom:18px;min-height:120px}.ygo-selected-effect h3{font:700 21px var(--display);color:var(--gold);margin:0 0 10px}.ygo-selected-effect p{font-size:16px;line-height:1.6;white-space:pre-wrap}
@media(max-width:620px){.ygo-card-menu{width:min(290px,calc(100% - 16px));padding:10px}.ygo-context-action.button{font-size:19px;min-height:46px}.ygo-choice-dialog .modal-heading{padding:12px}.ygo-choice-dialog .modal-content{padding:12px}.ygo-candidate-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 9px}.ygo-candidate{padding:3px}.ygo-candidate-select strong{font-size:19px}.ygo-candidate-select small{font-size:9px}.ygo-picker-toolbar{align-items:stretch;flex-direction:column;gap:8px;top:59px;margin-bottom:12px;padding:8px 0}.ygo-selection-count{font-size:12px}.ygo-effect-context{gap:10px}.ygo-choice-dialog .ygo-effect-context>.card-image{width:57px;height:84px}.ygo-effect-context h3{font-size:22px}.ygo-effect-context .rules-text{font-size:12px}.ygo-selected-effect{padding:13px}.ygo-selected-effect p{font-size:14px}.ygo-picker-controls{bottom:-12px;padding:12px 0}.ygo-picker-controls>.button{min-width:100px;font-size:17px}}

/* Engine-authorized reveal information stays readable without hiding the next action. */
.magic-reveal-summary { min-height: 0; overflow: auto; flex: 1 1 auto; }
.magic-reveal-summary p { margin: 0 0 7px; overflow-wrap: anywhere; }
.magic-revealed-groups { display: grid; gap: 22px; }
.magic-revealed-group h3 { margin: 0 0 14px; }
.magic-revealed-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.magic-revealed-card { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.magic-revealed-card > .card-image { flex: 0 0 100px; width: 100px; height: auto; aspect-ratio: 488 / 680; object-fit: contain; }
.magic-revealed-card > div { min-width: 0; overflow-wrap: anywhere; }
.magic-revealed-card h4 { margin: 0 0 8px; }
.magic-revealed-card .rules { white-space: pre-wrap; }