:root{--ink:#252346;--muted:#6d6c84;--deep:#211b48;--violet:#6953d9;--violet-light:#eeeaff;--gold:#ffc54a;--line:#e9e7f3;--card:#fff;--shadow:0 22px 72px rgba(45,30,104,.095)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:linear-gradient(135deg,#f8f7ff 0%,#f7fbff 55%,#fff9f3 100%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);overflow-x:hidden}button,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #a496ff;outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}.ambient{position:fixed;pointer-events:none;z-index:0;filter:blur(5px);border-radius:50%}.ambient-a{width:440px;height:440px;top:-250px;left:-170px;background:radial-gradient(circle,#d6c9ff99,transparent 70%)}.ambient-b{width:380px;height:380px;right:-180px;bottom:-140px;background:radial-gradient(circle,#ffe1c188,transparent 70%)}.shell{position:relative;z-index:1;width:min(1460px,calc(100% - 72px));margin:0 auto}.topbar{height:102px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9e6f0}.identity{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}.identity-mark{width:47px;height:47px;display:grid;place-items:center;background:linear-gradient(145deg,#33265d,#6444bb);color:#ffce69;border-radius:15px;font-size:38px;line-height:1;box-shadow:0 8px 17px #35246b32}.identity-text{display:flex;flex-direction:column;gap:0;letter-spacing:.05em}.identity-text b{font-size:20px;line-height:24px;font-weight:900;letter-spacing:.02em}.identity-text b span{color:#7357dc}.identity-text small{font-size:10px;font-weight:700;color:#8e899d;letter-spacing:.13em;text-transform:uppercase}.topbar-right{display:flex;gap:18px;align-items:center}.pill-live{display:flex;gap:9px;align-items:center;font-size:12px;font-weight:650;color:#6a6389}.live-dot{width:8px;height:8px;display:inline-block;background:#41bf96;border-radius:50%;box-shadow:0 0 0 4px #c7f0df}.top-free{font-size:10px;font-weight:900;letter-spacing:.12em;color:#7a65ce;background:#eeeaff;border:1px solid #ddd6ff;padding:9px 12px;border-radius:999px}.layout{display:grid;grid-template-columns:minmax(215px,1fr) minmax(385px,590px) minmax(195px,.82fr);gap:30px;align-items:start;padding-top:44px}.left-rail{padding-top:32px}.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:850;color:#6d58c3;display:flex;align-items:center;gap:7px}.eyebrow-star{font-size:19px;color:#efa63f}.left-rail h1{font-size:clamp(34px,3.2vw,52px);line-height:1.1;letter-spacing:-.065em;font-weight:900;margin:22px 0 18px}.left-rail h1 span{background:linear-gradient(90deg,#7654d2,#dc83b8);-webkit-background-clip:text;background-clip:text;color:transparent}.intro{font-size:15px;line-height:1.8;color:#77728e;margin:0 0 28px;max-width:340px}.stats-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #ece9f7;border-radius:20px;background:#ffffffbd;padding:20px 6px 18px;box-shadow:0 8px 30px #31237009}.stat{display:flex;flex-direction:column;align-items:center;gap:4px;border-right:1px solid #ebe8f3}.stat:last-child{border-right:0}.stat-icon{font-size:20px}.stat strong{font-size:26px;font-weight:900;line-height:1.4}.stat small{font-size:10px;color:#8d88a1;text-align:center;font-weight:700}.rules-card{background:#fff;margin-top:26px;border:1px solid #eeebf5;border-radius:21px;padding:21px;box-shadow:0 5px 26px #31237008}.card-heading{display:flex;align-items:center;gap:9px}.round-icon{width:30px;height:30px;background:#f0ecff;color:#7056c8;display:grid;place-items:center;border-radius:50%;font-weight:900}.card-heading h2{font-size:18px;margin:0;font-weight:850;letter-spacing:-.025em}.rules-card p{font-size:13px;line-height:1.65;color:#77718b;margin:17px 0}.rule-list{display:grid;gap:8px}.rule-list>div{display:flex;gap:12px;align-items:center;font-size:13px;font-weight:760;background:#faf9ff;border:1px solid #f0edf8;border-radius:11px;padding:9px 13px}.rule-symbol{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:#e8e3ff;color:#7058d2;font-size:17px;font-weight:900}.no-touch{display:flex;gap:9px;align-items:flex-start;background:#fff7e5;border:1px solid #ffecbd;color:#71541b;padding:12px;border-radius:10px;margin-top:15px;line-height:1.6;font-size:12px;font-weight:700}.no-touch span{font-size:20px;color:#e89a30}.micro-note{font-size:11px;color:#8a869b;line-height:1.7;margin-top:16px}.game-card{background:white;border:1px solid #ece8f6;border-radius:28px;padding:24px 28px 20px;box-shadow:var(--shadow);min-width:0}.mode-tabs{display:flex;gap:6px;padding:5px;background:#f3f1fa;border-radius:15px}.mode-tab{flex:1;border:none;background:none;color:#87819a;font-weight:800;font-size:13px;padding:13px 9px;border-radius:11px;white-space:nowrap;transition:.18s}.mode-tab.active{background:#fff;color:#5843af;box-shadow:0 3px 11px #43377214}.mode-tab:not(.active):hover{color:#443d75}.game-head{display:flex;align-items:center;justify-content:space-between;gap:13px;margin:27px 0 22px}.game-kicker{font-size:10px;font-weight:850;color:#8b74ce;letter-spacing:.15em}.game-head h2{font-size:29px;font-weight:900;letter-spacing:-.05em;margin:5px 0 3px}.game-head p{font-size:12px;color:#9994a7;margin:0}.level-selector{flex:0 0 auto}.level-selector label{display:block;font-size:10px;font-weight:850;color:#90899e;margin-bottom:5px}.level-selector select{max-width:150px;padding:9px 8px;border:1px solid #e7e0f1;border-radius:10px;color:#564b79;font-size:11px;font-weight:750;background:#fbfaff}.progress-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:#6f6b7e;font-size:12px}.progress-label{display:flex;align-items:center;gap:5px}.progress-label strong{color:#2c2757;font-weight:850}.mini-crown{font-size:19px;color:#d79e2d}.timer{font-variant-numeric:tabular-nums;color:#514a75;font-weight:840;font-size:15px}.timer span:first-child{color:#8a79bc;font-size:19px}.progress-track{height:6px;border-radius:10px;background:#f1eef9;overflow:hidden}.progress-track span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#8361e5,#e390c0);border-radius:10px;transition:width .25s ease}.board-surround{background:#fbfaff;border-radius:19px;padding:16px;margin:19px 0 12px;border:1px solid #efebf8}.board{width:100%;max-width:510px;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin:auto;overflow:hidden;border:3px solid #514b66;border-radius:5px;box-shadow:0 6px 16px #3e356319;user-select:none;touch-action:manipulation;aspect-ratio:1}.cell{appearance:none;-webkit-appearance:none;background:var(--region);border:0;border-right:var(--border-right,1px solid #ffffff75);border-bottom:var(--border-bottom,1px solid #ffffff75);border-top:var(--border-top,0);border-left:var(--border-left,0);display:flex;align-items:center;justify-content:center;padding:0;min-width:0;min-height:0;position:relative;color:#42395e;transition:filter .12s,background-color .12s}.cell:hover{filter:brightness(.965)}.cell:focus-visible{z-index:5;outline:3px solid #24155c;outline-offset:-3px}.cell .xmark{font-size:clamp(18px,3.15vw,30px);font-weight:600;line-height:1;color:#6a6477a6}.cell .auto-x{font-size:clamp(16px,2.7vw,25px);font-weight:500;opacity:.35}.cell .crown-svg{width:62%;height:62%;display:block;filter:drop-shadow(0 2px 1px #2f215533)}.cell.has-queen{background:color-mix(in srgb,var(--region) 64%,white)}.cell.is-conflict::after{content:"";position:absolute;inset:2px;border:3px solid #ef4569;border-radius:5px;pointer-events:none}.cell.is-conflict{background:#ffdce0!important}.cell.is-hint::after{content:"";position:absolute;inset:2px;border:3px dashed #7555da;border-radius:7px;animation:hint-pulse .8s ease-in-out infinite alternate;pointer-events:none}.cell.recent-move{animation:pop .18s ease-out}.board-legend{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#9992a4;padding:0 3px}.board-legend span{display:flex;gap:6px;align-items:center}.legend-crown{font-size:17px;color:#b68629;font-style:normal}.legend-x{font-size:22px;font-style:normal;line-height:1}.legend-swatch{height:13px;width:13px;background:#bce3d5;border:1px solid #71bca2;border-radius:3px}.game-message{font-size:12px;font-weight:675;text-align:center;line-height:1.5;color:#817b92;min-height:39px;display:flex;align-items:center;justify-content:center;margin:11px 0 13px;padding:0 8px}.game-message.warning{color:#d14565}.game-message.success{color:#198367}.toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.tool{border:none;padding:12px 5px;border-radius:12px;font-size:14px;font-weight:850;transition:transform .1s,background .15s}.tool:active,.new-btn:active{transform:scale(.97)}.tool.soft{background:#f4f2fa;color:#675b83}.tool.soft:hover:not(:disabled){background:#ece8f8}.tool.glow{background:#f3eaff;color:#6a45d3}.tool.glow:hover{background:#e8dfff}.bottom-actions{display:flex;gap:9px;margin-top:12px}.new-btn,.share-btn{padding:13px 12px;border-radius:12px;font-size:12px;font-weight:840;border:0}.new-btn{flex:1;color:white;background:linear-gradient(110deg,#7956d6,#a86bd8);box-shadow:0 7px 18px #7553d12b}.new-btn:hover{filter:brightness(1.06)}.share-btn{background:#fff;border:1px solid #ddd5f7;color:#7157c2;flex:1}.bottom-actions .new-btn[hidden]{display:none}.settings{margin-top:18px;border-top:1px solid #f1edf8;padding-top:13px}.settings summary{cursor:pointer;text-align:center;color:#928ca0;font-size:11px;font-weight:750;list-style:none}.settings summary::-webkit-details-marker{display:none}.settings-inner{padding:13px 7px 3px;display:grid;gap:11px;font-size:12px;color:#777087}.settings-inner label{display:flex;align-items:center;gap:8px;cursor:pointer}.settings input{accent-color:#7458d2;width:15px;height:15px}.right-rail{padding-top:102px}.tip-card{padding:23px;background:linear-gradient(160deg,#32275f,#58429d);border-radius:20px;color:#fff;box-shadow:0 15px 35px #3b2b7e25;overflow:hidden;position:relative}.tip-badge{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:900;letter-spacing:.15em;color:#ffd781}.tip-card h3{font-size:22px;line-height:1.25;letter-spacing:-.04em;margin:23px 0 12px}.tip-card p{font-size:12px;line-height:1.8;color:#e8e1ff;margin:0}.tip-art{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:23px 0 0;opacity:.95}.tip-art span{display:grid;place-items:center;background:#ffffff22;border:1px solid #ffffff22;border-radius:9px;aspect-ratio:1;color:#f5eaff;font-size:18px;font-weight:800}.tip-art .tip-queen{background:#ffd77b;color:#473565;font-size:31px}.daily-note{display:flex;gap:11px;padding:20px 5px}.daily-note>span{font-size:24px}.daily-note p{color:#80788b;line-height:1.65;font-size:11px;margin:0}.daily-note strong{color:#463c66;font-size:12px}footer{text-align:center;color:#aaa4b5;font-size:11px;padding:42px 10px 28px}.footer-dot{padding:0 8px}.win-dialog{max-width:420px;width:calc(100% - 36px);border:0;border-radius:26px;box-shadow:0 30px 90px #1d154d69;padding:0;overflow:hidden}.win-dialog::backdrop{background:#211b4866;backdrop-filter:blur(5px)}.win-content{text-align:center;padding:36px 34px 32px;background:linear-gradient(180deg,#f9f4ff,#fff 40%)}.win-crown{font-size:70px;color:#ddad35;line-height:1;text-shadow:0 10px 20px #9f792d29;animation:pop .5s ease}.win-kicker{color:#8966ca;font-size:11px;font-weight:900;letter-spacing:.16em;margin:17px 0 5px}.win-content h2{font-size:31px;letter-spacing:-.055em;margin:0}.win-desc{font-size:13px;line-height:1.6;color:#82788f}.win-score{display:flex;justify-content:center;gap:28px;background:#f7f3fc;border-radius:15px;padding:18px;margin:24px 0}.win-score div{display:flex;flex-direction:column;gap:4px}.win-score strong{font-size:27px;font-weight:900;font-variant-numeric:tabular-nums}.win-score small{color:#988ca6;font-size:11px}.win-content>.new-btn{width:100%;font-size:14px}.win-secondary{border:0;background:none;color:#88819a;font-size:12px;margin-top:15px;font-weight:800} [hidden]{display:none!important}@keyframes hint-pulse{from{box-shadow:0 0 0 0 #8469e044}to{box-shadow:inset 0 0 0 3px #8469e055}}@keyframes pop{0%{transform:scale(.85)}100%{transform:scale(1)}}
@media(max-width:1250px){.shell{width:min(1160px,calc(100% - 44px))}.layout{grid-template-columns:minmax(225px,.75fr) minmax(375px,1.35fr);gap:23px}.right-rail{display:none}.left-rail h1{font-size:42px}}
@media(max-width:780px){.shell{width:min(560px,calc(100% - 24px))}.topbar{height:75px}.topbar-right{display:none}.layout{display:flex;flex-direction:column;padding-top:17px;gap:22px}.game-card{order:1;width:100%;padding:16px 16px 19px;border-radius:22px}.left-rail{order:2;padding:0;width:100%}.left-rail .eyebrow,.left-rail h1,.left-rail .intro{display:none}.left-rail .rules-card{margin:14px 0 0}.stats-card{margin:0}.game-head{margin:23px 0 18px}.game-head h2{font-size:25px}.board-surround{padding:10px;margin:13px 0}.board{border-width:2px}.right-rail{display:none}footer{padding:25px 0}.pill-live{display:none}}
@media(max-width:410px){.shell{width:calc(100% - 16px)}.game-card{padding:13px 11px 16px}.mode-tab{font-size:11px;padding:12px 3px}.game-head h2{font-size:23px}.game-head p{font-size:11px}.game-head{gap:5px}.level-selector select{max-width:119px;padding:8px 3px;font-size:10px}.board-surround{padding:6px}.board-legend{font-size:9px}.tool{font-size:12px;padding:11px 3px}.tool span{display:none}.identity-text b{font-size:17px}.identity-mark{width:42px;height:42px}.stats-card{padding:14px 4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}

/* Syllabuild × MTBcustoms branding and shared donation experience */
.topbar-right{gap:12px}.identity-text small i{font-style:normal;color:#c6b9d9;margin:0 2px}
.donate-button{border:0;border-radius:999px;background:#fff1f3;color:#b13b68;font-size:12px;font-weight:800;padding:10px 15px;box-shadow:0 3px 10px #9f3d6b12;white-space:nowrap;transition:background .18s ease,transform .18s ease}
.donate-button:hover{background:#ffe0e9;transform:translateY(-1px)}
.donate-button span{font-size:17px;vertical-align:-1px;margin-right:4px}
.support-card{display:flex;gap:12px;background:linear-gradient(135deg,#fff4f5,#fffaf4);border:1px solid #f8e0e7;border-radius:17px;padding:17px 15px;box-shadow:0 8px 28px #833e6010}
.support-icon{width:35px;height:35px;flex:none;display:grid;place-items:center;border-radius:13px;background:#ffdde6;color:#bd456b;font-size:22px}
.support-card b{font-size:12px}.support-card p{font-size:11px;line-height:1.6;color:#796d84;margin:6px 0 10px}
.support-card-button{border:1px solid #e7b5c8;background:white;color:#ad4269;font-size:11px;font-weight:800;padding:9px 11px;border-radius:10px}
.support-card-button:hover{background:#ffe8ef}
.site-footer{border-top:1px solid #ebe7f2;display:flex;align-items:center;justify-content:center;gap:6px 20px;flex-wrap:wrap;padding:24px 0 22px;font-size:12px;text-align:center}
.site-footer .footer-brand{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
.site-footer a{color:#71638b;text-decoration:none;font-weight:700}.site-footer a:hover,.site-footer .footer-links button:hover{text-decoration:underline}
.mtb-wordmark{letter-spacing:-.03em;font-size:12px;white-space:nowrap}.mtb-wordmark b:first-child{color:#465364}.mtb-wordmark b:nth-child(2){color:#ef837b}.mtb-wordmark span{color:#adb2bc}
.site-footer .footer-links{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.site-footer .footer-links button{padding:0;border:0;background:none;color:#b1466d;font-size:12px;font-weight:800}
.site-footer p{flex-basis:100%;font-size:10px;line-height:1.5;color:#aba5b4;margin:8px 0 0}
.donate-dialog{position:fixed;width:min(445px,calc(100% - 28px));max-height:calc(100dvh - 24px);border:0;padding:0;border-radius:24px;box-shadow:0 25px 90px #261a4c66;background:#fff;overflow:auto;color:var(--ink)}
.donate-dialog::backdrop{background:#211b486f;backdrop-filter:blur(4px)}
.donate-content{text-align:center;padding:29px 25px 25px;position:relative;background:linear-gradient(165deg,#fff7f8,#fff 39%,#fcfaff)}
.donate-close{position:absolute;right:14px;top:13px;background:#f1eef5;border:0;color:#6b627e;width:30px;height:30px;border-radius:50%;font-size:23px;line-height:1}
.donate-heart{display:grid;place-items:center;margin:0 auto 12px;width:53px;height:53px;color:#c94f79;background:#ffe0e7;font-size:28px;border-radius:18px}
.donate-kicker{font-size:10px;color:#ad6383;letter-spacing:.17em;font-weight:900;margin:0 0 5px}
.donate-content h2{font-size:27px;line-height:1.15;letter-spacing:-.04em;margin:0;color:#292345}
.donate-copy{font-size:12px;line-height:1.6;color:#7f778b;max-width:340px;margin:11px auto 18px}
.donate-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;background:#f3eff8;padding:5px;border-radius:13px}
.donate-tabs button{border:0;background:transparent;padding:11px 5px;border-radius:10px;font-weight:800;font-size:12px;color:#817791}
.donate-tabs button.active{background:white;color:#6b48b7;box-shadow:0 2px 6px #25164c18}
.donation-payments{min-height:258px;padding-top:17px}.donate-panel:not([hidden]){display:flex;flex-direction:column;align-items:center;gap:6px}
.donate-qr-frame{width:184px;height:184px;display:grid;place-items:center;padding:8px;background:white;border:1px solid #e8e3ee;border-radius:14px;box-shadow:0 5px 15px #26154e0a}
.donate-qr-frame img{width:100%;height:100%;object-fit:contain;display:block}
.donate-image-error{font-size:12px;line-height:1.5;color:#9d6380;padding:12px}
.donate-panel p{font-size:11px;color:#8c8196;margin:8px 0 0;line-height:1.5}
.donate-panel .donate-alt-link{font-size:11px;color:#7150ba;font-weight:800;margin:4px 0 0}
.donate-paypal{padding-top:26px}.paypal-icon{font-size:40px;font-weight:900;font-style:italic;color:#215aa5;letter-spacing:-.08em}.donate-paypal>b{font-size:16px}.donate-paypal p{max-width:270px}
.donate-paypal-link{display:block;text-decoration:none;color:white;background:#5540a7;border-radius:13px;padding:12px 24px;font-size:12px;font-weight:800;margin-top:12px}
.donate-paypal-link:hover{background:#412d91}
.donate-gratitude{font-size:12px;font-weight:700;color:#a55178;margin:5px 0}.donate-privacy{font-size:10px;color:#9d97a9;line-height:1.55;margin:7px 0 0}
@media(max-width:780px){.topbar-right{display:flex}.top-free,.pill-live{display:none}.top-donate{padding:8px 13px}.site-footer{padding:20px 0 25px;gap:9px}.site-footer .footer-links{flex-basis:100%}}
@media(max-width:410px){.identity-text small{font-size:9px;letter-spacing:.045em}.top-donate{font-size:11px;padding:8px 10px}.donate-content{padding:25px 16px 19px}.donation-payments{min-height:237px}.donate-qr-frame{width:166px;height:166px}}

/* Syllabuild CrownQuest · four-level adaptive selector */
.game-head{margin-bottom:16px}
.level-selector{display:block;margin:0 0 19px;padding:13px;border-radius:15px;background:linear-gradient(135deg,#f5f2ff,#fff9fa);border:1px solid #ebe3f5}
.level-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px 10px;font-size:10px;font-weight:900;letter-spacing:.1em;color:#5e478f;margin:0 0 10px}
.level-heading .random-label{font-size:10px;font-weight:700;letter-spacing:0;color:#877998}
.level-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.level-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;padding:11px 4px 10px;background:white;color:#695c82;border:1.5px solid #e4daef;border-radius:11px;box-shadow:0 2px 7px #3e356309;cursor:pointer;transition:border-color .15s,transform .15s,background .15s}
.level-button strong{font-size:12px;font-weight:900}
.level-button span{font-size:11px;font-weight:700;opacity:.72}
.level-button:hover{border-color:#aa85dd;transform:translateY(-1px)}
.level-button.selected{background:linear-gradient(135deg,#6d52c6,#8e5fd3);border-color:#7050be;color:white;box-shadow:0 5px 14px #7259b042}
.level-button:focus-visible{outline:3px solid #ffba61;outline-offset:2px}
.identity-text b{letter-spacing:-.065em}
@media(max-width:410px){.level-selector{padding:10px;margin-bottom:14px}.level-buttons{gap:5px}.level-button{padding:10px 1px;border-radius:8px}.level-button strong{font-size:10px}.level-button span{font-size:10px}.level-heading{font-size:9px}.level-heading .random-label{font-size:9px}}

/* CrownQuest unlimited four-level edition */
.game-tagline {justify-content:center;color:#eedfff;font-size:12px;font-weight:850;letter-spacing:.025em;text-align:center;padding:12px 10px}
.back-games-link{font-size:12px;font-weight:800;text-decoration:none;color:#5142a3;background:#ffffffc9;padding:9px 11px;border-radius:12px;border:1px solid #e8def5;white-space:nowrap}
.back-games-link:hover{background:#fff;color:#6740bf}
@media(max-width:680px){.back-games-link{padding:8px;font-size:11px}}

/* 2026-10-29: LOCK THE BOARD GEOMETRY. Grid tracks cannot grow when a crown or × appears. */
.board {
  width: 100%;
  max-width: 510px;
  aspect-ratio: 1 / 1;
  height: auto;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows: repeat(var(--n), minmax(0, 1fr));
  grid-auto-flow: row;
  align-items: stretch;
  justify-items: stretch;
  contain: layout;
}
.board .cell {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  line-height: 1;
}
.board .cell .crown-svg {
  width: 62%;
  height: 62%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  flex: none;
  pointer-events: none;
}
.board .cell .xmark {display: block; pointer-events: none; width: 100%; text-align: center;}
/* QR codes should occupy one stable centered square even after an image error or tab change. */
.donation-payments {display: block; width: 100%; min-height: 250px; padding-top: 16px;}
.donate-panel {width: 100%; max-width: 100%; margin-inline: auto; align-items: center; text-align: center;}
.donate-panel:not([hidden]) {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;}
.donate-qr-frame {
  box-sizing: border-box;
  position: relative;
  width: min(220px, 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 10px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.donate-qr-frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  flex: 0 0 auto;
  border-radius: 3px;
}
.donate-qr-frame img[hidden] { display: none !important; }
.donate-qr-frame .donate-image-error:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  overflow-wrap: anywhere;
}
.donate-panel .donate-alt-link {display: inline-flex; align-items: center; justify-content: center; overflow-wrap: anywhere;}
@media (max-width: 410px) {
  .donation-payments {min-height: 225px;}
  .donate-qr-frame {width: min(190px, 100%);}
}
/* Do not animate a whole cell's transform: it visually shrinks the grid when marked. */
.board .cell.recent-move { animation: none; }

/* Loading / missing QR state: never show a blank or off-center image box. */
.donate-qr-frame.is-loading::before {
  content: 'Loading QR image…';
  position: absolute;
  inset: 12px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #9487a1;
  background: #f9f7fc;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
}
.donate-qr-frame.is-loading img { opacity: 0; }
.donate-qr-frame.is-ready img { opacity: 1; }

/* STABLE CELL RENDERING: never resize or animate the board due to content */
html{scrollbar-gutter:stable}
.board{inline-size:min(100%,510px);block-size:auto;aspect-ratio:1/1;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:repeat(var(--n),minmax(0,1fr));align-content:stretch;justify-content:stretch;}
.board .cell{box-sizing:border-box;min-width:0;min-height:0;inline-size:100%;block-size:100%;transform:none!important;animation:none!important;contain:layout paint;}
.board .cell .crown-svg{inline-size:60%;block-size:60%;display:block;min-width:0;min-height:0;transform:none!important;}
.board .cell .xmark{line-height:1;}