.q-topbar{position:relative;z-index:10;width:100%;display:flex;align-items:center;justify-content:space-between;padding:6px 14px;gap:12px;background:transparent}.q-topbar-left,.q-topbar-right{display:flex;gap:var(--space-xs, 4px);min-width:40px}.q-topbar-right{justify-content:flex-end}.q-topbar-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid rgba(99,102,241,.08);border-radius:11px;background:linear-gradient(180deg,#ffffffc7,#f5f7ffad);color:#5f6684c7;box-shadow:inset 0 1px #ffffffb3;font-size:16px;font-weight:700;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .1s;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.q-topbar-btn:hover{background:linear-gradient(180deg,#ffffffe0,#eef1ffc7);color:var(--text-color, #1a1a2e);border-color:#6366f129}.q-topbar-btn:active{transform:translateY(1px)}.q-topbar-off-line{position:absolute;z-index:2;top:50%;left:50%;width:60%;height:2px;background:var(--text-muted, #6b7280);transform:translate(-50%,-50%) rotate(-45deg);pointer-events:none;opacity:.8;border-radius:1px}.q-topbar-confirm-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:q-fade-in .2s ease-out}@keyframes q-fade-in{0%{opacity:0}to{opacity:1}}.q-topbar-confirm-card{background:var(--bg, #fafafa);border:1px solid var(--border-color, rgba(99, 102, 241, .15));border-radius:16px;padding:var(--space-lg, 24px);box-shadow:0 8px 32px #00000026;max-width:320px;width:85%;text-align:center;animation:q-card-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes q-card-pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.q-topbar-confirm-title{font-size:var(--text-lg, 18px);font-weight:800;color:var(--text-color, #1a1a2e);margin:0 0 var(--space-xs, 4px)}.q-topbar-confirm-sub{font-size:var(--text-sm, 13px);color:var(--text-muted, #6b7280);margin:0 0 var(--space-lg, 24px)}.q-topbar-confirm-btns{display:flex;flex-wrap:wrap;gap:var(--space-sm, 8px);justify-content:center}.q-topbar-confirm-btn{flex:1 1 92px;padding:var(--space-sm, 8px) var(--space-md, 16px);border:none;border-radius:10px;font-size:var(--text-md, 15px);font-weight:700;font-family:inherit;cursor:pointer;transition:transform .1s,background-color .15s;-webkit-tap-highlight-color:transparent;min-height:44px}.q-topbar-confirm-btn:active{transform:translateY(1px)}.q-topbar-confirm-btn--cancel{background:var(--accent, #6366f1);color:#fff}.q-topbar-confirm-btn--exit{background:transparent;color:var(--text-muted, #6b7280);border:1px solid var(--border-color, rgba(99, 102, 241, .15))}.q-topbar-confirm-btn--exit:hover{background:#00000008}.q-topbar-confirm-btn--restart{background:#6366f114;color:var(--accent, #6366f1);border:1px solid rgba(99,102,241,.16)}.q-topbar-confirm-btn--restart:hover{background:#6366f11f}.q-home{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;width:100%;padding:var(--space-md, 16px)}.q-home-header{text-align:center;margin-bottom:clamp(32px,6vh,56px)}.q-home-logo{font-size:clamp(36px,9vw,52px);font-weight:900;margin:0;background:linear-gradient(135deg,#6366f1,#8b5cf6,#06b6d4);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.02em;line-height:1}.q-pills{position:relative;display:flex;padding:3px;background:var(--bg-surface, rgba(99,102,241,.06));border-radius:12px;width:100%;max-width:400px;overflow:hidden;margin-bottom:20px}.q-pills--compact .q-pill-btn{padding:7px 4px}.q-pills-indicator{position:absolute;top:3px;height:calc(100% - 6px);background:#fff;border-radius:10px;box-shadow:0 1px 4px #00000014;transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);z-index:0}.q-pill-btn{flex:1;position:relative;z-index:1;padding:var(--space-sm, 8px) var(--space-xs, 4px);border:none;outline:none;border-radius:10px;background:transparent;color:var(--text-muted, #6B7280);cursor:pointer;transition:color .2s;-webkit-tap-highlight-color:transparent;font-family:inherit;font-size:var(--text-sm, 13px);font-weight:700;text-align:center}.q-pill-btn--active{color:var(--accent, #6366F1)}.q-home-grid-area{position:relative;width:100%;max-width:400px;min-height:0;display:flex;align-items:center;justify-content:center;margin-bottom:0}.q-home-grid-canvas{width:100%;aspect-ratio:1;max-height:100%;pointer-events:none;opacity:.18;animation:q-grid-attract 4s ease-out}@keyframes q-grid-attract{0%{opacity:0}8%{opacity:.55}60%{opacity:.35}to{opacity:.18}}.q-home-grid-canvas .queens-board-container{width:100%;aspect-ratio:1}.q-home-grid-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm, 8px)}.q-home-play-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-sm, 8px);padding:var(--space-md, 16px) var(--space-xl, 32px);border:none;border-radius:16px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-family:inherit;font-size:var(--text-lg, 18px);font-weight:800;cursor:pointer;box-shadow:0 4px 16px #6366f159;transition:transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent;min-height:56px;letter-spacing:.01em}.q-home-play-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px #6366f173}.q-home-play-btn:active{transform:translateY(0);box-shadow:0 2px 8px #6366f14d}.q-home-play-meta{font-size:var(--text-xs, 11px);font-weight:600;color:var(--text-muted, #6B7280)}.q-home-footer{display:flex;gap:var(--space-lg, 24px);padding-bottom:var(--space-sm, 8px)}.q-home-link{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-sm, 8px) var(--space-lg, 24px);font-family:inherit;font-size:var(--text-sm, 13px);font-weight:700;color:var(--text-muted, #6B7280);background:var(--bg-surface, rgba(20, 40, 80, .05));border:1px solid rgba(99,102,241,.15);border-radius:10px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;-webkit-tap-highlight-color:transparent}.q-home-link:hover{color:var(--accent, #6366F1);background:#6366f114;border-color:#6366f14d}.q-win-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#00000073;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:100;padding:var(--space-lg, 24px);animation:q-win-fade .4s ease-out forwards}@keyframes q-win-fade{0%{opacity:0}to{opacity:1}}.q-win-card{display:flex;flex-direction:column;align-items:center;padding:var(--space-xl, 32px) var(--space-lg, 24px);background:linear-gradient(180deg,#f8faff,#eef2ff);border:1px solid rgba(99,102,241,.15);border-radius:20px;box-shadow:0 8px 40px #0000002e;animation:q-win-scale .5s cubic-bezier(.175,.885,.32,1.275) .1s both;max-width:340px;width:90%}@keyframes q-win-scale{0%{opacity:0;transform:scale(.5) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.q-win-title{font-size:var(--text-2xl, 32px);font-weight:800;margin:0 0 var(--space-sm, 8px);background:linear-gradient(135deg,#6366f1,#8b5cf6);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center}.q-win-time{font-size:var(--text-xl, 24px);font-weight:700;color:var(--text-color, #1A1A2E);font-variant-numeric:tabular-nums;margin-bottom:var(--space-md, 16px)}.q-win-stars{display:flex;gap:var(--space-sm, 8px);margin-bottom:var(--space-lg, 24px)}.q-win-star{font-size:28px;animation:q-star-pop .4s cubic-bezier(.34,1.56,.64,1) backwards}.q-win-star--filled{color:#f59e0b}.q-win-star--empty{color:#d1d5db}.q-win-star:nth-child(1){animation-delay:.2s}.q-win-star:nth-child(2){animation-delay:.35s}.q-win-star:nth-child(3){animation-delay:.5s}@keyframes q-star-pop{0%{opacity:0;transform:scale(0) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(0)}}.q-win-buttons{display:flex;flex-direction:column;gap:var(--space-sm, 8px);width:100%}.q-win-btn{width:100%;padding:var(--space-sm, 8px) var(--space-lg, 24px);border:none;border-radius:10px;font-size:var(--text-md, 15px);font-weight:700;font-family:inherit;cursor:pointer;transition:transform .1s,box-shadow .15s,background-color .15s;-webkit-tap-highlight-color:transparent;min-height:44px}.q-win-btn:active{transform:translateY(1px)}.q-win-btn--primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 2px 8px #6366f14d}.q-win-btn--primary:hover{box-shadow:0 4px 12px #6366f166}.q-win-btn--share{background:linear-gradient(135deg,#14b8a6,#0ea5e9);color:#fff;box-shadow:0 2px 8px #14b8a64d}.q-win-btn--share:hover{box-shadow:0 4px 12px #14b8a666}.q-win-btn--secondary{background:transparent;color:var(--text-muted, #6B7280);border:1px solid var(--border-color, rgba(99,102,241,.15))}.q-win-btn--secondary:hover{background:#00000008;color:var(--text-color, #1A1A2E)}.game-container{display:flex;flex-direction:column;align-items:center;width:100%;flex:1;min-height:0;overflow:visible;position:relative}.game-content{display:flex;flex-direction:column;align-items:center;width:100%;flex:1;min-height:0;overflow:visible}.game-board-area{display:flex;flex-direction:column;align-items:stretch;width:fit-content;min-width:var(--game-board-min-size);max-width:none;flex-shrink:0;margin-inline:auto}.game-content{justify-content:center}.game-controls,.game-toolbar{display:flex;align-items:center;gap:var(--queens-space-sm, 8px);padding:var(--queens-space-xs, 4px) 0;width:100%}.game-toolbar--top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--queens-space-sm, 8px);padding-inline:var(--queens-space-sm, 8px)}.game-toolbar--bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--queens-space-sm, 8px);padding-inline:var(--queens-space-sm, 8px);padding-top:var(--queens-space-sm, 8px);padding-bottom:var(--queens-space-md, 12px)}.game-toolbar__left,.game-toolbar__center,.game-toolbar__right{display:flex;align-items:center}.game-toolbar__center{justify-content:center}.game-toolbar__right{justify-content:flex-end}.game-toolbar__left--spacer{min-height:1px}.game-footer-cluster{display:inline-flex;align-items:center;justify-content:center;gap:var(--queens-space-xs, 4px);padding:3px;border:1px solid rgba(99,102,241,.08);border-radius:16px;background:#ffffff4d;box-shadow:inset 0 1px #ffffffb8,0 4px 12px #6366f10a}.game-footer-cluster--history{gap:1px;padding:2px;border-color:#6366f114;border-radius:14px;background:#ffffff3d;box-shadow:inset 0 1px #ffffffad}.game-footer-primary-btn,.game-history-btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:11px;background:transparent;font-weight:700;font-family:inherit;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .1s;-webkit-tap-highlight-color:transparent;color:#5f6684e0}.game-footer-primary-btn{gap:var(--queens-space-xs, 4px);min-height:38px;padding:0 14px;font-size:13px}.game-history-btn{width:34px;height:34px;padding:0;border-radius:10px;color:#5f6684ad}.game-history-btn svg{width:18px;height:18px}.game-footer-primary-btn:hover:not(:disabled){background:#ffffff8f;color:var(--queens-text, #1a1a2e)}.game-history-btn:hover:not(:disabled){background:#ffffff9e;color:#1a1a2eeb}.game-footer-primary-btn:active:not(:disabled),.game-history-btn:active:not(:disabled){transform:translateY(1px)}.game-footer-primary-btn:disabled,.game-history-btn:disabled{opacity:.28;cursor:default}.game-footer-primary-btn--check{background:#6366f117;color:var(--queens-accent, #6366f1)}.game-footer-primary-btn--check:hover:not(:disabled){background:#6366f124;color:var(--queens-accent, #6366f1)}.game-footer-primary-btn--check svg{color:var(--queens-accent, #6366f1)}.game-top-control,.game-top-icon-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(99,102,241,.08);background:linear-gradient(180deg,#fffc,#f5f7ffb8);color:#5f6684d6;box-shadow:inset 0 1px #ffffffb8;transition:background-color .15s,color .15s,border-color .15s,transform .1s;-webkit-tap-highlight-color:transparent;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.game-top-control{gap:6px;min-height:30px;padding:0 12px;border-radius:11px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}.game-top-control--quiet{color:#5f6684b3;background:linear-gradient(180deg,#ffffffc2,#f6f7fca8);border-color:#6366f10f;box-shadow:inset 0 1px #ffffffad;font-size:12px;font-weight:700}.game-top-control__icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px}.game-top-control--quiet .game-top-control__icon{opacity:.72}.game-top-control__text{line-height:1;letter-spacing:.01em}.game-top-status{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:30px;padding:0 12px;border-radius:12px;border:1px solid rgba(99,102,241,.08);background:linear-gradient(180deg,#ffffffbd,#eff2ff8f);box-shadow:inset 0 1px #ffffffb3}.game-top-status__value{font-size:14px;font-weight:800;color:var(--queens-text, #1a1a2e);font-variant-numeric:tabular-nums}.game-top-status__meta{font-size:11px;font-weight:700;padding:1px 6px;border-radius:999px;line-height:1.4;animation:queens-flash-in .3s ease-out}.game-top-status__meta--ok{background:#10b9811f;color:var(--queens-success, #10b981)}.game-top-status__meta--error{background:#ef44441f;color:var(--queens-error, #ef4444)}.game-top-icon-btn{width:30px;height:30px;padding:0;border-radius:10px}.game-top-control:hover:not(:disabled),.game-top-icon-btn:hover:not(:disabled){background:linear-gradient(180deg,#ffffffe6,#edf0ffd1);color:var(--queens-text, #1a1a2e);border-color:#6366f129}.game-top-control:active:not(:disabled),.game-top-icon-btn:active:not(:disabled){transform:translateY(1px)}.game-top-control:disabled,.game-top-icon-btn:disabled{opacity:.4;cursor:default}.game-top-control:focus-visible,.game-top-icon-btn:focus-visible{outline:2px solid rgba(99,102,241,.35);outline-offset:2px}.queens-star-icon{font-size:16px;color:var(--queens-star-gold, #f59e0b)}@keyframes queens-flash-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.game-board-wrapper{position:relative;width:100%;aspect-ratio:1;min-width:var(--game-board-min-size);overflow:hidden}.queens-board-container{width:100%;height:100%;min-width:0;min-height:0}.game-paused-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#f8fafcd1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;z-index:5}.game-paused-text{font-size:clamp(28px,6vw,42px);font-weight:800;color:var(--queens-text, #1a1a2e)}.game-paused-sub{font-size:var(--queens-font-sm, 13px);font-weight:600;color:var(--queens-text-muted, #6b7280);text-transform:uppercase;letter-spacing:.08em}@media(max-width:380px){.game-controls,.game-toolbar{gap:var(--queens-space-xs, 4px);padding:var(--queens-space-xs, 4px) var(--queens-space-sm, 8px)}.game-toolbar--top{grid-template-columns:1fr;justify-items:stretch}.game-toolbar__left,.game-toolbar__right,.game-toolbar__center{justify-content:center}.game-footer-primary-btn{min-height:36px;padding:0 12px;font-size:var(--queens-font-xs, 11px)}.game-top-control,.game-top-status{min-height:28px;padding-inline:10px}.game-top-status__meta{font-size:11px}.game-history-btn{width:34px;height:34px}.game-footer-primary-btn span{display:none}}@media(max-height:780px){.game-controls,.game-toolbar{padding-block:2px}}.q-levels{display:flex;flex-direction:column;align-items:center;flex:1;width:100%;padding:var(--space-md, 16px);overflow-y:auto}.q-levels-header{text-align:center;margin-bottom:var(--space-lg, 24px)}.q-levels-title{font-size:var(--text-xl, 24px);font-weight:800;color:var(--text-color, #1A1A2E);margin:0}.q-levels-progress{font-size:var(--text-sm, 13px);font-weight:600;color:var(--text-muted, #6B7280);margin:var(--space-xs, 4px) 0 0}.q-levels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--space-sm, 8px);width:100%;max-width:440px}.q-level-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:1;border:1px solid rgba(99,102,241,.12);border-radius:12px;background:#fff;cursor:pointer;transition:transform .1s,box-shadow .2s,border-color .2s;-webkit-tap-highlight-color:transparent;font-family:inherit;position:relative;padding:var(--space-xs, 4px)}.q-level-card:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #6366f11f;border-color:#6366f140}.q-level-card:active:not(:disabled){transform:translateY(0)}.q-level-card--locked{opacity:.4;cursor:default;background:var(--bg-surface, rgba(99,102,241,.04))}.q-level-card--done{border-color:#10b98133;background:#10b9810a}.q-level-card--next{border-color:#6366f166;box-shadow:0 0 0 2px #6366f126}.q-level-number{font-size:var(--text-lg, 18px);font-weight:800;color:var(--text-color, #1A1A2E);line-height:1}.q-level-card--locked .q-level-number{font-size:var(--text-md, 15px)}.q-level-check{position:absolute;top:4px;right:4px;font-size:12px;color:#10b981;line-height:1}.q-level-time{font-size:var(--text-xs, 11px);font-weight:600;color:var(--text-muted, #6B7280);font-variant-numeric:tabular-nums}.q-level-size{font-size:9px;font-weight:600;color:var(--text-muted, #6B7280);opacity:.6}.q-settings{display:flex;flex-direction:column;flex:1;width:100%;max-width:440px;margin:0 auto;padding:var(--space-md, 16px);gap:var(--space-lg, 24px);overflow-y:auto}.q-settings-title{font-size:var(--text-xl, 24px);font-weight:800;color:var(--text-color, #1A1A2E);margin:0;text-align:center}.q-settings-group{display:flex;flex-direction:column;gap:1px;background:var(--border-color, rgba(99,102,241,.1));border-radius:14px;overflow:hidden}.q-settings-group-title{font-size:var(--text-xs, 11px);font-weight:700;color:var(--text-muted, #6B7280);text-transform:uppercase;letter-spacing:.05em;padding:var(--space-sm, 8px) var(--space-md, 16px);margin:0;background:var(--bg, #FAFAFA)}.q-setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md, 16px);padding:var(--space-md, 16px);background:#fff;border:none;cursor:pointer;transition:background-color .15s;-webkit-tap-highlight-color:transparent;font-family:inherit;text-align:left;width:100%}.q-setting-row:hover{background:#6366f108}.q-setting-row:active{background:#6366f10f}.q-setting-info{display:flex;flex-direction:column;gap:2px;min-width:0}.q-setting-label{font-size:var(--text-md, 15px);font-weight:700;color:var(--text-color, #1A1A2E)}.q-setting-desc{font-size:var(--text-xs, 11px);font-weight:500;color:var(--text-muted, #6B7280);line-height:1.3}.q-toggle{position:relative;width:44px;height:26px;border-radius:13px;background:#d1d5db;transition:background-color .2s;flex-shrink:0}.q-toggle--on{background:#6366f1}.q-toggle-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000026;transition:transform .2s}.q-toggle--on .q-toggle-knob{transform:translate(18px)}.q-settings-radio-group{display:flex;flex-direction:column;gap:1px}.q-settings-radio{display:flex;align-items:center;gap:var(--space-md, 16px);padding:var(--space-md, 16px);background:#fff;border:none;cursor:pointer;transition:background-color .15s;-webkit-tap-highlight-color:transparent;font-family:inherit;text-align:left;width:100%}.q-settings-radio:hover{background:#6366f108}.q-settings-radio-dot{width:20px;height:20px;border-radius:50%;border:2px solid #D1D5DB;flex-shrink:0;transition:border-color .2s,box-shadow .2s;position:relative}.q-settings-radio--active .q-settings-radio-dot{border-color:#6366f1;box-shadow:inset 0 0 0 4px #6366f1}.q-settings-radio-text{display:flex;flex-direction:column;gap:2px}.q-settings-radio-label{font-size:var(--text-md, 15px);font-weight:700;color:var(--text-color, #1A1A2E)}.q-settings-radio-desc{font-size:var(--text-xs, 11px);font-weight:500;color:var(--text-muted, #6B7280)}.q-settings-version{margin-top:16px;text-align:center;font-size:11px;color:var(--text-muted, #6B7280);opacity:.7}.q-howto{display:flex;flex-direction:column;flex:1;width:100%;max-width:480px;margin:0 auto;padding:var(--space-md, 16px)}.q-howto-title{font-size:var(--text-xl, 24px);font-weight:800;color:var(--text-color, #1A1A2E);margin:0 0 var(--space-lg, 24px);text-align:center}.q-howto-scroll{display:flex;flex-direction:column;gap:var(--space-md, 16px)}.q-howto-banner{margin:0;padding:var(--space-sm, 8px) var(--space-md, 16px);border:1px solid rgba(99,102,241,.1);border-radius:14px;background:#6366f10a;color:var(--text-muted, #6B7280);font-size:var(--text-xs, 11px);font-weight:600;line-height:1.4;text-align:center}.q-howto-link{padding:0;border:none;background:none;color:#4f46e5;font:inherit;font-weight:800;cursor:pointer}.q-howto-section{background:#fff;border:1px solid rgba(99,102,241,.1);border-radius:14px;padding:var(--space-md, 16px)}.q-howto-heading{font-size:var(--text-md, 15px);font-weight:800;color:#6366f1;margin:0 0 var(--space-sm, 8px)}.q-howto-text{font-size:var(--text-sm, 13px);font-weight:500;color:var(--text-color, #1A1A2E);line-height:1.6;margin:0}.q-howto-list{list-style:none;padding:0;margin:0}.q-howto-list li{font-size:var(--text-sm, 13px);font-weight:500;color:var(--text-color, #1A1A2E);line-height:1.6;padding-left:16px;position:relative}.q-howto-list li:before{content:"•";position:absolute;left:0;color:#6366f1;font-weight:700}.q-howto-list li+li{margin-top:var(--space-xs, 4px)}.q-howto-example{margin-top:var(--space-md, 16px);display:flex;flex-direction:column;align-items:center;gap:var(--space-sm, 8px)}.q-howto-grid-demo{display:grid;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,36px);gap:2px}.q-howto-cell{display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;border-radius:6px;user-select:none;-webkit-user-select:none}.q-howto-cell--star{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-size:18px}.q-howto-cell--bad{background:#ef44441a;color:#c82828b3;font-size:12px}.q-howto-caption{font-size:var(--text-xs, 11px);font-weight:600;color:var(--text-muted, #6B7280);text-align:center;margin:0}.q-howto-meta{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-md, 16px);padding-top:var(--space-sm, 8px);border-top:1px solid rgba(99,102,241,.12)}.q-howto-meta-btn{padding:2px 0;border:none;background:none;color:var(--text-muted, #6B7280);font-family:inherit;font-size:var(--text-xs, 11px);cursor:pointer;transition:color .15s}.q-howto-meta-btn:hover,.q-howto-link:hover{color:var(--text-color, #1A1A2E)}.q-stats{display:flex;flex-direction:column;align-items:center;flex:1;width:100%;max-width:440px;margin:0 auto;padding:var(--space-md, 16px);gap:var(--space-lg, 24px);overflow-y:auto}.q-stats-title{font-size:var(--text-xl, 24px);font-weight:800;color:var(--text-color, #1A1A2E);margin:0;text-align:center}.q-stats-total{text-align:center;padding:var(--space-lg, 24px);background:linear-gradient(135deg,#6366f114,#8b5cf614);border-radius:16px;width:100%}.q-stats-big-number{font-size:48px;font-weight:900;color:#6366f1;line-height:1;font-variant-numeric:tabular-nums}.q-stats-big-label{font-size:var(--text-sm, 13px);font-weight:600;color:var(--text-muted, #6B7280);margin-top:var(--space-xs, 4px)}.q-stats-difficulties{display:flex;flex-direction:column;gap:var(--space-sm, 8px);width:100%}.q-stats-card{background:#fff;border:1px solid rgba(99,102,241,.1);border-radius:14px;padding:var(--space-md, 16px)}.q-stats-card-title{font-size:var(--text-md, 15px);font-weight:800;color:var(--text-color, #1A1A2E);margin:0 0 var(--space-sm, 8px)}.q-stats-card-grid{display:flex;flex-wrap:wrap;gap:var(--space-sm, 8px)}.q-stat-item{display:flex;flex-direction:column;align-items:center;min-width:60px;flex:1}.q-stat-value{font-size:var(--text-lg, 18px);font-weight:800;color:var(--text-color, #1A1A2E);font-variant-numeric:tabular-nums;line-height:1.2}.q-stat-label{font-size:10px;font-weight:600;color:var(--text-muted, #6B7280);text-transform:uppercase;letter-spacing:.03em;text-align:center}.q-tutorial{display:flex;flex-direction:column;align-items:center;flex:1;width:100%;padding:var(--space-md, 16px);gap:var(--space-md, 16px)}.q-tutorial-title{font-size:var(--text-xl, 26px);font-weight:800;color:var(--title-color, #1a2744)}.q-tutorial-lessons{display:flex;flex-direction:column;gap:var(--space-sm, 8px);width:100%;max-width:400px}.q-tutorial-lesson-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:var(--space-md, 16px);border:1px solid rgba(99,102,241,.15);border-radius:14px;background:#fff9;cursor:pointer;transition:background .15s,border-color .15s;-webkit-tap-highlight-color:transparent;text-align:left;font-family:inherit}.q-tutorial-lesson-btn:hover{background:#6366f10f;border-color:#6366f14d}.q-tutorial-lesson-num{font-size:var(--text-xs, 11px);font-weight:700;color:var(--accent, #6366F1);text-transform:uppercase;letter-spacing:.05em}.q-tutorial-lesson-title{font-size:var(--text-lg, 18px);font-weight:800;color:var(--title-color, #1a2744)}.q-tutorial-lesson-sub{font-size:var(--text-sm, 13px);color:var(--text-muted, #6B7280)}.q-tutorial-logo-header{text-align:center}.q-tutorial-logo-welcome{display:block;font-size:var(--text-sm, 13px);font-weight:500;color:var(--text-muted, #6B7280);margin-bottom:2px}.q-tutorial-logo-title{font-size:clamp(28px,7vw,40px);font-weight:900;margin:0;background:linear-gradient(135deg,#6366f1,#8b5cf6,#06b6d4);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.02em;line-height:1}.q-tutorial-logo-subtitle{display:block;font-size:var(--text-sm, 13px);font-weight:600;color:var(--text-muted, #6B7280);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}.q-tutorial-toprow{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:400px}.q-tutorial-prev{background:none;border:none;padding:2px 4px;font-family:inherit;font-size:var(--text-xs, 11px);font-weight:600;color:var(--text-muted, #6B7280);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s}.q-tutorial-prev:hover:not(:disabled){color:var(--accent, #6366F1)}.q-tutorial-prev:disabled{opacity:.3;cursor:default}.q-tutorial-step-counter{font-size:var(--text-xs, 11px);font-weight:600;color:var(--text-muted, #6B7280)}.q-tutorial-lesson-header{text-align:center}.q-tutorial-lesson-header .q-tutorial-lesson-title{font-size:var(--text-xl, 26px);margin:0}.q-tutorial-lesson-subtitle{font-size:var(--text-sm, 13px);font-weight:500;color:var(--text-muted, #6B7280);margin:2px 0 0}.q-tutorial-heading{text-align:center;max-width:400px;font-size:var(--text-sm, 13px);font-weight:500;color:var(--text-muted, #6B7280);line-height:1.5}.q-tutorial-heading strong{font-weight:700;color:var(--text-color, #2a3a5c)}.q-tutorial-board{width:100%;max-width:min(80vw,320px);aspect-ratio:1}.q-tutorial-board .queens-board-container{width:100%;aspect-ratio:1}.q-tutorial-text{text-align:center;max-width:400px;font-size:var(--text-md, 15px);font-weight:500;color:var(--text-color, #2a3a5c);line-height:1.5}.q-tutorial-text strong{font-weight:800;color:var(--title-color, #1a2744)}.q-tutorial-error{font-size:var(--text-sm, 13px);font-weight:700;color:var(--error, #ef4444);animation:q-error-shake .4s ease}@keyframes q-error-shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.q-tutorial-next{padding:var(--space-sm, 8px) var(--space-xl, 32px);border:none;border-radius:12px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-family:inherit;font-size:var(--text-md, 15px);font-weight:800;cursor:pointer;box-shadow:0 3px 12px #6366f14d;transition:transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent;min-height:44px}.q-tutorial-next:hover{transform:translateY(-1px);box-shadow:0 5px 18px #6366f166}.q-tutorial-next:active{transform:translateY(0);box-shadow:0 2px 6px #6366f140}.q-consent-card{max-width:360px;text-align:center}.q-consent-title{margin:0 0 12px;font-size:var(--text-xl, 24px);font-weight:800;color:var(--text-color, #1A1A2E)}.q-consent-body{margin:0 0 20px;font-size:var(--text-sm, 13px);line-height:1.6;color:var(--text-muted, #6B7280)}.q-consent-actions{display:flex;flex-direction:column;gap:10px}.q-consent-primary,.q-consent-secondary{border:none;border-radius:14px;padding:14px 18px;font-size:15px;font-weight:800;cursor:pointer}.q-consent-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.q-consent-secondary{background:#6366f114;color:#3730a3}.q-consent-privacy{display:inline-block;margin-top:14px;font-size:12px;color:var(--text-muted, #6B7280);text-decoration:underline;text-underline-offset:2px}.q-ad-layout{display:grid;min-height:100dvh;width:100%;--layout-edge-padding: clamp(12px, 2vw, 24px);--layout-bottom-gap: clamp(4px, 1vh, 8px)}.q-ad-layout[data-side=true][data-bottom=false]{grid-template-columns:minmax(0,1fr) minmax(var(--app-min-width),var(--app-shell-max-width)) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.q-ad-layout[data-side=true][data-bottom=true]{grid-template-columns:minmax(0,1fr) minmax(var(--app-min-width),var(--app-shell-max-width)) minmax(0,1fr);grid-template-rows:auto auto minmax(var(--ad-bottom-height),1fr)}.q-ad-layout[data-side=false][data-bottom=true],.q-ad-layout[data-side=false][data-bottom=false]{grid-template-columns:minmax(0,1fr)}.q-ad-layout[data-side=false][data-bottom=true]{grid-template-rows:auto auto minmax(var(--ad-bottom-height),1fr)}.q-ad-layout[data-side=false][data-bottom=false]{grid-template-rows:auto minmax(0,1fr)}.q-ad-layout-topbar{min-width:0;width:100%;position:relative;z-index:2}.q-ad-layout[data-side=false] .q-ad-layout-topbar{grid-column:1;grid-row:1}.q-ad-layout[data-side=true] .q-ad-layout-topbar{grid-column:2;grid-row:1}.q-ad-layout-game{min-width:0;min-height:0;width:100%;display:flex;flex-direction:column;position:relative}.q-ad-layout[data-side=true] .q-ad-layout-game{grid-column:2;grid-row:2}.q-ad-layout[data-side=false] .q-ad-layout-game{grid-column:1;grid-row:2;padding-inline:var(--layout-edge-padding)}.q-ad-area{display:none;min-height:0}.q-ad-layout[data-side=true] .q-ad-area--left,.q-ad-layout[data-side=true] .q-ad-area--right{display:flex;align-items:stretch;justify-content:stretch;grid-row:1 / -1}.q-ad-layout[data-side=true] .q-ad-area--left{grid-column:1}.q-ad-layout[data-side=true] .q-ad-area--right{grid-column:3}.q-ad-layout[data-bottom=true] .q-ad-area--bottom{display:flex;justify-content:stretch;align-items:stretch;padding:var(--layout-bottom-gap) 0 0;grid-row:3}.q-ad-layout[data-side=true][data-bottom=true] .q-ad-area--bottom{grid-column:2}.q-ad-layout[data-side=false][data-bottom=true] .q-ad-area--bottom{grid-column:1}.q-ad-area__slot{position:relative;width:100%;min-width:0;min-height:0;height:100%;border-radius:0;border:1px dashed transparent;background:transparent;box-shadow:none;overflow:hidden;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.q-ad-layout[data-layout=side] .q-ad-area__slot,.q-ad-layout[data-layout=bottom] .q-ad-area__slot{min-height:100%}.q-ad-layout[data-debug-visible=true] .q-ad-area__slot{border-color:#6366f12e;background:repeating-linear-gradient(-45deg,#a5b4fc33,#a5b4fc33 12px,#ffffff29 12px 24px);box-shadow:inset 0 0 0 1px #ffffff40}.q-ad-layout[data-debug-visible=true] .q-ad-area__slot:after{content:attr(data-slot-label);position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:999px;background:#1a2744b8;color:#f4f7fbf5;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.q-modal-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--space-md, 16px);background:#0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:q-modal-overlay-in .2s ease-out}@keyframes q-modal-overlay-in{0%{opacity:0}to{opacity:1}}.q-modal-card{width:min(100%,420px);max-height:80vh;overflow-y:auto;overscroll-behavior:contain;background:var(--bg, #f0f4f8);border:1px solid var(--border-color, rgba(99, 102, 241, .15));border-radius:20px;box-shadow:0 8px 32px #00000026;animation:q-modal-card-in .3s cubic-bezier(.34,1.56,.64,1)}@keyframes q-modal-card-in{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.q-modal-close-row{position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;padding:var(--space-sm, 8px) var(--space-sm, 8px) 0;background:linear-gradient(180deg,var(--bg, #f0f4f8) 0%,var(--bg, #f0f4f8) 78%,rgba(240,244,248,0) 100%)}.q-modal-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:var(--bg-surface, rgba(20, 40, 80, .05));color:var(--text-muted, #6b7280);font-size:16px;font-weight:700;cursor:pointer;transition:background-color .15s;-webkit-tap-highlight-color:transparent}.q-modal-close:hover{background:var(--bg-surface-hover, rgba(20, 40, 80, .09))}.q-modal-body{padding:0 0 var(--space-sm, 8px)}.q-update-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px;background:#312e81;color:#e0e7ff;font-size:14px;font-weight:600}.q-update-banner-btn{padding:4px 14px;border:2px solid #e0e7ff;border-radius:8px;background:transparent;color:#e0e7ff;font-size:13px;font-weight:700;cursor:pointer}.q-app{display:flex;flex-direction:column;flex:1;width:100%;min-height:0;min-width:0;max-width:none;margin:0;background:var(--bg, #FAFAFA);color:var(--text-color, #1A1A2E);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.q-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:q-overlay-in .2s ease-out}@keyframes q-overlay-in{0%{opacity:0}to{opacity:1}}.q-overlay-card{position:relative;background:var(--bg, #f0f4f8);border:1px solid var(--border-color, rgba(99,102,241,.15));border-radius:20px;padding:var(--space-lg, 24px);box-shadow:0 8px 32px #00000026;max-width:420px;width:90%;max-height:80vh;overflow-y:auto;animation:q-overlay-card-in .3s cubic-bezier(.34,1.56,.64,1)}@keyframes q-overlay-card-in{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.q-overlay-close{position:absolute;top:var(--space-sm, 8px);right:var(--space-sm, 8px);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:var(--bg-surface, rgba(20, 40, 80, .05));color:var(--text-muted, #6B7280);font-size:16px;font-weight:700;cursor:pointer;transition:background-color .15s;-webkit-tap-highlight-color:transparent}.q-overlay-close:hover{background:var(--bg-surface-hover, rgba(20, 40, 80, .09))}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;min-height:var(--app-frame-height);min-width:var(--app-min-width);overflow-x:auto;overflow-y:auto;background:var(--bg);color:var(--text-color);user-select:none;-webkit-user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;min-height:100dvh;position:relative}:root{--app-min-width: 360px;--game-board-min-size: 336px;--app-max-width: 728px;--app-min-height: 620px;--app-max-height: 980px;--app-frame-height: clamp( var(--app-min-height), 100dvh, var(--app-max-height) );--text-xs: clamp(10px, 2.2vw, 13px);--text-sm: clamp(12px, 2.6vw, 15px);--text-md: clamp(14px, 3vw, 17px);--text-lg: clamp(16px, 3.5vw, 20px);--text-xl: clamp(20px, 4.5vw, 26px);--text-2xl: clamp(28px, 7vw, 42px);--space-xs: clamp(4px, 1vw, 8px);--space-sm: clamp(6px, 1.5vw, 12px);--space-md: clamp(10px, 2.5vw, 16px);--space-lg: clamp(16px, 4vw, 28px);--space-xl: clamp(24px, 6vw, 48px);--control-sm: clamp(32px, 8vw, 42px);--control-md: clamp(36px, 9vw, 48px);--bg: #f0f4f8;--bg-surface: rgba(20, 40, 80, .05);--bg-surface-hover: rgba(20, 40, 80, .09);--bg-gradient-inner: #f4f7fb;--bg-gradient-outer: #e0e8f0;--board-bg: rgba(240, 248, 255, .92);--board-border: rgba(80, 120, 200, .25);--title-color: #1a2744;--text-color: #2a3a5c;--text-muted: rgba(20, 40, 80, .72);--subtitle-color: #3a5080;--btn-primary-top: #b8d4f0;--btn-primary-mid: #7cadde;--btn-primary-mid2: #5a90cc;--btn-primary-bot: #3a6aaa;--btn-primary-text: #0f1f3a;--btn-edge: hsl(215 55% 32%);--btn-edge-dark: hsl(215 55% 18%);--btn-secondary-top: #d8e4f0;--btn-secondary-mid: #c0d0e4;--btn-secondary-bot: #a8b8d0;--btn-secondary-text: #3a4a68;--btn-ghost-border: #5a90cc;--btn-ghost-text: #2a4a80;--accent: #6366f1;--accent-light: #a5b4fc;--success: #10b981;--error: #ef4444;--star-gold: #f59e0b;--overlay-color: rgba(240, 244, 248, .85);--toggle-bg: rgba(80, 120, 200, .15)}.menu-bg{position:fixed;inset:0;overflow:hidden;background:radial-gradient(ellipse 120% 60% at 50% 0%,rgba(180,210,240,.6) 0%,transparent 60%),radial-gradient(ellipse 100% 50% at 50% 100%,rgba(99,102,241,.08) 0%,transparent 50%),radial-gradient(circle at 70% 30%,rgba(130,180,230,.15) 0%,transparent 40%),linear-gradient(180deg,#f4f7fb,#e8eef6 40%,#dde6f0,#f0f4f8);z-index:-1}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.pushable{position:relative;border:none;background:transparent;padding:0;cursor:pointer;outline-offset:4px;transition:filter .25s;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.pushable:focus,.pushable:focus-visible{outline:none}.pushable .shadow{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:#00000040;will-change:transform;transform:translateY(3px);transition:transform .6s cubic-bezier(.3,.7,.4,1);filter:blur(5px)}.pushable .edge{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:linear-gradient(to left,var(--btn-edge-dark) 0%,var(--btn-edge) 8%,var(--btn-edge) 92%,var(--btn-edge-dark) 100%)}.pushable .front{display:flex;align-items:center;justify-content:center;position:relative;will-change:transform;transform:translateY(-5px);transition:transform .6s cubic-bezier(.3,.7,.4,1);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;background:linear-gradient(180deg,var(--btn-primary-top) 0%,var(--btn-primary-mid) 20%,var(--btn-primary-mid2) 50%,#4878b8 80%,var(--btn-primary-bot) 100%);color:var(--btn-primary-text);text-shadow:0 1px 0 rgba(180,210,240,.6);box-shadow:inset 0 3px 6px #c8dcf080,inset 0 -2px 4px #14285033}.pushable:hover{filter:brightness(110%)}.pushable:hover .front{transform:translateY(-7px);transition:transform .25s cubic-bezier(.3,.7,.4,1.5)}.pushable:hover .shadow{transform:translateY(5px);transition:transform .25s cubic-bezier(.3,.7,.4,1.5)}.pushable:active .front{transform:translateY(-2px);transition:transform 34ms}.pushable:active .shadow{transform:translateY(1px);transition:transform 34ms}.pushable.btn-secondary .edge{background:linear-gradient(to left,#32445d,#4b668b 8% 92%,#32445d)}.pushable.btn-secondary .front{background:linear-gradient(180deg,#d8e4f0,#c0d0e4 40%,#a8b8d0);color:#3a4a68;text-shadow:0 1px 0 rgba(220,230,240,.4);box-shadow:inset 0 2px 4px #dce6f04d,inset 0 -2px 3px #1428501a}.pushable.btn-ghost .edge,.pushable.btn-ghost .shadow{background:transparent}.pushable.btn-ghost .front{background:transparent;border:2px solid var(--btn-ghost-border);color:var(--btn-ghost-text);text-shadow:none;box-shadow:none}.pushable.btn-ghost:hover .front{background:#5a90cc14}.pushable.btn-ghost:active .front{background:#5a90cc26}.title-cool{font-weight:900;color:#a5b4fc;-webkit-text-stroke:2.5px #1a2744;paint-order:stroke fill;text-shadow:0 3px 0 #0f1f3a,0 5px 8px rgba(20,40,80,.15)}.cool-panel{background:linear-gradient(180deg,#f8fbff,#eef4fa,#e4ecf4);border:2px solid rgba(80,120,200,.2);border-radius:16px;box-shadow:0 4px 16px #14285014,0 1px 3px #1428500f}.push-wide{width:100%;max-width:300px;height:56px;border-radius:16px}.push-wide .front,.push-wide .edge,.push-wide .shadow{border-radius:16px;width:100%;height:100%}.push-wide .front{font-size:var(--text-lg);font-weight:800;padding:0 var(--space-lg)}.push-wide-sm{width:100%;max-width:300px;height:48px;border-radius:14px}.push-wide-sm .front,.push-wide-sm .edge,.push-wide-sm .shadow{border-radius:14px;width:100%;height:100%}.push-wide-sm .front{font-size:var(--text-md);font-weight:700;padding:0 var(--space-lg)}.push-square{width:clamp(90px,24vw,120px);aspect-ratio:1;border-radius:14px}.push-square .front,.push-square .edge,.push-square .shadow{border-radius:14px;width:100%;height:100%}.push-square .front{font-size:var(--text-lg);font-weight:800;flex-direction:column}.push-circle{width:var(--control-md);height:var(--control-md);border-radius:50%}.push-circle .front,.push-circle .edge,.push-circle .shadow{border-radius:50%;width:100%;height:100%}.push-circle .front{font-size:var(--text-lg);font-weight:800}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}