:root{--board-size:min(520px, 46vw, 64vh);--ink:#f2f4f8;--ink-muted:#c8cedb;--panel:#0a0e18d1;--panel-solid:#141a28;--btn-bg:#e8eaf0;--btn-ink:#10141f;--btn-bg-hover:#fff;--btn-bg-active-bg:#2e6fd0;--accent:#4a8ae0;--cellbg:#fdfdfb;--cellink:#17202e;--given-ink:#0a0f18;--entry-ink:#1a4fa0}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{color:var(--ink);background:#05070f;font-family:Segoe UI,system-ui,-apple-system,Arial,sans-serif;overflow:hidden}#root,.app{height:100vh}.site-bg{z-index:0;position:fixed;inset:0}.app-content{z-index:1;scrollbar-width:none;flex-direction:column;height:100vh;display:flex;position:relative;overflow-y:auto}.app-content::-webkit-scrollbar{width:0;display:none}.innerscroll{scrollbar-width:none;overflow-y:auto}.innerscroll::-webkit-scrollbar{width:0;display:none}.page{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:14px 24px 20px}.btn{appearance:none;background:var(--btn-bg);color:var(--btn-ink);cursor:pointer;opacity:1;border:1px solid #9aa2b4;border-radius:8px;font-family:inherit;font-weight:600;transition:transform 50ms;box-shadow:0 2px #00000059,inset 0 1px #ffffffb3}.btn:hover{background:var(--btn-bg-hover);opacity:1}.btn:active{opacity:1;transform:translateY(1px);box-shadow:0 1px #00000059}.smallbtn{padding:6px 14px;font-size:.9rem}.actbtn{padding:10px 18px;font-size:1rem}.pillbtn{border-radius:999px;padding:8px 16px;font-size:.95rem}.pillbtn.active{background:var(--btn-bg-active-bg);color:#fff;border-color:#1a4a98}.pillbtn.active:hover{background:#3a7adc}.home-hero{text-align:center;padding:10px 0 8px}.hero-title{margin:0;line-height:0}.hero-img{border-radius:14px;width:100%;max-width:1100px;height:auto;box-shadow:0 6px 26px #0000008c}.logo-x{letter-spacing:.01em;text-shadow:0 3px 10px #0009;font-size:clamp(2.6rem,6vw,4.2rem);font-weight:800}.logo-letter{color:#e8b64a;text-shadow:2px 3px #7a5a10,4px 6px 10px #000000b3;margin-right:2px;display:inline-block;transform:perspective(300px)rotateX(14deg)rotateY(-12deg)scale(1.2)}.tagline{color:var(--ink-muted);margin-top:12px;font-size:1.15rem}.home-main{align-items:flex-start;gap:22px;margin-top:18px;display:flex}.mode-cards{flex:1;grid-template-columns:repeat(3,1fr);gap:18px;display:grid}.mode-card{appearance:none;background:var(--panel-solid);color:var(--ink);cursor:pointer;text-align:center;border:1px solid #3a4458;border-radius:14px;flex-direction:column;align-items:center;gap:10px;padding:18px 16px 20px;text-decoration:none;display:flex;box-shadow:0 4px 16px #00000073}.mode-card:hover{border-color:var(--accent)}.mode-card h2{font-size:1.3rem}.mode-card p{color:var(--ink-muted);flex:1;font-size:.95rem;line-height:1.45}.playbtn{pointer-events:none}.minigrid-wrap{justify-content:center;align-items:center;width:110px;height:110px;display:flex}.minigrid{background:#fdfdfb;border:3px solid #e8b64a;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);width:72px;height:72px;display:grid;box-shadow:2px 3px 8px #00000080}.minigrid div{border:1px solid #5a6478}.home-side{flex-direction:column;gap:12px;width:320px;display:flex}.sidebtn{width:100%}.adslot{background:var(--panel-solid);border:1px solid #2c3446;border-radius:8px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.adslot-label{color:#8a93a8;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem;position:absolute}.adslot-leaderboard{width:100%;max-width:728px;height:90px;margin:0 auto 6px}.adslot-rect{width:300px;height:250px}.adslot-banner{width:100%;max-width:728px;height:90px;margin:18px auto 6px}.welcome-card{background:var(--panel-solid);border:1px solid #2c3446;border-radius:14px;max-width:860px;margin:22px auto 0;padding:6px;box-shadow:0 4px 16px #00000073}.welcome-scroll{height:190px;padding:14px 20px}.welcome-scroll h2{margin-bottom:8px}.welcome-scroll p{color:var(--ink-muted);margin-bottom:12px;line-height:1.6}.gamepage{flex-direction:column;display:flex}.game-topbar{align-items:center;gap:16px;margin-bottom:8px;display:flex}.game-title{text-align:center;text-shadow:0 2px 6px #0009;flex:1;font-size:1.6rem}.timer{font-variant-numeric:tabular-nums;background:var(--panel-solid);border:1px solid #2c3446;border-radius:8px;padding:6px 12px;font-weight:700}.game-controls{flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-bottom:10px;display:flex}.ctrl-group{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.ctrl-group.wrap{flex-wrap:wrap}.game-area{flex:1;justify-content:center;align-items:center;gap:26px;display:flex}.board-wrap{width:calc(var(--board-size) * 1.45);height:calc(var(--board-size) * 1.45);flex-shrink:0;justify-content:center;align-items:center;display:flex}.board{width:var(--board-size);height:var(--board-size);background:var(--cellbg);border:6px solid;border-radius:4px;position:relative}.cellgrid{grid-template-columns:repeat(var(--cells), 1fr);grid-template-rows:repeat(var(--cells), 1fr);display:grid;position:absolute;inset:0}.cell{cursor:pointer;color:var(--cellink);justify-content:center;align-items:center;display:flex;position:relative}.cell.given .cellnum{color:var(--given-ink);font-weight:800}.cell:not(.given) .cellnum{color:var(--entry-ink);font-weight:700}.cell.selected{background:#cfe0ff}.cell.sameval{background:#e4ecfb}.cell.wrong{background:#ffd4d4}.cell.wrong .cellnum{color:#a01818}.cellnum{font-size:calc(var(--board-size) / var(--cells,9) * .52);-webkit-user-select:none;user-select:none;line-height:1}.cell.twodigit .cellnum{font-size:calc(var(--board-size) / var(--cells,9) * .36)}.gline{pointer-events:none;background:#6a7488;position:absolute}.hline{height:1px;left:0;right:0}.vline{width:1px;top:0;bottom:0}.gline.boxline{background:#202838}.hline.boxline{height:2.5px}.vline.boxline{width:2.5px}.numpad{flex-direction:column;flex-shrink:0;gap:14px;width:240px;display:flex}.numpad-grid{grid-template-columns:repeat(var(--cols,3), 1fr);gap:8px;display:grid}.numbtn{height:58px;padding:0;font-size:1.35rem;font-weight:800}.numpad-actions{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.cube-stage{width:calc(var(--board-size) * 1.45);height:calc(var(--board-size) * 1.45);perspective:1400px;justify-content:center;align-items:center;display:flex}.cube{width:calc(var(--board-size) * .72);height:calc(var(--board-size) * .72);transform-style:preserve-3d;position:relative}.cube-face{background:var(--cellbg);backface-visibility:hidden;border:5px solid;position:absolute;inset:0}.face-front{transform:translateZ(calc(var(--board-size) * .36))}.face-back{transform:rotateY(180deg) translateZ(calc(var(--board-size) * .36))}.face-right{transform:rotateY(90deg) translateZ(calc(var(--board-size) * .36))}.face-left{transform:rotateY(-90deg) translateZ(calc(var(--board-size) * .36))}.face-top{transform:rotateX(90deg) translateZ(calc(var(--board-size) * .36))}.face-bottom{transform:rotateX(-90deg) translateZ(calc(var(--board-size) * .36))}.cube-facegrid{grid-template-rows:repeat(9,1fr);grid-template-columns:repeat(9,1fr);display:grid;position:absolute;inset:0}.cube-facegrid div{border:.5px solid #aab2c2}.cube-facegrid div:nth-child(3n){border-right:1.5px solid #3a4458}.cube-facegrid div:nth-child(n+19):nth-child(-n+27),.cube-facegrid div:nth-child(n+46):nth-child(-n+54){border-bottom:1.5px solid #3a4458}.winscreen{width:calc(var(--board-size) * 1.45);min-height:calc(var(--board-size) * 1.1);flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:relative}.win-title{text-shadow:0 4px 14px #000000b3;font-size:3rem;font-weight:900;animation:.6s cubic-bezier(.2,1.6,.4,1) winpop}.win-sub{color:var(--ink-muted);font-size:1.1rem}.win-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}@keyframes winpop{0%{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}.win-burst{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.burst-ray{background:hsl(var(--hue), 90%, 60%);width:5px;height:46px;transform:rotate(calc(var(--i) * 15deg)) translateY(-30px);opacity:0;border-radius:3px;animation:1.1s ease-out forwards burst;position:absolute}@keyframes burst{0%{opacity:1;transform:rotate(calc(var(--i) * 15deg)) translateY(-30px) scaleY(.4)}to{opacity:0;transform:rotate(calc(var(--i) * 15deg)) translateY(-190px) scaleY(1)}}.modal-backdrop{z-index:20;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--panel-solid);text-align:center;border:1px solid #3a4458;border-radius:14px;width:92%;max-width:520px;padding:26px 30px;box-shadow:0 10px 40px #0009}.modal h3{margin-bottom:12px}.verse-text{margin-bottom:10px;font-size:1.15rem;font-style:italic;line-height:1.6}.verse-ref{color:var(--ink-muted);margin-bottom:18px;font-weight:600}.staticpage h1{text-shadow:0 2px 6px #0009;margin:10px 0 12px}.static-scroll,.settings-scroll,.stats-scroll{background:var(--panel-solid);border:1px solid #2c3446;border-radius:14px;max-height:calc(100vh - 220px);padding:20px 26px}.static-scroll h2,.set-section h2,.stats-section h2{margin:16px 0 8px;font-size:1.2rem}.static-scroll h2:first-child{margin-top:0}.static-scroll p{color:var(--ink-muted);margin-bottom:12px;line-height:1.65}.static-scroll strong{color:var(--ink)}.static-scroll a{color:#7ab0f5}.contact-email{font-size:1.15rem}.set-section{margin-bottom:22px}.set-section:first-child h2{margin-top:0}.set-label{color:var(--ink-muted);margin-right:4px;font-weight:600}.set-note{color:var(--ink-muted);margin-top:8px;font-size:.9rem}.swatch-grid{flex-wrap:wrap;gap:10px;margin-top:12px;display:flex}.swatch{cursor:pointer;border:2px solid #5a6478;border-radius:10px;width:44px;height:44px}.swatch.active{border:3px solid #e8b64a;box-shadow:0 0 0 2px #e8b64a66}.colorpick{background:var(--btn-bg);cursor:pointer;border:1px solid #9aa2b4;border-radius:8px;width:56px;height:40px;padding:2px}.stats-section{margin-bottom:26px}.stats-row{gap:26px;margin:8px 0 10px;display:flex}.stat{flex-direction:column;align-items:center;display:flex}.stat-num{font-size:1.6rem;font-weight:800}.stat-label{color:var(--ink-muted);font-size:.85rem}.stats-table{border-collapse:collapse;width:100%}.stats-table th,.stats-table td{text-align:left;border-bottom:1px solid #2c3446;padding:6px 10px}.stats-table th{color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}.appcards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:10px;display:grid}.appcard{color:var(--ink);background:#1a2133;border:1px solid #3a4458;border-radius:12px;padding:14px;text-decoration:none;display:block}.appcard:hover{border-color:var(--accent)}.appcard img{border-radius:8px;width:100%;margin-bottom:10px}.appcard h3{margin-bottom:6px}.appcard p{color:var(--ink-muted);font-size:.92rem;line-height:1.45}.footer{text-align:center;margin-top:auto;padding:20px 24px 26px}.footer-links{flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-bottom:10px;display:flex}.footer-links a{color:#aeb9d0;text-shadow:0 1px 3px #000c;font-size:.95rem;font-weight:600;text-decoration:none}.footer-links a:hover{color:#fff}.footer-credit{color:#aeb9d0;text-shadow:0 1px 3px #000c;font-size:.9rem}.lighttheme{--ink:#1a2230;--ink-muted:#45506a;--panel-solid:#fff}.lighttheme .game-title,.lighttheme .logo-x,.lighttheme .staticpage h1{text-shadow:none}.lighttheme .footer-links a{color:#45506a;text-shadow:none}.lighttheme .footer-links a:hover{color:#10141f}.lighttheme .footer-credit{color:#45506a;text-shadow:none}.lighttheme .mode-card,.lighttheme .welcome-card,.lighttheme .adslot,.lighttheme .static-scroll,.lighttheme .settings-scroll,.lighttheme .stats-scroll,.lighttheme .modal{border-color:#c8cedb}.lighttheme .appcard{background:#f0f2f7;border-color:#c8cedb}.lighttheme .timer{border-color:#c8cedb}.lighttheme .static-scroll a{color:#1a5ac0}@media (width<=900px){:root{--board-size:min(84vw, 48vh)}.page{padding:10px 12px 16px}.home-main{flex-direction:column}.mode-cards{grid-template-columns:1fr}.home-side{align-items:center;width:100%}.game-area{flex-direction:column;gap:8px}.numpad{width:min(92vw,360px)}.numpad-grid{grid-template-columns:repeat(5,1fr)}.numbtn{height:48px;font-size:1.1rem}.numpad-actions{grid-template-columns:repeat(3,1fr)}.adslot-rect{display:none}.game-title{font-size:1.25rem}}
