:root{color-scheme:dark;--bg:#172725;--panel:#213632;--line:#3c5149;--ink:#f0ecd9;--muted:#9eafa3;--accent:#c0d493}
.shell{visibility:hidden;opacity:0}.app-ready .shell{visibility:visible;opacity:1;animation:app-reveal .28s ease-out both}.loading-screen{position:fixed;inset:0;z-index:100;display:grid;place-content:center;justify-items:center;gap:18px;background:#13231f;color:var(--muted);font:14px/1.4 system-ui,sans-serif;letter-spacing:1.6px;text-transform:uppercase;transition:opacity .2s}.app-ready .loading-screen{opacity:0;visibility:hidden;pointer-events:none}.loading-brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:15px;letter-spacing:3px}.loading-mark{width:28px;height:28px;border:2px solid var(--accent);border-radius:50%;background:linear-gradient(90deg,#151c1a 0 50%,#f0ecd9 50%)}.loading-track{width:220px;height:8px;padding:1px;border:1px solid #748a70;border-radius:5px;background:#0c1714;overflow:hidden}.loading-track i{display:block;width:42%;height:100%;border-radius:3px;background:linear-gradient(90deg,#829c61,#d9e9ad);animation:loading-progress 1.15s ease-in-out infinite alternate}@keyframes loading-progress{from{transform:translateX(-100%)}to{transform:translateX(240%)}}@keyframes app-reveal{from{opacity:0}to{opacity:1}}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 65% 20%,#30483d 0,transparent 55%),var(--bg);color:var(--ink);font:15px/1.5 system-ui,sans-serif}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:8px;padding:11px 16px;transition:background .15s}button:hover:not(:disabled){background-color:#ffffff12}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.shell{max-width:1180px;margin:auto;padding:28px 38px}header,footer{display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:700;letter-spacing:3px;text-decoration:none}.brand-mark{font-size:32px;color:var(--accent)}.edition,footer,.eyebrow,.live-label{font-size:14px;letter-spacing:2px;color:var(--muted)}header{padding-bottom:22px;border-bottom:1px solid var(--line)}.intro{padding:36px 0 28px}.intro h1{font:normal clamp(32px,4vw,48px)/1.08 Georgia,serif;letter-spacing:-1px;margin:12px 0}.intro>p:last-child{color:var(--muted)}.workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:54px;align-items:start}.eyebrow{margin:0 0 14px}nav{display:grid;gap:10px}.mode-card{text-align:left;padding:18px;width:100%;border-radius:10px;position:relative}.mode-card strong{display:block;font:24px Georgia,serif;margin:7px 0}.mode-card small{display:block;color:var(--muted);font-size:14px}.mode-card .number{color:var(--accent);font-size:14px;letter-spacing:2px}.mode-card[aria-pressed=true]{background-color:#c0d41012;border-color:var(--accent)}.mode-card[aria-pressed=true]:after{content:'↗';position:absolute;right:18px;top:16px;color:var(--accent)}.controls{display:grid;gap:14px;margin:24px 0}label{font-size:14px;color:var(--muted)}select{display:block;width:100%;margin-top:6px;background-color:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--ink);padding:10px}details{border-top:1px solid var(--line);padding-top:16px;color:var(--muted);font-size:14px}summary{cursor:pointer;color:var(--ink)}.table{background-color:#14221f88;border:1px solid var(--line);padding:26px;border-radius:16px;box-shadow:0 30px 70px #0002}.table-heading{display:flex;align-items:center;justify-content:space-between}.table-heading .eyebrow{margin-bottom:4px}h2{font:normal 28px Georgia,serif;margin:0}.live-label{border:1px solid var(--line);padding:6px 8px;border-radius:4px;font-size:14px}.scoreboard{display:flex;align-items:center;gap:12px;margin:20px 0}.score{display:flex;align-items:center;gap:10px;flex:1;padding:8px 12px;border:1px solid transparent;border-radius:8px;font-size:14px}.score.active{border-color:var(--accent);background:#ffffff06}.score strong{margin-left:auto;font-size:22px;font-weight:500}.versus{font-size:14px;color:var(--muted)}.disc{display:block;border-radius:50%;width:77%;height:77%;box-shadow:0 3px 4px #0005;position:relative;pointer-events:none}.black{background:radial-gradient(circle at 35% 25%,#4b5350,#151c1a 75%);border:1px solid #637069}.white{background:radial-gradient(circle at 35% 25%,#fffdf0,#d6d5bd 85%);border:1px solid #ffffeb}.score .disc{width:24px;height:24px;flex-shrink:0}.board-frame{padding:10px;background:#344e40;border:1px solid #5c745e;border-radius:6px;box-shadow:0 10px 20px #0003}.board{display:grid;grid-template-columns:repeat(var(--board-size,8),1fr);aspect-ratio:1}.cell{border:0;border-radius:0;border-right:1px solid #b8c9a926;border-bottom:1px solid #b8c9a926;padding:0;background:#67836833;display:flex;align-items:center;justify-content:center;aspect-ratio:1;position:relative;touch-action:manipulation}.cell.dark{background:#203b2933}.cell.legal:after{content:'';width:15%;height:15%;border-radius:50%;background:var(--accent);opacity:.6}.cell.preview{background:#d7e7a44d}.cell.last .disc:after{content:'';position:absolute;width:14%;height:14%;border-radius:50%;background:#bd8154;top:43%;left:43%}.disc.anchored:before{content:'◎';position:absolute;inset:0;display:grid;place-items:center;color:#ab7443;font-size:clamp(16px,3vw,32px);font-style:normal}.disc.changed{animation:flip .32s ease-out}@keyframes flip{from{transform:scaleX(.1)}to{transform:scaleX(1)}}.status{text-align:center;min-height:46px;padding:15px 0 8px;font-size:14px}.actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.actions button{font-size:14px}.primary{background-color:var(--accent);color:#1e3026;border-color:var(--accent)}.primary:hover:not(:disabled){background-color:#d0e5a4}#anchor[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.board-note{text-align:center;color:var(--muted);font-size:14px;margin-bottom:0}footer{border-top:1px solid var(--line);margin-top:40px;padding:20px 0;font-size:14px}dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:14px;max-width:90vw;padding:28px}dialog::backdrop{background:#0008}dialog form{display:flex;gap:10px;justify-content:flex-end}
@media(min-width:950px){.intro{position:absolute;width:280px}.intro h1{font-size:39px}.workspace{padding-top:32px}aside{padding-top:220px}}
@media(max-width:700px){.shell{padding:16px}.edition{display:none}.intro{padding:22px 0 12px}.intro h1{font-size:32px}.intro h1 br{display:none}.intro>p:last-child{margin:8px 0 14px}.workspace{grid-template-columns:1fr;gap:20px}nav{grid-template-columns:repeat(3,1fr);gap:6px}.mode-card{padding:12px 8px}.mode-card strong{font-size:19px}.mode-card small{font-size:14px}.mode-card[aria-pressed=true]:after{display:none}.controls{grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}details{padding-top:10px}.table{padding:16px}.live-label{display:none}.scoreboard{margin:14px 0}.board-frame{padding:6px}footer{font-size:14px;letter-spacing:1px;margin-top:24px}.eyebrow{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.atlas-ready .table,.atlas-ready dialog,.atlas-ready .mode-card,.atlas-ready select,.atlas-ready button:not(.cell){border-color:transparent}

/* atlas component sizing */
.atlas-ready .table{padding:42px}.atlas-ready .mode-card{min-height:132px;padding:24px}.atlas-ready select{min-height:50px;padding:12px 18px}.atlas-ready .actions button,.atlas-ready dialog button{min-height:52px;padding:14px 22px}.atlas-ready dialog{padding:48px}
@media(max-width:700px){.atlas-ready .table{padding:28px 22px}.atlas-ready .mode-card{min-height:126px;padding:18px 12px}.atlas-ready select{min-height:48px;padding:10px}.atlas-ready .actions button{min-height:48px;padding:12px 16px}}

.atlas-ready .table,.atlas-ready dialog,.atlas-ready .mode-card,.atlas-ready select,.atlas-ready button:not(.cell){background-color:transparent!important}

/* Compact atlas controls */
.controls label{position:relative}
.controls label::after{content:'▾';position:absolute;right:16px;bottom:14px;color:#dfe9cc;font-size:14px;line-height:1;pointer-events:none}
select{-webkit-appearance:none;appearance:none;padding-right:42px!important;color:#f3f0df}
select option{background:#172725;color:#f3f0df;padding:8px}
select option:checked{background:#405b4a;color:#fff}
select option:disabled{color:#718078}
select:focus-visible{outline:2px solid #8fa578;outline-offset:1px}
.atlas-ready .actions button,.atlas-ready dialog button{font-size:14px;font-weight:750;letter-spacing:.01em;text-shadow:0 1px 0 rgba(0,0,0,.2)}
.atlas-ready .actions button:disabled{opacity:.62}
.atlas-ready .primary{color:#17231d;text-shadow:0 1px 0 rgba(255,255,255,.35)}
/* Atlas-backed custom select: preserves the native value for game logic. */
.controls label::after{content:none}
.native-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.select-control{display:block;position:relative;width:100%;margin-top:6px}
.select-trigger{width:100%;min-height:50px;display:flex;align-items:center;justify-content:space-between;text-align:left;color:#f3f0df;padding:12px 17px!important}
.select-arrow{margin-left:12px;color:#dfe9cc;font-size:14px;transform:translateY(-1px)}
.select-menu{position:absolute;z-index:30;top:calc(100% + 4px);left:4px;right:4px;padding:5px;background:#1b2d29;border:1px solid #76896f;border-radius:8px;box-shadow:0 12px 28px #0009}
.select-menu[hidden]{display:none}
.select-option{display:block;width:100%;min-height:36px;padding:8px 12px!important;text-align:left;border:0!important;border-radius:5px!important;background:none!important;color:#d8dfd1;font-size:14px}
.select-option:hover,.select-option:focus-visible{background:#344c40!important;color:#fff;outline:none}
.select-option[aria-selected=true]{background:#587157!important;color:#fff}
.select-option:disabled{color:#718078;opacity:.7}
.select-trigger:focus-visible{outline:none;filter:drop-shadow(0 0 4px #a8c77d)}

/* Fixed 540 x 960 game stage */
html,body{width:100%;height:100%;overflow:hidden}
body{position:relative;display:grid;place-items:center;min-width:0;min-height:0;overscroll-behavior:none}
.shell{position:absolute;left:50%;top:50%;width:540px;height:960px;max-width:none;margin:0;padding:18px 20px 16px;transform:translate(-50%,-50%) scale(var(--stage-scale,1));transform-origin:center;overflow:hidden;background:radial-gradient(ellipse at 60% 9%,#30483d 0,transparent 46%),#172725}
header{height:46px;padding:0 2px 10px;border-bottom:1px solid var(--line)}
.brand{gap:8px;font-size:14px;letter-spacing:2.4px}.brand-mark{display:inline-block;width:30px;height:30px;flex:none}
.edition{font-size:14px;letter-spacing:1.5px}
.header-tools{display:flex;align-items:center;gap:10px}#language{width:auto;min-width:52px;height:26px;padding:2px 5px;background:#14221fcc;color:var(--ink);border:1px solid var(--line);border-radius:5px;font-size:14px}
.header-button{height:32px;min-height:32px!important;padding:5px 10px!important;border:1px solid #71836c!important;border-radius:7px;background:#14241fdd!important;color:var(--ink);font-size:14px!important;font-weight:750!important;box-shadow:inset 0 0 0 1px #1c352b}
.atlas-ready .header-button{border:1px solid #71836c!important;background:#14241fdd!important}
.language-control{width:118px!important;margin:0!important}.language-control .select-trigger{width:118px;height:32px;min-height:32px!important;padding:4px 8px!important;border:1px solid #71836c!important;border-radius:7px;background:#14241fdd!important;font-size:14px;box-shadow:inset 0 0 0 1px #1c352b}.language-control .select-menu{left:auto;right:0;top:34px;width:142px;padding:5px;border-color:#71836c;background:#172925}.language-control .select-option{display:flex;align-items:center;gap:8px;min-height:32px;padding:6px 8px!important}.language-control .select-arrow{margin-left:6px}.atlas-ready .language-control .select-trigger{border:1px solid #71836c!important;background:#14241fdd!important}
.select-value{display:flex;align-items:center;gap:7px;min-width:0}.select-option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.language-flag{display:inline-block;width:20px;height:14px;flex:none;border:0;border-radius:2px;box-shadow:0 1px 2px #0008;background:transparent}
.intro{display:none}
.workspace{display:flex;flex-direction:column;gap:8px;padding:0;align-items:stretch}
.workspace aside{padding:0}.mode-picker{position:relative;padding:8px 10px 10px;border:1px solid #536e5d;border-radius:13px;background:linear-gradient(180deg,#183026d9,#101f1ad9);box-shadow:inset 0 0 0 1px #0b1713,0 7px 18px #07100d66}.mode-picker::after{content:'';position:absolute;inset:3px;border:1px solid #78906f38;border-radius:10px;pointer-events:none}.mode-label{margin:0;font-size:14px}
#modes{position:relative;z-index:1;display:flex;gap:7px;width:100%;padding:5px 1px 1px;overflow:visible}
.mode-card{flex:0 0 75px;min-width:75px;width:75px;height:92px;min-height:92px!important;padding:0!important;border:0;border-radius:14px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;transition:flex-basis .2s ease,width .2s ease}
.mode-card[aria-pressed=true]{flex-basis:176px;width:176px;padding:14px 80px 14px 13px!important}
.mode-icon{position:absolute;z-index:1;left:50%;right:auto;top:50%;width:68px;height:68px;transform:translate(-50%,-50%);pointer-events:none}
.mode-card[aria-pressed=true] .mode-icon{left:auto;right:6px;transform:translateY(-50%)}
.mode-card[data-mode=anti] .mode-icon{transform:translate(-50%,-50%) rotate(180deg)}
.mode-card[data-mode=anti][aria-pressed=true] .mode-icon{transform:translateY(-50%) rotate(180deg)}
.mode-card:is([data-mode=five],[data-mode=anchor]) .mode-icon::after{content:'5';position:absolute;right:-1px;top:-1px;display:grid;place-items:center;width:17px;height:17px;border:1px solid #d8c565;border-radius:50%;background:#17241d;color:#f3e58a;font:700 14px/1 Georgia,serif;font-style:normal;text-shadow:0 1px 2px #000;box-shadow:0 1px 4px #0009}
.mode-nav-head{position:relative;z-index:1;min-height:32px;display:flex;align-items:center;justify-content:space-between;padding-bottom:6px;border-bottom:1px solid #71836c55}.mode-banks{display:flex;gap:5px}.mode-banks button{height:32px;min-height:32px;padding:5px 10px;border:1px solid #71836c;border-radius:7px;background:#14241fdd;color:var(--muted);font-size:14px;font-weight:750;letter-spacing:.5px;box-shadow:inset 0 0 0 1px #1c352b}.mode-banks button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:#314535}.mode-card[hidden]{display:none!important}
.atlas-ready .mode-banks button{border:1px solid #61766a!important;background:#14241fcc!important}.atlas-ready .mode-banks button[aria-pressed=true]{border-color:var(--accent)!important;background:#314535!important}
[data-mode=knight] .mode-icon{background:url('assets/ui/mode_knight.png') center/contain no-repeat!important}.icon-knight{background:url('assets/ui/mode_knight.png') center/contain no-repeat!important}.disc.black.knighted{background-image:url('assets/ui/disc_knight_black.png')!important;background-size:100% 100%!important}.disc.white.knighted{background-image:url('assets/ui/disc_knight_white.png')!important;background-size:100% 100%!important}.demo-cell.knight-blocked::after{content:'×';position:absolute;z-index:4;display:grid;place-items:center;width:42%;height:42%;border:1px solid #d89a6c;border-radius:50%;background:#381d19cc;color:#f2b08b;font:bold 16px/1 system-ui}
[data-mode=royal] .mode-icon{background:url('assets/ui/mode_royal.png') center/contain no-repeat!important}.disc.black.kinged{background-image:url('assets/ui/disc_king_black.png')!important;background-size:100% 100%!important}.disc.white.kinged{background-image:url('assets/ui/disc_king_white.png')!important;background-size:100% 100%!important}
[data-mode=cutCorners] .mode-icon{background:url('assets/ui/mode_cut_corners.png') center/contain no-repeat!important}.cell.blocked,.demo-cell.blocked{cursor:default}.blocked-corner{position:absolute;z-index:5;inset:3%;display:block;pointer-events:none;background:url('assets/ui/blocked_corner.png') center/contain no-repeat}
.mode-card::before{content:none}
.mode-card .number,.mode-card strong{display:none}
.mode-card[aria-pressed=true] .number{display:block;position:relative;z-index:2;font-size:14px;line-height:1;letter-spacing:1.4px;white-space:nowrap;text-shadow:0 1px 3px #07100d}
.mode-card[aria-pressed=true] strong{display:block;position:relative;z-index:2;font-size:16px;line-height:1;margin:0;white-space:nowrap;text-shadow:0 1px 3px #07100d,0 0 5px #07100d}
[lang=es] .mode-card[aria-pressed=true] strong,[lang=pt] .mode-card[aria-pressed=true] strong,[lang=fr] .mode-card[aria-pressed=true] strong,[lang=de] .mode-card[aria-pressed=true] strong,.mode-card[data-mode=anchorClassic][aria-pressed=true] strong{font-size:14px}
.mode-card small{display:none}.mode-card[aria-pressed=true]:after{content:none}
.controls{display:grid;grid-template-columns:1fr 1fr 116px;gap:8px;align-items:end;margin:6px 0 2px}
.controls label{min-width:0;font-size:14px}.select-control{margin-top:4px}
.select-trigger{height:64px;min-height:64px!important;padding:8px 16px!important;font-size:14px;overflow:hidden}
.select-trigger>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.help-button{height:64px;min-height:64px!important;padding:8px 10px!important;font-size:14px!important;font-weight:800!important;display:flex;align-items:center;justify-content:center;gap:3px}
.controls .select-menu{top:calc(100% + 2px);left:0;right:0}.atlas-ready .controls .select-menu{top:52px}
.table{height:672px;min-height:0;padding:22px 24px 18px!important;border-radius:18px;overflow:hidden}
.table-heading{height:38px;position:relative;top:9px}.table-heading .eyebrow{font-size:14px;margin:0 0 2px}
h2{font-size:22px;line-height:1}.live-label{font-size:14px;line-height:1.2;letter-spacing:1.5px;padding:6px 10px}
.scoreboard{height:48px;margin:12px 0 9px;gap:8px}.score{height:42px;padding:5px 10px;font-size:14px}
.score strong{font-size:20px}.score .disc{width:23px;height:23px}
.board-frame{width:408px;height:408px;padding:18px;margin:0 auto;border-radius:7px}
.board{width:370px;height:370px;position:relative}
.status{height:36px;min-height:0;padding:10px 0 4px;font-size:14px;line-height:20px}.status:empty{display:none}
.actions{height:66px;display:flex;flex-wrap:nowrap;gap:10px}
.actions button{height:64px;min-height:64px!important;min-width:146px;padding:10px 20px!important;font-size:14px!important;font-weight:800!important;clip-path:inset(0 round 15px);display:flex;align-items:center;justify-content:center;gap:5px}
.actions button[hidden]{display:none!important}
.actions:has(#anchor:not([hidden])) button{min-width:0;flex:1;padding-left:10px!important;padding-right:10px!important;font-size:14px!important}
.button-icon{display:inline-block;width:26px;height:26px;flex:none;pointer-events:none}.help-button .button-icon{width:23px;height:23px}
.atlas-ready .actions button:disabled{opacity:.84;filter:brightness(1.22)}
.actions #anchor{min-width:145px}
.board-note{height:18px;margin:4px 0 0;font-size:14px;line-height:14px}
footer{display:none}
.atlas-ready .table,.atlas-ready dialog,.atlas-ready .mode-card,.atlas-ready .select-trigger,.atlas-ready button:not(.cell){background-color:transparent!important}
dialog{width:min(460px,calc(100vw - 32px));max-width:none;padding:52px 34px 48px!important;border:0;border-radius:18px}
dialog h2{font-size:25px;line-height:1.15;margin:0 0 18px}dialog p{color:var(--muted);font-size:14px}
dialog .rules-mode{color:var(--ink);font-weight:700}dialog form{margin-top:24px}
dialog button{min-height:48px;padding:10px 22px!important;font-weight:800!important;clip-path:inset(0 round 13px)}
.result-dialog{width:390px;text-align:center;padding:42px 42px 36px!important}.result-visual{height:118px;display:grid;place-items:center;margin-bottom:8px}.result-winner-disc.disc,.result-draw-emblem{display:block;width:112px;height:112px}.result-visual [hidden]{display:none!important}.result-dialog>.eyebrow{margin:0 0 6px}.result-dialog h2{font-size:30px;margin:0 0 8px}.result-reason{margin:0 0 16px;color:var(--accent)!important;font-weight:700}.result-score{display:flex;align-items:center;justify-content:center;gap:18px;margin:12px 0 22px}.result-score span{display:grid;gap:2px;min-width:72px}.result-score b{color:var(--muted);font-size:14px;font-weight:500}.result-score strong{font:28px Georgia,serif}.result-score i{color:var(--muted);font-style:normal}.result-dialog form{justify-content:center;margin-top:0}.result-dialog form button{min-width:125px}
.stats-dialog{width:420px}.stats-player{margin:-10px 0 16px!important;color:var(--accent)!important;font-weight:700}.stats-overall{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0 18px}.stats-overall span{display:grid;gap:2px;padding:10px 6px;border:1px solid #71836c;border-radius:7px;text-align:center}.stats-overall b{color:var(--muted);font-size:14px;font-weight:500}.stats-overall strong{font:19px Georgia,serif}.stats-modes{display:grid;gap:5px}.stats-modes p{display:flex;justify-content:space-between;gap:14px;margin:0!important;padding:5px 2px;border-bottom:1px solid #71836c55}.stats-modes b{color:var(--ink);font-size:14px}.stats-modes span{font-size:14px}.stats-dialog form{justify-content:center;margin-top:18px}.stats-dialog form button{min-width:120px}
.danger{color:#f4c2ad!important;border:1px solid #a95d45!important;background:#2f1c18!important;box-shadow:inset 0 0 0 1px #6d2f25}.danger:hover:not(:disabled){background-color:#6d2f25!important}
.rules-demo{display:grid;justify-items:center;margin:12px 0 14px}.demo-board{position:relative;display:grid;grid-template-columns:repeat(var(--demo-size,5),1fr);width:210px;height:210px;border:1px solid #758b70;border-radius:7px;overflow:hidden;box-shadow:0 8px 20px #0007}.demo-cell{position:relative;display:grid;place-items:center;border-right:1px solid #b8c9a926;border-bottom:1px solid #b8c9a926;background:#55725e22}.demo-cell:nth-child(even){background:#142f2228}.demo-cell .disc{position:absolute;width:76%;height:76%;inset:12%;z-index:2}.demo-caption{width:100%;min-height:38px;margin:9px 0 0!important;text-align:center;color:var(--ink)!important;font-size:14px!important;line-height:1.45}.demo-flip-after,.demo-place{opacity:0}.demo-hint{display:block!important;inset:22%;border-radius:50%;background:#bfd88a99}.win-line.demo-win-line{display:block!important;left:0;right:0;top:40%;bottom:auto;width:100%;height:20%;opacity:0;transform:none!important}.demo-block{position:absolute;inset:-5%;z-index:5;opacity:0;pointer-events:none}.demo-block::before,.demo-block::after{content:'';position:absolute;left:48%;top:5%;width:4%;height:90%;border-radius:3px;background:#e1bd65;box-shadow:0 0 7px #dfd580;transform:rotate(45deg)}.demo-block::after{transform:rotate(-45deg)}
.rules-demo.playing .demo-place{animation:demo-place 2.8s var(--demo-delay) both}.rules-demo.playing .demo-flip-before{animation:demo-before 2.8s var(--demo-delay) both}.rules-demo.playing .demo-flip-after{animation:demo-after 2.8s var(--demo-delay) both}.rules-demo.playing .demo-hint{animation:demo-hint 2.8s both}.rules-demo.playing .demo-win-line{animation:demo-line 2.8s .3s both}.rules-demo.playing .demo-anchor{animation:demo-anchor 2.8s .2s both}.rules-demo.playing .demo-threatened{animation:demo-threat 2.8s .2s both}.rules-demo.playing .demo-block{animation:demo-block 2.8s .2s both}
@keyframes demo-place{0%,14%{opacity:0;transform:scale(1.4)}27%,100%{opacity:1;transform:scale(1)}}@keyframes demo-before{0%,39%{opacity:1;transform:scaleX(1)}50%,100%{opacity:0;transform:scaleX(.04)}}@keyframes demo-after{0%,49%{opacity:0;transform:scaleX(.04)}61%,100%{opacity:1;transform:scaleX(1)}}@keyframes demo-hint{0%,17%{opacity:.9;transform:scale(.8)}29%,100%{opacity:0;transform:scale(1.3)}}@keyframes demo-line{0%,62%{opacity:0;transform:scaleX(.1)}78%,100%{opacity:1;transform:scaleX(1)}}@keyframes demo-anchor{0%,34%,62%,100%{filter:brightness(1);transform:scale(1)}48%{filter:brightness(1.5) drop-shadow(0 0 7px #dbd17b);transform:scale(1.12)}}@keyframes demo-threat{0%,35%,62%,100%{transform:translateX(0)}43%,53%{transform:translateX(-2px)}}@keyframes demo-block{0%,36%{opacity:0;transform:scale(.65)}50%,68%{opacity:.9;transform:scale(1)}82%,100%{opacity:0;transform:scale(1.1)}}
@media(max-width:700px){.shell{padding:18px 20px 16px}.atlas-ready .table{padding:22px 24px 18px}.atlas-ready .mode-card{min-height:92px;padding:14px 46px 14px 13px}.atlas-ready .actions button{min-height:64px;padding:10px 20px}}
.disc.sprite-backed{background-color:transparent;border-color:transparent;box-shadow:none}
.disc.anchored.sprite-backed::before{content:none}
.board-frame.sprite-backed{background-color:transparent;border-color:transparent;box-shadow:none}
.move-hint,.last-move,.anchor-select,.win-line,.flip-glint,.place-burst{display:none;position:absolute;inset:0;z-index:3;pointer-events:none}
.move-hint.sprite-backed,.last-move.sprite-backed,.anchor-select.sprite-backed,.win-line.sprite-backed,.flip-glint.sprite-backed,.place-burst.sprite-backed{display:block}
.win-line[hidden]{display:none!important}
.flip-glint{animation:fx-glint .34s ease-out both}.place-burst{inset:-38%;animation:fx-place .42s ease-out both}
@keyframes fx-glint{0%{opacity:0;transform:scale(.45) rotate(-20deg)}45%{opacity:1}100%{opacity:0;transform:scale(1.15) rotate(8deg)}}@keyframes fx-place{0%{opacity:0;transform:scale(.4)}40%{opacity:1}100%{opacity:0;transform:scale(1.08)}}
.app-ready .loading-screen{display:none}
.anchor-select{inset:-18%}
.win-line{inset:auto;transform-origin:center}
.cell:has(>.move-hint.sprite-backed)::after,.cell:has(>.anchor-select.sprite-backed)::after{content:none}
.cell.knight-denied::after{content:'';width:15%;height:15%;border-radius:50%;background:#d85b50;opacity:.85;box-shadow:0 0 7px #ff453acc}.move-hint.knight-blocked{filter:hue-rotate(285deg) saturate(2.8) brightness(1.15);opacity:.95}
.cell.last:has(>.last-move.sprite-backed) .disc::after{content:none}
[data-mode=mini] .mode-icon{background:url('assets/ui/mode_mini.png') center/contain no-repeat!important}[data-mode=symmetric] .mode-icon{background:url('assets/ui/mode_symmetric.png') center/contain no-repeat!important}.cell.dark{background:#203b2933}

/* Fourteen pixels is the minimum UI text size on the fixed 540 × 960 stage. */
.edition,.eyebrow,.mode-label,.mode-card[aria-pressed=true] .number,.table-heading .eyebrow,.header-button,.mode-banks button,.stats-overall b,.stats-modes span{font-size:14px!important}
.table{transform:translateY(-6px)}
.shell footer{display:flex;position:absolute;left:20px;right:20px;bottom:4px;align-items:center;justify-content:center;border:0;margin:0;padding:0;color:var(--muted);font-size:14px!important;line-height:14px;letter-spacing:1.2px;text-align:center}




.brand,.edition{white-space:nowrap}
.header-button{width:auto;min-width:0!important;flex:0 0 auto;padding:5px 9px!important;white-space:nowrap}

[data-mode=crossCut] .mode-icon{background:url('assets/ui/mode_cross_cut.png') center/contain no-repeat!important}
[data-mode=edgeFive] .mode-icon{background:url('assets/ui/mode_edge_five.png') center/contain no-repeat!important}[data-mode=cornerRace] .mode-icon{background:url('assets/ui/mode_corner_race.png') center/contain no-repeat!important}[data-mode=domination] .mode-icon{background:url('assets/ui/mode_domination.png') center/contain no-repeat!important}[data-mode=moveCount] .mode-icon{background:url('assets/ui/mode_move_count.png') center/contain no-repeat!important}
.demo-edge-line.demo-win-line{top:0}#board[data-mode=domination] .cell[data-score]::before,.demo-domination .demo-cell[data-score]::before{content:attr(data-score);position:absolute;z-index:1;left:5px;top:3px;color:#eadb8d;font:700 14px/1 Georgia,serif;text-shadow:0 1px 2px #07100d,0 0 4px #07100d;opacity:.72;pointer-events:none}#board[data-mode=domination] .cell>.disc,.demo-domination .demo-cell>.disc{z-index:2}.demo-domination .demo-cell[data-score]::before{left:3px;top:3px;font-size:14px}.demo-domination .demo-cell[data-score="3"]{background:#d6b95b55;box-shadow:inset 0 0 10px #e7d77a55}.demo-domination .demo-cell[data-score="2"]{outline:1px solid #bd955b66;outline-offset:-1px}
.corner-marker{position:absolute;z-index:5;width:13px;height:17px;left:4px;top:3px;pointer-events:none;filter:drop-shadow(0 1px 2px #06100c)}.corner-marker::before{content:'';position:absolute;left:2px;top:1px;width:2px;height:15px;border-radius:1px;background:linear-gradient(90deg,#8f672d,#f3d67b,#805723)}.corner-marker::after{content:'';position:absolute;left:4px;top:1px;width:9px;height:8px;background:linear-gradient(135deg,#f3da78,#b58432);clip-path:polygon(0 0,100% 25%,72% 100%,0 76%);box-shadow:inset 0 0 0 1px #fff3}.corner-marker-1{left:auto;right:4px;transform:scaleX(-1)}.corner-marker-2{top:auto;bottom:3px;transform:scaleY(-1)}.corner-marker-3{left:auto;right:4px;top:auto;bottom:3px;transform:rotate(180deg)}.demo-cell .corner-marker{transform:scale(.85);transform-origin:top left}.demo-cell .corner-marker-1{transform:scale(-.85,.85);transform-origin:top right}.demo-cell .corner-marker-2{transform:scale(.85,-.85);transform-origin:bottom left}.demo-cell .corner-marker-3{transform:rotate(180deg) scale(.85);transform-origin:center}
#board.mode-transition{isolation:isolate;pointer-events:none}#board.mode-transition .cell{transform-origin:center;animation:mode-cell-ripple .58s cubic-bezier(.2,.75,.25,1) var(--ripple-delay,0ms) both}#board.mode-transition .cell>.disc{animation:mode-disc-reveal .42s cubic-bezier(.2,.8,.25,1) calc(var(--ripple-delay,0ms) + 120ms) both}#board.mode-transition::after{content:'';position:absolute;z-index:8;left:50%;top:50%;width:12%;height:12%;border:2px solid #e8dc8a;border-radius:50%;box-shadow:0 0 12px #cbd981,inset 0 0 12px #cbd981;pointer-events:none;animation:mode-board-ripple .72s ease-out both}@keyframes mode-cell-ripple{0%{opacity:.22;transform:perspective(160px) rotateY(72deg) scale(.94);filter:brightness(1.8)}55%{opacity:1;filter:brightness(1.35)}100%{transform:none;filter:none}}@keyframes mode-disc-reveal{0%{opacity:0;transform:rotateY(90deg) scale(.72)}62%{opacity:1;transform:rotateY(-12deg) scale(1.08)}100%{transform:none}}@keyframes mode-board-ripple{0%{opacity:.9;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(8)}}@media(prefers-reduced-motion:reduce){#board.mode-transition .cell,#board.mode-transition .cell>.disc,#board.mode-transition::after{animation:none}}

button:not(.cell){transition:background-color .15s,transform .08s ease-out,filter .08s ease-out;transform-origin:center}
button:not(.cell).is-pressed{transform:translateY(2px) scale(.985);filter:brightness(.82)}

/* Ranking dialog */
.ranking-dialog{width:420px}
.ranking-dialog>.eyebrow{margin:0 0 6px}
.ranking-dialog h2{margin:0 0 16px}
.ranking-boards{display:flex;gap:6px;justify-content:center;margin:0 0 14px}
.ranking-boards button{height:32px;min-height:32px!important;padding:5px 12px!important;border:1px solid #71836c!important;border-radius:7px;background:#14241fdd!important;color:var(--muted);font-size:14px!important;font-weight:750!important;letter-spacing:.5px;box-shadow:inset 0 0 0 1px #1c352b;clip-path:none}
.ranking-boards button[aria-pressed=true]{border-color:var(--accent)!important;color:var(--accent);background:#314535!important}
.ranking-note{margin:0 0 12px!important;text-align:center;font-size:14px!important;line-height:1.5}
.ranking-note:empty{display:none}
.ranking-list{display:grid;align-content:start;gap:4px;min-height:96px;max-height:322px;overflow-y:auto}
.ranking-list p{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;margin:0!important;padding:7px 6px;border-bottom:1px solid #71836c55}
.ranking-list i{color:var(--accent);font:700 14px/1 Georgia,serif;font-style:normal;text-align:center}
.ranking-list b{color:var(--ink);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranking-list span{font:16px/1 Georgia,serif}
.ranking-list p.mine{background:#c0d4101f;border-radius:7px;border-bottom-color:transparent}
.ranking-list p.mine b{color:var(--accent)}
.ranking-dialog form{justify-content:center;margin-top:18px}
.ranking-dialog form button{min-width:120px}

/* Mobile web shell — 다른 게임 index.html의 <style>과 같은 규약.
   iOS에서 텍스트 선택·콜아웃·드래그·바운스 스크롤과 더블탭 확대를 막는다.
   캔버스 관련 규칙(back_canvas / main_div / game_canvas / img)은 DOM 기반인 이 게임에 없어 제외했다. */
*{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
html,body{position:fixed;left:0;top:0;width:100%;height:100%;margin:0;padding:0;overflow:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:auto;touch-action:pan-y}
/* touch-action은 조상 체인을 따라 교집합으로 결정된다. *에 none을 걸면 팝업 안의 세로 스크롤러까지 죽으므로
   문서는 pan-y로 두어 확대·핀치만 막고, 제스처가 필요 없는 게임 스테이지에만 none을 건다 */
.shell{touch-action:none}
.cell{touch-action:manipulation}
.ranking-list{touch-action:pan-y}

/* 14px 최소 글자 크기에 맞춘 박스 재조정.
   헤더 버튼은 짧은 라벨(statsShort / rankingShort)을 쓰고, 모드 뱅크는 라벨과 버튼을 두 줄로 나눈다.
   늘어난 세로 길이는 보드 크기와 여백에서 회수해 540 × 960 안에 유지한다. */
.shell{padding:16px 20px 12px}
header{height:44px;padding:0 2px 9px}
.language-control{width:132px!important}
.language-control .select-trigger{width:132px}
.language-control .select-menu{width:164px;top:36px}
.mode-nav-head{flex-direction:column;align-items:stretch;gap:5px;min-height:0;padding-bottom:5px}
.mode-banks{justify-content:flex-start;gap:6px}
.mode-banks button{padding:5px 8px}
#modes{gap:6px}
.mode-card{flex:0 0 72px;min-width:72px;width:72px;height:80px;min-height:80px!important}
.mode-icon{width:58px;height:58px}
.mode-card[aria-pressed=true]{flex-basis:234px;width:234px;padding:12px 76px 12px 14px!important}
.mode-card[aria-pressed=true] .mode-icon{right:5px}
.controls{grid-template-columns:1fr 1fr 128px;margin:6px 0 0}
.select-trigger{height:58px;min-height:58px!important}
.help-button{height:58px;min-height:58px!important}
.table{height:616px;padding:20px 22px 14px!important}
/* 14px 아이브로우 + 22px 제목이 38px 박스를 넘겨 아랫부분이 잘리던 문제 */
.table-heading{height:40px;top:7px}
.table-heading .eyebrow{line-height:1.15}
.board-frame{width:368px;height:368px;padding:16px}
.board{width:336px;height:336px}
.scoreboard{height:44px;margin:10px 0 8px}
.status{height:32px;padding:7px 0 3px}
.actions{height:58px}
.actions button{height:56px;min-height:56px!important}
.board-note{height:18px;line-height:18px;margin:2px 0 0}
/* 숨긴 네이티브 select가 아틀라스 min-height를 물려받아 스크롤 높이를 늘리던 문제 */
.native-select{min-height:0!important;max-height:1px!important;padding:0!important;border:0!important}
.stats-modes{max-height:286px;overflow-y:auto;touch-action:pan-y}
.ranking-list{max-height:300px}

/* 통계·랭킹 팝업 확대 — 540 스테이지 폭을 거의 다 쓰고, 목록 높이를 크게 늘린다 */
.stats-dialog,.ranking-dialog{width:496px;padding:46px 30px 34px!important}
.stats-dialog h2,.ranking-dialog h2{font-size:30px;margin:0 0 14px}
.stats-player{font-size:16px!important;margin:-6px 0 18px!important}
.stats-overall{gap:9px;margin:14px 0 18px}
.stats-overall span{padding:13px 6px;border-radius:9px}
.stats-overall strong{font-size:25px}
.stats-modes{gap:5px;max-height:512px;overflow-y:auto;touch-action:pan-y}
.stats-modes p{padding:6px 6px}
.stats-modes b{font-size:15px}
.stats-dialog form,.ranking-dialog form{margin-top:20px}
.stats-dialog form button,.ranking-dialog form button{min-width:150px}
.ranking-boards{margin:0 0 16px}
.ranking-note{margin:0 0 14px!important}
.ranking-list{max-height:520px;gap:5px}
.ranking-list p{grid-template-columns:38px minmax(0,1fr) auto;padding:9px 8px}
.ranking-list i{font-size:15px}
.ranking-list b{font-size:15px}
.ranking-list span{font-size:18px}

/* 통계 팝업: 행마다 모드 아이콘을 넣고 행 높이를 키운다.
   .mode-icon은 모드 카드 안에서 절대 배치되므로 여기서는 흐름 배치로 되돌린다 */
.stats-modes p{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 8px}
.stats-modes p .mode-icon{position:static;left:auto;top:auto;right:auto;width:38px;height:38px;transform:none}
.stats-modes p[data-mode=anti] .mode-icon{transform:rotate(180deg)}
.stats-modes b{font-size:16px}
.stats-modes span{font-size:14px!important;color:var(--muted)}
/* 팝업은 드래그 선택과 포커스 링을 두지 않는다 */
dialog,dialog *{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}
dialog:focus,dialog:focus-visible{outline:none}
/* 행이 커진 만큼 머리말 여백을 줄여 목록 노출을 늘린다 */
.stats-dialog h2{margin:0 0 10px}
.stats-player{margin:-6px 0 14px!important}
.stats-overall{margin:12px 0 14px}
.stats-modes{max-height:548px}

/* Toss SDK 상단 내비게이션이 우측 상단을 가리므로 조작 요소를 왼쪽에 모으고 로고를 오른쪽에 둔다.
   DOM 순서(로고 → 도구)는 읽기 순서를 위해 그대로 두고 시각 순서만 뒤집는다 */
header{flex-direction:row-reverse}
.audio-button{width:40px;min-width:40px!important;flex:0 0 40px;padding:5px 0!important;display:flex;align-items:center;justify-content:center}
.audio-glyph{position:relative;display:block;width:20px;height:20px;font-style:normal}
.audio-glyph::before{content:'♪';position:absolute;inset:0;display:grid;place-items:center;font:17px/1 system-ui,sans-serif;color:var(--accent)}
.audio-button[aria-pressed=false] .audio-glyph::before{color:var(--muted)}
.audio-button[aria-pressed=false] .audio-glyph::after{content:'';position:absolute;left:-1px;top:9px;width:22px;height:2px;border-radius:1px;background:#e0917a;transform:rotate(-42deg)}
/* 헤더에 버튼이 4개가 되면서 폭이 부족하다. 언어 버튼은 국기만 남긴다 —
   펼친 목록에는 국기와 언어 이름이 함께 나오므로 정보 손실은 없다 */
.language-control{width:64px!important}
.language-control .select-trigger{width:64px;padding:4px 6px!important}
.language-control .select-trigger .select-option-label{display:none}
.language-control .select-arrow{margin-left:4px}
.language-control .select-menu{width:172px}

/* 타이틀 하단 사운드 크레딧 — 퍼블리셔 줄 위에 한 줄을 더 쌓는다.
   푸터가 두 줄이 된 만큼 보드 패널 높이를 줄여 크레딧이 패널 위로 겹치지 않게 한다 */
.shell footer{flex-direction:column;gap:2px;bottom:6px}
.table{height:596px}

/* 무료 무르기를 다 쓰면 무르기 아이콘 자리를 광고 표시로 바꾼다.
   버튼에 덧붙이지 않고 자리를 바꿔야 앵커 모드(버튼 3개)에서 라벨이 줄바꿈되지 않는다 */
.undo-ad{display:grid;place-items:center;width:26px;height:26px;flex:none;font-style:normal;font-size:19px;line-height:1}
.undo-ad[hidden],.button-icon[hidden]{display:none}

/* 플랫폼이 게임을 멈추라고 하면(탭 전환·광고·앱 백그라운드) 스테이지 전체를 덮는다.
   덮개가 없으면 헤더 버튼·모드 카드·드롭다운이 멈춘 상태에서도 그대로 눌린다 */
.pause-veil{position:absolute;inset:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:14px;
 background:#0b1713d9;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);text-align:center;-webkit-user-select:none;user-select:none}
.pause-veil[hidden]{display:none}
.pause-veil-glyph{position:relative;display:block;width:58px;height:58px;border:3px solid var(--accent);border-radius:50%;opacity:.9}
.pause-veil-glyph::before,.pause-veil-glyph::after{content:'';position:absolute;top:15px;width:7px;height:22px;border-radius:2px;background:var(--accent)}
.pause-veil-glyph::before{left:15px}.pause-veil-glyph::after{right:15px}
.pause-veil strong{font:700 24px/1.2 system-ui,sans-serif;letter-spacing:2px;color:var(--ink);text-transform:uppercase}

/* ===== V2 FLAT THEME (playgama2) =====
   틸·차콜·크림·오렌지 4색. 패널·버튼·필드·보드·배경은 아틀라스 nine-slice 대신 여기서 그린다.
   ui_atlas.js는 프레임이 없으면 skin()을 건너뛰므로, 위쪽의 .atlas-ready 투명 규칙만 이 블록이 되돌린다. */
:root{--bg:#083638;--bg-deep:#052526;--panel:#0f5254;--panel-2:#0b4547;--line:#1d7274;--ink:#fbf3df;--muted:#9ec7c4;--accent:#fc7f22;--char:#212729;--char-2:#2c3438;--cream:#fbf3df}
body{background:var(--bg-deep)}
.shell{background:radial-gradient(ellipse at 50% 0%,#0f5254 0,transparent 55%),var(--bg)!important}
.loading-screen{background:var(--bg)}.loading-mark{border-color:var(--accent);background:linear-gradient(90deg,var(--char) 0 50%,var(--cream) 50%)}.loading-track{border-color:var(--line);background:var(--bg-deep)}.loading-track i{background:var(--accent)}
header{border-bottom-color:var(--line)}
/* 헤더 버튼·언어·뱅크 탭: 차콜 칩 */
.header-button,.atlas-ready .header-button,.language-control .select-trigger,.atlas-ready .language-control .select-trigger,.mode-banks button,.atlas-ready .mode-banks button{border:2px solid var(--char-2)!important;background:var(--char)!important;color:var(--cream)!important;box-shadow:none}
.mode-banks button{color:var(--muted)!important}
.mode-banks button[aria-pressed=true],.atlas-ready .mode-banks button[aria-pressed=true]{border-color:var(--accent)!important;background:var(--char)!important;color:var(--accent)!important}
.language-control .select-menu{border:2px solid var(--char-2);background:var(--char)}
.select-menu{background:var(--char);border:2px solid var(--char-2)}.select-option{color:var(--cream)}.select-option:hover,.select-option:focus-visible{background:var(--char-2)!important}.select-option[aria-selected=true]{background:var(--panel)!important;color:var(--cream)}
.audio-glyph::before{color:var(--accent)}.audio-button[aria-pressed=false] .audio-glyph::before{color:var(--muted)}
/* 패널: 틸 면 + 차콜 테두리 (아이콘의 틸 원 + 차콜 링과 같은 어휘) */
.atlas-ready .table,.table{background-color:var(--panel)!important;border:3px solid var(--char)!important;box-shadow:0 12px 30px #0006}
.atlas-ready dialog,dialog{background:var(--panel)!important;border:3px solid var(--char)!important;color:var(--ink)}
dialog::backdrop{background:#03191acc}
/* 모드 카드: 차콜, 선택 시 틸 + 오렌지 테두리 */
.atlas-ready .mode-card,.mode-card{background-color:var(--char)!important;border:2px solid var(--char-2)!important;border-radius:14px}
.atlas-ready .mode-card[aria-pressed=true],.mode-card[aria-pressed=true]{background-color:var(--panel-2)!important;border-color:var(--accent)!important}
.mode-card[aria-pressed=true] .number{color:var(--accent)}
.mode-card:is([data-mode=five],[data-mode=anchor]) .mode-icon::after{border-color:var(--cream);background:var(--char);color:var(--cream);text-shadow:none}
/* 셀렉트·도움말 필드: 차콜 */
.atlas-ready .controls .select-trigger,.controls .select-trigger,.atlas-ready .help-button,.help-button{background-color:var(--char)!important;border:2px solid var(--char-2)!important;border-radius:12px;color:var(--cream)}
.select-trigger:focus-visible{filter:none;outline:3px solid var(--accent);outline-offset:2px}
/* 액션·다이얼로그 버튼: 차콜(기본) / 오렌지(primary) */
.atlas-ready .actions button,.actions button,.atlas-ready dialog button,dialog button{background-color:var(--char)!important;border:2px solid var(--char-2)!important;color:var(--cream)!important;text-shadow:none;clip-path:none;border-radius:14px}
.atlas-ready .primary,.primary,.atlas-ready dialog button.primary,dialog button.primary{background-color:var(--accent)!important;border-color:var(--accent)!important;color:var(--char)!important}
.atlas-ready .actions button:disabled{opacity:.45;filter:none}
button:hover:not(:disabled){background-color:var(--char-2)}.primary:hover:not(:disabled){background-color:#ff9a4d!important}
button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline-color:var(--accent)}
/* 스코어 */
.score.active{border:2px solid var(--accent);background:#00000022}
.score{border-width:2px}
/* 보드: 차콜 프레임, 틸 체크 셀, 크림 격자선 */
.board-frame,.board-frame.sprite-backed{background:var(--char)!important;border:0!important;border-radius:10px;box-shadow:0 10px 24px #0007}
.board,.demo-board{background:var(--panel)!important;border-radius:4px;overflow:hidden}
.cell,.demo-cell{background:#0f5c5e!important;border-right:1px solid #fbf3df1f!important;border-bottom:1px solid #fbf3df1f!important}
.cell.dark,.demo-cell.dark{background:#0c4f51!important}
.cell.preview{background:#fc7f2266!important}
.cell.legal:after{background:var(--accent);opacity:.9}
.cell.last .disc:after{background:var(--accent)}
.demo-cell.knight-blocked::after{border-color:var(--accent);background:var(--char);color:var(--accent)}
/* 다이얼로그 내부 */
.stats-overall span{border:2px solid var(--char-2);background:var(--char)}
.ranking-list p{border-bottom-color:#fbf3df22}.ranking-list p.mine{background:#fc7f2226}
.ranking-boards button[aria-pressed=true]{border-color:var(--accent)!important;color:var(--accent);background:var(--char)!important}
.result-reason,.stats-player{color:var(--accent)!important}
.pause-veil-glyph{border-color:var(--accent)}.pause-veil-glyph::before,.pause-veil-glyph::after{background:var(--accent)}
.disc{width:84%;height:84%}.demo-cell .disc{width:82%;height:82%;inset:9%}
.controls .select-trigger{padding:8px 12px!important}
.move-hint{opacity:.85}
/* v2 mode_anti는 자체 아이콘(아래 화살표)이라 구 Classic 재활용용 180° 회전을 되돌린다 */
.mode-card[data-mode=anti] .mode-icon{transform:translate(-50%,-50%)}
.mode-card[data-mode=anti][aria-pressed=true] .mode-icon{transform:translateY(-50%)}
/* 도미네이션 칸 가중치: 돌(z-index 2)·이펙트(3)보다 위에, 차콜 배지로 돌 위에서도 읽히게 */
#board[data-mode=domination] .cell[data-score]::before,.demo-domination .demo-cell[data-score]::before{z-index:4;left:3px;top:3px;padding:1px 4px;border-radius:6px;background:#212729d9;color:var(--cream);font:700 12px/1 Georgia,serif;text-shadow:none;opacity:.95}
#board[data-mode=domination] .cell[data-score="3"]::before,.demo-domination .demo-cell[data-score="3"]::before{color:var(--accent)}
.demo-domination .demo-cell[data-score="3"]{background:#fc7f2233;box-shadow:none}.demo-domination .demo-cell[data-score="2"]{outline-color:#fbf3df44}

/* ===== V2 진행 구조: 현재 실험 스트립 + LAB 창 + 언락 연출 ===== */
.intro{display:none}
aside{display:grid;gap:0}
.controls{margin:0 0 12px}
/* 스트립: 테이블 제목 자리. 아이콘·번호·이름·해제 수·LAB 버튼 한 줄 */
.table-heading.lab-strip{display:flex;align-items:center;gap:10px;height:56px;top:0;margin:0 0 8px;padding:0 0 10px;border-bottom:2px solid #fbf3df1a}
.lab-strip .mode-icon{position:static;transform:none;width:46px;height:46px;flex:none}
.lab-strip .lab-text{flex:1;min-width:0;line-height:1.1}.lab-strip .lab-text .eyebrow{color:var(--accent);font-size:13px;letter-spacing:1.6px;margin:0 0 2px}.lab-strip h2{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-strip .lab-count{color:var(--muted);font-size:13px;letter-spacing:1px;white-space:nowrap}
.lab-strip .lab-open,.atlas-ready .lab-strip .lab-open{height:40px;min-height:40px!important;padding:6px 16px!important;background-color:var(--accent)!important;border:2px solid var(--accent)!important;color:var(--char)!important;font-size:14px!important;font-weight:800!important;letter-spacing:1.2px;border-radius:12px;clip-path:none}
.lab-strip .lab-open:hover:not(:disabled){background-color:#ff9a4d!important}
/* 모드 피커가 빠진 만큼 보드를 키운다: 370 → 430 */
.table{height:736px!important;padding:16px 24px 12px!important}
.board-frame{width:468px!important;height:468px!important;padding:19px!important}
.board{width:430px!important;height:430px!important}
.scoreboard{margin:8px 0 10px}
.actions{margin-top:10px}
/* LAB 창: 3×5 격자, 한 화면에 15개 */
.lab-dialog,.atlas-ready .lab-dialog{width:496px;padding:34px 24px 26px!important}
.lab-dialog h2{font-size:26px;margin:0 0 2px}
.lab-progress{margin:0 0 10px;color:var(--muted);font-size:14px}
.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lab-card,.atlas-ready .lab-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;height:112px;min-height:112px!important;padding:9px 6px 6px!important;background-color:var(--char)!important;border:2px solid var(--char-2)!important;border-radius:14px;color:var(--cream);text-align:center;clip-path:none;font-size:14px}
.lab-card .mode-icon{position:static;transform:none;width:48px;height:48px}
.lab-card small{font-size:11px;letter-spacing:1.2px;color:var(--muted);line-height:1}
.lab-card strong{font:14px/1.05 Georgia,serif;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lab-card .lab-need{font-size:11px;line-height:1.1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lab-card .lab-need:empty{display:none}
.lab-card[aria-pressed=true]{background-color:var(--panel-2)!important;border-color:var(--accent)!important}
.lab-card.next{border-color:var(--accent)!important;border-style:dashed!important}.lab-card.next .lab-need{color:var(--accent);font-weight:700}
.lab-card.locked{color:var(--muted);cursor:default}.lab-card.locked strong{color:var(--muted)}.lab-card.locked .mode-icon{filter:grayscale(1) brightness(.55);opacity:.7}
/* 자물쇠: 몸통 + 고리, CSS만으로 */
.lab-card.locked::after{content:'';position:absolute;right:8px;top:9px;width:12px;height:9px;border-radius:2px;background:var(--muted);box-shadow:0 -6px 0 -2px var(--muted)}
.lab-card.locked::before{content:'';position:absolute;right:10px;top:3px;width:6px;height:7px;border:2px solid var(--muted);border-bottom:0;border-radius:5px 5px 0 0}
.lab-card.next::after,.lab-card.next::before{background:var(--accent);border-color:var(--accent);box-shadow:0 -6px 0 -2px var(--accent)}
.lab-card.next::before{background:none}
.lab-dialog form{margin-top:14px}
/* 결과 팝업의 언락 영역 */
.result-unlock{display:flex;align-items:center;gap:10px;margin:-6px 0 16px;padding:8px 10px;background:var(--char);border:2px dashed var(--accent);border-radius:14px;text-align:left}
.result-unlock[hidden]{display:none}
.result-unlock .mode-icon{position:static;transform:none;width:44px;height:44px;flex:none}
.result-unlock>div{flex:1;min-width:0;line-height:1.15}.result-unlock small{display:block;color:var(--accent);font-size:10px;letter-spacing:1px;white-space:nowrap}.result-unlock strong{display:block;font:16px Georgia,serif;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-unlock button,.atlas-ready .result-unlock button{height:38px;min-height:38px!important;padding:6px 12px!important;background-color:var(--accent)!important;border:2px solid var(--accent)!important;color:var(--char)!important;font-weight:800!important;border-radius:10px;clip-path:none;white-space:nowrap}
/* 언어 드롭다운: 국기 + 언어 이름 (헤더는 6개 언어 모두에서 넘치지 않는 폭으로 확인) */
.language-control{width:128px!important}
.language-control .select-trigger{width:128px;padding:4px 7px!important;gap:4px}
.language-control .select-trigger .select-option-label{display:block;font-size:13px;flex:1;min-width:0}
.language-control .select-trigger .select-value{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
.language-control .select-arrow{margin-left:2px}
.header-tools{gap:7px}.header-button{padding:5px 8px!important}
.language-control{width:120px!important}.language-control .select-trigger{width:120px;padding:4px 6px!important}
.brand{gap:6px;letter-spacing:2px}
.language-control{width:126px!important}.language-control .select-trigger{width:126px}.language-control .select-trigger .select-option-label{font-size:12px}
/* 자물쇠: 그린 스프라이트로 교체 (기존 CSS 도형 규칙 무효화) */
.lab-card.locked::before{content:none}
.lab-card.locked::after{content:'';position:absolute;right:6px;top:6px;width:18px;height:18px;border-radius:0;background:url('assets/ui/icon_lock.png') center/contain no-repeat;box-shadow:none}
.lab-card.next::after{background-image:url('assets/ui/icon_lock_next.png');box-shadow:none}
/* 디버그 전용 진행 초기화 버튼 */
.lab-dialog form{gap:10px}
#lab-reset{background-color:transparent!important;border:2px dashed #e0917a!important;color:#e0917a!important}
/* 토글 상태가 있는 버튼(앵커/나이트 사용)은 켜졌을 때 오렌지로 구분 */
.actions #anchor[aria-pressed=true],.atlas-ready .actions #anchor[aria-pressed=true]{background-color:var(--panel-2)!important;border-color:var(--accent)!important;color:var(--accent)!important}
/* 버튼·필드·카드 외곽선을 더 또렷하게: 차콜보다 밝은 크림 45% */
:root{--edge:#fbf3df73}
.header-button,.atlas-ready .header-button,.language-control .select-trigger,.atlas-ready .language-control .select-trigger,.mode-banks button,.atlas-ready .mode-banks button{border-color:var(--edge)!important}
.language-control .select-menu,.select-menu{border-color:var(--edge)}
.atlas-ready .controls .select-trigger,.controls .select-trigger,.atlas-ready .help-button,.help-button{border-color:var(--edge)!important}
.atlas-ready .actions button,.actions button,.atlas-ready dialog button,dialog button{border-color:var(--edge)!important}
.atlas-ready .primary,.primary,.atlas-ready dialog button.primary,dialog button.primary{border-color:var(--accent)!important}
.lab-card,.atlas-ready .lab-card{border-color:var(--edge)!important}
.lab-card.locked{border-color:#fbf3df33!important}
.lab-card[aria-pressed=true],.lab-card.next{border-color:var(--accent)!important}
.stats-overall span,.result-unlock{border-color:var(--edge)}.result-unlock{border-color:var(--accent)}
.ranking-boards button{border-color:var(--edge)!important}
.lab-strip .lab-open{border-color:var(--accent)!important}
.actions #anchor[aria-pressed=true]{border-color:var(--accent)!important}
/* 보드: 8칸이 정수 px(54)로 떨어지게 432px. 1fr 대신 고정 트랙을 써서 확대 배율에서 칸 크기 반올림이 누적돼
   판이 오른쪽·아래로 밀리는 현상을 막는다 (6×6은 72px) */
.board-frame{width:470px!important;height:470px!important;padding:19px!important}
.board{width:432px!important;height:432px!important;grid-template-columns:repeat(var(--board-size,8),calc(432px / var(--board-size,8)))!important;grid-auto-rows:calc(432px / var(--board-size,8))}
.cell{aspect-ratio:auto;height:100%}
/* 보드 프레임(470)이 테이블 내용 폭(500-24*2=452)보다 넓어 오른쪽으로 넘치던 문제 — 좌우 패딩을 15px로 줄여 470을 정확히 담는다 */
.table{padding:16px 12px 12px!important}
.table-heading.lab-strip,.scoreboard,.actions,.board-note{margin-left:12px;margin-right:12px}

/* 캔버스 밖 하단 배너(Toss): 스테이지를 배너 높이의 절반만큼 위로 올려 남은 영역의 가운데에 둔다 */
.shell{top:calc(50% - var(--banner-h,0px) / 2)}

/* 팝업(dialog)은 top-layer 라 .shell 의 --stage-scale 을 물려받지 않는다 — 540 기준으로 잰 고정 폭(390~496px)이 폰에서 화면 밖으로 넘쳤다.
   스테이지와 같은 배율로 줄이고, 배너 위 영역의 가운데에 두고, 내용이 길면 팝업 안에서 스크롤한다 */
dialog{position:fixed;left:50%;top:50%;right:auto;bottom:auto;margin:0;transform:translate(-50%,calc(-50% - var(--banner-h,0px) / 2)) scale(var(--stage-scale,1));transform-origin:50% 50%;max-height:calc(100vh - var(--banner-h,0px) - 24px);overflow-y:auto;touch-action:pan-y}