/* v0.6 visual refinement from the supplied references. Gameplay tokens stay in world.css. */
:root { --world-image:url('../assets/world-v2/minimal.webp'); --world-base:#c7e4f2; }
:root:not([data-theme]) { --world-base:#eef1fa; }
:root[data-theme='minimal'] #worldBackground,:root:not([data-theme]) #worldBackground { background-position:center 68%; }
.reference-sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
#worldBackground { background-position:center 46%; }
.world-home { position:relative; max-width:830px; padding:20px 0 30px; }
.world-home-top { position:absolute; left:0; right:0; top:22px; align-items:flex-start; z-index:2; pointer-events:none; }
.world-home-top button { pointer-events:auto; }
.world-icon-button { width:62px; height:62px; border:2px solid #fff; border-radius:20px; background:linear-gradient(145deg,#edf8ff,#cfe4ff); box-shadow:inset 0 2px 4px #fff,0 6px 18px #3655a133; }
.world-icon-button .menu-illustration { width:48px; height:48px; object-fit:contain; }
.world-icon-button#settings { background:linear-gradient(145deg,#aa9cff,#6058f3); box-shadow:0 0 16px #ffffffa1,inset 0 2px 5px #fff8,0 6px 18px #4233b052; }
.world-home .world-brand { padding:0 60px 28px; }
.world-logo { display:block; }
.world-home .home-hero-art { width:210px; height:210px; margin:0 auto; }
.world-home .home-hero-art img { filter:drop-shadow(0 7px 8px #304fb32b); }
.world-home .home-hero-description { margin:9px -40px 0; color:#14246c; font-size:18px; line-height:1.4; font-weight:750; text-shadow:0 1px 2px #fff,0 0 15px #ffffffd9; }
.world-mode-grid { margin-top:38px; gap:24px; }
.world-home .world-mode { display:flex; position:relative; align-items:stretch; min-height:414px; padding:86px 25px 23px; border:5px solid #ffffffeb; border-radius:31px; text-align:center; background:linear-gradient(145deg,#fffffffa,#edf8fffa); box-shadow:0 5px 0 #add7f5,0 15px 28px #254d8d2e,inset 0 0 24px #b7e9ff4d; }
.world-home .world-full { background:linear-gradient(145deg,#fffffffa,#f2edfffa); box-shadow:0 5px 0 #c4b5ff,0 15px 28px #47329b2b,inset 0 0 24px #d7c7ff45; }
.world-mode-art { position:absolute; width:160px; height:160px; top:-65px; left:50%; margin:0; transform:translateX(-50%); }
.world-mode-art img,.world-full .world-mode-art img { width:160px; height:160px; filter:drop-shadow(0 7px 7px #5971b126); }
.world-mode-orbit { width:190px; height:62px; top:74px; background:linear-gradient(100deg,#c6f4ff33,#9ee5ff85,#9bc0ff4d); opacity:1; transform:rotate(-16deg); }
.world-full .world-mode-orbit { background:linear-gradient(100deg,#e0d5ff22,#c5a8ff9c,#c3c1ff55); border:3px solid #ffffffa6; }
.world-home .mode-title { font-size:34px; line-height:1.08; font-weight:850; letter-spacing:-.9px; color:#151e61; margin:12px 0 18px; }
.mode-title > span { display:block; }
.world-home .mode-description { display:flex; flex-direction:column; gap:10px; min-height:58px; margin:0 12px; text-align:left; color:#515f9a; font-size:17px; line-height:1.35; }
.world-home .mode-description .mode-fact { display:flex; align-items:flex-start; gap:10px; padding:0; opacity:1; }
.world-home .mode-fact > .icon { width:23px; height:23px; color:#5773cc; flex:none; margin-top:1px; }
.world-home .mode-fact > span { padding:0; opacity:1; }
.world-home .world-full .mode-fact > .icon { color:#8274c4; }
.world-mode-tag { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:34px; padding:6px 8px; margin:18px 0; border-radius:22px; background:#deedff; color:#264dc3; font-size:12px; font-weight:700; }
.world-mode-tag .icon { width:20px; height:20px; }
.world-full .world-mode-tag { background:#e8e0ff; color:#6244cf; }
.world-mode-start,.world-full .world-mode-start { justify-content:center; gap:13px; min-height:58px; margin-top:auto; padding:13px 12px; border:1px solid #a48dff; border-radius:20px; background:linear-gradient(180deg,#9a7bff 0%,#7955fc 40%,#643be9 100%); box-shadow:inset 0 2px 3px #ffffff78,0 6px 14px #6444d530; color:#fff; font-size:25px; line-height:1.2; font-weight:750; text-shadow:0 2px 1px #4f35b735; }
.world-mode-start .icon { width:25px; height:25px; stroke-width:2.3; }
.world-home .world-home-records { margin-top:23px; padding:10px 19px; border:1px solid #ffffffc9; border-radius:15px; background:#ffffffe6; gap:15px; box-shadow:0 4px 18px #2f42751a; }
.world-home .home-mode-record { flex-direction:row; align-items:center; justify-content:space-between; gap:9px; }
.world-home .home-record-label { color:#57648e; font-size:10px; }
.world-home .home-record-value { color:#6555cf; font-size:21px; }
.world-home .home-completion-count { color:var(--world-text); background:var(--world-surface); padding:5px 12px; border-radius:12px; display:table; margin:10px auto 0; }
.world-bottom-nav { gap:14px; margin-top:19px; }
.world-bottom-nav button { min-height:112px; gap:3px; padding:9px 5px 12px; border:3px solid #ffffffed; border-radius:25px; background:linear-gradient(145deg,#fffffff5,#f3f2fff5); box-shadow:0 6px 0 #ced7ee88,0 12px 22px #29467524; color:#20276a; font-size:17px; font-weight:700; }
.world-bottom-nav .menu-illustration { display:block; width:68px; height:68px; object-fit:contain; }
.world-last-result { background:var(--world-surface); border-radius:13px; padding:9px 13px; }
.world-resume { position:relative; margin-bottom:30px; background:var(--world-surface); }
.world-ui:has(.settings-screen) #worldBackground::after { content:''; position:absolute; inset:0; background:#19254b3d; }
.settings-screen { max-width:590px; margin:25px auto 20px; }
.settings-screen > .world-panel { padding:25px 27px; border-radius:31px; background:linear-gradient(145deg,var(--world-solid),var(--world-surface)); border:1px solid #ffffffc4; box-shadow:0 24px 70px #1324544d,0 4px 12px #34466818; }
.settings-window-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:19px; }
.settings-window-heading h1 { display:flex; align-items:center; gap:11px; color:var(--world-text); font-size:29px; line-height:1.2; font-weight:800; letter-spacing:-.7px; }
.settings-window-heading h1 .menu-illustration { width:44px; height:44px; padding:3px; border-radius:12px; background:linear-gradient(145deg,#a69bff,#6471e6); }
.settings-window-heading .world-back { width:44px; height:44px; padding:10px; border:0; border-radius:13px; color:var(--world-muted); box-shadow:none; background:transparent; }
.settings-window-heading .world-back .icon { width:24px; height:24px; stroke-width:2.4; }
.settings-tabs { gap:6px; padding:0; border-radius:14px; background:transparent; }
.settings-tabs button { min-height:46px; padding:11px 9px; border:1px solid var(--world-border); border-radius:14px; background:var(--world-tint); color:var(--world-muted); font-size:12px; gap:7px; }
.settings-tabs button.is-active { color:#fff; border-color:#a396ff; background:linear-gradient(180deg,#9a84ff,#6b50f4); box-shadow:inset 0 1px 2px #ffffff8c,0 4px 13px #7656e72e; }
.settings-intro { margin:23px 0 16px; }
.settings-intro h2 { font-weight:800; font-size:21px; }
.settings-intro p { color:var(--world-muted); margin-top:4px; font-size:12px; }
.theme-grid { gap:11px; }
.theme-choice { padding:5px 5px 11px; border:2px solid var(--world-border); border-radius:18px; box-shadow:0 3px 7px #4d56a514; }
.theme-choice.is-active { border-color:#8e75ff; box-shadow:0 0 0 1px #af9aff,0 4px 13px #765ce044; }
.theme-thumbnail { border-radius:12px; }
.theme-thumbnail img { width:100%; height:auto; aspect-ratio:320/220; object-fit:cover; }
.theme-name { font-size:12px; font-weight:750; margin-top:9px; line-height:1.3; }
.theme-check { width:28px; height:28px; right:6px; top:6px; bottom:auto; background:linear-gradient(145deg,#a988ff,#6e4cf5); color:#fff; border:1px solid #d6c8ff; box-shadow:0 2px 6px #44309c38; }
.theme-check .icon { width:18px; height:18px; stroke-width:2.6; }
.brightness-setting { padding:0; margin:25px 0; background:transparent; border:0; }
.brightness-setting label { font-size:14px; }
.brightness-setting label .icon { width:25px; height:25px; }
.brightness-setting output { font-size:13px; }
.brightness-limits { font-size:9px; }
#backgroundBrightness { -webkit-appearance:none; appearance:none; background:transparent; height:32px; min-height:32px; margin:11px 0 1px; }
#backgroundBrightness::-webkit-slider-runnable-track { height:8px; border-radius:10px; background:linear-gradient(90deg,#7f63fa var(--brightness-fill,66.67%),var(--world-tint) var(--brightness-fill,66.67%)); }
#backgroundBrightness::-webkit-slider-thumb { -webkit-appearance:none; width:25px; height:25px; margin-top:-9px; border-radius:50%; border:2px solid #9a83ff; background:#fff; box-shadow:0 3px 8px #6955c347; }
#backgroundBrightness::-moz-range-track { height:8px; border-radius:10px; background:var(--world-tint); }
#backgroundBrightness::-moz-range-progress { height:8px; border-radius:10px; background:#7b5cf7; }
#backgroundBrightness::-moz-range-thumb { width:23px; height:23px; border:2px solid #9a83ff; border-radius:50%; background:#fff; }
.settings-preview { padding:15px; border-radius:21px; background:var(--world-tint); }
.preview-heading { align-items:center; }
.preview-heading h2 { font-size:17px; font-weight:800; }
.preview-heading > span { font-size:9px; text-align:right; }
.preview-stage { padding:22px 15px; border:0; border-radius:15px; }
.preview-question { padding:15px; border-color:var(--world-border); box-shadow:0 7px 18px #212b6d24; }
.preview-question > strong { font-size:15px; line-height:1.4; }
.settings-save-status { margin-top:20px; font-size:10px; }
:root[data-theme='night'] .world-home .home-hero-description,:root[data-theme='space'] .world-home .home-hero-description { color:#fff; text-shadow:0 2px 8px #101546; }
:root[data-theme='night'] .world-home .world-mode,:root[data-theme='space'] .world-home .world-mode { background:var(--world-surface); border-color:var(--world-border); box-shadow:var(--world-shadow); }
:root[data-theme='night'] .world-home .mode-title,:root[data-theme='space'] .world-home .mode-title,:root[data-theme='night'] .world-home .mode-description,:root[data-theme='space'] .world-home .mode-description { color:var(--world-text); }
:root[data-theme='night'] .world-home .world-home-records,:root[data-theme='space'] .world-home .world-home-records,:root[data-theme='night'] .world-bottom-nav button,:root[data-theme='space'] .world-bottom-nav button { background:var(--world-surface); border-color:var(--world-border); color:var(--world-text); }
:root[data-theme='night'] .world-home .home-record-label,:root[data-theme='space'] .world-home .home-record-label { color:var(--world-muted); }
:root[data-theme='night'] .world-home .home-record-value,:root[data-theme='space'] .world-home .home-record-value { color:var(--world-accent); }
:root[data-theme='night'] .settings-screen > .world-panel,:root[data-theme='space'] .settings-screen > .world-panel { background:var(--world-surface); border-color:var(--world-border); }
@media(min-width:1100px) {
 .world-home { max-width:770px; padding-top:12px; }
 .world-home .home-hero-art { width:177px; height:177px; }
 .world-home .world-brand { padding-bottom:22px; }
 .world-mode-grid { margin-top:35px; }
 .world-home .world-mode { min-height:390px; padding:76px 23px 20px; }
 .world-mode-art,.world-mode-art img,.world-full .world-mode-art img { width:145px; height:145px; }
 .world-mode-art { top:-61px; }
 .world-home .mode-title { font-size:30px; margin-bottom:15px; }
 .world-home .mode-description { font-size:16px; }
 .world-mode-tag { margin:15px 0; }
 .world-mode-start,.world-full .world-mode-start { min-height:54px; font-size:23px; }
 .world-bottom-nav button { min-height:99px; font-size:15px; }
 .world-bottom-nav .menu-illustration { width:57px; height:57px; }
}
@media(max-width:650px) {
 .world-home { padding-top:10px; }
 .world-home-top { top:13px; }
 .world-icon-button { width:46px; height:46px; min-width:44px; min-height:44px; border-radius:15px; }
 .world-icon-button .menu-illustration { width:35px; height:35px; }
 .world-home .world-brand { padding:0 45px 12px; }
 .world-home .home-hero-art { width:174px; height:174px; }
 .world-home .home-hero-description { font-size:13px; margin:7px -42px 0; }
 .world-mode-grid { margin-top:13px; gap:16px; }
 .world-home .world-mode { display:grid; grid-template-columns:94px minmax(0,1fr); grid-template-areas:'art title' 'art description' 'tag tag' 'button button'; column-gap:13px; row-gap:0; align-items:start; min-height:0; padding:17px 17px 16px; border-width:3px; border-radius:25px; text-align:left; }
 .world-mode-art { position:relative; grid-area:art; width:94px; height:105px; inset:auto; margin:0; transform:none; align-self:center; }
 .world-mode-art img,.world-full .world-mode-art img { width:103px; height:103px; margin-left:-5px; }
 .world-mode-orbit { width:108px; height:42px; left:-8px; top:49px; }
 .world-home .mode-title { grid-area:title; margin:1px 0 9px; font-size:27px; line-height:1.05; letter-spacing:-.6px; }
 .world-home .mode-description { grid-area:description; gap:5px; margin:0; font-size:12px; line-height:1.35; min-height:0; }
 .world-home .mode-description .mode-fact { gap:6px; }
 .world-home .mode-fact > .icon { width:15px; height:15px; }
 .world-mode-tag { grid-area:tag; min-height:27px; font-size:10px; margin:12px 0 11px; padding:4px 8px; }
 .world-mode-tag .icon { width:16px; height:16px; }
 .world-mode-start,.world-full .world-mode-start { grid-area:button; min-height:48px; margin:0; border-radius:16px; padding:10px 13px; font-size:20px; }
 .world-mode-start .icon { width:21px; height:21px; }
 .world-home .world-home-records { padding:9px 12px; margin-top:18px; gap:13px; border-radius:14px; }
 .world-home .home-mode-record { gap:7px; }
 .world-home .home-record-label { font-size:8px; }
 .world-home .home-record-value { font-size:18px; }
 .world-home .home-record-value small { font-size:8px; }
 .world-bottom-nav { margin-top:14px; gap:8px; }
 .world-bottom-nav button { min-height:81px; border-width:2px; border-radius:18px; gap:3px; padding:7px 2px 10px; font-size:10px; }
 .world-bottom-nav .menu-illustration { width:44px; height:44px; }
 .settings-screen { margin-top:16px; }
 .settings-screen > .world-panel { padding:19px 17px; border-radius:25px; }
 .settings-window-heading { margin-bottom:16px; gap:10px; }
 .settings-window-heading h1 { font-size:26px; gap:9px; }
 .settings-window-heading h1 .menu-illustration { width:35px; height:35px; border-radius:10px; }
 .settings-tabs { gap:5px; }
 .settings-tabs button { font-size:10px; padding:9px 6px; gap:5px; border-radius:12px; }
 .settings-tabs .icon { width:15px; height:15px; }
 .settings-intro { margin:20px 0 13px; }
 .settings-intro h2 { font-size:19px; }
 .settings-intro p { font-size:10px; }
 .theme-grid { gap:9px; }
 .theme-choice { padding:4px 4px 9px; border-radius:13px; }
 .theme-thumbnail { border-radius:8px; }
 .theme-thumbnail img { height:auto; }
 .theme-name { font-size:10px; margin-top:7px; }
 .theme-check { width:23px; height:23px; top:4px; right:4px; }
 .theme-check .icon { width:15px; height:15px; }
 .brightness-setting { margin:21px 0; padding:0; }
 .brightness-setting label { font-size:12px; }
 .brightness-setting output { font-size:12px; }
 .settings-preview { padding:12px; border-radius:16px; }
 .preview-heading h2 { font-size:15px; }
 .preview-heading > span { font-size:8px; }
 .preview-stage { padding:18px 11px; }
 .preview-question { padding:13px; }
 .preview-question > strong { font-size:13px; }
}
@media(max-width:350px) {
 .world-home .home-hero-art { width:145px; height:145px; }
 .world-home .home-hero-description { font-size:11px; }
 .world-home .world-mode { grid-template-columns:77px minmax(0,1fr); gap:0 9px; padding:15px 13px; }
 .world-mode-art { width:77px; height:94px; }
 .world-mode-art img,.world-full .world-mode-art img { width:85px; height:91px; margin-left:-4px; }
 .world-mode-orbit { width:90px; height:35px; top:44px; }
 .world-home .mode-title { font-size:24px; }
 .world-home .mode-description { font-size:11px; }
 .world-home .home-record-label { font-size:7px; }
 .world-home .home-record-value { font-size:16px; }
 .world-bottom-nav { gap:6px; }
 .world-bottom-nav button { font-size:9px; }
 .settings-screen > .world-panel { padding:16px 13px; }
 .settings-window-heading h1 { font-size:24px; }
 .theme-grid { gap:7px; }
 .theme-name { font-size:9px; }
 .theme-thumbnail img { height:auto; }
}
@media(hover:hover) { .world-bottom-nav button:hover { box-shadow:0 5px 0 #bfc9ec88,0 14px 25px #29467536; }.world-icon-button:hover { filter:brightness(1.04); } }