:root{color-scheme:light;--color-bg: #f1f5f9;--color-bg-accent: #e0eaff;--color-surface: #ffffff;--color-surface-soft: #f8fafc;--color-primary: #2563eb;--color-primary-dark: #1d4ed8;--color-primary-soft: #dbeafe;--color-text: #0f172a;--color-text-soft: #64748b;--color-muted: #94a3b8;--color-border: #e2e8f0;--color-success: #16a34a;--color-success-soft: #dcfce7;--color-success-text: #166534;--color-error: #dc2626;--color-error-soft: #fee2e2;--radius-md: 14px;--radius-lg: 20px;--shadow-soft: 0 4px 18px rgb(15 23 42 / .08);--shadow-strong: 0 8px 28px rgb(15 23 42 / .14)}:root[data-theme=dark]{color-scheme:dark;--color-bg: #0b1220;--color-bg-accent: #16213c;--color-surface: #1e293b;--color-surface-soft: #243146;--color-primary: #3b82f6;--color-primary-dark: #2563eb;--color-primary-soft: #1e3a8a;--color-text: #e2e8f0;--color-text-soft: #94a3b8;--color-muted: #64748b;--color-border: #334155;--color-success: #22c55e;--color-success-soft: #113527;--color-success-text: #86efac;--color-error: #ef4444;--color-error-soft: #3f1d1d;--shadow-soft: 0 4px 18px rgb(0 0 0 / .35);--shadow-strong: 0 8px 28px rgb(0 0 0 / .5)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:radial-gradient(circle at 20% -10%,var(--color-bg-accent) 0%,transparent 45%),var(--color-bg);color:var(--color-text);transition:background-color .2s ease,color .2s ease;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}button{font-family:inherit}.app{max-width:460px;min-height:100dvh;margin:0 auto;padding:10px 16px 40px;display:flex;flex-direction:column;gap:14px}.top-bar{display:flex;justify-content:flex-end;gap:6px}.top-bar__btn{height:32px;min-width:40px;padding:0 10px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface);color:var(--color-text-soft);font-size:.78rem;font-weight:800;cursor:pointer;transition:color .12s ease,border-color .12s ease}.top-bar__btn:hover{color:var(--color-text);border-color:var(--color-muted)}.brand-logo{width:1.2em;height:1.2em;border-radius:24%;vertical-align:-.22em;margin-right:.3em;box-shadow:0 2px 6px #0f172a40}.brand-logo--lg{width:1.3em;height:1.3em}.app-header{position:relative;text-align:center}.app-header__back{position:absolute;left:0;top:4px;height:32px;padding:0 12px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface);color:var(--color-text-soft);font-size:.78rem;font-weight:700;cursor:pointer;transition:color .12s ease,border-color .12s ease}.app-header__back:hover{color:var(--color-text);border-color:var(--color-muted)}.app-header__title{margin:0;font-size:1.45rem;font-weight:800;letter-spacing:.02em}.app-header__title span{color:var(--color-primary)}.app-header__meta{margin:4px 0 0;font-size:.82rem;color:var(--color-text-soft)}.round-tracker{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.round-tracker__item{min-height:46px;padding:4px 3px;border-radius:12px;background:var(--color-surface);border:2px solid var(--color-border);color:var(--color-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;overflow:hidden;transition:border-color .2s,background-color .2s}.round-tracker__label{max-width:100%;font-size:.62rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.round-tracker__score{font-size:.58rem;font-weight:600;opacity:.85}.round-tracker__item--active{border-color:var(--color-primary);color:var(--color-primary);box-shadow:var(--shadow-soft)}.round-tracker__item--correct{background:var(--color-success-soft);border-color:var(--color-success);color:var(--color-success-text)}.round-tracker__item--passed{background:var(--color-border);border-color:var(--color-muted);color:var(--color-text-soft)}.game-area{display:flex;flex-direction:column;gap:10px}.game-area__potential{margin:0;text-align:center;font-size:.85rem;color:var(--color-text-soft)}.game-area__potential strong{color:var(--color-primary)}.clue-wheel{position:relative;width:min(100%,400px);aspect-ratio:1;margin:0 auto}.clue-wheel__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50%;aspect-ratio:1;border-radius:50%;background:linear-gradient(160deg,var(--color-surface) 0%,var(--color-surface-soft) 100%);border:2px solid var(--color-border);box-shadow:var(--shadow-soft);display:flex;align-items:center;justify-content:center;animation:shape-in .35s ease}:root[data-theme=dark] .clue-wheel__shape{filter:invert(.85)}.clue-wheel__shape{width:76%;height:76%;object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none}.clue-circle{position:absolute;transform:translate(-50%,-50%);width:24%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4%;text-align:center;overflow:hidden}.clue-circle--hidden{background:var(--color-surface);border:2px dashed var(--color-border);color:var(--color-muted);opacity:.85}.clue-circle--revealed{background:linear-gradient(165deg,var(--color-primary-soft) 0%,var(--color-surface) 90%);border:2px solid var(--color-primary);box-shadow:var(--shadow-soft);animation:clue-pop .25s ease}.clue-circle__label{font-size:clamp(.5rem,2.2vw,.6rem);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-soft)}.clue-circle--hidden .clue-circle__label{color:inherit}.clue-circle__value{font-size:clamp(.58rem,2.8vw,.74rem);font-weight:800;line-height:1.15;color:var(--color-text);overflow-wrap:break-word;max-width:100%}.clue-circle__flag{width:68%;border-radius:6px;box-shadow:0 2px 8px #0f172a40;-webkit-user-select:none;user-select:none}.wrong-guesses{min-height:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.wrong-guesses__chip{background:var(--color-error-soft);color:var(--color-error);font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:999px;animation:chip-in .2s ease}.guess-panel{display:flex;flex-direction:column;gap:10px}.guess-panel__row{display:flex;gap:8px}.guess-panel__input-wrap{position:relative;flex:1;min-width:0}.guess-panel__input{width:100%;min-width:0;height:54px;padding:0 16px;font-size:1rem;color:var(--color-text);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.guess-panel__input:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-soft)}.guess-panel__input::placeholder{color:var(--color-muted)}.guess-panel__secondary{display:flex;gap:8px}.guess-panel__secondary .btn{flex:1}.suggestions{list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:0;right:0;top:100%;max-height:250px;overflow-y:auto;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-strong);z-index:5}.suggestions__item{width:100%;padding:10px 12px;border:none;border-radius:10px;background:none;color:var(--color-text);font-size:.95rem;font-weight:600;text-align:left;cursor:pointer}.suggestions__item:hover,.suggestions__item:focus-visible{background:var(--color-primary-soft);color:var(--color-primary-dark)}.btn{height:54px;padding:0 18px;border:none;border-radius:var(--radius-md);font-size:.95rem;font-weight:700;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{background:linear-gradient(180deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff;box-shadow:0 6px 16px #2563eb59}.btn--primary:hover:not(:disabled){box-shadow:0 8px 20px #2563eb73}.btn--secondary{height:46px;background:var(--color-surface);border:2px solid var(--color-border);color:var(--color-text-soft)}.btn--secondary:hover:not(:disabled){border-color:var(--color-muted);color:var(--color-text)}.summary{display:flex;flex-direction:column;align-items:center;gap:12px;animation:summary-in .35s ease}.summary__title{margin:4px 0 0;font-size:1.15rem;text-align:center}.summary__title span{color:var(--color-primary)}.summary__meta{margin:0;font-size:.85rem;color:var(--color-text-soft)}.summary__wheel{position:relative;width:min(100%,340px);aspect-ratio:1}.summary__total{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46%;aspect-ratio:1;border-radius:50%;background:linear-gradient(160deg,var(--color-surface) 0%,var(--color-primary-soft) 120%);border:3px solid var(--color-primary);box-shadow:var(--shadow-strong);display:flex;flex-direction:column;align-items:center;justify-content:center}.summary__total strong{font-size:2.2rem;color:var(--color-primary);line-height:1}.summary__total span{font-size:.78rem;color:var(--color-text-soft);margin-top:4px}.summary__round{position:absolute;transform:translate(-50%,-50%);width:24%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4%;text-align:center;overflow:hidden}.summary__round strong{font-size:.9rem;line-height:1.1}.summary__round span{font-size:.52rem;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary__round--correct{background:var(--color-success-soft);border:2px solid var(--color-success);color:var(--color-success-text)}.summary__round--passed{background:var(--color-border);border:2px solid var(--color-muted);color:var(--color-text-soft)}.summary__list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:6px}.summary__list-item{display:flex;align-items:center;gap:10px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:10px 14px;box-shadow:var(--shadow-soft)}.summary__list-flag{width:30px;height:20px;object-fit:cover;border-radius:4px;box-shadow:0 1px 4px #0f172a33}.summary__list-name{flex:1;font-weight:700;font-size:.9rem}.summary__list-clues{font-size:.75rem;color:var(--color-text-soft)}.summary__list-score{font-weight:800;font-size:.9rem;min-width:38px;text-align:right}.summary__list-score--correct{color:var(--color-success)}.summary__list-score--passed{color:var(--color-muted)}.summary__total--plain{position:static;transform:none;width:150px;margin:8px 0}.summary__share,.summary__menu{width:100%;max-width:320px}.summary__hint{margin:0;font-size:.8rem;color:var(--color-muted)}.menu{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;animation:summary-in .35s ease}.menu__title{margin:0;font-size:2rem;font-weight:800;letter-spacing:.02em}.menu__title span{color:var(--color-primary)}.menu__subtitle{margin:-10px 0 6px;color:var(--color-text-soft);font-size:.95rem}.menu__modes{width:100%;display:flex;flex-direction:column;gap:12px}.mode-card{display:flex;align-items:center;gap:14px;width:100%;padding:16px;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);cursor:pointer;text-align:left;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}.mode-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-strong);transform:translateY(-1px)}.mode-card:active{transform:scale(.98)}.mode-card__icon{font-size:1.7rem}.mode-card__body{display:flex;flex-direction:column;gap:3px}.mode-card__title{font-size:1.02rem;font-weight:800;color:var(--color-text)}.mode-card__desc{font-size:.8rem;color:var(--color-text-soft);line-height:1.35}.mode-card__status{font-size:.78rem;font-weight:700;color:var(--color-success)}.menu__howto{border:none;background:none;color:var(--color-text-soft);font-size:.88rem;font-weight:600;cursor:pointer;text-decoration:underline}.menu__howto:hover{color:var(--color-text)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px 16px;background:#0f172a59;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:backdrop-in .2s ease}:root[data-theme=dark] .modal-backdrop{background:#00000080}.howto{width:100%;max-width:400px;max-height:90dvh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:22px 20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-strong);animation:howto-in .25s ease}.howto__title{margin:0;text-align:center;font-size:1.35rem;font-weight:800}.howto__title span{color:var(--color-primary)}.howto__subtitle{margin:-6px 0 2px;text-align:center;color:var(--color-text-soft);font-size:.9rem;font-weight:600}.howto__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.howto__step{display:flex;align-items:flex-start;gap:12px;background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px 14px}.howto__step-icon{font-size:1.3rem;line-height:1.3}.howto__step-body{display:flex;flex-direction:column;gap:2px;font-size:.85rem}.howto__step-body strong{font-size:.9rem}.howto__step-body span{color:var(--color-text-soft);line-height:1.4}.howto__start{width:100%;margin-top:2px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);max-width:min(90vw,400px);padding:12px 20px;border-radius:999px;font-size:.9rem;font-weight:600;box-shadow:var(--shadow-strong);animation:toast-in .25s ease;z-index:10}.toast--success{background:var(--color-success);color:#fff}.toast--error{background:var(--color-error);color:#fff}.toast--info{background:var(--color-text);color:var(--color-bg)}@keyframes clue-pop{0%{transform:translate(-50%,-50%) scale(.7);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes shape-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes chip-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@keyframes backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes howto-in{0%{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes summary-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media (max-width: 360px){.app{padding:12px 10px 32px}.btn{padding:0 12px;font-size:.88rem}}
