:root{font-family:Georgia,serif;color:#f3e3bf;background:#211d18;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#514032,#191916);min-height:100vh}main{max-width:560px;margin:auto;padding:10px}header,footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;background:#2d2922;border:1px solid #94754a;border-radius:8px}button{cursor:pointer;background:#393329;color:#f4e5c7;border:1px solid #94754a;padding:12px;border-radius:7px;font:inherit}button:hover{filter:brightness(1.2)}button:disabled{opacity:.35;cursor:default}#status{text-align:center;font-size:14px}#notice{min-height:43px;padding:8px;text-align:center;font:13px system-ui;color:#e6cd9c}#board{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;touch-action:none;user-select:none;border:6px solid #4a3827;border-radius:6px;background:#33271e;padding:3px}.cell{position:relative;aspect-ratio: .76;background:linear-gradient(135deg,#af7049,#8b512f);border:1px solid #d09962;border-radius:5px;display:flex;align-items:center;justify-content:center;min-width:0}.coord{position:absolute;left:3px;top:2px;font:9px system-ui;color:#e5c29b}.wall{background:repeating-linear-gradient(0deg,transparent 0 17px,#262d2c 17px 20px),repeating-linear-gradient(90deg,#59605a 0 23px,#303835 23px 26px);border:5px solid #845331}.wall:after{content:'▥';color:#d8c9a9}.card{position:relative;width:85%;height:89%;border:3px solid var(--team);border-radius:4px;background:#dfcd9c;overflow:hidden;color:#29241c;box-shadow:0 2px 4px #0008;pointer-events:none}.card img{width:100%;height:100%;object-fit:fill}.card .force{position:absolute;bottom:3%;right:7%;width:30%;height:11%;background:#352e25;color:#fff0cb;display:grid;place-items:center;font:bold clamp(12px,2.5vw,20px) Georgia}.placeholder{display:flex;flex-direction:column;justify-content:space-between;height:100%;text-align:center;padding:3px;background:linear-gradient(#eadcbd,#c9b48d)}.placeholder strong{font-size:clamp(9px,2vw,13px)}.symbol{font-size:clamp(20px,6vw,42px);color:#5a7061}.stats{font:bold 14px system-ui}.badge{position:absolute;right:2px;top:2px;background:#164b59;border-radius:3px;font-size:11px;padding:2px}.terrain{position:absolute;bottom:1px;left:2px;color:#bce7da;font-size:16px}.path{box-shadow:inset 0 0 0 3px #79e0d0;background:#548d7c}.step{position:absolute;right:3px;bottom:3px;font:bold 13px system-ui}.selected{filter:brightness(1.2);outline:2px solid #9deee1}footer{margin-top:8px}#hand{padding:12px;background:#163c46;border:1px solid #78a899;border-radius:8px;margin-top:8px}#hand button{margin:3px;padding:9px;font:13px system-ui;background:#21525d;max-width:46%}.active{outline:3px solid #f2d982}.small,details{font:12px system-ui;color:#baad94;margin-top:14px}#log{max-height:190px;overflow:auto;line-height:1.6}dialog{max-width:540px;width:94%;max-height:90vh;background:#2c2b25;color:#f4e5c7;border:1px solid #b39262;border-radius:12px;padding:22px}dialog::backdrop{background:#000c}dialog h2{margin-top:0}dialog p{line-height:1.5}input,select{padding:10px;margin:5px;max-width:95%;background:#171e1e;border:1px solid #82745a;color:white}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.choices button{font-size:12px;padding:8px}#modal img{max-width:100%;max-height:65vh} @media(max-height:750px){main{max-width:450px}.cell{aspect-ratio:.87}} 
:root main{max-width:min(560px,calc((100dvh - 170px)*.8))}.cell{aspect-ratio:1}.card{width:auto;aspect-ratio:2/3;height:88%;max-width:85%;flex-shrink:0}.placeholder{padding:2px;gap:1px}.placeholder strong{font-size:clamp(7px,1.8vw,11px);flex-shrink:0}.placeholder small{display:none}.symbol{font-size:clamp(16px,4vw,30px);line-height:1;min-height:0}.stats{font-size:clamp(8px,2vw,12px);white-space:nowrap;flex-shrink:0}.waiting main{visibility:hidden}.wall:after{content:''} @media(max-width:500px){main{max-width:100%}}
.placeholder strong{font-size:8px;overflow-wrap:anywhere;line-height:1.05}.stats{font-size:8px}.card{container-type:inline-size}.placeholder strong{font-size:clamp(7px,18cqw,12px)}.stats{font-size:clamp(7px,18cqw,12px)}

.board-frame{display:grid;grid-template-columns:20px minmax(0,1fr) 20px;grid-template-rows:22px auto 22px}.board-frame #board{grid-area:2/2}.files{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:0 9px;text-align:center;align-items:center}.files.top{grid-area:1/2}.files.bottom{grid-area:3/2}.ranks{display:grid;grid-template-rows:repeat(6,1fr);gap:4px;padding:9px 0;text-align:center;align-items:center}.ranks.left{grid-area:2/1}.ranks.right{grid-area:2/3}.files,.ranks{font:12px system-ui;color:#d8c49e}

/* Portrait cards fill portrait cells; messages occupy space only when needed. */
:root main{max-width:420px}.cell{aspect-ratio:2/3}.card{width:100%;height:100%;max-width:100%;border-width:2px;aspect-ratio:2/3}.card img{object-fit:contain}#notice{min-height:0;padding:0}#notice:empty{display:none}#notice:not(:empty){padding:5px;font-size:12px}.board-frame{margin-top:4px}#hand{padding:6px;margin-top:5px}#hand button{padding:7px;margin:2px}#hand button small{font-size:10px}dialog ol{padding-left:20px;font:14px/1.6 system-ui}dialog h3{color:#8fd2c4}footer{padding:5px}footer button{padding:8px}.symbol{font-size:42cqw}.placeholder{padding:5px}.placeholder strong{font-size:20cqw}.stats{font-size:17cqw}
#notice:not(:empty){position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:5;background:#292d27ee;border:1px solid #9e8d64;border-radius:8px;width:max-content;max-width:90vw;padding:8px;pointer-events:none}

#board{position:relative}#trails{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);z-index:3;pointer-events:none;opacity:.78;filter:drop-shadow(0 1px 1px #000)}#trail-history{font:10px/1.4 system-ui;padding:3px 22px}.duel-pair{display:flex;gap:16px;justify-content:center;align-items:flex-start}.duel-figure{margin:0;width:42%;max-width:170px;text-align:center}.duel-figure .card{width:100%;height:auto;aspect-ratio:2/3}.duel-figure figcaption{font:12px/1.4 system-ui;display:grid;gap:5px;padding:7px 0}.spell-chip{background:#215461;color:#e4f5da;border:1px solid #80b59d;border-radius:5px;padding:5px}.fallen .card{filter:grayscale(1);opacity:.3;transform:rotate(5deg)}.survivors .duel-figure{width:65%;max-width:220px}.speed-fixed{position:absolute;bottom:7%;left:30%;width:14%;height:8%;background:#211f1d;color:#fff;display:grid;place-items:center;font:bold 26cqw Georgia}.legacy.illustrated .force{bottom:7%;right:11%;width:17%;height:8%;background:#211f1d;font-size:26cqw}.duel-figure .mami .force{font-size:24cqw}#modal .card img{max-height:none;display:block}#modal:has(.duel-pair){text-align:center}#modal:has(.duel-pair) ol{text-align:left}#modal:has(.duel-pair) h2{font-size:20px}
.mami.illustrated .force{bottom:7%;right:11%;width:20%;height:10%;background:#302a22;font-size:26cqw}.duel-figure .mami .force{font-size:26cqw}
.mami.illustrated .force,.duel-figure .mami .force{font-size:19cqw;line-height:1}.legacy.illustrated .force,.speed-fixed{font-size:22cqw;line-height:1}

.cell.trail-blue{background:#508b9d;box-shadow:inset 0 0 15px #a6eaff,inset 0 0 0 2px #a6eaff}.cell.trail-red{background:#ae7055;box-shadow:inset 0 0 15px #ffbf98,inset 0 0 0 2px #ffbf98}

.board-frame{grid-template-columns:20px minmax(0,1fr);grid-template-rows:auto 22px}.board-frame #board{grid-area:1/2}.ranks.left{grid-area:1/1}.files.bottom{grid-area:2/2}#trail-history{display:none}

.combat-side{width:46%;max-width:190px}.combat-side .duel-figure{width:100%;max-width:none}.spell-space{min-height:180px;display:flex;justify-content:center}.animated-spell{width:100%;max-width:140px;aspect-ratio:2/3;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;border:3px double #9bd4b7;border-radius:9px;background:radial-gradient(#327e83,#133d48);padding:9px;color:#e5f3db;box-shadow:0 0 16px #70bca855}.animated-spell strong{font-size:13px}.animated-spell small{font:11px/1.3 system-ui}.spell-icon{font-size:30px}.appearing{animation:spell-in .6s ease-out}.applying{box-shadow:0 0 24px #ddd388}.consuming{animation:spell-out .8s forwards}@keyframes spell-in{from{opacity:0;transform:translateY(16px) scale(.85)}to{opacity:1;transform:none}}@keyframes spell-out{to{opacity:0;transform:translateY(-20px) scale(.6);filter:brightness(2)}}@media(prefers-reduced-motion:reduce){.appearing,.consuming{animation-duration:.01ms}}

#hand .spell-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}#hand .hand-slot{width:100%;max-width:none;aspect-ratio:2/3;margin:0;padding:0;border:1px solid #7faa99;border-radius:7px;overflow:hidden;background:#13333c}#hand .empty-slot{display:grid;place-items:center;border-style:dashed;opacity:.6}.empty-slot span{font-size:26px;color:#83b39f}.spell-art{width:100%;height:100%;object-fit:contain;display:block}.spell-preview{width:170px;aspect-ratio:2/3;margin:0 auto}.spell-description{font:14px/1.55 system-ui;text-align:left}#hand #undo-cast{max-width:100%;width:100%;margin:7px 0 0}.spell-slots{max-width:330px;margin:auto}

.animated-spell:has(.spell-art){padding:0;border:0;overflow:hidden}.spell-preview img{max-height:none!important}
body{background:radial-gradient(ellipse at top,#354844,#151f23)}#board{background:#202e31;border-color:#435b59}.cell{background:linear-gradient(145deg,#82998e,#5e7973);border-color:#9aada0}.cell:nth-child(even){background:linear-gradient(145deg,#728b83,#526f69)}.cell.wall,.cell.wall:nth-child(even){background:#293d40 url("assets/wall-stone.svg") center/94% 94% no-repeat;border:1px solid #435e5c;box-shadow:inset 0 0 12px #12272b}.wall:after{display:none}.files,.ranks{color:#c5d6c7}.cell.trail-blue{background:#508b9d}.cell.trail-red{background:#926d7b}header,footer{background:#253637;border-color:#657f73}

.cell.wall,.cell.wall:nth-child(even){background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTUwIj4KPHBhdGggZD0iTTE0IDMwIDMzIDEzIDc1IDE3IDkyIDQzIDg5IDExMiA3MiAxMzcgMjcgMTMyIDkgMTA1WiIgZmlsbD0iIzEzMWUyMCIgb3BhY2l0eT0iLjY1Ii8+CjxwYXRoIGQ9Ik0xMyAyNSAzMiA5IDc1IDEzIDg5IDM5IDg1IDEwNyA3MCAxMjkgMjcgMTI1IDEwIDEwMFoiIGZpbGw9IiM3NDg1ODAiIHN0cm9rZT0iI2E0YjFhNyIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Ik0xMyAyNSAzNSAzNSAzMiA5TTM1IDM1IDcxIDMxIDc1IDEzTTcxIDMxIDg5IDM5TTcxIDMxIDY3IDcxIDg1IDEwN002NyA3MSAzNiA4NiAyNyAxMjVNMzYgODYgMTAgMTAwIiBmaWxsPSJub25lIiBzdHJva2U9IiMzNTQ4NGEiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMzUgMzUgMzYgODYgNjcgNzEgNzEgMzFaIiBmaWxsPSIjODk5YTkwIi8+CjxwYXRoIGQ9Im00OCA0Mi01IDE2IDEyIDktNSAxME01NSA2N2wxMS04IiBmaWxsPSJub25lIiBzdHJva2U9IiM0MzU5NTciIHN0cm9rZS13aWR0aD0iMiIvPgo8cGF0aCBkPSJtMTggMzIgNSA1NE0zOCAxN2wyOCAzTTQyIDkzbC04IDIzIiBmaWxsPSJub25lIiBzdHJva2U9IiNiMmJkYjAiIHN0cm9rZS13aWR0aD0iMiIgb3BhY2l0eT0iLjUiLz4KPHBhdGggZD0ibTcyIDEwOSA2LTEyLTMgMjItMTEgNSIgZmlsbD0iIzVlNzk2OSIvPgo8L3N2Zz4K")}

/* Align the dynamic number with the printed stat panel at every card size. */
.card.illustrated .force,.duel-figure .card.illustrated .force{display:block;top:85.4%;bottom:auto;left:71.5%;right:auto;width:16.5%;height:8.7%;padding:0;margin:0;line-height:0;font-size:0;background:#302a22}
.card.legacy.illustrated .force{top:86%;left:74%;width:15%;height:8%;background:#211f1d}
.card .force svg{display:block;width:100%;height:100%;overflow:hidden}

.cell.enchanted-piece{box-shadow:0 0 0 2px #d6ca7d,inset 0 0 15px #dfd586;z-index:1}.enchanted-piece .badge{z-index:4;top:3px;right:3px;border:1px solid #fff0b5;background:#51451b;color:#fff2b1;font:bold 12px system-ui;padding:3px 5px;box-shadow:0 1px 5px #000}.cell.enchanted-ground{box-shadow:inset 0 0 0 3px #a1ddbe,inset 0 0 22px #77d5b4}.cell.ground-trap{box-shadow:inset 0 0 0 3px #d3b2df,inset 0 0 22px #b98ec4}.enchanted-ground .terrain{inset:0;display:grid;place-items:center;font-size:clamp(24px,7vw,42px);color:#dcf4d4;pointer-events:none}.enchanted-ground:has(.card) .terrain{inset:auto auto 2px 2px;font-size:20px;z-index:4;background:#233e39;border-radius:4px}#notice:not(:empty){max-height:25vh;overflow:auto}

/* One coordinate system for every portrait card, independent of number and artwork. */
.card.uniform-stats{position:relative;aspect-ratio:2/3;flex:none}.uniform-stats .stat-band{position:absolute;left:8.5%;top:84%;width:83%;height:12%;padding:0;margin:0;line-height:0}.stat-band svg{display:block;width:100%;height:100%;overflow:visible}.uniform-stats .placeholder{padding-bottom:25%;justify-content:flex-start;gap:14%}.uniform-stats .symbol{margin:auto}
html{width:100%;min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{min-height:100svh;margin:0}main,:root main{width:100%;max-width:430px;padding: max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));margin-inline:auto}.board-frame{min-width:0}#board{min-width:0}.cell{aspect-ratio:2/3;min-height:0}header button,footer button,#modal button{min-height:44px}dialog{width:min(94vw,540px);max-height:calc(100dvh - 24px);overflow-y:auto;overflow-wrap:anywhere}#hand .spell-slots{max-width:270px}header #status{min-width:0;overflow-wrap:anywhere}.duel-pair{min-width:0}.combat-side{min-width:0}img{max-width:100%}@media(max-width:359px){main,:root main{padding-inline:6px}#board{gap:3px;border-width:4px}.board-frame{grid-template-columns:17px minmax(0,1fr)}dialog{padding:14px}.duel-pair{gap:10px}.choices{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(orientation:landscape) and (max-height:600px){main,:root main{max-width:430px}}

/* Compact, centered duel captions; empty spell slots take no vertical space. */
#modal:has(#duel-action){text-align:center}#duel-action{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin:10px auto 0;text-align:center;font:15px/1.4 system-ui;min-height:24px}#duel-action:empty{min-height:0;margin:0}#duel-action p{margin:0;text-align:center}#duel-action button{margin:0}#modal:has(#duel-action) h2{margin:0 0 12px}.spell-space{min-height:0;margin-top:5px}.spell-space:empty{display:none}.combat-side .duel-figure figcaption{gap:3px;padding:5px 0}.spell-space .animated-spell{max-width:110px}.consuming{animation-duration:1.1s}.force-changing .stat-band{animation:force-emphasis 2.4s ease-out}@keyframes force-emphasis{0%,35%{filter:brightness(1.6) drop-shadow(0 0 6px #e4d496)}100%{filter:none}}@media(prefers-reduced-motion:reduce){.force-changing .stat-band{animation:none}.consuming{animation-duration:.01ms}}

.trap-spell{width:38%;max-width:150px;aspect-ratio:2/3}.trap-reveal{align-items:center}#modal:has(.trap-spell){text-align:center}

.clash-cell{isolation:isolate;z-index:3;overflow:visible}.clash-under,.clash-over{position:absolute;width:88%;height:88%;pointer-events:none}.clash-under{left:1%;top:1%;transform:rotate(-7deg);filter:brightness(.85);z-index:1}.clash-over{right:0;bottom:0;z-index:2;animation:card-contact .55s ease-out}.clash-cell .card{width:100%;height:100%}.impact-ring{position:absolute;inset:-6px;border:3px solid #f5e5aa;border-radius:12px;z-index:3;pointer-events:none;animation:contact-ring .85s ease-out forwards}@keyframes card-contact{0%{transform:translateY(-30%) scale(1.13)}55%{transform:translateY(2%) scale(.96)}100%{transform:translateY(0) scale(1)}}@keyframes contact-ring{0%{opacity:0;transform:scale(.7)}30%{opacity:1;box-shadow:0 0 22px #f4e2a2}100%{opacity:0;transform:scale(1.3)}}@media(prefers-reduced-motion:reduce){.clash-over{animation:none}.impact-ring{animation:none;opacity:.7}}

.force-bonus{position:absolute;right:5%;bottom:20%;z-index:6;display:grid;place-items:center;min-width:1.65em;padding:.12em .2em;border:1px solid #f9e9a2;border-radius:.3em;background:#244b32ee;color:#fff1a5;font:bold clamp(20px,5vw,34px)/1.1 system-ui;text-shadow:0 1px 3px #142116;pointer-events:none;animation:bonus-rise 3.2s ease-out forwards}@keyframes bonus-rise{0%{opacity:0;transform:translateY(10px) scale(.7)}15%,70%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-14px) scale(1)}}@media(prefers-reduced-motion:reduce){.force-bonus{animation:none}}

#notice:not(:empty){white-space:pre-line;text-align:center;font-weight:600;border-color:#b6d8ad;background:#203a32f5;color:#f0f4d6}
.card{border-width:4px;border-color:var(--team);box-shadow:0 0 0 1px var(--team),0 2px 5px #0008}.duel-figure .card{border-width:5px}.card.uniform-stats{border-color:var(--team)}

.cell.wall,.cell.wall:nth-child(even){background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iIzY2N2Q3NSIvPjxwYXRoIGQ9Ik0wIDBoMTAwTDc5IDI0IDI5IDE5IDAgNDBaIiBmaWxsPSIjOWNhYWEwIi8+PHBhdGggZD0ibTEwMCAwLTIxIDI0LTggNjkgMjkgNTdaIiBmaWxsPSIjNDI1YjU4Ii8+PHBhdGggZD0ibTAgMTUwIDI0LTI0IDQ3LTMzIDI5IDU3WiIgZmlsbD0iIzM0NGQ0YiIvPjxwYXRoIGQ9Ik0wIDQwIDI5IDE5IDI0IDEyNiAwIDE1MFoiIGZpbGw9IiM3ZjkzODciLz48cGF0aCBkPSJtMjkgMTkgNTAgNS04IDY5LTQ3IDMzWiIgZmlsbD0iIzgxOTY4YiIvPjxnIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Im0wIDQwIDI5LTIxIDUwIDUgMjEtMjRNMjkgMTlsLTUgMTA3TDAgMTUwbTI0LTI0IDQ3LTMzIDI5IDU3TTc5IDI0bC04IDY5IiBzdHJva2U9IiMyOTNlM2MiIHN0cm9rZS13aWR0aD0iMyIvPjxwYXRoIGQ9Im01MiAzNC04IDIyIDEzIDE0LTggMjNtOC0yMyAxMy03IiBzdHJva2U9IiMzNDRmNDkiIHN0cm9rZS13aWR0aD0iMiIvPjxwYXRoIGQ9Ik01IDdoODBNNyA0OXY2Mm0yNy04MCAzNiA0IiBzdHJva2U9IiNjMGM5YjciIHN0cm9rZS13aWR0aD0iMiIgb3BhY2l0eT0iLjUiLz48L2c+PHBhdGggZD0ibTUgMTM4IDExLTExIDggNS0xMCAxMyIgZmlsbD0iIzVlODI2YiIvPjwvc3ZnPgo=");background-size:100% 100%;border:1px solid #354d49;box-shadow:inset 0 0 0 1px #9bada0}
/* A compact stone and patinated-green frame for the battle presentation. */
#modal:has(.duel-pair){background:linear-gradient(145deg,#344b45 0%,#172d2d 50%,#132321 100%);border:1px solid #91a791;border-radius:18px;padding:22px 18px;color:#ede9d5;box-shadow:0 18px 70px #000b,inset 0 0 0 5px #223a34,inset 0 0 0 6px #637d66}
#modal:has(.duel-pair)::backdrop{background:#071714bb;backdrop-filter:blur(3px)}
#modal:has(.duel-pair) h2{font-family:Georgia,serif;font-weight:normal;font-size:23px;letter-spacing:.04em;line-height:1.2;padding:0 0 15px;margin:0 0 16px;border-bottom:1px solid #7d96775c}
#modal:has(.duel-pair) .duel-pair{gap:16px;align-items:flex-start;padding:4px 0 0}
#modal:has(.duel-pair) .duel-figure{padding:7px 7px 0;border-radius:10px;background:#091b1b66;border:1px solid #aac2ae26}
#modal:has(.duel-pair) .duel-figure figcaption{padding:9px 0;gap:4px;font-size:12px;color:#cad9c9}
#modal:has(.duel-pair) .duel-figure figcaption strong{font-family:Georgia,serif;font-size:15px;color:#f3ead1}
#modal:has(.duel-pair) button{background:linear-gradient(#c6c499,#9fa67f);border:1px solid #e1dcaf;color:#18302a;font:600 15px system-ui;border-radius:8px;padding:11px 22px;min-width:130px;box-shadow:0 3px 0 #0a1d18}
#modal:has(.duel-pair) #duel-action{margin-top:14px;gap:12px;color:#d6e6d0}.no-spell{font:14px system-ui;color:#bccfbd}#modal:has(.duel-pair) .survivors{justify-content:center;padding:8px 0}#modal:has(.duel-pair) .spell-space{margin-top:12px}#modal:has(.duel-pair) .trap-spell{margin-top:7px}
@media(max-width:359px){#modal:has(.duel-pair){padding:18px 12px}#modal:has(.duel-pair) .duel-pair{gap:10px}#modal:has(.duel-pair) .duel-figure{padding:4px 4px 0}#modal:has(.duel-pair) h2{font-size:20px}}

.sliding-piece{position:absolute;left:0;top:0;z-index:10;pointer-events:none;will-change:transform;filter:drop-shadow(0 5px 5px #0008)}.sliding-piece .card{width:100%;height:100%}.force-bonus.force-loss{color:#ffe3d7;border-color:#efaf9b;background:#703d3bee}
#modal #begin-duel{display:block;width:fit-content;max-width:100%;margin:18px auto 0;text-align:center;align-self:center}

/* Charcoal board with high-contrast stone masonry. */
:root{background:#181818;color:#ececec}body{background:radial-gradient(ellipse at top,#292929,#181818 75%)}#board{background:#141414;border-color:#454545}.cell,.cell:nth-child(even){background:linear-gradient(145deg,#353535,#292929);border-color:#505050}.cell:nth-child(even){background:linear-gradient(145deg,#303030,#252525)}.cell.wall,.cell.wall:nth-child(even){background:#777 url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iIzMzMzQzNyIvPjxnIHN0cm9rZT0iIzQ1NDY0YSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMCAwaDUzbC0zIDQyLTUwIDRaIiBmaWxsPSIjYWFhOWE0Ii8+PHBhdGggZD0iTTUzIDBoNDd2NDNsLTUwLTFaIiBmaWxsPSIjYzFiZWI1Ii8+PHBhdGggZD0ibTAgNDYgMjktMyA0IDUwLTMzIDRaIiBmaWxsPSIjYzFiZWI2Ii8+PHBhdGggZD0ibTI5IDQzIDcxIDB2NTNsLTY3LTNaIiBmaWxsPSIjYWFhOGEwIi8+PHBhdGggZD0ibTAgOTcgNTgtMy0zIDU2SDBaIiBmaWxsPSIjYWFhOWEyIi8+PHBhdGggZD0ibTU4IDk0IDQyIDJ2NTRINTVaIiBmaWxsPSIjYzNjMGI2Ii8+PC9nPjxnIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTYgN2gzOU02MCA3aDMzTTYgNTNsMTctMk00MCA1MWg1Mk02IDEwNWw0NC0yTTY1IDEwMmgyNyIgc3Ryb2tlPSIjZTFkZmQ1IiBzdHJva2Utd2lkdGg9IjMiLz48cGF0aCBkPSJtMTkgMTMgNiAxMC00IDhtNC04IDExIDNtMzkgMzQtNiAxMSA3IDEwbS01NyAzMyAxMCA4LTMgMTFtNDEtMTctNSAxNCIgc3Ryb2tlPSIjNzQ3NTcwIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNNiAzN2gzN001OSAzNWgzM004IDg1aDE2TTQxIDg1aDUwTTcgMTQwaDQxTTY0IDE0MmgyNyIgc3Ryb2tlPSIjNzM3NTcyIiBzdHJva2Utd2lkdGg9IjIiIG9wYWNpdHk9Ii42Ii8+PC9nPjwvc3ZnPgo=") center/100% 100% no-repeat;border:2px solid #c5c2b8;box-shadow:inset 0 0 0 1px #4b4d4d,0 1px 4px #0009}header,footer{background:#252525;border-color:#505050}.files,.ranks{color:#d0d0d0}.cell.trail-blue{background:#3b687e}.cell.trail-red{background:#794d5b}.small,details{color:#b6b6b6}
header button,#menu,#help{background:#292929;border:1px solid #555;color:#ddd;box-shadow:none;filter:none}header button:hover{background:#353535;filter:none}#hand{background:#222;border-color:#4b4b4b}#hand .hand-slot,#hand button{background:#292929;border-color:#555;color:#eee}#hand .empty-slot{background:#1c1c1c}.empty-slot span{color:#888}#help{width:44px;height:44px;padding:8px}#help svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}.menu-list{display:grid;gap:9px}.menu-list button{text-align:left;background:#303030;border-color:#525252;box-shadow:none}.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.collection-grid button{padding:4px;min-width:0;background:#222}.collection-grid .card{height:auto;width:100%;aspect-ratio:2/3}.collection-grid button>span{display:block;font:11px system-ui;margin:6px 0}.collection-grid .spell-art{height:auto;aspect-ratio:2/3}.catalog-card{width:190px;margin:0 auto}.catalog-card .card{height:auto;aspect-ratio:2/3}.profile-heading{display:flex;gap:15px;align-items:center;margin-bottom:20px}.profile-avatar{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#303536;color:var(--avatar-tone);font-size:27px;border:2px solid var(--avatar-tone)}#help .profile-avatar{width:28px;height:28px;font-size:18px}#help:has(.profile-avatar){padding:6px}.avatar-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.avatar-grid button{padding:5px;background:#222}.avatar-grid .profile-avatar{width:32px;height:32px;font-size:23px}.chosen-avatar{outline:2px solid #cad5c2}.account-note{font:12px/1.5 system-ui;color:#aaa}.match-list{padding-left:20px;line-height:1.6}
#account-form label,#friend-form label,#chat-form label{display:grid;gap:7px;margin:12px 0}#account-error{color:#e2b4a8;font:13px system-ui}.friend-row{display:flex;align-items:center;gap:9px;margin:12px 0}.friend-row span:nth-child(2){flex:1}.friend-row button{padding:8px;font-size:12px}#chat-messages{height:240px;overflow:auto;background:#202020;border-radius:10px;padding:10px}.chat-message{background:#343434;border-radius:9px;padding:10px;max-width:85%;overflow-wrap:anywhere;white-space:pre-wrap;font:14px/1.5 system-ui}.chat-message.mine{margin-left:auto;background:#3b4841}#spells,#menu,#help{background:#292929;box-shadow:none;filter:none;text-shadow:none;animation:none}
/* Neutral charcoal duel surfaces; illustrations retain their own palette. */
#modal:has(.duel-pair){background:linear-gradient(145deg,#303030,#202020 60%,#191919);color:#eee;border-color:#626262;box-shadow:0 18px 70px #000b,inset 0 0 0 5px #252525,inset 0 0 0 6px #4b4b4b}
#modal:has(.duel-pair)::backdrop{background:#090909bb}
#modal:has(.duel-pair) h2{border-color:#62626280}
#modal:has(.duel-pair) .duel-figure{background:#16161680;border-color:#7774}
#modal:has(.duel-pair) .duel-figure figcaption,#modal:has(.duel-pair) .duel-figure figcaption strong,#modal:has(.duel-pair) #duel-action,.no-spell{color:#ddd}
#modal:has(.duel-pair) button{background:#363636;color:#f1f1f1;border-color:#777;box-shadow:0 3px 0 #111}
#modal:has(.duel-pair) .animated-spell{background:#282828;border-color:#777;box-shadow:none;color:#eee}
#modal:has(.duel-pair) .spell-chip{background:#333;border-color:#777;color:#eee}

/* Landscape layout: board centered, inspector panel right, capture rail left, hand bar bottom.
   Structure only — the decorative background/frame art is a later pass. */
html,body{height:100%}
body{display:flex;align-items:flex-start;justify-content:center}
main,:root main{display:flex;flex-direction:column;width:100%;max-width:960px;height:100dvh;max-height:540px;margin:0 auto;padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));gap:6px;overflow-y:auto}
header{flex:none;padding:4px 8px}
header button,footer button{min-height:40px}
.stage{display:grid;grid-template-columns:minmax(0,1fr) 130px;grid-template-rows:minmax(0,1fr);gap:8px;flex:1;min-height:0;align-items:stretch}
.board-area{position:relative;display:flex;align-items:stretch;gap:8px;min-width:0;min-height:0}
.board-frame{flex:none;width:283px;align-self:center;min-width:0;min-height:0;display:flex;justify-content:center}
.ranks,.files{display:none}
/* Squarer cells (was the 2:3 card ratio) so the same available height buys a much wider board;
   the card art inside still uses object-fit:contain, so it just letterboxes instead of stretching. */
.cell{aspect-ratio:1}
/* Captures are pinned to the board's own top-2/bottom-2 rows (see layout.js alignCaptures,
   which measures those rows' actual on-screen position/size after the 3D tilt and writes
   --cap-cell + top/height here) so a defeated card reads at the same size as the row it's on. */
#captures-rail{position:relative;flex:none;width:100px;min-height:0}
.captures-tray{position:absolute;left:0;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;align-content:start;overflow:hidden}
.capture-thumb{width:var(--cap-cell,32px)}
.capture-thumb .card{width:100%;height:auto;aspect-ratio:2/3;filter:grayscale(.55);opacity:.92}
#inspector{display:flex;flex-direction:column;min-height:0;min-width:0;overflow-y:auto;gap:8px}
.inspector-card{width:78%;max-width:105px;max-height:100%;aspect-ratio:2/3;margin:0 auto;flex-shrink:1;min-height:0}
.inspector-card .card,.inspector-card .spell-art{width:100%;height:100%}
.inspector-caption{text-align:center;font:13px/1.4 system-ui;margin:0}
.inspector-hint{font:13px/1.4 system-ui;color:#a99;text-align:center;margin:auto 0}
#inspector details{display:none}
#inspector .small{font-size:11px;margin-top:auto}
.inspector-desc{font:12px/1.4 system-ui;margin:0}
.inspector-spell-note{font:12px/1.3 system-ui;margin:0;color:#cfe6dc}
.inspector-hint-small{font:12px/1.3 system-ui;margin:0;text-align:center;color:#a99}
.inspector-reveal{font:12px system-ui;display:flex;align-items:center;gap:6px}
.inspector-actions{display:flex;gap:6px}
.inspector-actions button{flex:1;padding:7px 4px;font-size:12px}
.bottom-bar{flex:none;width:333px;height:68px;display:flex;align-items:stretch;gap:8px}
.bottom-bar footer{margin:0;flex:none;flex-direction:column;justify-content:center}
.bottom-bar #hand{flex:1;margin:0;height:100%;min-width:0}
#hand .spell-slots{max-width:none;height:100%}
#hand .hand-slot{height:100%;width:auto;margin:0 auto}
/* Perspective board: real 3D tilt (viewed from above, shifted south) instead of faked per-row sizing.
   #board is one uniform grid tipped back with rotateX; card content is counter-rotated so it stays
   flat and readable, like pieces standing on a tilted table. */
.board-frame{position:relative;perspective:1100px;perspective-origin:50% 15%;padding-block:2px}
#board{--board-tilt:32deg;width:100%;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:.55fr repeat(6,1fr) .55fr;gap:1px;border:0;background:none;padding:0;border-radius:0;transform:rotateX(var(--board-tilt));transform-style:preserve-3d;transform-origin:50% 100%}
.cell .card{transform:rotateX(calc(var(--board-tilt) * -1))}
/* Winning lines: the last ordinary row before each goal (see .goal-cell below for the goal itself). */
.cell.edge-far{box-shadow:inset 0 3px 0 #73b7e4}
.cell.edge-near{box-shadow:inset 0 -3px 0 #e27c68}
/* The single goal cell beyond the centre column at each end. */
.goal-cell{background:radial-gradient(#3a3120,#211c14);border-color:#c9a24c}
footer[hidden]{display:none}

/* Victory flavor: themed line + short effect over the duel scene (see victory-flavor.js). */
.victory-flavor{font:italic 14px/1.4 Georgia,serif;color:#e7dcb8;text-align:center;margin:0 0 10px}
.duel-pair{position:relative}
.victory-effect{position:absolute;inset:-6px;pointer-events:none;z-index:6;border-radius:10px;overflow:hidden}
.victory-effect.water{background:linear-gradient(180deg,transparent,#3aa0c4aa,transparent);animation:victory-water 1.3s ease-in-out}
@keyframes victory-water{0%{transform:translateY(-120%);opacity:0}25%{opacity:1}100%{transform:translateY(120%);opacity:0}}
.victory-effect.lightning{background:#f2f6ff;animation:victory-lightning .6s steps(1,end) 2}
@keyframes victory-lightning{0%,100%{opacity:0}15%,35%{opacity:.9}25%,45%{opacity:0}}
.duel-figure.anim-constrict .card{animation:victory-constrict .9s ease-in-out}
@keyframes victory-constrict{0%,100%{transform:scale(1)}35%{transform:scale(.82,1.12)}65%{transform:scale(1.08,.88)}}
@media(prefers-reduced-motion:reduce){.victory-effect,.duel-figure.anim-constrict .card{animation:none}}

/* General dialog chrome: same ornate stone/gold language as the duel modal, applied to every
   dialog (start screen, draft, menus...) that doesn't already have its own #modal:has(...) look. */
dialog{background:linear-gradient(145deg,#33302a 0%,#211e19 55%,#18160f 100%);border:1px solid #8a7550;border-radius:16px;box-shadow:0 18px 60px #000b,inset 0 0 0 4px #2a2620,inset 0 0 0 5px #5c5442ee}
dialog::backdrop{background:#0a0806cc;backdrop-filter:blur(2px)}
dialog h2{font-family:Georgia,serif;font-weight:normal;letter-spacing:.02em;font-size:22px;border-bottom:1px solid #8f7c574d;padding-bottom:12px;margin:0 0 14px}
dialog label{display:block;margin:10px 0;font:13px system-ui;color:#d8c9a5}
dialog input,dialog select{width:100%;background:#15130d;border:1px solid #6b5d43;border-radius:7px;color:#f2e6c8;padding:10px}
dialog button{background:linear-gradient(#463c2c,#28221867);border:1px solid #93815a;box-shadow:0 2px 0 #00000066;border-radius:8px}
dialog button:hover{filter:brightness(1.25)}
dialog button:disabled{filter:none}
.collection-grid button{background:#211d17;border-color:#5c5140}
.collection-grid .card{border-width:2px}
.collection-grid button>span{color:#e9dcb8}