/* Material study: obsidian, etched titanium and rose enamel. */
body{background:#08070d url('assets/night-city.svg') center top/cover fixed no-repeat;position:relative}
body:before{z-index:0;background:linear-gradient(90deg,#07060bcc,transparent 22%,transparent 80%,#07060bcc),linear-gradient(#09070c18,#09070c7a 60%,#09070ce8);pointer-events:none}
body:after{content:'';position:fixed;inset:0;background:url('assets/grain.svg') repeat;opacity:.065;pointer-events:none;z-index:10;mix-blend-mode:screen}
.shell{position:relative;z-index:1;padding:0 48px;background:linear-gradient(90deg,#0d0911d4,#100b14ed 30%,#100b14e6 75%,#0d0911d4);border-inline:1px solid #bd6d9d12;box-shadow:0 0 120px #0009;min-height:100vh}
header{height:98px;border-bottom:1px solid #a3557c45;background:linear-gradient(180deg,#ffffff03,transparent)}header:before{content:'';position:absolute;bottom:-1px;left:0;width:105px;height:1px;background:linear-gradient(90deg,#ffc0db,#ff3c93,transparent);box-shadow:0 0 13px #ff3e8c99}.brand{font-size:23px;letter-spacing:2px}.brand-icon{color:#ffd5e8;background:linear-gradient(145deg,#5d2b48,#1d1122 45%,#48223b);border-color:#b3628d;box-shadow:inset 1px 1px 0 #ffdef129,inset -1px -1px 0 #000,3px 3px 0 #050308,0 0 25px #fc368a13}.header-right{font-size:8px;letter-spacing:1.7px}
.intro{padding:39px 0 35px;min-height:180px;isolation:isolate}.intro:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#27122655,transparent 65%),repeating-linear-gradient(90deg,transparent 0 89px,#fcb3d408 89px 90px);mask-image:linear-gradient(transparent,#000,transparent)}.intro:after{display:none}.eyebrow{font-size:9px;color:#e8a3c3;letter-spacing:2.5px}h1{font-size:37px;letter-spacing:2px;font-weight:800;text-shadow:0 3px 10px #0008;margin:17px 0 13px}h1 span{color:#ff80b6;text-shadow:0 0 24px #ff408230,2px 2px 0 #5a173c}.intro p{color:#b999ad;font-size:11px;letter-spacing:1.8px}.edition-mark{position:absolute;right:5px;top:33px;display:flex;flex-direction:column;align-items:flex-end;border-right:2px solid #d37c9e75;padding-right:17px;transform:skewY(-3deg)}.edition-mark>span{font:900 40px monospace;letter-spacing:5px;color:#ffe0eb;text-shadow:3px 3px #912955,0 0 28px #ff4a9b28}.edition-mark b{font-size:10px;letter-spacing:6px;color:#e893b8;margin:7px 0 10px}.edition-mark small{font:7px monospace;color:#97728d;letter-spacing:2px}
.panel,.unit-codex{border:1px solid #76445e78;background:linear-gradient(125deg,#f8bad10b,transparent 28%),linear-gradient(180deg,#241924e8,#130e18f2),url('assets/grain.svg');box-shadow:inset 0 1px 0 #ffdfef0d,inset 1px 0 0 #ffffff04,inset 0 -1px 0 #0009,0 7px 20px #0005,3px 3px 0 #040207;border-radius:2px 12px 2px 2px;backdrop-filter:blur(12px)}
.panel:before{width:31px;height:2px;left:17px;background:linear-gradient(90deg,#ffd4e6,#ee4a94,transparent);box-shadow:0 0 10px #ff4a9b44}.panel:after{content:'';position:absolute;right:9px;bottom:9px;width:4px;height:4px;border:1px solid #99738966;box-shadow:inset 0 1px 0 #ffe3f333,0 1px 1px #000}.panel-label{color:#c99ab6;font-size:9px;letter-spacing:1.6px}.status-panel{padding-top:23px;background:radial-gradient(ellipse at 95% 0,#8f245528,transparent 70%),linear-gradient(135deg,#30202d,#17111d 75%)}.status-panel h2{font-size:26px;letter-spacing:1px;color:#ffbad7;text-shadow:0 0 28px #ff3b8c25}.status-panel p{font-size:11px;color:#c29bb2}.turn-track{gap:7px}.turn-track span{border:1px solid #5e344b55;box-shadow:inset 0 2px 5px #0005;background:linear-gradient(#0b0810,#17101b);padding:11px 0;letter-spacing:.7px}.turn-track .active{background:linear-gradient(#55304588,#241326);border:1px solid #dc699878;box-shadow:inset 0 1px 0 #ffe5f316,0 0 18px #ff4a9b0a;color:#ffc4dc}
/* Control styling is deliberately scoped so chess-square states keep their meaning. */
.controls button,.header-right button,#promotion-options button{position:relative;overflow:hidden;border:1px solid #a3678880;border-bottom-color:#3e1e34;color:#efd3e3;background:linear-gradient(180deg,#523047 0%,#352235 13%,#261926 52%,#301e30 100%);box-shadow:inset 0 1px 0 #ffe0f133,inset 1px 0 0 #ffe0f10b,inset 0 -2px 0 #0c071199,0 3px 0 #08050c,0 5px 10px #0005;text-shadow:0 1px 1px #000;transition:transform .14s,box-shadow .2s,border-color .2s,filter .2s;border-radius:2px 7px 2px 2px}
.controls button:before,.header-right button:before,#promotion-options button:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff04 0 1px,transparent 1px 3px),linear-gradient(115deg,transparent 15%,#ffffff0c 30%,transparent 48%);pointer-events:none}
.controls button:after{content:'';position:absolute;left:7px;top:50%;width:2px;height:9px;transform:translateY(-50%);background:#bd6b96;box-shadow:0 0 6px #fc7ebb33}
.controls button:hover:not(:disabled),.header-right button:hover,#promotion-options button:hover{filter:brightness(1.16);border-color:#eaa4c3;box-shadow:inset 0 1px 0 #ffe0f144,inset 0 -2px 0 #1a091c,0 3px 0 #08050c,0 5px 18px #ed3a8b15;transform:translateY(-1px)}
.controls button:active:not(:disabled),.header-right button:active,#promotion-options button:active{transform:translateY(2px);box-shadow:inset 0 2px 4px #0006,0 1px 0 #08050c}
.controls button:disabled{filter:saturate(.3);opacity:.42;box-shadow:inset 0 1px 0 #ffffff08,0 2px 0 #08050c}
.controls button.primary{padding:16px 12px;border:1px solid #ffbad2;border-bottom-color:#8d2650;background:linear-gradient(180deg,#ffb3cc 0%,#f66fa5 4%,#df3a7b 46%,#d62f6e 49%,#bf2e65 100%);color:#220d1c;text-shadow:0 1px 0 #ffc9dd88;box-shadow:inset 0 1px 0 #fff4f7aa,inset 1px 0 0 #ffddeb4d,inset 0 -2px 0 #84244e,0 4px 0 #3b102a,0 7px 18px #0007,0 0 30px #e7337912;letter-spacing:2px;font-size:12px;font-weight:800}
.controls button.primary:before{background:repeating-linear-gradient(0deg,transparent 0 2px,#fff1f508 2px 3px),linear-gradient(110deg,transparent 5%,#fff4f321 25%,transparent 44%)}.controls button.primary:after{width:3px;height:18px;background:#ffc3d7;box-shadow:0 0 0 1px #7d2a4d,0 0 9px #ffbad344;left:10px}.controls button.primary:hover{filter:brightness(1.12);box-shadow:inset 0 1px 0 #fff4f7aa,inset 0 -2px 0 #84244e,0 4px 0 #3b102a,0 8px 25px #e7337925}.controls button.primary:active{transform:translateY(3px);box-shadow:inset 0 2px 5px #84244e88,0 1px 0 #3b102a}
.button-row{gap:12px;margin-top:15px}.button-row button{padding:12px 10px;letter-spacing:1px;font-size:11px}.header-right button{font-size:10px;padding:8px 13px;color:#dcb5cc}.controls label:not(.toggle){font-size:10px;letter-spacing:1.3px;color:#d8b4c9}
select{appearance:none;border:1px solid #66425b;border-top-color:#3c293e;border-bottom-color:#8d5a7455;background-image:linear-gradient(45deg,transparent 50%,#d88baa 50%),linear-gradient(135deg,#d88baa 50%,transparent 50%),linear-gradient(180deg,#09070e,#19121e);background-position:calc(100% - 18px) 50%,calc(100% - 14px) 50%,0 0;background-size:4px 4px,4px 4px,100% 100%;background-repeat:no-repeat;padding:13px 27px 13px 12px;box-shadow:inset 0 2px 6px #0009,0 1px 0 #ffd4e50a;border-radius:2px;color:#e7ccdd;font-size:11px;cursor:pointer}select:hover{border-color:#be7399}select:disabled{opacity:.45}select option{background:#19101d;color:#f1d3e4}.toggle{padding-top:15px;border-top:1px solid #9f658327;margin-top:19px;font-size:10px}.toggle input{appearance:none;width:24px;height:13px;border:1px solid #80506c;background:#100b15;box-shadow:inset 0 2px 3px #0008;cursor:pointer;position:relative}.toggle input:before{content:'';position:absolute;left:2px;top:2px;width:6px;height:7px;background:#73526d;transition:left .18s}.toggle input:checked:before{left:14px;background:#ff98c3;box-shadow:0 0 8px #ff4a9b66}.toggle input:focus-visible{outline:2px solid #ffc4dc;outline-offset:3px}
.battle-strip{background:linear-gradient(180deg,#402334,#251625);border-color:#98536f;font-size:8px;letter-spacing:1.5px;box-shadow:inset 0 1px 0 #ffd8ec18;color:#d5a8bf;padding:10px 14px}.board-frame{border:1px solid #bd6b90;padding:17px;background:linear-gradient(135deg,#a16c7c33,transparent 25%,transparent 65%,#b36f8e1a),repeating-linear-gradient(0deg,#ffe2ef04 0 1px,transparent 1px 3px),linear-gradient(90deg,#281924,#422733 3%,#1e121f 5%,#211624 95%,#613d4c 98%,#2e1b2a);box-shadow:inset 0 1px 0 #ffe8f244,inset 1px 0 0 #fff1f41a,inset 0 -2px 0 #06040b,0 0 0 3px #0c0811,0 0 0 4px #583246,7px 9px 0 #040207,0 20px 35px #0008}.board-frame:before,.board-frame:after{height:3px;background:#ffd1e5;box-shadow:0 0 8px #ff4a9b99}#board{box-shadow:0 0 0 1px #c982a066,0 0 0 4px #0a070e,inset 0 0 25px #0007}.square{box-shadow:inset 1px 1px 0 #ffe3f30b,inset -1px -1px 0 #05020955}.square.dark{box-shadow:inset 1px 1px 0 #ffd0e007,inset -1px -1px 0 #0003}.player{padding-inline:8px;height:68px}.player strong{font-size:12px;letter-spacing:.5px}.player-state.current{border-color:#d784aa55;box-shadow:inset 0 1px 0 #ffe2f10a;background:linear-gradient(135deg,#ff4a9b18,#1b111e);color:#ffb7d5}.avatar{border-radius:2px;box-shadow:inset 0 1px 0 #ffe9f233,3px 3px 0 #06030a,0 4px 9px #0007}
.history-panel{background:linear-gradient(180deg,#201521ee,#110d17f5)}#history{border-top:1px solid #6b3b5633;padding-top:6px}.empty{padding:19px 0;color:#b78da8}.move-row{border-bottom:1px solid #d17ba00b}.tip{padding:4px 7px}.tip p{color:#b18b9f;line-height:2}.unit-codex{padding:20px}.unit-card{background:linear-gradient(115deg,#ffb1d107,transparent);border:1px solid #7c486331!important;padding:8px 5px;position:relative;transition:border-color .2s,background .2s}.unit-card:hover{border-color:#c4789d88!important;background:linear-gradient(115deg,#ffb1d113,transparent)}.unit-card:after{content:'';position:absolute;bottom:4px;right:4px;width:3px;height:3px;background:#89516d}.unit-card span{font-size:10px;color:#dfb5cc}.unit-card small{font-size:7px}.unit-card svg{filter:drop-shadow(0 3px 2px #0009)}footer{font-size:8px;color:#a58096;border-color:#9c597333;padding:23px 0 27px}.header-right .led{box-shadow:0 0 0 3px #ff4a9b10,0 0 10px #ff4a9b88}
dialog{background:linear-gradient(135deg,#382333,#160f1e);border:1px solid #f29fc5;box-shadow:inset 0 1px 0 #ffe2ef33,0 0 0 4px #0b070f,0 20px 70px #000c;border-radius:2px 14px 2px 2px}button:focus-visible,select:focus-visible{outline:2px solid #ffd2e7;outline-offset:4px}
@media(max-width:1050px){.edition-mark{right:0;padding-right:12px}.edition-mark>span{font-size:28px}.edition-mark small{font-size:6px}.header-right{font-size:7px;letter-spacing:1px}h1{font-size:32px}.intro p{letter-spacing:1px}}@media(max-width:820px){.shell{padding:0 24px}.edition-mark>span{font-size:32px}.intro p{max-width:65%}.header-right{font-size:0}.header-right button{font-size:10px}header{height:84px}.intro{min-height:170px}.board-frame{padding:14px}.unit-card{padding:5px}.panel{backdrop-filter:none}}@media(max-width:540px){.shell{padding:0 16px}.edition-mark{display:none}.intro{padding:30px 0 26px;min-height:0}h1{font-size:27px;letter-spacing:0}.intro p{max-width:100%;font-size:10px;letter-spacing:.3px}.eyebrow{font-size:8px;letter-spacing:1.3px}.board-frame{padding:9px}.unit-card{padding:4px 1px}.unit-card span{font-size:9px}.unit-codex{padding:13px}header{height:76px}.brand{font-size:18px;letter-spacing:1px}.player{height:62px}.header-right button{margin-left:0}.battle-strip{font-size:7px;letter-spacing:1px}.unit-card svg{width:30px}footer{letter-spacing:.5px}body{background-attachment:scroll}}
@media(prefers-reduced-motion:reduce){.controls button,.header-right button,select,.unit-card,.toggle input:before{transition:none}}