: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}