@font-face{font-family:Editorial;src:local('Baskerville')}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#111814;color:#eadfc5;font-family:Arial,sans-serif}button,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid #bfa36945;background:#18221dbb;padding:12px 16px;border-radius:3px;transition:background .2s,border-color .2s}button:hover{background:#4b4a32;border-color:#d7bd7b}button:disabled{opacity:.4;cursor:wait}button:focus-visible,select:focus-visible{outline:2px solid #ddc58a;outline-offset:3px}#view{position:fixed;inset:0}canvas{display:block;width:100%;height:100%}.vignette{pointer-events:none;position:fixed;inset:0;background:linear-gradient(90deg,#0c1512ee 0%,#0c1512a6 22%,transparent 47%),linear-gradient(0deg,#0c1512bb,transparent 15%)}header{position:fixed;left:38px;right:38px;top:28px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:15px;align-items:center;text-decoration:none;color:#e8dcbf;font-size:19px;letter-spacing:3px}.brand i{font-family:Georgia;font-size:22px;font-weight:normal;color:#ba9a58}.brand small{display:block;font-size:8px;letter-spacing:2.5px;color:#a1aa99;margin-top:8px}.seal{display:inline-grid;place-items:center;width:43px;height:48px;border:1px solid #bd9c58;color:#e1c582;font-family:serif;font-size:30px}.top-actions{display:flex;gap:9px;font-size:11px}.panel{position:fixed;left:40px;top:130px;width:285px;max-height:calc(100vh - 195px);overflow:auto;scrollbar-width:thin;scrollbar-color:#706143 transparent}.eyebrow{font-size:9px;letter-spacing:2.4px;color:#ba9b61}h1{font-family:Editorial,Georgia,serif;font-size:43px;font-weight:400;line-height:1.18;margin:21px 0 14px;letter-spacing:-1px}h1 em{font-style:italic;color:#d2b87e}.intro{color:#939d90;font-size:12px;line-height:1.8}.divider{height:1px;background:linear-gradient(90deg,#ba9a5855,transparent);margin:22px 0}label{display:block;color:#a6ad9d;font-size:9px;letter-spacing:1.6px;margin:15px 0 8px}select{width:100%;background:#1a241f;border:1px solid #bfa36940;border-radius:3px;padding:11px;font-size:12px;color:#ddd5be}.turn{display:flex;gap:12px;align-items:center;margin:25px 0 19px}.turn small{display:block;font-size:9px;color:#9aa994;letter-spacing:1.6px;margin-bottom:7px}.turn strong{font-size:14px;font-weight:400}#turn-dot{width:10px;height:10px;flex-shrink:0;border-radius:50%;background:#b64a38;box-shadow:0 0 16px #b64a3866}.button-row{display:flex;gap:8px}.primary{background:#d2bb83;color:#1d271d;border-color:#d2bb83}.primary:hover{background:#e5cf9c}.button-row .primary{flex:1;display:flex;justify-content:space-between}.stats{display:flex;justify-content:space-between;margin:24px 0;border-top:1px solid #bfa36925;border-bottom:1px solid #bfa36925;padding:15px 0}.stats span{display:block;font-family:Georgia;font-size:22px}.stats small{font-size:8px;letter-spacing:1.4px;color:#929d8c;display:block;margin-top:7px}.history ol{list-style:none;margin:0;padding:0;color:#b8bdab;font-size:11px;line-height:1.9}.history li:first-child{color:#dec892}.note{font-size:10px;color:#86927f;line-height:1.8;margin-top:19px}.camera-tools{position:fixed;bottom:70px;left:calc(50% + 80px);transform:translateX(-50%);display:flex;gap:5px}.camera-tools button{font-size:10px;backdrop-filter:blur(10px)}footer{position:fixed;left:40px;right:40px;bottom:24px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#91a08b}#loading{position:fixed;inset:0;background:#101b17f5;display:grid;place-items:center;z-index:10}.loading-card{text-align:center;max-width:450px;padding:30px}.loading-card h2{font-family:Georgia;font-weight:400;font-size:36px}.loading-card p{font-size:13px;color:#aab4a0;line-height:1.6}progress{width:230px;height:3px;accent-color:#ceb575}dialog{background:#1b2922;color:#ded4b9;border:1px solid #8e8051;max-width:530px;padding:35px;line-height:1.7;font-size:13px}dialog::backdrop{background:#0009;backdrop-filter:blur(6px)}dialog h2{font:30px Georgia}.dialog-close{float:right;padding:3px 10px;font-size:23px}#toast{position:fixed;top:100px;left:60%;transform:translateX(-50%);background:#192b22ed;border:1px solid #b7a26e;padding:14px 22px;font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:6;max-width:450px}.check{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:0} [hidden]{display:none!important}@media(max-height:820px){.panel{top:108px}h1{font-size:35px;margin:15px 0}.intro{display:none}.divider{margin:15px 0}.stats{margin:16px 0}.turn{margin:17px 0}.history{display:none}}@media(max-width:760px){header{left:16px;right:16px;top:15px}.brand{font-size:14px}.brand small{font-size:6px}.top-actions button{font-size:9px;padding:8px}.panel{top:auto;bottom:47px;left:16px;width:220px;max-height:36vh;background:#122019df;padding:12px;border:1px solid #bcaa6740}.panel h1,.eyebrow,.intro,.divider,.history,.note,.stats,#difficulty-wrap{display:none}.panel label{margin:0 0 6px}.turn{margin:11px 0}.camera-tools{left:auto;right:12px;bottom:58px;transform:none;flex-direction:column}footer{left:16px;right:16px;font-size:6px}footer span:nth-child(2){display:none}.brand .seal{width:29px;height:36px;font-size:24px}#toast{left:50%;top:80px;width:85%}}

/* Approved board-centered event titles. Capture deliberately has no banner. */
.board-vfx-title{position:fixed;z-index:5;pointer-events:none;transform:translate(-50%,-50%);text-align:center;font-family:Georgia,serif;font-weight:bold;font-size:clamp(22px,3.1vw,46px);white-space:nowrap;color:#fff0b3;text-shadow:0 2px 0 #74501a,0 0 12px #ffb531,0 0 35px #ecb039;letter-spacing:.09em;padding:16px 42px;background:radial-gradient(ellipse,#293c25d9,transparent 72%);border-block:1px solid #e9ca7e88}
.board-vfx-title[data-kind=check],.board-vfx-title[data-kind=defeat]{color:#ffe0c3;text-shadow:0 2px 0 #670d08,0 0 14px #ff2615,0 0 34px #ff5a20;border-color:#ef774a88;background:radial-gradient(ellipse,#60170bd9,transparent 72%)}
.board-vfx-title[data-kind=draw]{color:#c2ffed;text-shadow:0 0 14px #62ccaa}
.primary{background:transparent url('assets/approved/menu-frame.webp') center/100% 100% no-repeat!important;border:0;color:#fff0c0;min-height:62px;padding:18px 25px 18px 50px;text-shadow:0 2px 3px #051c12;filter:drop-shadow(0 6px 7px #0006)}
.primary:hover{filter:drop-shadow(0 0 12px #e8c16b70) brightness(1.15)}
.panel{background:linear-gradient(90deg,#13271ae8,#13271a88);padding:22px;border:1px solid #b6a56750;border-radius:14px;width:315px;left:26px}.playing .panel h1,.playing .intro,.playing .eyebrow,.playing .divider{display:none}.playing .panel{width:260px}.vignette{background:linear-gradient(90deg,#0c1512b3,transparent 45%),linear-gradient(0deg,#0c151277,transparent 18%)}
@media(max-width:760px){.panel,.playing .panel{left:10px;width:190px;padding:10px;max-height:34vh}.primary{min-height:42px;font-size:11px;padding:12px 12px 12px 30px}.board-vfx-title{padding:12px 18px;font-size:20px}.playing .panel{max-height:24vh}.playing .panel #difficulty-wrap,.playing .panel label,.playing .panel select{display:none}}

.mesh-menus .primary{background:none!important;filter:none!important}.mesh-menus .panel h1{padding:14px 18px;color:#f9df98;text-shadow:0 2px 4px #091d13;font-size:35px}.mesh-menus .panel h1 em{color:#fff1bd}


/* Rework: the approved monolith/menu and two player HUDs replace the form panel. */
.panel,.playing .panel{left:4vw;top:9vh;bottom:auto;width:30vw;height:83vh;max-height:none;padding:0;overflow:visible;border:0;border-radius:0;background:none}
.panel .title-monolith,.mesh-menus .panel .title-monolith{position:absolute;inset:0 0 auto;height:84%;margin:0;padding:16vh 2vw 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;font-family:Georgia,serif;font-size:clamp(36px,5.7vw,82px);line-height:1.06;letter-spacing:.025em;color:#ffe4a0;text-shadow:0 3px 1px #372214,0 0 14px #e3a64c77}
.panel .title-monolith em{font-size:.45em;font-style:normal;line-height:1.2;color:#ffe4a0}
.panel .turn,.panel .stats,.panel .history,.panel .note{display:none}
.button-row{position:absolute;top:54%;width:100%;height:12%;display:block}
.button-row .primary,.panel .menu-choice{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:0;border:0;background:transparent;color:#ffe5a5;font:clamp(17px,2.2vw,31px) Georgia;letter-spacing:.035em;text-shadow:0 2px 2px #082016}
.panel .menu-choice{position:absolute;height:12%;left:0;top:68%}.panel #settings-menu{top:82%}
.menu-icon{position:absolute;left:8%;width:17%;display:grid;place-items:center;font:1.4em serif}
.panel #pause{position:fixed;right:88px;top:28px;width:48px;height:48px;border-radius:50%;background:#09251dea;border:2px solid #b99b5b;display:none;font-size:22px;padding:0}
header .brand,footer{display:none}.top-actions{position:fixed;right:25px;top:28px}.top-actions button{border-radius:50%;width:48px;height:48px;padding:0;background:#09251dea;border:2px solid #b99b5b;font-size:11px}.top-actions #sound{display:none}
.player-hud{display:none;position:fixed;left:50%;transform:translateX(-50%);width:min(420px,53vw);height:76px;align-items:center;padding:0 30px 0 92px;color:#ffe3a0;background:url('assets/approved/menu-frame.webp') center/100% 100% no-repeat;filter:drop-shadow(0 4px 5px #0008);font-family:Georgia,serif}.opponent{top:15px}.human{bottom:16px}
.player-hud strong{font-size:20px;font-weight:normal}.player-hud small{display:block;color:#d3b75f;letter-spacing:5px;margin-top:4px}.player-medallion{position:absolute;left:7%;font:34px serif;color:#ffe3a0}.human .player-medallion{color:#ffcf91;text-shadow:0 0 9px #e43115}.hud-clock{margin-left:auto;font-size:17px}
.playing .panel{pointer-events:none}.playing .panel>*{display:none}.playing .panel .button-row{display:block;height:0}.playing .panel .button-row .primary{display:none}.playing .panel #pause{display:block;pointer-events:auto}.playing .player-hud{display:flex}
.round-action{display:none;position:fixed;right:25px;bottom:27px;width:46px;height:46px;border:2px solid #b99b5b;border-radius:50%;padding:0;background:#09251dea;font-size:23px}.playing .round-action{display:block}
.camera-tools{left:auto;right:20px;bottom:105px;transform:none;flex-direction:column;opacity:.8}.camera-tools button{font-size:9px;padding:7px}.vignette{background:linear-gradient(0deg,#0c151233,transparent 20%)}
.game-options label{font-size:12px}.game-options select{font-size:15px}.game-options #difficulty-wrap{display:block}#library-history{max-height:50vh;overflow:auto}
@media(max-width:760px){.panel,.playing .panel{left:3vw;top:12vh;width:43vw;height:70vh;max-height:none;padding:0}.panel .title-monolith,.mesh-menus .panel .title-monolith{padding:15vh 1vw 0;font-size:7.7vw;display:flex}.button-row{top:55%}.panel .menu-choice{top:69%}.panel #settings-menu{top:83%}.button-row .primary,.panel .menu-choice{font-size:3.9vw}.player-hud{width:70vw;height:58px;padding-left:65px;padding-right:19px}.player-hud strong{font-size:15px}.player-hud small{font-size:10px}.player-medallion{font-size:27px}.hud-clock{font-size:13px}.panel #pause{right:65px;top:12px;width:38px;height:38px}.top-actions{top:12px;right:14px}.top-actions button{width:38px;height:38px}.round-action{right:12px;bottom:24px;width:35px;height:35px}.opponent{top:62px}.human{bottom:19px}.camera-tools{right:7px;bottom:90px}.camera-tools button{padding:5px;font-size:8px}}
.board-vfx-title[data-kind=victory]{width:clamp(300px,45vw,580px);height:260px;padding:0;display:flex;align-items:center;justify-content:center;font-size:clamp(22px,3vw,38px);background:none;border:0;text-shadow:0 2px 1px #51300c,0 0 12px #e9b64c}
.board-vfx-title[data-kind=victory]::before{content:'';position:absolute;inset:-33px -10px 17px;z-index:-1;background:url('assets/approved/vfx/victory-dragon.webp') center/contain no-repeat;filter:drop-shadow(0 0 10px #f3bd45bb)}
@media(max-width:760px){.board-vfx-title[data-kind=victory]{width:85vw;height:190px;font-size:23px}.board-vfx-title[data-kind=victory]::before{inset:-25px -5px 13px}}
.board-vfx-title[data-kind=opening]{padding:27px 65px;border:0;background:transparent url('assets/approved/vfx/opening-plaque.webp') center/100% 100% no-repeat;filter:drop-shadow(0 0 12px #e7ad49aa);font-size:clamp(24px,3.4vw,42px)}
@media(max-width:760px){.board-vfx-title[data-kind=opening]{padding:23px 40px;font-size:24px}}
.playing .panel .title-monolith,.playing.mesh-menus .panel .title-monolith{display:none!important}
.player-medallion{left:15%;width:38px;height:38px;display:grid;place-items:center}.player-hud{padding-left:108px}
@media(max-width:760px){.player-medallion{width:28px;height:28px}.player-hud{padding-left:76px}}
.board-vfx-title[data-kind=check]{padding:30px 65px;border:0;background:transparent url('assets/approved/vfx/check-plaque.webp') center/100% 100% no-repeat;filter:drop-shadow(0 0 14px #ff4624aa);font-size:clamp(24px,3.4vw,42px)}
@media(max-width:760px){.board-vfx-title[data-kind=check]{padding:24px 43px;font-size:24px}}
.board-vfx-title[data-kind=defeat]{padding:35px 75px;border:0;background:transparent url('assets/approved/vfx/defeat-plaque.webp') center/100% 100% no-repeat;filter:drop-shadow(0 0 16px #dc2318bb);font-size:clamp(24px,3.4vw,42px)}
@media(max-width:760px){.board-vfx-title[data-kind=defeat]{padding:27px 44px;font-size:24px}}
.board-vfx-title[data-kind=draw]{width:clamp(290px,42vw,540px);height:240px;padding:0;display:flex;align-items:center;justify-content:center;background:none;border:0;font-size:clamp(24px,3.4vw,42px);text-shadow:0 2px 1px #1c4c36,0 0 12px #89dfb8}
.board-vfx-title[data-kind=draw]::before{content:'';position:absolute;inset:-22px -10px 14px;z-index:-1;background:url('assets/approved/vfx/draw-medallion.webp') center/contain no-repeat;filter:drop-shadow(0 0 10px #a4e1bbaa)}
@media(max-width:760px){.board-vfx-title[data-kind=draw]{width:85vw;height:180px;font-size:24px}.board-vfx-title[data-kind=draw]::before{inset:-18px -5px 10px}}
#result-actions{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:20px;z-index:6}#result-actions button{width:190px;min-height:60px;padding:0 18px 0 34px;background:transparent url('assets/approved/menu-frame.webp') center/100% 100% no-repeat;border:0;font:18px Georgia;color:#ffdfa0;text-shadow:0 2px 2px #0a1f16;filter:drop-shadow(0 3px 5px #000a)}.finished .human,.result-preview .human{display:none}@media(max-width:760px){#result-actions{gap:8px;bottom:24px;width:85vw}#result-actions button{width:50%;min-height:46px;font-size:14px}}
/* Align type to the actual cartouche anchor, independent of transparent art margins. */
.board-vfx-title[data-kind]{width:clamp(300px,46vw,570px);height:90px;padding:0!important;border:0!important;background:none!important;display:flex;align-items:center;justify-content:center;filter:none!important;font-size:clamp(23px,3.2vw,40px);line-height:1}
.board-vfx-title[data-kind]::before{display:none!important}.vfx-ornament{position:absolute;left:50%;top:50%;width:100%;height:auto;transform:translate(-50%,calc(-1 * var(--cartouche-anchor,50%)));z-index:-1;pointer-events:none}.vfx-label{display:block;width:74%;text-align:center;line-height:1;letter-spacing:.015em;white-space:nowrap;text-shadow:0 2px 1px #39200a,0 0 7px #efbd62}
@media(max-width:760px){.board-vfx-title[data-kind]{width:86vw;height:65px;font-size:24px}}
.panel .title-monolith,.mesh-menus .panel .title-monolith{padding-top:18vh;gap:.05em}

/* Keep both name and status inside the inset jade cartouche. */
.player-hud>div{display:flex;align-items:center;gap:10px;white-space:nowrap}.player-hud small{margin:0;font-size:9px;letter-spacing:2px}.player-hud strong{font-size:18px}.player-hud{padding-right:46px}.player-medallion{left:11%;font-size:29px}
@media(max-width:760px){.player-hud>div{gap:4px}.player-hud small{display:none}.player-hud strong{font-size:13px}.player-hud{padding-right:26px}.player-medallion{font-size:24px}.hud-clock{font-size:11px}}

/* Emblem sits inside the monolith’s carved inner circle. */
.kylam-emblem{position:absolute;left:46%;top:31.5%;transform:translate(-50%,-50%);width:39%;height:auto;pointer-events:none}

/* VFX ornament now renders in board-space; type stays accessible. */
.vfx-scene-shade{position:fixed;inset:0;pointer-events:none;background:#160907;opacity:0;z-index:1}.board-vfx-title{z-index:5}.board-vfx-title[data-kind]{text-shadow:0 2px 1px #241509,0 0 4px #dcaa4d}.board-vfx-title[data-kind=defeat]{color:#ffdeb1}.vfx-ornament{display:none}

/* No persistent visual veil over the playing board. */
.playing .vignette{display:none}.vfx-scene-shade{display:none}


.appearance-settings{margin:18px 0;border-top:1px solid #bda46d55;padding-top:12px}.appearance-settings h3{font-size:18px;color:#f5daa0}.appearance-settings label{display:grid;gap:7px;margin:14px 0}.appearance-settings select{width:100%;padding:10px;background:#13251f;color:#f5daa0;border:1px solid #aa905a;border-radius:8px}.appearance-settings p{font-size:13px;line-height:1.5;opacity:.8}.appearance-settings .appearance-title{margin:14px 0 8px;font-size:14px;opacity:1;color:#f5daa0}.appearance-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}.appearance-tile{display:flex;flex-direction:column;gap:4px;padding:4px 4px 7px;min-height:0;background:#13251f;color:#e9dcc0;border:1px solid #aa905a55;border-radius:10px;cursor:pointer;text-align:center;font:inherit;font-size:12px;line-height:1.25}.appearance-tile img{display:block;width:100%;height:auto;aspect-ratio:3/2;border-radius:7px;background:#13251f}.appearance-tile[aria-checked=true]{border:2px solid #f5daa0;padding:3px 3px 6px;background:#24483a;color:#f5daa0}.appearance-tile:hover{border-color:#d9bd7d}.appearance-tile:focus-visible{outline:2px solid #f5daa0;outline-offset:2px}

.top-actions #settings-quick{font-size:23px}.panel #pause{right:151px}@media(max-width:760px){.panel #pause{right:116px}.top-actions #settings-quick{font-size:20px}}

/* Player-facing controls; camera choices belong in Settings. */
.camera-settings{position:static;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:12px;border:1px solid #bda46d55;border-radius:8px}.camera-settings legend{padding:0 7px;color:#f5daa0}.camera-settings button{flex:1;min-width:90px;min-height:42px;font-size:13px;border-radius:8px;background:#13251f;color:#f5daa0;border:1px solid #aa905a}.camera-settings button:focus-visible,.appearance-settings select:focus-visible{outline:2px solid #f5daa0;outline-offset:3px}dialog{width:min(530px,calc(100vw - 28px));max-height:calc(100dvh - 40px);overflow:auto;border-radius:14px}.round-action{bottom:calc(24px + env(safe-area-inset-bottom))}@media(max-width:760px){dialog{padding:22px}.camera-settings button{min-width:75px}.player-hud.human{bottom:calc(19px + env(safe-area-inset-bottom))}}
/* Title badges occupy the existing carved medallion, with no extra frame. */
.player-hud .player-medallion{padding:0;border:0;background:none;border-radius:50%;width:42px;height:42px;cursor:pointer;line-height:1;filter:none;text-shadow:none;box-shadow:none}
.player-medallion img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 2px #0006)}
.player-medallion:focus-visible{outline:2px solid #f5daa0;outline-offset:3px}
.player-title-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.player-title-choice{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 5px;border:1px solid #bda46d66;border-radius:10px;background:#10251ee6;color:#f5daa0;font:14px Georgia,serif;cursor:pointer}
.player-title-choice img{width:64px;height:64px;object-fit:contain}
.player-title-choice[aria-pressed=true]{border-color:#f5daa0;background:#274536}
.player-title-choice:focus-visible{outline:2px solid #f5daa0;outline-offset:2px}
@media(max-width:760px){.player-hud .player-medallion{width:32px;height:32px}.player-title-grid{gap:7px}.player-title-choice{font-size:12px;padding:10px 3px}.player-title-choice img{width:54px;height:54px}}
@media(max-width:760px){.player-hud .player-medallion{width:44px;height:44px;left:calc(11% - 6px)}.player-medallion img{width:32px;height:32px;margin:auto}}
.suggestion-control{display:none;position:fixed;left:18px;bottom:24px;z-index:5;max-width:250px;gap:6px;align-items:center;flex-direction:column}
.playing .suggestion-control{display:flex}
#suggest-move{width:130px;min-height:48px;border:0;background:transparent url('assets/approved/menu-frame.webp') center/100% 100% no-repeat;color:#ffe3a0;font:16px Georgia,serif;cursor:pointer;filter:drop-shadow(0 3px 4px #0008)}
#suggest-move:disabled{opacity:.45;cursor:default}
#suggest-move:focus-visible{outline:2px solid #f5daa0;outline-offset:3px}
#suggestion-status{font:13px Georgia,serif;color:#ffe3a0;text-shadow:0 1px 3px #000;background:#10251ee6;border-radius:6px;padding:4px 8px}
#suggestion-status:empty{display:none}
@media(max-width:760px){.suggestion-control{left:10px;bottom:calc(75px + env(safe-area-inset-bottom));max-width:200px}#suggest-move{width:112px;font-size:14px}#suggestion-status{font-size:12px}}

/* Pre-match faction selection: jade, gold and glowing faction crests. */
#side-dialog{width:min(800px,calc(100vw - 32px));max-width:800px;padding:38px 44px 32px;border:1px solid #cba96b;border-radius:4px;background:radial-gradient(ellipse at 20% 65%,#74251d40,transparent 48%),radial-gradient(ellipse at 85% 60%,#11785838,transparent 48%),linear-gradient(145deg,#162921fa,#07120ffb 65%);box-shadow:0 0 0 5px #091510,0 0 0 6px #b591514f,0 22px 90px #000b,inset 0 0 55px #0008;text-align:center;overflow:auto}
#side-dialog::backdrop{background:#020806b8;backdrop-filter:blur(7px)}
.side-close{position:absolute;right:12px;top:9px;border:0;background:transparent;font-size:25px;color:#c6b18a;padding:0 8px}
.side-kicker{font-size:10px;letter-spacing:4px;color:#d4b776}.side-heading h2{font:bold 30px Georgia,serif;letter-spacing:2px;color:#ffe3a0;text-shadow:0 2px 8px #000;margin:10px 0}.side-heading p{color:#a8b7a9;font-size:12px;margin:0 0 26px}
.side-cards{display:grid;grid-template-columns:1fr 38px 1fr;align-items:center;gap:12px}.side-card{--faction:#ee7663;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:28px 14px 23px;min-height:290px;border:1px solid #b4996259;border-radius:3px;background:linear-gradient(150deg,#50322955,#111914 75%);box-shadow:inset 0 0 0 5px #07100e,inset 0 0 0 6px #c49d522b;transition:transform .2s,box-shadow .2s,border-color .2s}
.side-green{--faction:#73e7b1;background:linear-gradient(150deg,#24564460,#111914 75%)}.side-card:hover{transform:translateY(-3px);background-color:#27392c;border-color:var(--faction)}.side-card[aria-pressed="true"]{border-color:#ffe0a0;box-shadow:0 0 22px color-mix(in srgb,var(--faction) 24%,transparent),inset 0 0 0 5px #07100e,inset 0 0 0 6px #d5b57999}.side-card-state{position:absolute;top:10px;right:12px;color:#f6d899;font-size:9px;letter-spacing:2px;opacity:0}.side-card[aria-pressed="true"] .side-card-state{opacity:1}
.side-crest{display:grid;place-items:center;position:relative;width:136px;height:136px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--faction) 19%,transparent),transparent 69%);margin:4px 0 15px}.side-crest:before,.side-crest:after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid color-mix(in srgb,var(--faction) 48%,transparent);box-shadow:0 0 20px color-mix(in srgb,var(--faction) 14%,transparent)}.side-crest:after{inset:0;border-color:transparent;border-top-color:var(--faction);border-bottom-color:#c9a86a75;animation:side-orbit 10s linear infinite}.side-crest img{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 0 11px color-mix(in srgb,var(--faction) 40%,transparent))}
.side-name{font:bold 23px Georgia,serif;letter-spacing:2px;color:#f6dfaa}.side-faction{color:var(--faction);font-size:11px;font-weight:bold;letter-spacing:3px;margin-top:4px}.side-rule{color:#c3c7b7;font-size:11px;margin-top:12px}.side-versus{font:italic 21px Georgia,serif;color:#b99b62;text-shadow:0 0 12px #e3ba6440}.side-opponent{font-size:13px;color:#f0d699;margin:22px 0 12px}#side-new-warning{font-size:11px;color:#c7b98d;margin:0 0 9px}
#side-confirm{display:block;margin:auto;width:260px;min-height:57px;border:0;background:transparent url('assets/approved/menu-frame.webp') center/100% 100% no-repeat;color:#ffe4a4;font:bold 18px Georgia,serif;letter-spacing:3px;filter:drop-shadow(0 6px 12px #0009)}#side-confirm:hover{filter:drop-shadow(0 0 10px #cbb87580)}#side-confirm span{margin-left:15px}
@keyframes side-orbit{to{transform:rotate(360deg)}}
@media(max-width:600px){#side-dialog{padding:30px 16px 24px}.side-heading h2{font-size:21px;letter-spacing:1px}.side-heading p{font-size:11px;margin-bottom:20px}.side-cards{grid-template-columns:1fr 20px 1fr;gap:5px}.side-card{padding:26px 6px 18px;min-height:240px}.side-crest{width:100px;height:100px}.side-crest img{width:86px;height:86px}.side-name{font-size:16px;letter-spacing:1px}.side-rule{font-size:10px;max-width:115px;line-height:1.6}.side-versus{font-size:15px}.side-card-state{right:8px;font-size:8px;letter-spacing:1px}#side-confirm{width:235px}.side-opponent{font-size:12px}}
@media(prefers-reduced-motion:reduce){.side-crest:after{animation:none}.side-card{transition:none}}

/* Flat menu artwork eliminates the orthographic 3D menu render pass. */
.panel .title-monolith{background:url('assets/approved/title-stone-ui.webp') center/100% 100% no-repeat;filter:drop-shadow(0 5px 8px #0008)}
.panel .menu-choice,.button-row .primary{background:transparent url('assets/approved/menu-frame.webp') center/100% 100% no-repeat!important;filter:drop-shadow(0 4px 6px #0008)}

.camera-float{display:none;position:fixed;right:25px;bottom:calc(88px + env(safe-area-inset-bottom));width:44px;height:44px;padding:9px;border:1px solid #c7a762;border-radius:50%;background:#09251de8;color:#f6d993;box-shadow:0 3px 10px #0006;z-index:5}.playing .camera-float{display:grid;place-items:center}.camera-float svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}.camera-float:hover{background:#24483b}.camera-float[data-angle=frontview] svg{transform:rotate(-12deg)}.camera-float[data-angle=topview] svg{transform:rotate(0deg)}@media(max-width:760px){.camera-float{right:12px;bottom:calc(78px + env(safe-area-inset-bottom));width:40px;height:40px}}

/* Opening-tree workspace: mobile-first, local-only, board preview remains 3D behind the dialog. */
.opening-dialog{width:min(760px,calc(100vw - 28px));max-width:760px;max-height:min(760px,calc(100dvh - 28px));padding:24px;background:linear-gradient(145deg,#10261eeF,#07120ff7 72%),url('assets/approved/dark-stone-texture.webp') center/cover;color:#eadfc5;border:1px solid #c2a96c;border-radius:16px;box-shadow:0 22px 90px #000d,inset 0 0 0 1px #d5b57744;overflow:auto}
.opening-dialog::backdrop{background:#020806b8;backdrop-filter:blur(8px)}
.opening-dialog h2{margin:3px 0 8px;font:32px Georgia,serif;color:#ffe3a0;letter-spacing:.3px}.opening-kicker{font-size:9px;letter-spacing:3px;color:#d1b871}.opening-dialog #library-empty{margin:0 0 18px;color:#aeb7a9;font-size:12px;line-height:1.55}.opening-toolbar{display:flex;gap:8px;margin:0 0 14px}.opening-toolbar button{min-height:42px;color:#f5dda0}.opening-toolbar button:first-child{background:#274d3d;border-color:#69d4b2}.opening-tree-list{display:grid;gap:10px}.opening-tree-card{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center;padding:10px;border:1px solid #b6a56755;border-radius:12px;background:linear-gradient(135deg,#193b2ecc,#0d1e18e6);cursor:pointer}.opening-tree-card:hover,.opening-tree-card[data-active=true]{border-color:#e0be70;box-shadow:0 0 18px #75daba28}.opening-tree-card-cover{width:58px;height:58px;border-radius:9px;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#b89a4c,#563c1d 48%,#13291e 50%);font:30px Georgia;color:#ffdda0;box-shadow:inset 0 0 0 1px #f2d28a99}.opening-tree-card h3{font-size:15px;font-weight:500;margin:0 0 3px;color:#ffe8af}.opening-tree-card p{margin:0;color:#aeb9aa;font-size:11px;line-height:1.35}.opening-tree-card-meta{display:flex;gap:7px;align-items:center;margin-top:6px;color:#68d8b4;font-size:10px}.opening-tree-card-action{display:grid;gap:6px}.opening-tree-card-action button{font-size:10px;padding:8px 10px;white-space:nowrap}.opening-local-note{margin-top:16px;padding-top:12px;border-top:1px solid #bfa36932;color:#9cad9a;font-size:11px}.opening-local-note span{color:#69d6b0;margin-right:6px}
.opening-editor-head{display:flex;align-items:center;gap:10px;border-bottom:1px solid #bfa36932;padding-bottom:12px}.opening-editor-head>div{min-width:0;flex:1}.opening-editor-head h2{font-size:23px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0 0}.opening-editor-head button{min-width:42px;min-height:42px;padding:8px 11px}.opening-editor-head button:first-child{font:32px Georgia;color:#ffe3a0;background:transparent;border:0}.opening-editor-head button:last-child{color:#1a2b20;background:#dfbe73;border-color:#f1d48e}.opening-selected-line{display:flex;gap:9px;align-items:center;padding:12px 0;color:#aab6a7;font-size:11px}.opening-selected-line strong{flex:1;color:#ffe1a1;font-size:14px;font-weight:500}.opening-selected-line button{font-size:10px;padding:8px 10px}.opening-tree-canvas{position:relative;height:min(53vh,430px);min-height:300px;overflow:auto;border:1px solid #9fc3a660;border-radius:12px;background:radial-gradient(circle at 50% 30%,#27544545,transparent 55%),#071b16;scrollbar-color:#ae9257 #0b2119}.opening-tree-stage{position:relative;width:760px;height:390px;transform-origin:0 0;background-image:radial-gradient(#d0b46b20 1px,transparent 1px);background-size:22px 22px}.opening-tree-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.opening-tree-edge{fill:none;stroke:#b8c5b5aa;stroke-width:1.5}.opening-tree-edge[data-active=true]{stroke:#e5c36d;stroke-width:2.6;filter:drop-shadow(0 0 5px #e5c36d99)}.opening-tree-node{position:absolute;transform:translate(-50%,-50%);min-width:92px;max-width:126px;padding:8px 9px;border:1px solid #b7c8bd99;border-radius:9px;text-align:center;background:linear-gradient(145deg,#183a2eeF,#0c1e19f4);color:#e5eee2;font-size:11px;line-height:1.18;cursor:pointer;box-shadow:0 4px 12px #0008}.opening-tree-node:hover,.opening-tree-node[data-selected=true]{border-color:#f1d17c;box-shadow:0 0 17px #efd07780,inset 0 0 0 1px #f5d98288}.opening-tree-node[data-selected=true]{background:linear-gradient(145deg,#356b55,#193629);color:#ffe7a8}.opening-tree-node[data-depth="0"]{border-color:#7de2c5;color:#9debd1}.opening-tree-node small{display:block;color:#90b4a2;font-size:9px;margin-top:4px}.opening-tree-zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:5px;align-items:center;padding:6px;border:1px solid #d3b66e66;border-radius:11px;background:#081712dc;z-index:2}.opening-tree-zoom button{width:32px;height:32px;padding:0;border-radius:50%;font-size:19px}.opening-tree-zoom span{font-size:9px;color:#f5d98a}.opening-editor-tip{margin:10px 0;color:#9fb3a4;font-size:11px;line-height:1.5}.opening-editor-actions{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px}.opening-editor-actions button{min-height:44px;font-size:11px}.opening-editor-actions .primary{background:#dfbe73;color:#1a2a20;border-color:#f1d48e}.opening-dialog.opening-expanded .opening-tree-canvas{height:min(66vh,620px)}.opening-dialog.opening-expanded .opening-tree-stage{width:1100px;height:570px}
@media(max-width:760px){.opening-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 14px);padding:17px;border-radius:14px}.opening-dialog h2{font-size:25px}.opening-tree-card{grid-template-columns:48px 1fr}.opening-tree-card-cover{width:48px;height:48px;font-size:24px}.opening-tree-card-action{grid-column:2;display:flex}.opening-tree-card-action button{flex:1}.opening-editor-head h2{font-size:19px}.opening-tree-canvas{height:52vh;min-height:280px}.opening-tree-stage{width:700px;height:370px}.opening-editor-actions{grid-template-columns:1fr 1fr}.opening-editor-actions .primary{grid-column:1/-1}.opening-dialog.opening-expanded .opening-tree-canvas{height:65vh}}

/* Event banners remain 2D and share the projected board-center text anchor. */
.board-vfx-title .vfx-ornament{display:block;z-index:0;filter:drop-shadow(0 0 8px #c8a45c66)}
.board-vfx-title .vfx-label{position:relative;z-index:1}
.board-vfx-title[hidden]{display:none!important}
.opening-selected-tools{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.opening-selected-tools button{white-space:nowrap}
.opening-training-hud{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:7;width:min(420px,calc(100vw - 28px));pointer-events:none}.opening-training-card{pointer-events:auto;padding:15px 18px;border:1px solid #d1b36d;border-radius:14px;background:linear-gradient(145deg,#10291ff2,#07130ff5);box-shadow:0 14px 45px #000b,inset 0 0 0 1px #d9be7540;display:grid;gap:5px}.opening-training-card strong{font:19px Georgia,serif;color:#ffe3a0}.opening-training-card>span{font-size:10px;color:#69d7b2;letter-spacing:.8px}.opening-training-card p{margin:3px 0 7px;color:#c5cfbf;font-size:12px}.opening-training-actions{display:flex;gap:7px}.opening-training-actions button{flex:1;min-height:38px;font-size:11px}.opening-training-actions button:first-child{border-color:#6ad5b4;color:#b8f2dd}
@media(max-width:760px){.opening-tree-card-action{display:grid;grid-template-columns:1fr 1fr 1fr}.opening-tree-card-action button{padding:7px 6px;font-size:9px}.opening-training-hud{bottom:calc(16px + env(safe-area-inset-bottom))}.opening-training-card{padding:12px 14px}.opening-training-card strong{font-size:16px}.opening-training-card p{font-size:11px}}

/* The existing WebGL canvas is hosted by the visible board, not a duplicate renderer. */
.opening-board-wrap{position:relative;margin-top:12px;border:1px solid #c2a96c;border-radius:12px;overflow:hidden;background:#0c2119}
.opening-board-slot{height:min(48dvh,460px);width:100%}
.opening-selected-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#opening-board-angle{min-width:44px;min-height:44px;background:#102c24e8;border-radius:8px}
.opening-expanded #opening-board-angle{display:none}
.opening-board-slot>#view,.opening-training-board>#view{position:relative;inset:auto;width:100%;height:100%}
.opening-editing .opening-tree-canvas{height:240px;min-height:200px}
.opening-editing{max-height:calc(100dvh - 24px);overflow-anchor:none}
.opening-dialog.opening-expanded .opening-board-wrap{display:none}
.opening-dialog.opening-expanded{width:calc(100vw - 24px);max-width:none;height:calc(100dvh - 24px)}
.opening-dialog.opening-expanded .opening-tree-canvas{height:calc(100dvh - 230px)}
.opening-practice .panel,.opening-practice header,.opening-practice footer,.opening-practice .player-hud,.opening-practice .suggestion-control,.opening-practice .round-action,.opening-practice .camera-float,.opening-practice .vignette{display:none!important}
.opening-training-hud{position:fixed;inset:0;transform:none;width:100%;height:100dvh;padding:20px max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-bottom));z-index:7;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;background:linear-gradient(145deg,#102b21,#061611);pointer-events:auto}
.opening-training-board{justify-self:center;width:min(100%,640px);height:100%;min-height:0;border:1px solid #b79c63;border-radius:14px;overflow:hidden;background:#10251c}
.opening-training-card{width:min(100%,640px);justify-self:center;max-height:36dvh;overflow:auto}
.opening-training-card>progress{width:100%;height:5px;accent-color:#68d7b2;margin:6px 0}
#opening-training-branches{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:12px}
#opening-training-branches li{padding:5px 9px;border:1px solid #6f9e8866;border-radius:6px;color:#e7d29f}
#opening-training-branches li[data-completed=true]{color:#81dcbc;border-color:#81dcbc80}
.opening-training-actions button,.opening-tree-card-action button,.opening-selected-line button{min-height:44px;font-size:12px}
.opening-tree-card-meta{flex-wrap:wrap}.opening-tree-card>div{min-width:0}.opening-tree-card .opening-tree-level{margin-top:7px;line-height:1.5;color:#d3b978}
.opening-training-rules summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:12px;color:#dcc58e}
.opening-training-card p{overflow-wrap:anywhere}.opening-training-card #opening-training-level{color:#d3b978;letter-spacing:0;line-height:1.5}
#opening-training-retry{min-height:44px;border-color:#d9be75;color:#ffe3a0}
@media(max-width:760px){.opening-tree-card-action{grid-template-columns:1fr 1fr}.opening-tree-card-action button{min-width:0;white-space:normal}.opening-training-card{max-height:42dvh}}
.opening-editor-actions .primary{background:#dfbe73!important;background-image:none!important;color:#1a2a20;box-shadow:none;border-radius:8px;padding:10px}
.opening-tree-shell{position:relative}
.opening-tree-canvas{touch-action:none;overscroll-behavior:contain;cursor:grab}
.opening-tree-canvas:active{cursor:grabbing}
.opening-tree-zoom button{width:44px;height:44px;min-height:44px;border-radius:8px}
.opening-tree-minimap{position:absolute;right:10px;bottom:10px;width:105px;height:76px;border:1px solid #86ae9b88;border-radius:7px;background:#061b14e8;cursor:crosshair;display:none}
.opening-expanded .opening-tree-minimap{display:block}
.opening-tree-node{border-color:var(--branch-color,#b7c8bd99)}
.opening-tree-node{max-height:72px;overflow:hidden;overflow-wrap:anywhere;min-height:44px}
.opening-tree-canvas:focus-visible,.opening-tree-node:focus-visible{outline:2px solid #71e6cf;outline-offset:2px}
#opening-tree-search{min-width:44px;min-height:44px;font-size:24px;padding:0}
.opening-tree-navigation{display:flex;align-items:center;gap:8px;margin:0 0 6px;flex-shrink:0;min-width:0}
.opening-tree-navigation .opening-tree-breadcrumbs{flex:1;min-width:0;margin:0!important}
.opening-tree-navigation .opening-tree-breadcrumbs button{min-height:44px}
.opening-tree-search-results{display:grid;gap:8px;max-height:48dvh;overflow:auto;margin:12px 0}
.opening-tree-search-results button{display:block;width:100%;min-height:52px;text-align:left;padding:10px 12px;overflow-wrap:anywhere;border-color:#86ae9b88;background:#0b281e}
.opening-tree-search-results strong{display:block;color:#f1dcab;font-size:13px}
.opening-tree-search-results small{display:block;color:#91b7a2;font-size:11px;margin-top:4px}
#opening-tree-search-dialog .opening-form-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
#opening-tree-search-dialog .opening-form-actions button{min-width:0;min-height:44px;white-space:normal;padding:8px}
.opening-next-moves{display:flex;gap:7px;overflow-x:auto;padding:8px 0;scrollbar-width:thin}
.opening-next-moves button{min-height:44px;flex:none;font-size:12px;padding:8px 10px;border:1px solid var(--branch-color);border-radius:8px;color:#f0ecd9;background:#0b241b;box-shadow:inset 0 0 10px color-mix(in srgb,var(--branch-color) 12%,transparent)}
.opening-next-moves button:before{content:'●';color:var(--branch-color);margin-right:6px;text-shadow:0 0 9px var(--branch-color)}
.opening-tree-breadcrumbs{display:flex;gap:4px;overflow-x:auto;white-space:nowrap;margin:0 0 8px}
.opening-tree-breadcrumbs button{font-size:11px;min-height:36px;padding:5px 9px;background:transparent;border-color:#bb9d6550}
.opening-tree-breadcrumbs button[aria-current=step]{color:#f2d286;border-color:#d6bc75}
.opening-expanded .opening-next-moves{display:none}
.opening-expanded #opening-editor-view{height:100%;display:flex;flex-direction:column}
.opening-expanded .opening-tree-shell{flex:1;min-height:0}
.opening-expanded .opening-tree-canvas{height:100%!important;min-height:0}
.opening-expanded .opening-editor-head,.opening-expanded .opening-selected-line,.opening-expanded .opening-tree-breadcrumbs,.opening-expanded .opening-editor-actions{flex-shrink:0}
.opening-expanded .opening-editor-tip{display:none}
.opening-expanded .opening-editor-actions{margin-top:10px}
.opening-editing #library-close{position:absolute;top:12px;right:12px;float:none;z-index:3;width:44px;height:44px;padding:0;font-size:24px}
.opening-editing .opening-editor-head{padding-right:54px}
.opening-library-section{margin:18px 0;padding:14px;border:1px solid #d5ba7555;border-radius:12px;background:#091f18b8}
.opening-library-section summary{min-height:44px;cursor:pointer;color:#efd393;font-size:15px;font-weight:650}
.opening-library-section summary span{float:right;color:#95c5b1;font-size:12px}
.opening-library-section label:not(.check),.opening-form-dialog label{display:block;margin:12px 0 6px;font-size:11px;letter-spacing:.09em;color:#d9c292}
.opening-library-section input[type=search],.opening-library-section select,.opening-form-dialog input,.opening-form-dialog select,.opening-form-dialog textarea{display:block;width:100%;min-height:44px;padding:10px 12px;background:#071c15;color:#f3ecd8;border:1px solid #b99c6066;border-radius:8px;font:inherit}
.opening-library-section p,.opening-suggestions-dialog p,.opening-form-dialog p{font-size:12px;line-height:1.6;color:#b8c8bd}
.opening-battle-trees{display:grid;gap:8px;margin-top:14px;max-height:240px;overflow:auto}
.opening-battle-trees .check,.opening-library-section>.check{display:flex;gap:9px;align-items:center;min-height:44px;margin:0;font-size:13px}
.opening-battle-trees input,.opening-library-section>.check input{width:18px;height:18px;accent-color:#62decf;flex:none}
.opening-library-section button{min-height:44px;font-size:12px;border-radius:8px}
.opening-suggestions-dialog,.opening-form-dialog{width:min(480px,calc(100vw - 24px));max-height:85dvh;padding:20px;border:1px solid #d5ba7580;border-radius:16px;background:linear-gradient(145deg,#14372b,#071b14);color:#f4e2b8;overflow:auto}
.opening-suggestions-dialog h2,.opening-form-dialog h2{font-size:20px;margin:0 44px 14px 0}
.opening-suggestions-dialog::backdrop,.opening-form-dialog::backdrop{background:#0009;backdrop-filter:blur(4px)}
#opening-suggestions-close{position:absolute;right:12px;top:10px;min-width:44px;min-height:44px;font-size:24px;padding:0}
#opening-suggestions-list{display:grid;gap:10px}
.opening-suggestion{text-align:left;width:100%;padding:14px;border:1px solid #98ba9b77;border-radius:10px;background:#0b291e;min-height:64px}
.opening-suggestion strong{display:block;color:#f1d49b;font-size:14px}
.opening-suggestion small{display:block;color:#a4c8b0;font-size:11px;line-height:1.6;margin-top:5px}
.opening-suggestion small{overflow-wrap:anywhere}
.opening-analysis-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.opening-analysis-settings label{letter-spacing:.6px;line-height:1.5;margin:0;font-size:10px}
.opening-analysis-settings select{margin-top:6px;min-height:44px}
.opening-analysis-note{font-size:11px;line-height:1.6;color:#a4c8b0}
.opening-suggestions-actions{position:sticky;bottom:-20px;padding:12px 0 20px;background:#0b241a;z-index:1}
.opening-suggestion:disabled{opacity:.55}
.opening-suggestions-actions,.opening-form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.opening-suggestions-actions button,.opening-form-actions button{min-height:44px;flex:1;font-size:12px;border-radius:8px}
.opening-form-actions button[type=submit]{background:#dfbe73;color:#172a1d}
#opening-node-form .opening-form-actions{position:sticky;bottom:-20px;z-index:1;padding:12px 0 20px;background:#0b241a;border-top:1px solid #b99c6055}
.opening-toolbar{flex-wrap:wrap}
.opening-card-title{display:flex;align-items:center;gap:6px}
.opening-card-title h3{flex:1;min-width:0;overflow-wrap:anywhere}
.opening-card-title button{min-width:44px;min-height:44px;flex:none;padding:0;font-size:24px;background:transparent;border-color:transparent;color:#e7c986}
#opening-editor-menu{background:transparent;color:#e7c986;border-color:transparent;font-size:26px;padding:0;min-width:44px;min-height:44px}
.opening-actions-list{display:grid;gap:10px}
.opening-actions-list button{min-height:48px;text-align:left;font-size:14px;border-radius:9px}
#opening-actions-close{position:absolute;right:12px;top:10px;min-width:44px;min-height:44px;font-size:24px;padding:0}
.opening-danger{color:#efac97!important;border-color:#d17c6555!important;background:#311d16!important;min-height:44px;margin-top:14px;border-radius:9px}
.opening-actions-list .opening-danger{margin-top:0}
.opening-form-dialog .opening-check{display:flex;align-items:center;gap:10px;min-height:44px;letter-spacing:normal;font-size:13px;margin:8px 0}
.opening-form-dialog .opening-check input{width:18px;min-height:18px;height:18px;display:inline-block;flex:none;accent-color:#62decf}
.opening-node-details{border-top:1px solid #b99c6055;margin-top:12px;padding-top:10px}
.opening-node-details summary{min-height:44px;font-size:12px;color:#d5c093;cursor:pointer}
#opening-node-metadata{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;font-size:12px;line-height:1.4}
#opening-node-metadata dt{color:#92b7a0}#opening-node-metadata dd{margin:0;overflow-wrap:anywhere;color:#e1d7b5}
#opening-storage-status{color:#efac97;font-size:13px;line-height:1.5}
#opening-undo-delete{min-height:44px;margin:0 0 14px;color:#99e2c5}
@media(max-width:760px){
  .opening-suggestions-dialog{margin:auto 0 0;width:100%;max-width:none;max-height:82dvh;border-radius:18px 18px 0 0;padding:20px 16px max(20px,env(safe-area-inset-bottom))}
  .opening-library-section .opening-toolbar{flex-wrap:wrap}
  .opening-editing{width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;padding:12px 12px max(12px,env(safe-area-inset-bottom));border-radius:0;scrollbar-width:thin;scrollbar-gutter:stable}
  .opening-editing .opening-editor-head{padding-right:54px}
  .opening-board-slot{height:auto;aspect-ratio:9/10;max-height:51dvh}
  .opening-selected-line{flex-wrap:wrap;padding:10px 0}
  .opening-selected-line strong{font-size:14px}
  .opening-selected-tools{margin-left:auto}
  .opening-selected-tools button{font-size:11px;padding:7px 9px}
  .opening-editing .opening-tree-canvas{height:25dvh;min-height:170px}
  .opening-editor-actions{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .opening-editor-actions button{font-size:11px;padding:9px 6px}
  .opening-editor-actions .primary{grid-column:auto}
  .opening-editor-tip{font-size:10px;margin:7px 0}
  .opening-training-hud{padding-top:max(12px,env(safe-area-inset-top));gap:9px}
  .opening-training-card{padding:12px 14px}
  .opening-training-actions button{font-size:12px;min-height:44px}
  /* Board size must not change with the number of branch chips. Short phones
     scroll the editor vertically instead of reducing the 3D board to a thumbnail. */
  .opening-editing:not(.opening-expanded) #opening-editor-view{min-height:100%;display:flex;flex-direction:column;gap:0}
  .opening-editing:not(.opening-expanded) #opening-editor-view>div{flex-shrink:0}
  .opening-editing:not(.opening-expanded) .opening-board-wrap{flex:none;margin-top:8px}
  .opening-editing:not(.opening-expanded) .opening-board-slot{height:auto;max-height:none;aspect-ratio:9/10}
  .opening-editing:not(.opening-expanded) .opening-tree-canvas{height:170px;min-height:170px}
  .opening-editing:not(.opening-expanded) .opening-editor-tip{display:none}
  .opening-editing:not(.opening-expanded) .opening-editor-actions{position:sticky;bottom:calc(-1 * max(12px,env(safe-area-inset-bottom)));z-index:3;margin-top:8px;padding:8px 0 max(12px,env(safe-area-inset-bottom));background:#0a2117;border-top:1px solid #bfa36932;flex-shrink:0}
  .opening-editing:not(.opening-expanded) .opening-editor-head{flex-shrink:0}
  .opening-editing:not(.opening-expanded) .opening-editor-head h2{white-space:normal;font-size:16px;line-height:1.25}
  .opening-editing:not(.opening-expanded) .opening-next-moves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;flex-shrink:0;padding:6px 0;max-height:106px;overflow-y:auto;overflow-x:hidden}
  .opening-editing:not(.opening-expanded) .opening-next-moves[hidden]{display:none}
  .opening-editing:not(.opening-expanded) .opening-next-moves button{min-width:0;text-align:left;white-space:normal;line-height:1.3}
  .opening-editing:not(.opening-expanded) .opening-tree-breadcrumbs{flex-shrink:0;margin-bottom:6px}
}
/* End-of-game cinematic (hi3d-victory-drop.mjs): the shot plays clean; HUD and result buttons return once the banner has landed. */
body.result-cinematic .player-hud,body.result-cinematic #result-actions,body.result-cinematic .round-action,body.result-cinematic header,body.result-cinematic #status-bar{visibility:hidden}

.device-book-row{display:flex;gap:6px;align-items:center}.device-book-row .check{flex:1;min-width:0;word-break:break-word}.device-book-row button{flex:none;min-width:44px}.device-book-choice{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}.device-book-choice p{flex-basis:100%;margin:0}