/* GENERATED by scripts/build-base-css.mjs from the WordPress + GeneratePress styles, keeping only the
   rules the live site uses (audit: src/styles/wp-css-audit.json, all 30 pages). Cascade order = live. */
/* ── wp-img-auto-sizes-contain-inline-css ── */
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
/* ── generatepress.css ── */
.footer-widgets-container{padding:40px}.inside-footer-widgets{display:flex}.inside-footer-widgets>div{flex:1 1 0}.site-footer .footer-widgets-container .inner-padding{padding:0 0 0 40px}.site-footer .footer-widgets-container .inside-footer-widgets{margin-left:-40px}.site-footer:not(.footer-bar-active) .copyright-bar{margin:0 auto}@media (max-width:768px){.inside-footer-widgets{flex-direction:column}.inside-footer-widgets>div:not(:last-child){margin-bottom:40px}.site-footer .footer-widgets .footer-widgets-container .inside-footer-widgets{margin:0}.site-footer .footer-widgets .footer-widgets-container .inner-padding{padding:0}}blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0;border:0}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;margin:0}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}body,button,input,select,textarea{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;text-transform:none;font-size:17px;line-height:1.5}p{margin-bottom:1.5em}h1,h2,h3,h4,h5,h6{font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit}table,td,th{border:1px solid rgba(0,0,0,.1)}table{border-collapse:separate;border-spacing:0;border-width:1px 0 0 1px;margin:0 0 1.5em;width:100%}td,th{padding:8px}th{border-width:0 1px 1px 0}td{border-width:0 1px 1px 0}hr{background-color:rgba(0,0,0,.1);border:0;height:1px;margin-bottom:40px;margin-top:40px}h1{font-size:42px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h2{font-size:35px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h3{font-size:29px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h4{font-size:24px}h4,h5,h6{margin-bottom:20px}ol,ul{margin:0 0 1.5em 3em}ul{list-style:disc}ol{list-style:decimal}li>ol,li>ul{margin-bottom:0;margin-left:1.5em}b,strong{font-weight:700}cite,dfn,em,i{font-style:italic}code,kbd,tt,var{font:15px Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace}table{margin:0 0 1.5em;width:100%}th{font-weight:700}img{height:auto;max-width:100%}button,input[type=button],input[type=reset],input[type=submit]{background:#55555e;color:#fff;border:1px solid transparent;cursor:pointer;-webkit-appearance:button;padding:10px 20px}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{border:1px solid;border-radius:0;padding:10px 15px;max-width:100%}textarea{width:100%}a,button,input{transition:color .1s ease-in-out,background-color .1s ease-in-out}a{text-decoration:none}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#21759b;display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}#primary[tabindex="-1"]:focus{outline:0}.entry-header,.site-content{word-wrap:break-word}.entry-content>p:last-child,.entry-summary>p:last-child,.page-content>p:last-child,.read-more-container,.taxonomy-description p:last-child{margin-bottom:0}.footer-widgets .widget :last-child,.sidebar .widget :last-child{margin-bottom:0}.widget-title{margin-bottom:30px;font-size:20px;line-height:1.5;font-weight:400;text-transform:none}.widget ol,.widget ul{margin:0}.footer-widgets .widget{margin-bottom:30px}.footer-widgets .widget:last-child,.sidebar .widget:last-child{margin-bottom:0}.widget ul li{list-style-type:none;position:relative;margin-bottom:.5em}.site-content{display:flex}.grid-container{margin-left:auto;margin-right:auto;max-width:1200px}.page-header,.sidebar .widget,.site-main>*{margin-bottom:20px}.separate-containers .comments-area,.separate-containers .inside-article,.separate-containers .page-header,.separate-containers .paging-navigation{padding:40px}.separate-containers .site-main{margin:20px}.separate-containers.no-sidebar .site-main{margin-left:0;margin-right:0}.one-container .site-main>:last-child,.separate-containers .site-main>:last-child{margin-bottom:0}.full-width-content .container.grid-container{max-width:100%}.full-width-content.no-sidebar.separate-containers .site-main{margin:0}.full-width-content.one-container .site-content,.full-width-content.separate-containers .inside-article{padding:0}.inside-site-info{display:flex;align-items:center;justify-content:center;padding:20px 40px}.site-info{text-align:center;font-size:15px}.featured-image{line-height:0}.separate-containers .featured-image{margin-top:20px}.container.grid-container{width:auto}@media (max-width:768px){a,body,button,input,select,textarea{transition:all 0s ease-in-out}.site-content{flex-direction:column}.container .site-content .content-area{width:auto}#main{margin-left:0;margin-right:0}}
/* ── wp-block-library-inline-css ── */
:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where([style^=border-color],[style*=";border-color"],[style*="; border-color"]){border-style:solid}

/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */
/* ── wp-block-paragraph-inline-css ── */
/*# sourceURL=https://sudokuleader.com/wp-includes/blocks/paragraph/style.min.css */
/* ── wp-block-separator-inline-css ── */
@charset "UTF-8";.wp-block-separator{border:none;border-top:2px solid}
/*# sourceURL=https://sudokuleader.com/wp-includes/blocks/separator/style.min.css */
/* ── classic-theme-styles-inline-css ── */
/*! This file is auto-generated */
/*# sourceURL=/wp-includes/css/classic-themes.min.css */
/* ── global-styles-inline-css ── */
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--contrast: var(--contrast);--wp--preset--color--contrast-2: var(--contrast-2);--wp--preset--color--contrast-3: var(--contrast-3);--wp--preset--color--base: var(--base);--wp--preset--color--base-2: var(--base-2);--wp--preset--color--base-3: var(--base-3);--wp--preset--color--accent: var(--accent);--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}:where(body) { margin: 0; }body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}
/*# sourceURL=global-styles-inline-css */
/* ── generate-style-inline-css ── */
body{background-color:var(--base-2);color:var(--contrast);}a{color:var(--accent);}a{text-decoration:underline;}.entry-title a, .site-branding a, a.button, .wp-block-button__link, .main-navigation a{text-decoration:none;}a:hover, a:focus, a:active{color:var(--contrast);}:root{--contrast:#222222;--contrast-2:#575760;--contrast-3:#b2b2be;--base:#f0f0f0;--base-2:#f7f8f9;--base-3:#ffffff;--accent:#1e73be;}.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header{background-color:var(--base-3);}.entry-title a:hover{color:var(--contrast-2);}.footer-widgets{background-color:var(--base-3);}.site-info{background-color:var(--base-3);}input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="search"],input[type="tel"],input[type="number"],textarea,select{color:var(--contrast);background-color:var(--base-2);border-color:var(--base);}input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="number"]:focus,textarea:focus,select:focus{color:var(--contrast);background-color:var(--base-2);border-color:var(--contrast-3);}button,html input[type="button"],input[type="reset"],input[type="submit"],a.button,a.wp-block-button__link:not(.has-background){color:#ffffff;background-color:#55555e;}button:hover,html input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover,a.button:hover,button:focus,html input[type="button"]:focus,input[type="reset"]:focus,input[type="submit"]:focus,a.button:focus,a.wp-block-button__link:not(.has-background):active,a.wp-block-button__link:not(.has-background):focus,a.wp-block-button__link:not(.has-background):hover{color:#ffffff;background-color:#3f4047;}:root{--gp-search-modal-bg-color:var(--base-3);--gp-search-modal-text-color:var(--contrast);--gp-search-modal-overlay-bg-color:rgba(0,0,0,0.2);}@media (max-width:768px){.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header{padding:30px;}.footer-widgets-container{padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;}.inside-site-info{padding-right:30px;padding-left:30px;}}/* End cached CSS */.site-content .content-area{width:100%;}
/*# sourceURL=generate-style-inline-css */

/* ── Master Custom CSS (single source: ../src/Master Custom CSS.css) ── */
/* Master Custom CSS · GENERATED from src/Master Custom CSS.css by scripts/build-live.js — edit the source, not this file */
*, *::before, *::after { -webkit-tap-highlight-color: transparent !important; }
.site, #page, #content, .site-content, .inside-article, .site-main, .entry-content, .inside-header, .site-header-wrapper, .main-navigation, .inside-navigation {
background: transparent !important;
}
html, body { background-color: #f8fafc !important; }
body {
background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
background-attachment: fixed !important;
color: #1e293b !important;
line-height: 1.6 !important;
transition: background 0.3s ease, background-color 0.3s ease, color 0.3s ease !important;
}
html:has(body.dark-theme-page),
body.dark-theme-page {
background: #0f172a !important;
color-scheme: dark !important;
color: #f8fafc !important;
}
body, h1, h2, h3, h4, h5, h6, p, a, span, div, li, ul, ol, blockquote, input, select, textarea, button, table, th, td { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f8fafc; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
p, li, blockquote, figcaption { color: #334155 !important; }
h1, h2, h3, h4, h5, h6, .widget-title { color: #4c1d95 !important; font-weight: 900 !important; line-height: 1.2 !important; }
.widget-title { font-size: 22px !important; margin-bottom: 20px !important; }
a { color: #8b5cf6; text-decoration: none; font-weight: 700; transition: all 0.3s ease; } a:hover { color: #3b82f6; }
.title-divider { height: 4px; width: 60px; border-radius: 10px; background: linear-gradient(90deg, #3b82f6, #8b5cf6); }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], textarea { background: #f8fafc !important; border: 2px solid #e2e8f0 !important; border-radius: 12px !important; color: #1e293b !important; padding: 12px 16px !important; outline: none !important; transition: all 0.3s ease !important; box-sizing: border-box; width: 100%; }
input:focus, textarea:focus { border-color: #8b5cf6 !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important; }
button:where(:not(.key)), input[type="button"], input[type="reset"], input[type="submit"], .button, .search-submit { background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important; color: #ffffff !important; border: none !important; border-radius: 16px !important; padding: 12px 20px !important; font-weight: 800 !important; cursor: pointer; transition: all 0.3s ease !important; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3) !important; user-select: none; touch-action: manipulation; will-change: transform; }
button:where(:not(.key)):hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button:hover, .search-submit:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4) !important; }
.btn-secondary { padding: 12px 20px; border-radius: 16px !important; font-weight: 800 !important; cursor: pointer; transition: all 0.3s ease; font-size: 14px; background: #f1f5f9 !important; color: #475569 !important; border: 2px solid #cbd5e1 !important; user-select: none; }
.btn-secondary:hover { background: #e2e8f0 !important; transform: translateY(-2px); }
.btn-notes-active { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; color: white !important; border-color: #2563eb !important; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important; }
.btn-notes-active:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; color: white !important; transform: translateY(-2px); }
.btn-notes-active:active { transform: translateY(0) scale(0.97); }
.btn-secondary:focus:not(:focus-visible) { outline: none; }
.btn-secondary:focus-visible { outline: 3px solid #8b5cf6; outline-offset: 2px; }
.btn-edit-profile { background: #faf5ff !important; color: #7c3aed !important; border-color: #e9d5ff !important; display: inline-flex; align-items: center !important; justify-content: center !important; gap: 6px !important; text-align: center !important; }
.btn-edit-profile:hover { background: #f3e8ff !important; border-color: #ddd6fe !important; }
body.dark-theme-page .btn-edit-profile { background: #1e293b !important; color: #c4b5fd !important; border-color: #475569 !important; }
body.dark-theme-page .btn-edit-profile:hover { background: #0f172a !important; border-color: #7c3aed !important; }
.sm-achievements-section { margin-top: 15px; margin-bottom: 15px; border-top: 1px solid #e2e8f0; padding-top: 12px; }
.sm-achievements-section summary { cursor: pointer; font-size: 14px; font-weight: 800; color: #4c1d95; padding: 4px 0; list-style: none; outline: none; display: flex; align-items: center; gap: 8px; user-select: none; }
.sm-achievements-section summary::-webkit-details-marker { display: none; }
.sm-achievements-section summary::before { content: '▶'; font-size: 10px; color: #8b5cf6; transition: transform 0.2s; }
.sm-achievements-section[open] summary::before { transform: rotate(90deg); }
.sm-ach-count { background: #f3e8ff; color: #7c3aed; padding: 2px 10px; border-radius: 50px; font-size: 11px; font-weight: 900; margin-left: auto; }
.sm-badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; padding-top: 12px; }
.sm-badge-card { display: flex; flex-direction: column; align-items: center; padding: 12px 6px; border-radius: 12px; text-align: center; transition: transform 0.2s, box-shadow 0.2s; cursor: help; }
.sm-badge-card:hover { transform: translateY(-2px); }
.sm-badge-icon { font-size: 30px; line-height: 1; margin-bottom: 6px; }
.sm-badge-name { font-size: 9px; font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.3px; }
.sm-badge-unlocked { background: linear-gradient(145deg, #faf5ff, #f3e8ff); border: 1px solid #e9d5ff; box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1); }
.sm-badge-unlocked .sm-badge-name { color: #4c1d95; }
.sm-badge-locked { background: #f8fafc; border: 1px solid #e2e8f0; }
.sm-badge-locked .sm-badge-icon { filter: grayscale(1) opacity(0.4); }
.sm-badge-locked .sm-badge-name { color: #94a3b8; }
body.dark-theme-page .sm-achievements-section { border-top-color: #334155; }
body.dark-theme-page .sm-achievements-section summary { color: #c4b5fd; }
body.dark-theme-page .sm-achievements-section summary::before { color: #c4b5fd; }
body.dark-theme-page .sm-ach-count { background: #1e1b4b; color: #c4b5fd; }
body.dark-theme-page .sm-badge-unlocked { background: linear-gradient(145deg, #1e1b4b, #312e81); border-color: #4c1d95; }
body.dark-theme-page .sm-badge-unlocked .sm-badge-name { color: #e9d5ff; }
body.dark-theme-page .sm-badge-locked { background: #0f172a; border-color: #334155; }
body.dark-theme-page .sm-badge-locked .sm-badge-name { color: #475569; }
.sm-achievement-toast { position: fixed; bottom: 24px; right: 24px; z-index: 10000; display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, #ffffff, #faf5ff); border: 2px solid #c4b5fd; border-radius: 16px; padding: 14px 20px; box-shadow: 0 12px 40px rgba(139, 92, 246, 0.3); min-width: 280px; max-width: 360px; transform: translateX(420px); opacity: 0; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s; }
.sm-achievement-toast.sm-ach-toast-show { transform: translateX(0); opacity: 1; }
.sm-ach-toast-icon { font-size: 40px; line-height: 1; flex-shrink: 0; animation: smBadgeBounce 0.6s ease-out; }
@keyframes smBadgeBounce { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
.sm-ach-toast-body { flex: 1; min-width: 0; }
.sm-ach-toast-title { font-size: 11px; font-weight: 900; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.8px; }
.sm-ach-toast-name { font-size: 16px; font-weight: 900; color: #1e293b; line-height: 1.2; margin-top: 2px; }
.sm-ach-toast-desc { font-size: 12px; font-weight: 600; color: #64748b; margin-top: 3px; line-height: 1.3; }
body.dark-theme-page .sm-achievement-toast { background: linear-gradient(135deg, #1e293b, #312e81); border-color: #7c3aed; }
body.dark-theme-page .sm-ach-toast-name { color: #f8fafc; }
body.dark-theme-page .sm-ach-toast-desc { color: #94a3b8; }
.sm-ach-learnmore-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #8b5cf6; text-decoration: none; padding: 6px 14px; border: 1px solid #ddd6fe; border-radius: 50px; background: #faf5ff; transition: all 0.2s ease; }
.sm-ach-learnmore-link:hover { background: #ede9fe; border-color: #8b5cf6; transform: translateY(-1px); }
body.dark-theme-page .sm-ach-learnmore-link { background: #1e293b; border-color: #334155; color: #a78bfa; }
body.dark-theme-page .sm-ach-learnmore-link:hover { background: #0f172a; border-color: #a78bfa; }
body.dark-theme-page #sm_user_info span { color: #c4b5fd !important; }
body.dark-theme-page .sm-table td > span[onclick*="sm_copyId"] {
background: #2e1065 !important;
color: #c4b5fd !important;
border-color: #4c1d95 !important;
}
body.dark-theme-page #sm_modalAuthBox {
background: #0f172a !important;
border-color: #334155 !important;
color: #cbd5e1 !important;
}
body.dark-theme-page #sm_modalAuthBox p,
body.dark-theme-page #sm_modalAuthBox span { color: #cbd5e1 !important; }
@media (max-width: 480px) {
.sm-achievement-toast { left: 12px; right: 12px; bottom: 12px; min-width: auto; max-width: none; }
}
.utility-container { max-width: 1200px; margin: 0 auto; padding: 60px 20px 30px 20px; box-sizing: border-box; }
.sm-dashboard-wrapper { display: flex; gap: 25px; align-items: flex-start; justify-content: center; margin: 20px auto; max-width: 1100px; }
.sm-app-container { background: #ffffff; padding: 25px; border-radius: 24px; box-shadow: 0 15px 35px rgba(139, 92, 246, 0.08); border: 1px solid #ede9fe; transition: background-color 0.3s ease, border-color 0.3s ease; }
.board-scroll-wrapper { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 10px; margin-bottom: 5px; }
.board-scroll-wrapper::-webkit-scrollbar { height: 6px; } .board-scroll-wrapper::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.puzzle-id-badge, .mistake-badge, .timer-container { border-radius: 12px; border-width: 1px; border-style: solid; text-align: center; }
.progress-container { width: 100%; max-width: 420px; height: 8px; background: #f1f5f9; border-radius: 10px; margin: 0 auto 15px auto; overflow: hidden; border: 1px solid #e2e8f0; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #8b5cf6); width: 0%; transition: width 0.4s ease-out; }
.sm-controls-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 20px !important; align-items: center !important; }
.sm-controls-col { display: flex !important; flex-direction: column !important; gap: 15px !important; }
.sm-control-row { display: flex !important; align-items: center !important; gap: 15px !important; }
.sm-control-label { font-size: 15px !important; font-weight: 900 !important; color: #7c3aed !important; text-transform: uppercase !important; width: 60px !important; text-align: left !important; }
.puzzle-id-badge span, .mistake-badge span, .timer-container span { opacity: 1 !important; }
.timer-container { color: #047857 !important; }
.mistake-badge   { color: #b91c1c !important; }
.sm-control-select {
flex: 1 !important; text-align: center !important; font-weight: 800 !important; font-size: 16px !important; cursor: pointer !important;
background-color: #ffffff !important; border: 2px solid #e2e8f0 !important; padding: 0 35px 0 15px !important; color: #1e293b !important; outline: none !important; transition: all 0.3s ease !important;
height: 48px !important; box-sizing: border-box !important;
appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; border-radius: 12px !important;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important; background-position: right 15px center !important; background-size: 14px !important;
}
.sm-control-select:hover, .sm-control-select:focus { border-color: #8b5cf6 !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important; }
#sm_btn_new { height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 20px !important; margin: 0 !important; border-radius: 16px !important; box-sizing: border-box !important; font-size: 16px !important; }
.paste-id-box {
display: flex !important; align-items: stretch !important; height: 48px !important; padding: 0 !important; margin: 0 !important;
border-radius: 16px !important; border: 2px solid #e2e8f0 !important; background: #f8fafc !important; box-sizing: border-box !important; overflow: hidden !important; width: 100% !important;
}
.paste-id-box input {
flex: 1 !important; height: 100% !important; border: none !important; background: transparent !important; padding: 0 15px !important;
font-size: 14px !important; font-weight: 700 !important; color: #4c1d95 !important; margin: 0 !important; box-shadow: none !important; outline: none !important; min-width: 0 !important; border-radius: 0 !important;
}
.paste-id-box button {
height: 100% !important; border-radius: 0 !important; margin: 0 !important; padding: 0 20px !important; border: none !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important;
}
.paste-id-box button:hover {
transform: none !important;
box-shadow: none !important;
filter: brightness(1.15) !important;
}
.board { display: grid; gap: 0; border: 3px solid #4c1d95; border-radius: 12px; overflow: hidden; background: #ffffff; margin-bottom: 0; box-sizing: border-box; touch-action: manipulation; user-select: none; width: 100%; aspect-ratio: 1 / 1; transition: background-color 0.3s ease, border-color 0.3s ease; }
.cell { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-weight: 800; color: #3b82f6; cursor: pointer; border-right: 1px solid #94a3b8; border-bottom: 1px solid #94a3b8; transition: background 0.15s ease, color 0.15s ease; box-sizing: border-box; position: relative; user-select: none; }
.cell.fixed { color: #1e293b; font-weight: 900; }
.cell.selected { background: #8b5cf6 !important; color: #ffffff !important; box-shadow: inset 0 0 0 2px #4c1d95; }
.cell.highlight-group { background: #e9d5ff !important; }
.cell.highlight-match { background: #fde047 !important; color: #9a3412 !important; font-weight: 900 !important; }
.error-cell { color: #ef4444 !important; font-weight: 900 !important; background-color: #fee2e2 !important; }
@keyframes shake { 0%, 100% {transform: translateX(0);} 25% {transform: translateX(-4px);} 75% {transform: translateX(4px);} }
.shake-anim { animation: shake 0.3s ease; }
.board.s4 { grid-template-rows: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.board.s6 { grid-template-rows: repeat(6, minmax(0, 1fr)); grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.board.s9 { grid-template-rows: repeat(9, minmax(0, 1fr)); grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
.board.s12 { grid-template-rows: repeat(12, minmax(0, 1fr)); grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
.board.s16 { grid-template-rows: repeat(16, minmax(0, 1fr)); grid-template-columns: repeat(16, minmax(0, 1fr)) !important; min-width: 450px; }
.board.s25 { grid-template-rows: repeat(25, minmax(0, 1fr)); grid-template-columns: repeat(25, minmax(0, 1fr)) !important; min-width: 650px; }
.board.s4 .cell { font-size: 28px; } .board.s4 .cell:nth-child(2n):not(:nth-child(4n)) { border-right: 2px solid #4c1d95 !important; } .board.s4 .cell:nth-child(n+5):nth-child(-n+8) { border-bottom: 2px solid #4c1d95 !important; }
.board.s6 .cell { font-size: 24px; } .board.s6 .cell:nth-child(3n):not(:nth-child(6n)) { border-right: 2px solid #4c1d95 !important; } .board.s6 .cell:nth-child(n+7):nth-child(-n+12), .board.s6 .cell:nth-child(n+19):nth-child(-n+24) { border-bottom: 2px solid #4c1d95 !important; }
.board.s9 .cell { font-size: 22px; }
.board.s9:not(.jigsaw-board) .cell:nth-child(3n):not(:nth-child(9n)) { border-right: 2px solid #4c1d95 !important; }
.board.s9:not(.jigsaw-board) .cell:nth-child(n+19):nth-child(-n+27), .board.s9:not(.jigsaw-board) .cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid #4c1d95 !important; }
.board.s12 .cell { font-size: 16px; } .board.s12 .cell:nth-child(4n):not(:nth-child(12n)) { border-right: 2px solid #4c1d95 !important; } .board.s12 .cell:nth-child(n+25):nth-child(-n+36), .board.s12 .cell:nth-child(n+61):nth-child(-n+72), .board.s12 .cell:nth-child(n+97):nth-child(-n+108) { border-bottom: 2px solid #4c1d95 !important; }
.board.s16 .cell { font-size: 15px; letter-spacing: -0.5px; } .board.s16 .cell:nth-child(4n):not(:nth-child(16n)) { border-right: 2px solid #4c1d95 !important; } .board.s16 .cell:nth-child(n+49):nth-child(-n+64), .board.s16 .cell:nth-child(n+113):nth-child(-n+128), .board.s16 .cell:nth-child(n+177):nth-child(-n+192) { border-bottom: 2px solid #4c1d95 !important; }
.board.s25 .cell { font-size: 12px; } .board.s25 .cell:nth-child(5n):not(:nth-child(25n)) { border-right: 2px solid #0f172a !important; } .board.s25 .cell:nth-child(n+101):nth-child(-n+125), .board.s25 .cell:nth-child(n+226):nth-child(-n+250), .board.s25 .cell:nth-child(n+351):nth-child(-n+375), .board.s25 .cell:nth-child(n+476):nth-child(-n+500) { border-bottom: 2px solid #0f172a !important; }
.board.s4 .cell:nth-child(4n), .board.s6 .cell:nth-child(6n), .board.s9 .cell:nth-child(9n), .board.s12 .cell:nth-child(12n), .board.s16 .cell:nth-child(16n), .board.s25 .cell:nth-child(25n) { border-right: none !important; }
.board.s4 .cell:nth-last-child(-n+4), .board.s6 .cell:nth-last-child(-n+6), .board.s9 .cell:nth-last-child(-n+9), .board.s12 .cell:nth-last-child(-n+12), .board.s16 .cell:nth-last-child(-n+16), .board.s25 .cell:nth-last-child(-n+25) { border-bottom: none !important; }
.action-btn-group { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; min-height: 38px; width: 100%; box-sizing: border-box; }
.action-btn-group button { flex: 1; }
.keypad-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 5px 0; box-sizing: border-box; }
.key { flex: 1 1 50px; height: 56px; display: flex; justify-content: center; align-items: center; font-size: 26px; font-weight: 900; font-family: inherit; background: #f8fafc; color: #4c1d95; border-radius: 12px; cursor: pointer; border: 2px solid #e2e8f0; transition: all 0.2s ease; user-select: none; touch-action: manipulation; -webkit-appearance: none; appearance: none; padding: 0; line-height: 1; }
.key:focus { outline: none; }
.key:focus-visible { outline: 3px solid #8b5cf6; outline-offset: 2px; }
.key:hover { background: #f1f5f9; border-color: #8b5cf6; color: #8b5cf6; transform: translateY(-2px); }
.key:active { transform: scale(0.9); }
.key-clear { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }
@keyframes smSuccessPulse {
0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
35%  { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.sm-success-pulse { animation: smSuccessPulse 0.5s ease-out; }
@media (prefers-reduced-motion: reduce) {
.cell, .board, .key, .progress-fill,
.btn-primary, .btn-secondary, .btn-auth-google, .btn-auth-logout,
.sm-theme-toggle-knob, .puzzle-id-badge { transition: none !important; }
.shake-anim, .sm-success-pulse { animation: none !important; }
}
.keypad-container.s12-keys .key { flex: 1 1 20%; max-width: 60px; }
.keypad-container.s25-keys .key { flex: 1 1 12%; max-width: 45px; height: 38px; font-size: 14px; }
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; padding: 2px; box-sizing: border-box; }
.note-num { font-size: 9px; line-height: 1; text-align: center; color: #64748b; font-weight: 800; display: flex; justify-content: center; align-items: center; }
.cell.selected .note-num { color: #ffffff !important; }
.cell.highlight-match .note-num { color: #9a3412 !important; }
.board.s4 .notes-grid, .board.s6 .notes-grid { grid-template-columns: repeat(2, 1fr); }
.board.s12 .cell, .board.s16 .cell, .board.s25 .cell, .board.s21 .cell {
overflow: hidden; container-type: size;
}
.board.s12 .notes-grid, .board.s16 .notes-grid, .board.s25 .notes-grid, .board.s21 .notes-grid {
display: grid; width: 100%; height: 100%; padding: 0; gap: 0;
grid-template-columns: repeat(var(--nc, 3), 1fr);
grid-auto-rows: 1fr; place-items: center; align-content: center;
}
.board.s12 .note-num, .board.s16 .note-num, .board.s25 .note-num, .board.s21 .note-num {
font-size: min(calc(65cqw / var(--nc, 3)), calc(82cqh / var(--nr, 2)));
line-height: 1; letter-spacing: -0.5px;
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%; overflow: hidden;
}
.sm-notes-pill {
display: flex; flex-direction: column; gap: 2px;
width: 100%; box-sizing: border-box;
padding: 7px 11px; border-radius: 12px;
background: #faf5ff; border: 1px solid #ddd6fe;
}
.sm-notes-pill-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #8b5cf6; }
.sm-notes-pill-val { font-size: 15px; font-weight: 800; color: #4c1d95; line-height: 1.3; word-break: break-word; }
body.dark-theme-page .sm-notes-pill { background: #1e1b4b; border-color: #4c1d95; }
body.dark-theme-page .sm-notes-pill-label { color: #a78bfa; }
body.dark-theme-page .sm-notes-pill-val { color: #e9d5ff; }
.sm-lb-sidebar { flex: 1; min-width: 320px; background: #ffffff; padding: 25px; border-radius: 24px; box-shadow: 0 15px 35px rgba(99, 102, 241, 0.05); border: 1px solid #ede9fe; margin-top: 0; transition: background-color 0.3s ease, border-color 0.3s ease; }
.sm-table-wrapper { overflow-x: auto; margin-top: 15px; padding-bottom: 5px; width: 100%; }
.sm-table { width: 100%; border-collapse: collapse; min-width: 100%; white-space: nowrap; }
.sm-table th { background: #f8fafc; color: #64748b; padding: 12px 8px; font-size: 12px; text-transform: uppercase; border-bottom: 2px solid #e2e8f0; text-align: center; transition: background-color 0.3s ease, border-color 0.3s ease; }
.sm-table td { padding: 12px 8px; border-bottom: 1px solid #e2e8f0 !important; font-weight: 700; color: #334155; font-size: 14px; text-align: center; transition: border-color 0.3s ease, color 0.3s ease; }
.sm-table td.text-left { text-align: left; padding-right: 5px; }
.lb-avatar { width: 28px !important; height: 28px !important; border-radius: 50% !important; margin-right: 8px; border: 2px solid #ddd6fe; vertical-align: middle; object-fit: cover !important; display: inline-block; }
.lb-name { font-weight: 800; color: #4c1d95; cursor: pointer; text-decoration: none; display: inline-block; vertical-align: middle; white-space: nowrap; margin-right: 28px; }
.sm-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(5px); justify-content: center; align-items: center; z-index: 9999; padding: 20px; box-sizing: border-box; }
.modalBox {
background: #ffffff !important; padding: 25px !important; border-radius: 24px !important; width: 100% !important;
max-width: 440px !important; max-height: 85vh !important; overflow-y: auto !important; overflow-x: hidden !important;
box-sizing: border-box !important; box-shadow: 0 25px 50px rgba(0,0,0,0.2) !important; animation: smModalPop 0.3s forwards;
position: relative; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; transition: background-color 0.3s ease;
}
@keyframes smModalPop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.modalBox::-webkit-scrollbar { width: 6px !important; }
.modalBox::-webkit-scrollbar-track { background: transparent !important; margin-top: 24px !important; margin-bottom: 24px !important; }
.modalBox::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 10px !important; }
.profile-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 15px; }
.profile-avatar { width: 60px !important; height: 60px !important; border-radius: 50% !important; border: 3px solid #e9d5ff; margin-bottom: 8px; object-fit: cover !important; display: none; }
.profile-name { font-size: 20px; font-weight: 900; color: #4c1d95; text-align: center; margin-bottom: 5px; }
.sm-badge { padding: 4px 10px; border-radius: 50px; font-size: 11px; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; display: inline-block; margin-bottom: 10px; }
.badge-novice { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }
.badge-apprentice { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.badge-advanced { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; }
.badge-expert { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.badge-grandmaster { background: #fdf4ff; color: #c026d3; border: 1px solid #fbcfe8; }
.badge-leader { background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706); color: #ffffff; border: 1px solid #b45309; box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
.badge-legend, .badge-champion, .badge-worldleader { position: relative; overflow: hidden; border-radius: 50px; }
.badge-legend      { background: linear-gradient(135deg, #f4c08a 0%, #d98a3f 42%, #9c5a23 100%); color: #ffffff; border: 1px solid #b9783a; text-shadow: 0 1px 1px rgba(0,0,0,0.3); box-shadow: 0 0 12px rgba(205,127,50,0.5), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 4px rgba(0,0,0,0.18); }
.badge-champion    { background: linear-gradient(135deg, #ffffff 0%, #ccd1d6 44%, #90969d 100%); color: #2f3438; border: 1px solid #9aa1ab; text-shadow: 0 1px 1px rgba(255,255,255,0.5); box-shadow: 0 0 12px rgba(138,147,160,0.55), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -2px 4px rgba(0,0,0,0.12); }
.badge-worldleader { background: linear-gradient(135deg, #ffe9a3 0%, #f5b829 42%, #c8830a 100%); color: #ffffff; border: 1px solid #cf9112; text-shadow: 0 1px 1px rgba(0,0,0,0.28); box-shadow: 0 0 14px rgba(255,184,20,0.6), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 4px rgba(0,0,0,0.18); }
table:has(> tbody#sm_lbBody), table:has(> tbody#sm_globalLbBody) { border-collapse: separate; border-spacing: 0 6px; }
.lb-name.sm-rank-1 { --m1:#a16207; --m2:#eab308; --m3:#fef3c7; }
.lb-name.sm-rank-2 { --m1:#5b6675; --m2:#95a1b1; --m3:#f8fafc; }
.lb-name.sm-rank-3 { --m1:#8a2f10; --m2:#bd6a34; --m3:#fde3c8; }
body.dark-theme-page .lb-name.sm-rank-1 { --m1:#ca8a04; --m2:#facc15; --m3:#fffbeb; }
body.dark-theme-page .lb-name.sm-rank-2 { --m1:#94a3b8; --m2:#cbd5e1; --m3:#ffffff; }
body.dark-theme-page .lb-name.sm-rank-3 { --m1:#d9834a; --m2:#e8a06a; --m3:#fff1e2; }
.lb-name.sm-rank-1, .lb-name.sm-rank-2, .lb-name.sm-rank-3 {
color: var(--m1) !important; font-weight: 900 !important; letter-spacing: .2px;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.lb-name.sm-rank-1, .lb-name.sm-rank-2, .lb-name.sm-rank-3 {
background-image: linear-gradient(100deg, var(--m1) 0%, var(--m2) 38%, var(--m3) 48%, var(--m2) 58%, var(--m1) 100%);
background-size: 280% 100%; background-position: 100% 0; background-repeat: no-repeat;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent !important; color: transparent !important;
animation: smFoil 6s linear infinite;
}
}
@keyframes smFoil { 0% { background-position: 100% 0; } 12%, 100% { background-position: 0 0; } }
.lb-name.sm-rank-2 { animation-delay: .45s; }
.lb-name.sm-rank-3 { animation-delay: .9s; }
@media (prefers-reduced-motion: reduce) {
.lb-name.sm-rank-1, .lb-name.sm-rank-2, .lb-name.sm-rank-3 { animation: none; background-position: 0 0; }
}
.stats-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.stat-box { padding: 10px 5px; border-radius: 12px; text-align: center; }
.stat-box.purple { background: #faf5ff; border: 1px solid #e9d5ff; }
.stat-box.green { background: #f0fdf4; border: 1px solid #bbf7d0; }
.stat-box.orange { background: #fff7ed; border: 1px solid #fed7aa; }
.stat-val { font-size: 20px; font-weight: 900; }
.stat-label { font-size: 10px; font-weight: 900; text-transform: uppercase; }
.stat-box.purple .stat-val { color: #4c1d95; } .stat-box.purple .stat-label { color: #8b5cf6; }
.stat-box.green .stat-val { color: #059669; } .stat-box.green .stat-label { color: #10b981; }
.stat-box.orange .stat-val { color: #ea580c; } .stat-box.orange .stat-label { color: #f97316; }
.battle-btn { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; border: 2px solid #ede9fe !important; border-radius: 24px !important; padding: 30px 15px !important; text-decoration: none !important; color: #4c1d95 !important; font-weight: 800 !important; font-size: 18px !important; box-shadow: 0 10px 25px rgba(139, 92, 246, 0.1) !important; transition: all 0.3s ease !important; will-change: transform !important; text-align: center !important; }
.battle-btn:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2) !important; border-color: #a78bfa !important; color: #7c3aed !important; }
.battle-icon { font-size: 48px !important; margin-bottom: 15px !important; transition: transform 0.3s !important; }
.battle-btn:hover .battle-icon { transform: scale(1.15) rotate(5deg) !important; }
.print-preview-box, .giant-preview-box, .jigsaw-preview-box, .dodeca-preview-box, .titan-preview-box { position: relative; width: 140px; height: 140px; margin: 0 auto 20px auto; background: #ffffff; border: 4px solid #8b5cf6; display: grid; box-shadow: 0 0 20px rgba(139, 92, 246, 0.2); transition: transform 0.3s ease; }
.print-preview-box:hover, .giant-preview-box:hover, .jigsaw-preview-box:hover, .dodeca-preview-box:hover, .titan-preview-box:hover { transform: scale(1.05) rotate(2deg); }
.titan-preview-box { border-color: #0891b2; box-shadow: 0 0 20px rgba(8, 145, 178, 0.2); grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); }
.giant-preview-box { border-color: #f59e0b; box-shadow: 0 0 20px rgba(245, 158, 11, 0.2); grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); }
.dodeca-preview-box { border-color: #8b5cf6; box-shadow: 0 0 20px rgba(139, 92, 246, 0.2); grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
.jigsaw-preview-box { border-color: #0f172a; box-shadow: 0 0 20px rgba(15, 23, 42, 0.2); grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.interlink-card { transition: transform 0.2s, border-color 0.2s; background: #ffffff; border: 2px solid #e2e8f0; will-change: transform; }
.interlink-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-color: #8b5cf6; }
.gp-cell, .dp-cell, .tp-cell, .jp-cell { border: 1px dashed #cbd5e1; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #94a3b8; }
.gp-cell, .dp-cell { font-size: 14px; }
body.dark-theme-page p, body.dark-theme-page li, body.dark-theme-page blockquote { color: #cbd5e1 !important; }
body.dark-theme-page h1, body.dark-theme-page h2, body.dark-theme-page h3, body.dark-theme-page h4 { color: #f8fafc !important; }
body.dark-theme-page .site-footer,
body.dark-theme-page .site-info {
background-color: #0f172a !important; border-color: #334155 !important; color: #94a3b8 !important;
}
body.dark-theme-page input, body.dark-theme-page textarea { background: #1e293b !important; border-color: #475569 !important; color: #f8fafc !important; }
body.dark-theme-page .sm-control-select { background-color: #1e293b !important; border-color: #475569 !important; color: #f8fafc !important; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23f8fafc' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
body.dark-theme-page .sm-control-label { color: #a78bfa !important; }
body.dark-theme-page .paste-id-box { background: #1e293b !important; border-color: #334155 !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark),
body.dark-theme-page .sm-controls,
body.dark-theme-page .sm-lb-sidebar,
body.dark-theme-page .modalBox,
body.dark-theme-page .ig-edit-box { background: #1e293b !important; border-color: #334155 !important; }
body.dark-theme-page .puzzle-id-badge, body.dark-theme-page .mistake-badge, body.dark-theme-page .timer-container { background: #0f172a !important; border-color: #475569 !important; color: #94a3b8 !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark) .board { background: #0f172a !important; border-color: #4c1d95 !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark) .cell { border-color: #334155 !important; background: #1e293b !important; color: #8b5cf6 !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark) .cell.fixed { background: #0f172a !important; color: #f8fafc !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark) .cell.highlight-group { background: #1e1b4b !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark) .cell.highlight-match { background: #3b82f6 !important; color: #ffffff !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark) .cell.selected { background: #8b5cf6 !important; color: #ffffff !important; box-shadow: inset 0 0 0 2px #c4b5fd !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark) .cell.error-cell { background-color: #450a0a !important; color: #ef4444 !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark) .board.s25 .cell { color: #8b5cf6 !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark) .board.s25 .cell.fixed { color: #f8fafc !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark) .board.s25 .cell.selected { color: #ffffff !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark) .board.s25 .cell.highlight-match { color: #ffffff !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark) .board.s25 .cell.error-cell { color: #ef4444 !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark) .board.s25 .cell:nth-child(5n):not(:nth-child(25n)) { border-right: 2px solid #4c1d95 !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark) .board.s25 .cell:nth-child(n+101):nth-child(-n+125),
body.dark-theme-page .sm-app-container:not(.ignore-dark) .board.s25 .cell:nth-child(n+226):nth-child(-n+250),
body.dark-theme-page .sm-app-container:not(.ignore-dark) .board.s25 .cell:nth-child(n+351):nth-child(-n+375),
body.dark-theme-page .sm-app-container:not(.ignore-dark) .board.s25 .cell:nth-child(n+476):nth-child(-n+500) { border-bottom: 2px solid #4c1d95 !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark) .note-num { color: #94a3b8 !important; }
body.dark-theme-page .sm-app-container:not(.ignore-dark) .cell.selected .note-num,
body.dark-theme-page .sm-app-container:not(.ignore-dark) .cell.highlight-match .note-num { color: #ffffff !important; }
body.dark-theme-page .key, body.dark-theme-page .btn-secondary { background: #0f172a !important; border-color: #475569 !important; color: #f8fafc !important; }
body.dark-theme-page .key:hover { background: #1e293b !important; border-color: #a78bfa !important; }
body.dark-theme-page .sm-table th { background: #0f172a !important; color: #94a3b8 !important; border-bottom-color: #334155 !important; }
body.dark-theme-page .sm-table td { border-bottom-color: #334155 !important; color: #cbd5e1 !important; }
body.dark-theme-page .lb-name, body.dark-theme-page .profile-name { color: #a78bfa !important; }
body.dark-theme-page .stat-box.purple { background: #2e1065 !important; border-color: #4c1d95 !important; }
body.dark-theme-page .stat-box.green { background: #064e3b !important; border-color: #047857 !important; }
body.dark-theme-page .stat-box.orange { background: #7c2d12 !important; border-color: #9a3412 !important; }
body.dark-theme-page .stat-val { color: #f8fafc !important; }
body.dark-theme-page .battle-btn { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important; }
body.dark-theme-page .battle-btn:hover { border-color: #8b5cf6 !important; color: #a78bfa !important; }
body.dark-theme-page .print-lab-card, body.dark-theme-page .giant-lab-card, body.dark-theme-page .jigsaw-lab-card, body.dark-theme-page .dodeca-lab-card, body.dark-theme-page .titan-lab-card, body.dark-theme-page .interlink-card { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; }
body.dark-theme-page .print-preview-box, body.dark-theme-page .giant-preview-box, body.dark-theme-page .jigsaw-preview-box, body.dark-theme-page .dodeca-preview-box, body.dark-theme-page .titan-preview-box { background: #0f172a !important; }
.sm-theme-toggle {
position: absolute !important;
top: 50% !important;
right: 20px !important;
transform: translateY(-50%) !important;
height: 30px !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
cursor: pointer !important;
z-index: 100 !important;
line-height: 0 !important;
box-shadow: none !important;
}
.sm-theme-toggle:hover,
.sm-theme-toggle:focus,
.sm-theme-toggle:active {
transform: translateY(-50%) !important;
background: transparent !important;
box-shadow: none !important;
}
.sm-theme-toggle-track {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 60px;
height: 30px;
padding: 0 7px;
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
border: 1px solid #c4b5fd;
border-radius: 50px;
box-sizing: border-box;
box-shadow: inset 0 1px 3px rgba(76, 29, 149, 0.08);
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.25s ease;
}
.sm-theme-toggle:hover .sm-theme-toggle-track {
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15), inset 0 1px 3px rgba(76, 29, 149, 0.08);
}
.sm-theme-toggle-svg {
width: 14px;
height: 14px;
flex-shrink: 0;
position: relative;
z-index: 1;
transition: opacity 0.3s ease, color 0.3s ease;
}
.sm-theme-toggle-sun  { color: #f59e0b; }
.sm-theme-toggle-moon { color: #4c1d95; opacity: 0.45; }
.sm-theme-toggle-knob {
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
z-index: 2;
}
body.dark-theme-page .sm-theme-toggle-track {
background: linear-gradient(135deg, #1e293b, #0f172a);
border-color: #475569;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
body.dark-theme-page .sm-theme-toggle-knob {
left: calc(100% - 25px);
background: linear-gradient(135deg, #fbbf24, #f59e0b);
box-shadow: 0 0 8px rgba(251, 191, 36, 0.5), 0 2px 5px rgba(0, 0, 0, 0.3);
}
body.dark-theme-page .sm-theme-toggle-sun  { color: #fcd34d; opacity: 0.4; }
body.dark-theme-page .sm-theme-toggle-moon { color: #e2e8f0; opacity: 1; }
body.dark-theme-page .sm-theme-toggle:hover .sm-theme-toggle-track {
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
#sm_keypad, #evl_keypad, #jig_keypad, #klr_keypad, #sam_keypad {
min-height: 46px;
}
@media (max-width: 768px) {
.sm-dashboard-wrapper { flex-direction: column; align-items: stretch; }
.sm-controls, .sm-app-container, .sm-lb-sidebar { width: 100vw !important; max-width: 100vw !important; margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; box-shadow: none !important; }
.sm-controls { padding: 20px 15px !important; }
.sm-app-container { padding: 15px 10px !important; }
.sm-lb-sidebar { padding: 25px 15px !important; }
.board.s16, .board.s25 { min-width: 0 !important; }
.action-btn-group button { padding: 10px 6px !important; font-size: 12.5px !important; border-radius: 12px !important; }
.key { font-size: 20px !important; height: 48px !important; flex: 1 1 36px !important; padding: 0 !important; }
.keypad-container.s25-keys .key { flex: 1 1 12% !important; max-width: 56px !important; height: 36px !important; font-size: 15px !important; }
.sm-theme-toggle { right: 14px !important; height: 26px !important; }
.sm-theme-toggle-track { width: 52px; height: 26px; padding: 0 6px; }
.sm-theme-toggle-knob  { width: 18px; height: 18px; top: 3px; left: 3px; }
.sm-theme-toggle-svg   { width: 12px; height: 12px; }
body.dark-theme-page .sm-theme-toggle-knob { left: calc(100% - 21px); }
.sm-modal { padding: 10px !important; }
.modalBox { padding: 20px 12px !important; }
.sm-table { min-width: 100% !important; font-size: 12px !important; }
.sm-table th, .sm-table td { padding: 10px 4px !important; font-size: 11px !important; white-space: nowrap !important; }
#sm_lbBody td.text-left { min-width: 130px !important; }
.sm-table td > span[onclick*="sm_copyId"] { padding: 4px 7px !important; font-size: 11px !important; letter-spacing: -0.3px; }
.modalBox::-webkit-scrollbar { display: none !important; width: 0 !important; }
.modalBox { -ms-overflow-style: none !important; scrollbar-width: none !important; }
}
@media (max-width: 480px) {
.board.s9 .cell { font-size: 18px !important; }
.board.s16 .cell { font-size: 11px !important; font-weight: 900 !important; letter-spacing: -0.5px !important; }
.board.s25 .cell { font-size: 9px !important; }
}
.single .featured-image,
.page .featured-image,
.single .page-header-image-single,
.page .page-header-image {
display: none !important;
}
.sm-session-stats-host { width: 100%; box-sizing: border-box; margin: 0 0 15px 0; }
.sm-session-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 10px;
background: #faf5ff;
border: 1px solid #e9d5ff;
border-radius: 16px;
box-sizing: border-box;
}
.sm-ss-cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8px 4px;
background: #ffffff;
border-radius: 12px;
border: 1px solid #f3e8ff;
text-align: center;
}
.sm-ss-val {
font-size: 18px;
font-weight: 900;
color: #4c1d95;
line-height: 1.1;
display: inline-flex;
align-items: center;
gap: 4px;
}
.sm-ss-flame { font-size: 14px; line-height: 1; }
.sm-ss-lbl {
font-size: 10px;
font-weight: 800;
color: #7c3aed;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 4px;
}
body.dark-theme-page .sm-session-stats { background: #1e293b; border-color: #334155; }
body.dark-theme-page .sm-ss-cell { background: #0f172a; border-color: #334155; }
body.dark-theme-page .sm-ss-val { color: #c4b5fd; }
body.dark-theme-page .sm-ss-lbl { color: #a78bfa; }
@media (max-width: 480px) {
.sm-ss-val { font-size: 16px; }
.sm-ss-lbl { font-size: 9px; letter-spacing: 0.3px; }
.sm-session-stats { padding: 8px; gap: 6px; }
.sm-ss-cell { padding: 6px 2px; }
}
.site-footer { border-top: 1px solid #e2e8f0; }
.footer-widgets .widget-title { color: #0f172a; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; }
.footer-widgets .brand-title { color: #7c3aed; font-size: 24px; font-weight: 900; text-transform: none; letter-spacing: -0.5px; margin-bottom: 15px; }
.footer-brand-text { font-size: 14px; color: #64748b; line-height: 1.6; }
.footer-custom-list { list-style: none; padding: 0; margin: 0; }
.footer-custom-list li { margin-bottom: 10px; }
.footer-custom-list a { color: #475569; text-decoration: none; font-size: 15px; font-weight: 600; transition: all 0.2s ease; display: inline-block; }
.footer-custom-list a:hover { color: #8b5cf6; transform: translateX(5px); }
body.dark-theme-page .site-footer { background-color: #0f172a; border-top-color: #1e293b; }
body.dark-theme-page .footer-widgets .widget-title { color: #f8fafc; }
body.dark-theme-page .footer-widgets .brand-title { color: #a78bfa; }
body.dark-theme-page .footer-brand-text { color: #94a3b8; }
body.dark-theme-page .footer-custom-list a { color: #94a3b8; }
.mp-countdown-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(15, 23, 42, 0.92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
display: flex;
justify-content: center;
align-items: center;
z-index: 100000;
animation: mpCountdownFadeIn 0.3s ease;
user-select: none;
-webkit-user-select: none;
pointer-events: auto;
}
.mp-countdown-content {
text-align: center;
color: #ffffff;
padding: 20px;
}
.mp-countdown-text {
font-size: clamp(60px, 15vw, 140px);
font-weight: 900;
color: #ffffff;
text-shadow: 0 0 30px rgba(139, 92, 246, 0.8), 0 0 60px rgba(139, 92, 246, 0.4);
line-height: 1;
letter-spacing: -2px;
animation: mpCountdownPulse 1s ease-in-out infinite;
transition: color 0.2s ease, text-shadow 0.2s ease, font-size 0.2s ease;
}
.mp-countdown-text.go-state {
color: #10b981;
text-shadow: 0 0 40px rgba(16, 185, 129, 0.95), 0 0 80px rgba(16, 185, 129, 0.5);
font-size: clamp(80px, 18vw, 180px);
animation: mpCountdownGoBurst 0.6s ease-out;
}
.mp-countdown-subtext {
font-size: 16px;
color: #c4b5fd;
margin-top: 18px;
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
}
@keyframes mpCountdownFadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes mpCountdownPulse {
0%, 100% { transform: scale(1); }
50%      { transform: scale(1.08); }
}
@keyframes mpCountdownGoBurst {
0%   { transform: scale(0.7); opacity: 0.5; }
60%  { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@media (max-width: 480px) {
.mp-countdown-subtext { font-size: 14px; letter-spacing: 2px; }
}
body.dark-theme-page .footer-custom-list a:hover { color: #c4b5fd; }
@media (min-width: 1024px) {
.sm-app-container.has-side-rail {
max-width: 640px !important;
display: grid !important;
grid-template-columns: 1fr 100px;
column-gap: 16px;
row-gap: 12px;
align-items: start;
}
.sm-app-container.has-side-rail > * {
grid-column: 1 / -1;
}
.sm-app-container.has-side-rail > .board-scroll-wrapper {
grid-column: 1;
grid-row: 3;
margin: 0;
}
.sm-app-container.has-side-rail > .keypad-container,
.sm-app-container.has-side-rail > #sm_keypad,
.sm-app-container.has-side-rail > #klr_keypad,
.sm-app-container.has-side-rail > #sam_keypad,
.sm-app-container.has-side-rail > #evl_keypad,
.sm-app-container.has-side-rail > #jig_keypad {
grid-column: 1;
grid-row: 4;
gap: 4px !important;
padding: 0 !important;
margin: 0 !important;
}
.sm-app-container.has-side-rail > .keypad-container:not(.s12-keys):not(.s25-keys),
.sm-app-container.has-side-rail > #sm_keypad:not(.s12-keys):not(.s25-keys),
.sm-app-container.has-side-rail > #klr_keypad:not(.s12-keys):not(.s25-keys),
.sm-app-container.has-side-rail > #evl_keypad:not(.s12-keys):not(.s25-keys),
.sm-app-container.has-side-rail > #jig_keypad:not(.s12-keys):not(.s25-keys) {
flex-wrap: nowrap !important;
}
.sm-app-container.has-side-rail .keypad-container:not(.s12-keys):not(.s25-keys) > .key {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
font-size: 20px !important;
height: 46px !important;
}
.sm-app-container.has-side-rail > .sm-rail-col {
display: flex !important;
flex-direction: column;
gap: 8px;
grid-column: 2;
grid-row: 3 / 5;
align-self: start;
justify-self: stretch;
min-height: 0;
width: 100%;
}
.sm-app-container.has-side-rail > .sm-play-col {
grid-column: 1;
grid-row: 3;
align-self: start;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.sm-app-container.has-side-rail > .sm-play-col > .board-scroll-wrapper { margin: 0; }
.sm-app-container.has-side-rail > .sm-play-col > .keypad-container,
.sm-app-container.has-side-rail > .sm-play-col > #sm_keypad,
.sm-app-container.has-side-rail > .sm-play-col > #sam_keypad {
gap: 4px !important; padding: 0 !important; margin: 0 !important;
}
.sm-app-container.has-side-rail > .sm-play-col > .keypad-container:not(.s12-keys):not(.s25-keys),
.sm-app-container.has-side-rail > .sm-play-col > #sm_keypad:not(.s12-keys):not(.s25-keys),
.sm-app-container.has-side-rail > .sm-play-col > #sam_keypad:not(.s12-keys):not(.s25-keys) {
flex-wrap: nowrap !important;
}
.sm-app-container.has-side-rail:has(.sm-play-col) > .sm-rail-col {
grid-row: 3;
align-self: start;
overflow-y: visible;
}
.sm-app-container.has-side-rail:has(.sm-play-col) .sm-notes-pill-val {
max-height: none;
overflow-y: visible;
}
.sm-app-container.has-side-rail .sm-rail-col > .action-btn-group {
flex-direction: column !important;
gap: 8px !important;
margin: 0 !important;
min-height: 0;
width: 100%;
}
.sm-app-container.has-side-rail .sm-rail-col > .action-btn-group > button {
width: 100% !important;
flex: 0 0 auto !important;
height: 54px !important;
padding: 6px 4px !important;
font-size: 11px !important;
line-height: 1.15 !important;
white-space: normal !important;
text-align: center !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.sm-app-container.has-side-rail .board.s12,
.sm-app-container.has-side-rail .board.s16,
.sm-app-container.has-side-rail .board.s25 {
min-width: 0 !important;
}
.sm-app-container.has-side-rail:has(.board.s21) {
max-width: 760px !important;
}
.sm-app-container.has-side-rail:has(.board.s25) {
max-width: 900px !important;
}
.sm-app-container.has-side-rail:has(.board.s25) .board.s25 .cell { font-size: 14px; }
.sm-app-container.has-side-rail .sm-rail-col > .sm-rail-extras {
width: 100%;
margin-top: 2px;
min-height: 0;
}
}
.sm-play-col {
display: contents;
}
.sm-rail-col {
display: contents;
}
.board-scroll-wrapper {
position: relative;
}
.sm-pause-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(250, 245, 255, 0.78);
-webkit-backdrop-filter: blur(9px);
backdrop-filter: blur(9px);
border-radius: 16px;
z-index: 20;
animation: smPauseFade 0.18s ease-out;
}
@keyframes smPauseFade {
from { opacity: 0; }
to   { opacity: 1; }
}
.sm-pause-inner { text-align: center; padding: 20px; }
.sm-pause-icon { font-size: 46px; line-height: 1; }
.sm-pause-text {
font-size: 20px;
font-weight: 900;
color: #4c1d95;
margin: 10px 0 18px;
letter-spacing: 1px;
text-transform: uppercase;
}
.sm-pause-resume {
padding: 12px 30px !important;
font-size: 16px !important;
border-radius: 50px !important;
width: auto !important;
background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
color: #ffffff !important;
border: none !important;
box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35) !important;
transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}
.sm-pause-resume:hover,
.sm-pause-resume:focus {
background: linear-gradient(135deg, #6d28d9, #5b21b6) !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
box-shadow: 0 8px 20px rgba(109, 40, 217, 0.45) !important;
}
.sm-pause-resume:focus-visible {
outline: 3px solid #c4b5fd !important;
outline-offset: 2px !important;
}
.btn-paused-active,
.btn-paused-active:hover,
.btn-paused-active:focus {
color: #422006 !important;
border-color: #d97706 !important;
text-shadow: none !important;
}
.btn-paused-active {
background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
}
.btn-paused-active:hover,
.btn-paused-active:focus {
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}
body.dark-theme-page .sm-pause-overlay {
background: rgba(15, 23, 42, 0.80);
}
body.dark-theme-page .sm-pause-text {
color: #f8fafc;
}
.sm-gen-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(250, 245, 255, 0.85);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-radius: 16px;
z-index: 25;
}
.sm-gen-inner { text-align: center; padding: 20px; }
.sm-gen-spinner {
width: 44px;
height: 44px;
margin: 0 auto 14px;
border: 5px solid #ddd6fe;
border-top-color: #7c3aed;
border-radius: 50%;
animation: smGenSpin 0.8s linear infinite;
}
@keyframes smGenSpin { to { transform: rotate(360deg); } }
.sm-gen-text {
font-size: 15px;
font-weight: 800;
color: #4c1d95;
letter-spacing: 0.3px;
}
.sm-gen-subtext {
margin-top: 6px;
font-size: 12px;
font-weight: 600;
color: #7c3aed;
max-width: 260px;
line-height: 1.35;
opacity: 0.9;
}
body.dark-theme-page .sm-gen-overlay { background: rgba(15, 23, 42, 0.85); }
body.dark-theme-page .sm-gen-spinner { border-color: #334155; border-top-color: #a78bfa; }
body.dark-theme-page .sm-gen-text { color: #f8fafc; }
body.dark-theme-page .sm-gen-subtext { color: #c4b5fd; }
.sm-table td.sm-guest-global-note {
text-align: center !important;
font-size: 12px !important;
font-weight: 600;
color: #6b7280;
padding: 12px 10px !important;
line-height: 1.45;
white-space: normal !important;
word-break: break-word;
}
.sm-guest-global-note a {
color: #7c3aed;
font-weight: 800;
cursor: pointer;
text-decoration: underline;
}
.sm-guest-global-note a:hover { color: #5b21b6; }
body.dark-theme-page .sm-guest-global-note { color: #94a3b8; }
body.dark-theme-page .sm-guest-global-note a { color: #c4b5fd; }
.sm-rail-extras {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
margin-top: 10px;
}
.sm-rail-stat-card {
background: linear-gradient(135deg, #faf5ff, #ede9fe);
border: 1px solid #ddd6fe;
border-radius: 12px;
padding: 8px 6px;
text-align: center;
transition: transform 0.2s ease;
}
.sm-rail-stat-card.trophy {
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-color: #fcd34d;
}
.sm-rail-stat-label {
font-size: 9px;
font-weight: 800;
color: #8b5cf6;
text-transform: uppercase;
letter-spacing: 0.4px;
line-height: 1.1;
}
.sm-rail-stat-card.trophy .sm-rail-stat-label {
color: #d97706;
}
.sm-rail-stat-value {
font-size: 16px;
font-weight: 900;
color: #4c1d95;
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.sm-rail-stat-card.trophy .sm-rail-stat-value {
color: #92400e;
}
body.dark-theme-page .sm-rail-stat-card {
background: linear-gradient(135deg, #1e1b4b, #2e1065);
border-color: #4c1d95;
}
body.dark-theme-page .sm-rail-stat-card.trophy {
background: linear-gradient(135deg, #451a03, #78350f);
border-color: #d97706;
}
body.dark-theme-page .sm-rail-stat-label { color: #a78bfa; }
body.dark-theme-page .sm-rail-stat-card.trophy .sm-rail-stat-label { color: #fbbf24; }
body.dark-theme-page .sm-rail-stat-value { color: #e9d5ff; }
body.dark-theme-page .sm-rail-stat-card.trophy .sm-rail-stat-value { color: #fde68a; }
ins[id*="BOTTOM_ANCHOR"] { width: 100% !important; }
ins[id*="BOTTOM_ANCHOR"] iframe { max-width: 100% !important; }
@media (min-width: 1280px) {
body.page-id-371 .sm-dashboard-wrapper { max-width: min(1400px, calc(100% - 48px)); }
body.page-id-371 .sm-lb-sidebar { min-width: 420px; }
}
@media (min-width: 1024px) {
body.page-id-371 .sm-app-container.has-side-rail:has(.board.s25) {
max-width: min(900px, calc(100vh + 126px)) !important;
}
}
@media (min-width: 1280px) {
body:is(.page-id-54, .page-id-2001) .sm-dashboard-wrapper { max-width: min(1400px, calc(100% - 48px)); }
body:is(.page-id-54, .page-id-2001) .sm-lb-sidebar { min-width: 420px; }
}
@media (min-width: 1024px) {
body:is(.page-id-54, .page-id-2001) .sm-app-container.has-side-rail:has(.board.s21) {
max-width: min(760px, calc(100vh + 126px)) !important;
}
}
body:is(.page-id-54, .page-id-2001) #sm_session_stats.sm-session-stats-host { max-width: none !important; }
.sm-lb-tabs { display: flex; justify-content: center; gap: 4px; width: max-content; max-width: 100%; margin: 12px auto 0; padding: 4px; border-radius: 999px; background: #f3e8ff; border: 1px solid #e9d5ff; }
.sm-lb-tabs .sm-lb-tab { background: transparent !important; color: #6d28d9 !important; border: none !important; border-radius: 999px !important; padding: 7px 16px !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.2 !important; box-shadow: none !important; transform: none !important; min-height: 32px; }
.sm-lb-tabs .sm-lb-tab:hover { background: #ede9fe !important; box-shadow: none !important; transform: none !important; }
.sm-lb-tabs .sm-lb-tab.is-on, .sm-lb-tabs .sm-lb-tab.is-on:hover { background: #7c3aed !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35) !important; }
.sm-lb-tabs .sm-lb-tab:focus-visible { outline: 2px solid #4c1d95 !important; outline-offset: 2px !important; }
.sm-lb-note { text-align: center; font-size: 12px; font-weight: 600; color: #6b7280; margin: 8px 0 0; }
body.dark-theme-page .sm-lb-tabs { background: #1e1b4b; border-color: #312e81; }
body.dark-theme-page .sm-lb-tabs .sm-lb-tab { color: #c4b5fd !important; }
body.dark-theme-page .sm-lb-tabs .sm-lb-tab:hover { background: #312e81 !important; }
body.dark-theme-page .sm-lb-tabs .sm-lb-tab.is-on, body.dark-theme-page .sm-lb-tabs .sm-lb-tab.is-on:hover { background: #7c3aed !important; color: #ffffff !important; }
body.dark-theme-page .sm-lb-tabs .sm-lb-tab:focus-visible { outline-color: #c4b5fd !important; }
body.dark-theme-page .sm-lb-note { color: #94a3b8; }
html body .sm-lb-tabs.sm-lb-tabs--evil { background: #4c0519; border-color: #881337; }
html body .sm-lb-tabs.sm-lb-tabs--evil .sm-lb-tab { color: #fda4af !important; }
html body .sm-lb-tabs.sm-lb-tabs--evil .sm-lb-tab:hover { background: #881337 !important; }
html body .sm-lb-tabs.sm-lb-tabs--evil .sm-lb-tab.is-on, html body .sm-lb-tabs.sm-lb-tabs--evil .sm-lb-tab.is-on:hover { background: #be123c !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(190, 18, 60, 0.45) !important; }
html body .sm-lb-tabs.sm-lb-tabs--evil .sm-lb-tab:focus-visible { outline-color: #fda4af !important; }
html body .sm-lb-note.sm-lb-note--dark { color: #94a3b8; }
.sl-hdr { position: relative; z-index: 1000; background: #ffffff; border-bottom: 1px solid #ece9f6; }
.sl-hdr-in { display: flex; align-items: center; gap: 12px; height: 64px; max-width: min(1400px, calc(100% - 32px)); margin: 0 auto; }
.sl-logo { flex: 0 0 auto; display: flex; align-items: center; }
.sl-logo img { display: block; height: 40px; width: auto; }
.sl-hdr button:not(.sm-theme-toggle) {
background: transparent !important; color: inherit !important; border: 0 !important; border-radius: 10px !important;
padding: 0 !important; margin: 0 !important; box-shadow: none !important; transform: none !important;
font: inherit !important; min-height: 0 !important; cursor: pointer; will-change: auto;
}
.sl-hdr button:not(.sm-theme-toggle):hover { transform: none !important; box-shadow: none !important; }
.sl-hdr button:focus-visible, .sl-hdr a:focus-visible { outline: 2px solid #7c3aed !important; outline-offset: 2px; }
.sl-i { width: 20px; height: 20px; flex: 0 0 auto; }
.sl-chev { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .2s ease; }
.sl-nav { flex: 1 1 auto; min-width: 0; margin-left: 16px; }
.sl-nav-list { display: flex; align-items: center; gap: 2px; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.sl-nav-item { position: relative; display: flex; align-items: center; margin: 0 !important; padding: 0 !important; list-style: none !important; border-radius: 12px; }
.sl-hdr .sl-nav-top {
display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 10px; border-radius: 12px;
color: #1f2937 !important; font-size: 15px; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap;
}
.sl-hdr button.sl-nav-top { padding: 0 10px !important; color: #1f2937 !important; font-weight: 700 !important; font-size: 15px !important; height: 42px; border-radius: 12px !important; }
.sl-nav-top .sl-i { color: #6b7280; }
.sl-hdr button.sl-nav-caret { width: 22px; height: 42px; display: inline-flex; align-items: center; justify-content: center; color: #6b7280 !important; margin-left: -6px !important; border-radius: 8px !important; }
.sl-nav-item:hover, .sl-nav-item.is-open { background: #f8f7ff; }
.sl-nav-item.is-current { background: #f3f0ff; }
.sl-nav-item.is-current .sl-nav-top, .sl-hdr .sl-nav-item.is-current button.sl-nav-top { color: #4c1d95 !important; }
.sl-nav-item.is-current .sl-i { color: #6d28d9; }
.sl-hdr .sl-nav-item--play .sl-nav-top .sl-i { color: #7c3aed; }
.sl-hdr .sl-nav-item--mp .sl-nav-top .sl-i { color: #2563eb; }
.sl-hdr .sl-nav-item--daily .sl-nav-top .sl-i { color: #ea580c; }
.sl-hdr .sl-nav-item--print .sl-nav-top .sl-i { color: #0d9488; }
.sl-hdr .sl-nav-item--tools .sl-nav-top .sl-i { color: #db2777; }
.sl-nav-item.is-open .sl-chev { transform: rotate(180deg); }
.sl-daily-badge {
display: inline-block; margin-left: 2px; padding: 3px 6px; border-radius: 12px; background: #fef3c7; color: #b45309;
border: 1px solid #fde68a; font-size: 10px; font-weight: 900; line-height: 1; letter-spacing: .5px; font-variant-numeric: tabular-nums;
}
.sl-menu {
display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; padding: 8px; z-index: 1001;
background: #ffffff; border: 1px solid #ece9f6; border-radius: 14px; box-shadow: 0 14px 34px rgba(30, 27, 75, .14);
}
.sl-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.sl-nav-item.is-open > .sl-menu { display: block; }
.sl-menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; min-width: 400px; }
.sl-menu-head { padding: 6px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #6b7280; }
.sl-hdr .sl-menu-link { display: block; padding: 8px 10px; border-radius: 8px; color: #1f2937 !important; font-size: 14px; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap; }
.sl-hdr .sl-menu-link:hover, .sl-hdr .sl-menu-link:focus-visible { background: #f5f3ff; color: #4c1d95 !important; }
.sl-hdr .sl-menu-link.is-current { background: #ede9fe; color: #4c1d95 !important; }
.sl-hdr-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }
.sl-hdr-fs[hidden] { display: none !important; }
.sl-hdr button.sl-hdr-iconbtn {
width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
background: #ffffff !important; border: 1px solid #ece9f6 !important; color: #4c1d95 !important; border-radius: 10px !important;
}
.sl-hdr button.sl-hdr-iconbtn:hover { background: #f5f3ff !important; }
.sl-hdr button.sl-hdr-iconbtn svg { width: 16px !important; height: 16px !important; }
.sl-hdr .sm-theme-toggle, .sl-hdr .sm-theme-toggle:hover, .sl-hdr .sm-theme-toggle:focus, .sl-hdr .sm-theme-toggle:active {
position: static !important; top: auto !important; right: auto !important; transform: none !important; margin: 0 !important; display: inline-flex !important;
}
.sl-hdr-theme { display: inline-flex; }
.sl-nav-theme { display: none !important; }
.sl-acct { display: flex; align-items: center; gap: 10px; }
.sl-acct [hidden] { display: none !important; }
.sl-hdr .sl-xp {
display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 999px;
background: #ffffff; border: 1px solid #ece9f6; color: #1e1b4b !important; font-size: 14px; font-weight: 800 !important;
text-decoration: none !important; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.sl-xp-u { color: #6b7280; font-weight: 700; font-size: 12px; }
.sl-pop { position: relative; }
.sl-hdr button.sl-avatar-btn { display: inline-flex; align-items: center; gap: 4px; color: #6b7280 !important; padding: 2px !important; border-radius: 999px !important; vertical-align: top; }
.sl-avatar {
width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: #7c3aed center / cover no-repeat; color: #ffffff; font-size: 16px; font-weight: 800; flex: 0 0 auto;
}
.sl-avatar.has-photo { background-color: #ede9fe; }
.sl-avatar--lg { width: 44px; height: 44px; font-size: 18px; }
.sl-hdr button.sl-signin-btn {
display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px !important; border-radius: 10px !important;
background: #7c3aed !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; white-space: nowrap;
}
.sl-hdr button.sl-signin-btn:hover { background: #6d28d9 !important; }
.sl-signin-btn .sl-i { width: 18px; height: 18px; }
.sl-popmenu {
display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; padding: 8px; z-index: 1001;
background: #ffffff; border: 1px solid #ece9f6; border-radius: 14px; box-shadow: 0 14px 34px rgba(30, 27, 75, .14);
}
.sl-pop.is-open > .sl-popmenu { display: block; }
.sl-me-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid #f1eff8; }
.sl-me-name { font-size: 15px; font-weight: 800; color: #1e1b4b; }
.sl-me-sub { font-size: 12px; font-weight: 600; color: #6b7280; margin-top: 2px; }
.sl-hdr button.sl-pop-item {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px !important; border-radius: 8px !important;
color: #1f2937 !important; font-size: 14px !important; font-weight: 600 !important; text-align: left;
}
.sl-hdr button.sl-pop-item:hover { background: #f5f3ff !important; color: #4c1d95 !important; }
.sl-hdr button.sl-pop-item[hidden] { display: none !important; }
.sl-hdr a.sl-pop-item {
display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 10px !important; border-radius: 8px !important;
font-size: 14px !important; font-weight: 600 !important; text-align: left; text-decoration: none !important;
}
.sl-hdr a.sl-pop-item--danger, .sl-hdr a.sl-pop-item--danger .sl-i { color: #b91c1c !important; }
.sl-hdr a.sl-pop-item--danger:hover { background: #fef2f2 !important; }
.sl-pop-item .sl-i { width: 18px; height: 18px; color: #6d28d9; }
.sl-pop-note { padding: 6px 10px; font-size: 12px; color: #6b7280; }
.sl-hdr button.sl-burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; color: #1f2937 !important; }
.sl-burger .sl-i + .sl-i { display: none; }
.sl-hdr.is-menu-open .sl-burger .sl-i:first-child { display: none; }
.sl-hdr.is-menu-open .sl-burger .sl-i + .sl-i { display: block; }
body #sm_fs_notice { top: 76px !important; }
@media (min-width: 1024px) and (max-width: 1279.98px) and (not ((hover: hover) and (pointer: fine))) and (orientation: portrait) {
.sl-nav { margin-left: 8px; }
.sl-hdr .sl-nav-top, .sl-hdr button.sl-nav-top { font-size: 14px !important; padding: 0 7px !important; gap: 6px; }
.sl-logo img { height: 34px; }
}
@media (min-width: 1024px) and (max-width: 1179.98px) and (not ((hover: hover) and (pointer: fine))) and (orientation: portrait) {
.sl-nav-top .sl-i { display: none; }
}
@media (max-width: 1023.98px) {
.sl-hdr-in { height: 56px; max-width: calc(100% - 24px); gap: 8px; }
.sl-hdr:has(.sl-hdr-theme) .sl-hdr-in { height: 78px; }
.sl-hdr-right { flex-direction: column; justify-content: center; }
.sl-hdr-theme { order: 2; }
.sl-hdr .sm-theme-toggle { height: 26px !important; }
.sl-hdr .sm-theme-toggle-track { width: 52px; height: 26px; padding: 0 6px; }
.sl-hdr .sm-theme-toggle-knob { width: 18px; height: 18px; top: 3px; left: 3px; }
.sl-hdr .sm-theme-toggle-svg { width: 12px; height: 12px; }
body.dark-theme-page .sl-hdr .sm-theme-toggle-knob { left: calc(100% - 21px); }
.sl-hdr .sl-hdr-right:has(.sl-me:not([hidden])) { align-items: flex-end; }
.sl-hdr .sl-hdr-right:has(.sl-me:not([hidden])) .sl-hdr-theme { margin-right: 11px; }
.sl-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.sl-logo img { height: clamp(28px, calc((100vw - 180px) / 5), 38px); }
.sl-hdr button.sl-burger { display: inline-flex; }
.sl-hdr-fs { display: none !important; }
.sl-hdr-right { gap: 6px; }
.sl-hdr .sl-xp { height: 34px; padding: 0 10px; font-size: 13px; }
.sl-avatar { width: 34px; height: 34px; font-size: 15px; }
.sl-hdr .sl-avatar-btn .sl-avatar { width: 30px; height: 30px; font-size: 14px; }
.sl-hdr button.sl-signin-btn { height: 32px; padding: 0 12px !important; font-size: 13px !important; }
.sl-nav {
display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; z-index: 1001;
background: #ffffff; border-bottom: 1px solid #ece9f6; box-shadow: 0 18px 30px rgba(30, 27, 75, .12);
max-height: calc(100vh - 78px); overflow-y: auto; overscroll-behavior: contain;
}
.sl-hdr.is-menu-open .sl-nav { display: block; }
.sl-nav-list { flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 12px 16px !important; }
.sl-nav-item { flex-wrap: wrap; }
.sl-nav-item:hover { background: transparent; }
.sl-hdr .sl-nav-top, .sl-hdr button.sl-nav-top { flex: 1 1 auto; height: 48px; font-size: 16px !important; }
.sl-hdr button.sl-nav-btn { justify-content: flex-start; }
.sl-nav-btn .sl-chev { margin-left: auto; }
.sl-hdr button.sl-nav-caret { width: 48px; height: 48px; margin: 0 !important; }
.sl-menu { position: static; display: none; width: 100%; min-width: 0; padding: 0 0 8px 34px; border: 0; box-shadow: none; border-radius: 0; background: transparent; }
.sl-menu::before { display: none; }
.sl-menu-cols { grid-template-columns: 1fr; min-width: 0; }
.sl-hdr .sl-menu-link { padding: 10px; font-size: 15px; }
.sl-nav-theme { display: none !important; }
.sl-popmenu { right: 0; }
}
@media (max-width: 599.98px) {
.sl-hdr .sl-acct .sl-xp { display: none !important; }
}
@media (max-width: 480px) {
.sl-xp-u { display: none; }
.sl-signin-btn .sl-i { display: none; }
}
body.dark-theme-page .sl-hdr, .sl-hdr.sl-hdr--dark { background: #0f172a; border-bottom-color: #1e293b; }
body.dark-theme-page .sl-hdr .sl-nav-top, body.dark-theme-page .sl-hdr button.sl-nav-top, body.dark-theme-page .sl-hdr button.sl-burger, body.dark-theme-page .sl-nav-theme,
.sl-hdr--dark .sl-nav-top, .sl-hdr.sl-hdr--dark button.sl-nav-top, .sl-hdr.sl-hdr--dark button.sl-burger { color: #e2e8f0 !important; }
body.dark-theme-page .sl-nav-top .sl-i, body.dark-theme-page .sl-hdr button.sl-nav-caret, .sl-hdr--dark .sl-nav-top .sl-i, .sl-hdr.sl-hdr--dark button.sl-nav-caret { color: #94a3b8 !important; }
body.dark-theme-page .sl-nav-item:hover, body.dark-theme-page .sl-nav-item.is-open, .sl-hdr--dark .sl-nav-item:hover, .sl-hdr--dark .sl-nav-item.is-open { background: #1e293b; }
body.dark-theme-page .sl-nav-item.is-current, .sl-hdr--dark .sl-nav-item.is-current { background: #1e1b4b; }
body.dark-theme-page .sl-nav-item.is-current .sl-nav-top, body.dark-theme-page .sl-hdr .sl-nav-item.is-current button.sl-nav-top,
.sl-hdr--dark .sl-nav-item.is-current .sl-nav-top, .sl-hdr.sl-hdr--dark .sl-nav-item.is-current button.sl-nav-top { color: #c4b5fd !important; }
body.dark-theme-page .sl-nav-item.is-current .sl-i, .sl-hdr--dark .sl-nav-item.is-current .sl-i { color: #a78bfa; }
body.dark-theme-page .sl-hdr .sl-nav-item--play .sl-nav-top .sl-i, .sl-hdr.sl-hdr--dark .sl-nav-item--play .sl-nav-top .sl-i { color: #a78bfa !important; }
body.dark-theme-page .sl-hdr .sl-nav-item--mp .sl-nav-top .sl-i, .sl-hdr.sl-hdr--dark .sl-nav-item--mp .sl-nav-top .sl-i { color: #60a5fa !important; }
body.dark-theme-page .sl-hdr .sl-nav-item--daily .sl-nav-top .sl-i, .sl-hdr.sl-hdr--dark .sl-nav-item--daily .sl-nav-top .sl-i { color: #fb923c !important; }
body.dark-theme-page .sl-hdr .sl-nav-item--print .sl-nav-top .sl-i, .sl-hdr.sl-hdr--dark .sl-nav-item--print .sl-nav-top .sl-i { color: #2dd4bf !important; }
body.dark-theme-page .sl-hdr .sl-nav-item--tools .sl-nav-top .sl-i, .sl-hdr.sl-hdr--dark .sl-nav-item--tools .sl-nav-top .sl-i { color: #f472b6 !important; }
body.dark-theme-page .sl-menu, body.dark-theme-page .sl-popmenu, .sl-hdr--dark .sl-menu, .sl-hdr--dark .sl-popmenu { background: #1e293b; border-color: #334155; }
body.dark-theme-page .sl-hdr .sl-menu-link, body.dark-theme-page .sl-hdr button.sl-pop-item, .sl-hdr--dark .sl-menu-link, .sl-hdr.sl-hdr--dark button.sl-pop-item { color: #e2e8f0 !important; }
body.dark-theme-page .sl-hdr a.sl-pop-item--danger, body.dark-theme-page .sl-hdr a.sl-pop-item--danger .sl-i, .sl-hdr.sl-hdr--dark a.sl-pop-item--danger, .sl-hdr.sl-hdr--dark a.sl-pop-item--danger .sl-i { color: #fca5a5 !important; }
body.dark-theme-page .sl-hdr a.sl-pop-item--danger:hover, .sl-hdr.sl-hdr--dark a.sl-pop-item--danger:hover { background: #3f1d1d !important; }
body.dark-theme-page .sl-hdr .sl-menu-link:hover, body.dark-theme-page .sl-hdr .sl-menu-link.is-current, body.dark-theme-page .sl-hdr button.sl-pop-item:hover,
.sl-hdr--dark .sl-menu-link:hover, .sl-hdr--dark .sl-menu-link.is-current, .sl-hdr.sl-hdr--dark button.sl-pop-item:hover { background: #312e81 !important; color: #ffffff !important; }
body.dark-theme-page .sl-menu-head, body.dark-theme-page .sl-xp-u, body.dark-theme-page .sl-me-sub, .sl-hdr--dark .sl-menu-head, .sl-hdr--dark .sl-xp-u, .sl-hdr--dark .sl-me-sub { color: #94a3b8; }
body.dark-theme-page .sl-hdr .sl-xp, body.dark-theme-page .sl-hdr button.sl-hdr-iconbtn, .sl-hdr--dark .sl-xp, .sl-hdr.sl-hdr--dark button.sl-hdr-iconbtn { background: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; }
body.dark-theme-page .sl-hdr button.sl-hdr-iconbtn, .sl-hdr.sl-hdr--dark button.sl-hdr-iconbtn { color: #c4b5fd !important; }
body.dark-theme-page .sl-me-name, .sl-hdr--dark .sl-me-name { color: #f1f5f9; }
body.dark-theme-page .sl-me-head, body.dark-theme-page .sl-nav-theme, .sl-hdr--dark .sl-me-head { border-color: #334155; }
@media (max-width: 1023.98px) {
body.dark-theme-page .sl-nav, .sl-hdr--dark .sl-nav { background: #0f172a; border-bottom-color: #1e293b; }
body.dark-theme-page .sl-menu, .sl-hdr--dark .sl-menu { background: transparent; }
}
body.page-id-27 .entry-content > p:first-child:empty { display: none !important; }
.slg { --slg-board: clamp(260px, calc(100vh / var(--sl-z, 1) - 300px), 560px); max-width: min(1400px, calc(100% - 32px)); margin: 0 auto; }
@media (hover: hover) and (pointer: fine) {
.slg { --slg-board: clamp(260px, calc(100vw * var(--sl-ar, .5625) / var(--sl-z, 1) - 300px), 560px); }
}
.slg-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin: 8px 0; }
.slg-title { flex: 0 0 auto; }
.slg .slg-h1 { margin: 0 !important; font-size: 30px !important; font-weight: 900 !important; color: #1e1b4b !important; line-height: 1.15 !important; letter-spacing: -.4px; }
.slg .slg-sub { margin: 4px 0 0 !important; font-size: 15px !important; font-weight: 500 !important; color: #64748b !important; }
.slg-controls {
display: flex; align-items: flex-end; gap: 10px; padding: 9px 12px; background: #ffffff;
border: 1px solid #ece9f6; border-radius: 16px; box-shadow: 0 6px 24px rgba(76, 29, 149, .06);
flex: 1 1 0; justify-content: flex-end;
}
.slg-field { display: flex; flex-direction: column; gap: 2px; margin: 0 !important; flex: 1 1 0; min-width: 116px; max-width: 210px; }
.slg-lbl { font-size: 15px; font-weight: 700; color: #475569; line-height: 17px; }
.slg .slg-select {
height: 38px !important; width: 100%; min-width: 0; padding: 0 32px 0 12px !important; margin: 0 !important;
border: 1px solid #e2e8f0 !important; border-radius: 10px !important; background-color: #ffffff !important; color: #1e1b4b !important;
font-size: 16px !important; font-weight: 700 !important; cursor: pointer; appearance: none; -webkit-appearance: none; box-shadow: none !important;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%231e293b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px !important;
}
.slg .slg-select:hover, .slg .slg-select:focus { border-color: #8b5cf6 !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, .15) !important; outline: none; }
.slg button.slg-btn-new {
flex: 0 0 auto; height: 38px; padding: 0 20px !important; margin: 0 !important; border-radius: 10px !important; white-space: nowrap;
background: #7c3aed !important; color: #ffffff !important; font-size: 16px !important; font-weight: 800 !important;
box-shadow: none !important; border: 0 !important;
}
.slg button.slg-btn-new:hover { transform: none !important; background: #6d28d9 !important; }
.slg #sm_btn_new { height: 38px !important; border-radius: 10px !important; font-size: 16px !important; }
.slg-or { flex: 0 0 auto; align-self: stretch; display: flex; align-items: flex-end; padding: 0 2px 10px 12px; border-left: 1px solid #e2e8f0; font-size: 15px; font-weight: 700; color: #475569; white-space: nowrap; }
.slg-join { display: flex; gap: 8px; flex: 1.6 1 0; min-width: 0; max-width: 360px; }
.slg .slg-join input {
height: 38px !important; flex: 1 1 auto; width: 100%; min-width: 130px; padding: 0 12px !important; margin: 0 !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important;
background: #ffffff !important; color: #1e1b4b !important; font-size: 15px !important; font-weight: 600; box-shadow: none !important;
}
.slg .slg-join input:focus { border-color: #8b5cf6 !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, .15) !important; outline: none; }
.slg button.slg-btn-play {
flex: 0 0 auto; height: 38px; padding: 0 20px !important; margin: 0 !important; border-radius: 10px !important; border: 0 !important;
background: #7c3aed !important; color: #ffffff !important; font-size: 16px !important; font-weight: 800 !important; box-shadow: none !important;
}
.slg button.slg-btn-play:hover { transform: none !important; background: #6d28d9 !important; }
.slg-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 560px); gap: 16px; align-items: start; margin-bottom: 24px; }
.slg-card { background: #ffffff; border: 1px solid #ece9f6; border-radius: 18px; box-shadow: 0 6px 24px rgba(76, 29, 149, .06); }
.slg-game {
display: grid; grid-template-columns: var(--slg-board) minmax(200px, 1fr); column-gap: 12px; row-gap: 8px; padding: 14px 16px;
grid-template-areas: "badges badges" "progress progress" "board tools" "keys keys" "strip strip";
}
.slg-badges { grid-area: badges; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.slg-badge { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 5px 6px; border-radius: 12px; border: 1px solid; text-align: center; }
.slg-btxt { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; line-height: 1.1; }
.slg-blbl { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: inherit; }
.slg-bval { font-size: 18px; font-weight: 900; color: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 100%; }
.slg-badge--id { background: #fdf2f8; border-color: #fbcfe8; color: #be185d; }
.slg-badge--err { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.slg-badge--time { background: #ecfdf5; border-color: #d1fae5; color: #047857; }
.slg-progress { grid-area: progress; justify-self: center; width: 72%; height: 6px; border-radius: 99px; background: #ede9fe; overflow: hidden; }
.slg .slg-boardwrap { grid-area: board; width: var(--slg-board); padding: 0 !important; margin: 0 !important; overflow: visible !important; }
.slg-tools { grid-area: tools; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 8px; height: var(--slg-board); }
.slg button.slg-tool {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 0; overflow: hidden; margin: 0 !important; padding: 2px 4px !important;
background: #ffffff !important; border: 1px solid #ece9f6 !important; border-radius: 14px !important; box-shadow: 0 2px 6px rgba(76, 29, 149, .04) !important;
color: #312e81 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.1;
}
.slg button.slg-tool:hover { transform: none !important; border-color: #c4b5fd !important; background: #faf9ff !important; box-shadow: 0 4px 12px rgba(76, 29, 149, .08) !important; }
.slg-ti { width: clamp(18px, calc(var(--slg-board) / 19), 26px); height: clamp(18px, calc(var(--slg-board) / 19), 26px); color: #6d28d9; flex: 0 0 auto; }
.slg-ti--bulb { fill: #fde047; stroke: #ca8a04; }
.slg-ti--trophy { fill: #fbbf24; stroke: #b45309; }
.slg-tsub { font-size: 11px; font-weight: 700; color: #64748b; letter-spacing: .4px; }
.slg button.slg-tool.btn-notes-active { background: #ede9fe !important; border-color: #a78bfa !important; }
.slg button.slg-tool.btn-notes-active .slg-tsub { color: #6d28d9; }
.slg button.slg-tool.btn-paused-active { background: #fef3c7 !important; border-color: #fcd34d !important; }
.slg button.slg-tool--gold { background: #f5f3ff !important; }
.slg button.slg-tool--pink { background: #fff1f2 !important; border-color: #ffe4e6 !important; }
.slg button.slg-tool--pink .slg-ti { color: #e11d48; }
.slg .slg-info { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 0; overflow: hidden; padding: 2px 4px; border-radius: 14px; background: #f8f7fd; border: 1px solid #f1eff8; text-align: center; cursor: default; }
.slg-info .slg-xico { font-size: clamp(16px, calc(var(--slg-board) / 24), 22px); line-height: 1; }
.slg-info .slg-xlbl { font-size: 13px; font-weight: 700; color: #475569; line-height: 1.15; white-space: nowrap; }
.slg-info .slg-xval { font-size: 17px; font-weight: 800; color: #1e1b4b; font-variant-numeric: tabular-nums; line-height: 1.15; }
.slg .slg-keypad { grid-area: keys; display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; }
.slg .slg-keypad .key {
flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; height: 42px !important; font-size: 22px !important; font-weight: 800 !important;
background: #f3f0ff !important; border: 1px solid #c4b5fd !important; border-radius: 10px !important; color: #3b0764 !important; box-shadow: none !important;
}
.slg .slg-keypad .key:hover { border-color: #8b5cf6 !important; background: #e9e3ff !important; transform: none !important; }
.slg .slg-keypad .key.key-clear { background: #ffe4e6 !important; border-color: #fda4af !important; color: #be123c !important; }
.slg-strip { grid-area: strip; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; padding-top: 12px; border-top: 1px solid #f1eff8; container-type: inline-size; }
.slg .slg-ss { width: auto; flex: 1 1 auto; min-width: 0; margin: 0 !important; }
.slg-ss .sm-session-stats { display: flex; gap: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.slg-ss .sm-ss-cell { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: 28px auto; justify-content: center; column-gap: 8px; align-items: center; padding: 2px 10px; background: none; border: 0; border-radius: 0; text-align: left; }
.slg-ss .sm-ss-cell + .sm-ss-cell { border-left: 1px solid #e9e5f5; }
.slg-ss .sm-ss-cell::before { content: ""; grid-column: 1; grid-row: 1 / 3; width: 26px; height: 26px; background: center / contain no-repeat; }
.slg-ss .sm-ss-cell:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
.slg-ss .sm-ss-cell:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237c3aed' d='M2 6l4.5 4 5.5-7 5.5 7L22 6l-2 12H4L2 6zm2 14h16v2H4z'/%3E%3C/svg%3E"); }
.slg-ss .sm-ss-cell:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f97316' d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.07-2.14-.22-4.05 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.15.43-2.29 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E"); }
.slg-ss .sm-ss-lbl { grid-column: 2; grid-row: 1; margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #475569; }
.slg-ss .sm-ss-val { grid-column: 2; grid-row: 2; font-size: 16px; font-weight: 800; color: #1e1b4b; line-height: 1.2; }
.slg-ss .sm-ss-cell:nth-child(1) .sm-ss-val::after { content: " completed"; }
.slg-ss .sm-ss-flame { display: none; }
.slg-auth { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; padding-left: 14px; border-left: 1px solid #e9e5f5; }
.slg-user { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.slg-user img { width: 28px !important; height: 28px !important; }
.slg-auth-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.slg button.slg-abtn {
align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px !important; margin: 0 !important; border-radius: 9px !important;
font-size: 13px !important; font-weight: 700 !important; white-space: nowrap; box-shadow: none !important; border: 1px solid transparent !important; line-height: 30px;
}
.slg button.slg-abtn:hover { transform: none !important; filter: brightness(1.05); }
.slg button.slg-abtn svg, .slg button.slg-abtn img { width: 16px; height: 16px; vertical-align: -3px; }
.slg button.slg-abtn--green { background: #10b981 !important; color: #ffffff !important; }
.slg button.slg-abtn--purple { background: #7c3aed !important; color: #ffffff !important; }
.slg button.slg-abtn--ghost { background: #ffffff !important; color: #6d28d9 !important; border-color: #ddd6fe !important; }
@container (max-width: 880px) { .slg-user-prompt { display: none !important; } }
@container (min-width: 701px) and (max-width: 860px) { .slg-user > span { display: none; } }
@container (max-width: 700px) { .slg-auth { margin-left: 0; width: 100%; justify-content: center; padding-left: 0; border-left: 0; } }
.slg-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.slg-lb { padding: 16px 18px; min-width: 0; }
.slg-lb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 12px; row-gap: 0; }
.slg-lb-head::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
.slg-lb-ico { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.slg-lb-titles { flex: 0 1 auto; min-width: 0; }
.slg .slg-lb-title { margin: 0 !important; font-size: 21px !important; font-weight: 800 !important; color: #1e1b4b !important; line-height: 1.2 !important; }
.slg-lb-sub { font-size: 14px; font-weight: 600; color: #64748b; margin-top: 2px; }
.slg .slg-tabs { order: 2; margin: 10px 0 0 !important; flex: 0 0 auto; }
.slg .slg-tabs .sm-lb-tab { padding: 7px 14px !important; }
.slg .slg-lb-note { text-align: center; margin: 10px 0 0 !important; }
.slg .slg-tablewrap { margin-top: 10px !important; padding-bottom: 0 !important; border: 1px solid #f1eff8; border-radius: 12px; }
.slg .slg-table th, .slg .slg-lb .sm-table th { white-space: nowrap; text-transform: none; background: #faf9fe; color: #475569; font-size: 12px; font-weight: 700; padding: 9px 6px; border-bottom: 1px solid #ece9f6; }
.slg .slg-lb .sm-table td { padding: 8px 6px; font-size: 14px; border-bottom-color: #f1eff8 !important; }
.slg .slg-lb .sm-table tbody tr:last-child td { border-bottom: 0 !important; }
.slg .slg-lb .lb-avatar { width: 28px !important; height: 28px !important; }
.slg .slg-loading { text-align: center; padding: 20px !important; color: #8b5cf6 !important; font-weight: 700; }
@media (min-width: 1024px) {
.slg-top { flex-direction: column; align-items: center; gap: 10px; }
.slg-title { text-align: center; }
.slg .slg-sub { text-align: center; }
.slg-controls { flex: none; width: min(760px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; align-items: center; padding: 12px 16px; }
.slg-field { flex-direction: row; align-items: center; gap: 10px; max-width: none; min-width: 0; }
.slg-lbl { width: 84px; flex: 0 0 auto; }
.slg-field--size { grid-column: 1; grid-row: 1; }
.slg-field--diff { grid-column: 1; grid-row: 2; }
.slg #sm_btn_new { grid-column: 2; grid-row: 1; width: 100%; }
.slg-or { display: none; }
.slg-join { grid-column: 2; grid-row: 2; max-width: none; }
}
@media (min-width: 1024px) and (max-width: 1239.98px) and (not ((hover: hover) and (pointer: fine))) and (orientation: portrait) {
.slg-or { font-size: 0; padding: 0 0 0 2px; }
.slg .slg-h1 { font-size: 27px !important; }
.slg .slg-select { min-width: 100px; }
.slg .slg-join input { width: 150px; }
}
@media (min-width: 1024px) and (max-width: 1099.98px) and (not ((hover: hover) and (pointer: fine))) and (orientation: portrait) {
.slg { --slg-board: clamp(260px, calc(100vh - 350px), 560px); }
.slg-main { grid-template-columns: minmax(0, 1fr); }
.slg-game { justify-self: center; }
}
@supports (zoom: 1) {
@media (min-width: 1024px) and (max-width: 1199.98px) and (hover: hover) and (pointer: fine),
(min-width: 1024px) and (max-width: 1199.98px) and (orientation: landscape) {
:root { --sl-z: .8; }
.sl-hdr, .slg { zoom: .8; }
.slg .sm-ad, .slg .slg-modals { zoom: 1.25; }
body #sm_fs_notice { top: 63px !important; }
}
@media (min-width: 1200px) and (max-width: 1359.98px) and (hover: hover) and (pointer: fine),
(min-width: 1200px) and (max-width: 1359.98px) and (orientation: landscape) {
:root { --sl-z: .9; }
.sl-hdr, .slg { zoom: .9; }
.slg .sm-ad, .slg .slg-modals { zoom: 1.1111; }
body #sm_fs_notice { top: 70px !important; }
}
}
@media (max-width: 1023.98px) {
.slg { max-width: calc(100% - 20px); }
.slg-top { flex-direction: column; align-items: stretch; gap: 10px; margin: 12px 0; }
.slg .slg-h1 { font-size: 26px !important; text-align: center; }
.slg .slg-sub { text-align: center; font-size: 14px !important; }
.slg-controls { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 10px; flex: none; }
.slg-field, .slg-join { max-width: none; }
.slg .slg-select { width: 100%; min-width: 0; }
.slg button.slg-btn-new { grid-column: 1 / -1; width: 100%; height: 42px; }
.slg-or { display: none; }
.slg-join { grid-column: 1 / -1; }
.slg .slg-join input { flex: 1 1 auto; width: auto; min-width: 0; height: 42px !important; font-size: 16px !important; }
.slg button.slg-btn-play { height: 42px; }
.slg #sm_btn_new { height: 42px !important; }
.slg-main { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.slg-game { grid-template-columns: minmax(0, 1fr); grid-template-areas: "badges" "progress" "board" "keys" "tools" "strip"; padding: 0; row-gap: 10px; background: none; border: 0; border-radius: 0; box-shadow: none; }
.slg .slg-boardwrap { width: 100%; }
.slg-badges { gap: 6px; }
.slg-badge { padding: 7px 4px; }
.slg-blbl { font-size: 12px; }
.slg-bval { font-size: clamp(14px, 4.3vw, 17px); }
.slg-progress { width: 100%; }
.slg .slg-keypad { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px !important; }
.slg .slg-keypad .key { height: 46px !important; font-size: 24px !important; }
.slg-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 62px; height: auto; gap: 8px; }
.slg button.slg-tool { font-size: 13px !important; }
.slg .slg-info { grid-column: span 2; flex-direction: row; gap: 8px; }
.slg-info .slg-xico { font-size: 18px; }
.slg-info .slg-xlbl { font-size: 13px; }
.slg-info .slg-xval { font-size: 17px; }
.slg-ti { width: 22px !important; height: 22px !important; }
.slg-strip { gap: 12px; }
.slg .slg-ss { flex-basis: 100%; }
.slg-ss .sm-ss-cell { grid-template-columns: auto; justify-items: center; padding: 2px 6px; text-align: center; }
.slg-ss .sm-ss-cell::before { display: none; }
.slg-ss .sm-ss-lbl { grid-column: 1; font-size: 13px; }
.slg-ss .sm-ss-val { grid-column: 1; font-size: 17px; }
.slg-strip { padding-top: 14px; }
.slg-auth { margin-left: 0; width: 100%; justify-content: space-between; gap: 10px; padding-left: 0; border-left: 0; }
.slg-auth { flex-wrap: nowrap; }
.slg-user:empty, .slg-user:has(> .slg-user-prompt) { display: none; }
.slg-user { flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: 15px; }
.slg-user img { width: 34px !important; height: 34px !important; flex: 0 0 auto; }
.slg-user > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slg-auth-btns { flex: 1 0 auto; justify-content: flex-end; flex-wrap: nowrap; gap: 10px; }
.slg .slg-auth:has(.slg-user-prompt) button.slg-abtn { flex: 1 1 0; min-width: 0; }
.slg button.slg-abtn { flex: 0 0 auto; height: 48px; font-size: 15px !important; padding: 0 14px !important; border-radius: 12px !important; line-height: 46px; }
.slg button.slg-abtn--purple { box-shadow: 0 6px 16px rgba(124, 58, 237, .25) !important; }
.slg button.slg-abtn svg, .slg button.slg-abtn img { width: 18px; height: 18px; }
.slg-lb { padding: 14px; }
.slg .slg-lb .sm-table th, .slg .slg-lb .sm-table td { padding: 8px 4px !important; font-size: 12px !important; }
}
body.dark-theme-page .slg .slg-h1, body.dark-theme-page .slg .slg-lb-title { color: #f1f5f9 !important; }
body.dark-theme-page .slg .slg-sub, body.dark-theme-page .slg-lbl, body.dark-theme-page .slg-or, body.dark-theme-page .slg-lb-sub,
body.dark-theme-page .slg-xlbl, body.dark-theme-page .slg-ss .sm-ss-lbl, body.dark-theme-page .slg-tsub { color: #94a3b8 !important; }
body.dark-theme-page .slg-controls, body.dark-theme-page .slg-card { background: #1e293b; border-color: #334155; box-shadow: none; }
body.dark-theme-page .slg .slg-select, body.dark-theme-page .slg .slg-join input { background-color: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; }
body.dark-theme-page .slg .slg-select { background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23e2e8f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
body.dark-theme-page .slg-or { border-color: #334155; }
body.dark-theme-page .slg-badge--id { background: #2a0f1f; border-color: #831843; color: #f9a8d4; }
body.dark-theme-page .slg-badge--err { background: #3b0a14; border-color: #7f1d1d; color: #fca5a5; }
body.dark-theme-page .slg-badge--time { background: #052e2b; border-color: #065f46; color: #6ee7b7; }
body.dark-theme-page .slg-progress { background: #312e81; }
body.dark-theme-page .slg button.slg-tool { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; }
body.dark-theme-page .slg button.slg-tool:hover { border-color: #7c3aed !important; background: #1e1b4b !important; }
body.dark-theme-page .slg-ti { color: #a78bfa; }
body.dark-theme-page .slg button.slg-tool--gold { background: #1e1b4b !important; }
body.dark-theme-page .slg button.slg-tool--pink { background: #3b0a14 !important; border-color: #7f1d1d !important; }
body.dark-theme-page .slg button.slg-tool--pink .slg-ti { color: #fb7185; }
body.dark-theme-page .slg .slg-info { background: #172033; border-color: #334155; }
body.dark-theme-page .slg button.slg-tool.btn-notes-active { background: #312e81 !important; border-color: #a78bfa !important; }
body.dark-theme-page .slg button.slg-tool.btn-paused-active { background: #451a03 !important; border-color: #d97706 !important; }
body.dark-theme-page .slg .slg-keypad .key { background: #1e1b4b !important; border-color: #5b21b6 !important; color: #ede9fe !important; }
body.dark-theme-page .slg .slg-keypad .key:hover { background: #2e1065 !important; border-color: #a78bfa !important; }
body.dark-theme-page .slg .slg-keypad .key.key-clear { background: #3b0a14 !important; border-color: #9f1239 !important; color: #fda4af !important; }
body.dark-theme-page .slg-strip { border-color: #334155; }
body.dark-theme-page .slg-ss .sm-session-stats, body.dark-theme-page .slg-ss .sm-ss-cell { background: none; }
@media (max-width: 1023.98px) { body.dark-theme-page .slg .slg-game { background: none; border: 0; } }
body.dark-theme-page .slg-ss .sm-ss-cell + .sm-ss-cell, body.dark-theme-page .slg-auth { border-color: #334155; }
body.dark-theme-page .slg-ss .sm-ss-val, body.dark-theme-page .slg-xval { color: #f1f5f9; }
body.dark-theme-page .slg button.slg-abtn--ghost { background: #0f172a !important; color: #c4b5fd !important; border-color: #4c1d95 !important; }
body.dark-theme-page .slg .slg-tablewrap { border-color: #334155; }
body.dark-theme-page .slg .slg-lb .sm-table th { background: #0f172a !important; color: #94a3b8 !important; border-bottom-color: #334155 !important; }
body.dark-theme-page .slg .slg-lb .sm-table td { border-bottom-color: #334155 !important; }
body.dark-theme-page .slg-game:not(.ignore-dark) .board { background: #0f172a !important; border-color: #4c1d95 !important; }
body.dark-theme-page .slg-game:not(.ignore-dark) .cell { border-color: #334155 !important; background: #1e293b !important; color: #8b5cf6 !important; }
body.dark-theme-page .slg-game:not(.ignore-dark) .cell.fixed { background: #0f172a !important; color: #f8fafc !important; }
body.dark-theme-page .slg-game:not(.ignore-dark) .cell.highlight-group { background: #1e1b4b !important; }
body.dark-theme-page .slg-game:not(.ignore-dark) .cell.highlight-match { background: #3b82f6 !important; color: #ffffff !important; }
body.dark-theme-page .slg-game:not(.ignore-dark) .cell.selected { background: #8b5cf6 !important; color: #ffffff !important; box-shadow: inset 0 0 0 2px #c4b5fd !important; }
body.dark-theme-page .slg-game:not(.ignore-dark) .cell.error-cell { background-color: #450a0a !important; color: #ef4444 !important; }
body.dark-theme-page .slg-game:not(.ignore-dark) .note-num { color: #94a3b8 !important; }
body.dark-theme-page .slg-game:not(.ignore-dark) .cell.selected .note-num,
body.dark-theme-page .slg-game:not(.ignore-dark) .cell.highlight-match .note-num { color: #ffffff !important; }
.sl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sl-rate-stars { position: relative; display: inline-block; color: #d6d3e1; font-size: 16px; letter-spacing: 1px; line-height: 1; white-space: nowrap; font-style: normal; }
.sl-rate-fill { position: absolute; left: 0; top: 0; overflow: hidden; color: #f59e0b; white-space: nowrap; }
.sl-rate-stars--lg { font-size: 24px; }
.sl-rate-stars--sm { font-size: 14px; }
.sl-rate { margin-top: 20px; }
.sl-rate a.sl-rate-link { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; border: 1px solid #e9e5f5; border-radius: 12px; background: #faf8ff; color: #475569; font-size: 14px; font-weight: 600; text-decoration: none; }
.sl-rate a.sl-rate-link:hover { border-color: #c4b5fd; color: #4c1d95; }
.sl-rate-txt strong { color: #0f172a; font-weight: 900; }
.sl-rate p.sl-rate-quote { margin: 10px 0 0 !important; font-size: 14px !important; line-height: 1.5; font-style: italic; color: #475569 !important; }
.sl-rate .sl-rate-quote span { font-style: normal; color: #64748b; }
.sl-rv { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; margin: 18px 0; padding: 18px 20px; background: #faf5ff; border: 1px solid #ede9fe; border-radius: 16px; }
.sl-rv-sum { display: flex; align-items: center; gap: 14px; }
.sl-rv-big { font-size: 48px; font-weight: 900; line-height: 1; color: #4c1d95; }
.sl-rv-of { margin-top: 6px; font-size: 14px; color: #475569; }
.sl-rv ul.sl-rv-bars { flex: 1 1 260px; max-width: 420px; margin: 0 !important; padding: 0 !important; list-style: none; }
.sl-rv ul.sl-rv-bars li { display: grid; grid-template-columns: 36px 1fr 28px; align-items: center; gap: 10px; margin: 0 0 6px !important; font-size: 14px !important; color: #334155 !important; }
.sl-rv-track { display: block; height: 10px; overflow: hidden; border-radius: 999px; background: #e9e5f5; }
.sl-rv-track > span { display: block; height: 100%; border-radius: 999px; background: #f59e0b; }
.sl-rv-n { text-align: right; font-weight: 800; }
.sl-rv-quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sl-rv-quotes blockquote.sl-rv-quote { margin: 0 !important; padding: 16px 18px !important; border: 1px solid #ede9fe !important; border-left: 4px solid #8b5cf6 !important; border-radius: 14px; background: #ffffff; font-style: normal; }
.sl-rv-quotes blockquote.sl-rv-quote p { margin: 8px 0 6px !important; font-size: 16px !important; font-weight: 600; line-height: 1.5; color: #0f172a !important; }
.sl-rv-quote cite { display: block; font-size: 13px; font-style: normal; line-height: 1.5; color: #64748b; }
body.dark-theme-page .sl-rate-stars { color: #475569; }
body.dark-theme-page .sl-rate a.sl-rate-link { background: #1e293b; border-color: #334155; color: #cbd5e1; }
body.dark-theme-page .sl-rate a.sl-rate-link:hover { border-color: #a78bfa; color: #ede9fe; }
body.dark-theme-page .sl-rate-txt strong { color: #f8fafc; }
body.dark-theme-page .sl-rate p.sl-rate-quote { color: #cbd5e1 !important; }
body.dark-theme-page .sl-rate .sl-rate-quote span { color: #94a3b8; }
body.dark-theme-page .sl-rv { background: #0f172a; border-color: #334155; }
body.dark-theme-page .sl-rv-big { color: #c4b5fd; }
body.dark-theme-page .sl-rv-of, body.dark-theme-page .sl-rv-quote cite { color: #94a3b8; }
body.dark-theme-page .sl-rv ul.sl-rv-bars li { color: #cbd5e1 !important; }
body.dark-theme-page .sl-rv-track { background: #334155; }
body.dark-theme-page .sl-rv-quotes blockquote.sl-rv-quote { background: #0f172a; border-color: #334155 !important; border-left-color: #a78bfa !important; }
body.dark-theme-page .sl-rv-quotes blockquote.sl-rv-quote p { color: #f1f5f9 !important; }
.sl-rate a.sl-rate-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; color: #475569; font-size: 14px; font-weight: 600; text-decoration: none; }
.sl-rate a.sl-rate-stats strong { color: #0f172a; font-weight: 900; }
.sl-rate a.sl-rate-stats:hover strong { color: #4c1d95; }
.sl-rate-quotes { display: grid; margin-top: 10px; }
.sl-rate .sl-rate-quotes > p.sl-rate-quote { grid-area: 1 / 1; margin: 0 !important; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }
.sl-rate .sl-rate-quotes > p.sl-rate-quote.is-on { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .sl-rate .sl-rate-quotes > p.sl-rate-quote { transition: none; } }
.sl-rate button.sl-rate-btn, .sl-rv-cta button.sl-rate-btn, .sl-rate button.sl-rate-btn:hover, .sl-rv-cta button.sl-rate-btn:hover { display: inline-flex; align-items: center; padding: 8px 14px !important; border: 1px solid #c4b5fd !important; border-radius: 999px !important; background: #ffffff !important; color: #5b21b6 !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.2 !important; box-shadow: none !important; transform: none !important; cursor: pointer; width: auto !important; }
.sl-rate button.sl-rate-btn:hover, .sl-rv-cta button.sl-rate-btn:hover { background: #f5f3ff !important; border-color: #8b5cf6 !important; }
.sl-rate button.sl-rate-btn { margin: 12px 0 0 !important; }
.sm-app-container p.sl-rv-cta { margin: 18px 0 0 !important; font-weight: 600; }
.sl-rv-cta button.sl-rate-btn { margin: 0 0 0 8px !important; vertical-align: middle; }
.sl-rv-all { margin-top: 14px; }
.sl-rv-all > summary { cursor: pointer; margin-bottom: 12px; color: #5b21b6; font-weight: 800; }
body.dark-theme-page .sl-rate a.sl-rate-stats { color: #cbd5e1; }
body.dark-theme-page .sl-rate a.sl-rate-stats strong { color: #f8fafc; }
body.dark-theme-page .sl-rate button.sl-rate-btn, body.dark-theme-page .sl-rv-cta button.sl-rate-btn { background: #1e293b !important; border-color: #6d28d9 !important; color: #ddd6fe !important; }
body.dark-theme-page .sl-rate button.sl-rate-btn:hover, body.dark-theme-page .sl-rv-cta button.sl-rate-btn:hover { background: #2e1065 !important; border-color: #a78bfa !important; }
body.dark-theme-page .sl-rv-all > summary { color: #c4b5fd; }
.sl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 18px; }
.sm-app-container .sl-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px; border: 1px solid #ede9fe; border-radius: 16px; background: #faf5ff; text-align: center; text-decoration: none; }
.sm-app-container .sl-stat strong { font-size: 30px; font-weight: 900; line-height: 1.1; color: #4c1d95; }
.sm-app-container .sl-stat span { font-size: 14px; font-weight: 700; color: #475569; }
.sm-app-container a.sl-stat:hover { border-color: #c4b5fd; }
body.dark-theme-page .sm-app-container .sl-stat { background: #0f172a; border-color: #334155; }
body.dark-theme-page .sm-app-container .sl-stat strong { color: #c4b5fd; }
body.dark-theme-page .sm-app-container .sl-stat span { color: #cbd5e1; }
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
}
.sl-hdr { view-transition-name: sl-hdr; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .15s; }
.sl-hdr-note { position: absolute; right: 16px; top: calc(100% + 6px); z-index: 1002; padding: 7px 12px; border-radius: 10px; background: #1e1b4b; color: #ffffff; font-size: 13px; font-weight: 700; line-height: 1.3; box-shadow: 0 8px 20px rgba(30, 27, 75, .25); }
body.dark-theme-page .sl-hdr-note, .sl-hdr--dark .sl-hdr-note { background: #ede9fe; color: #1e1b4b; }