/* =========================================================================
   Little Sunday — "Güneşli" UI system
   Clean white surfaces, pill buttons, sky-blue primary, sunny-yellow accent,
   rounded bold type and soft blue-tinted shadows. Loaded after every other
   stylesheet so it restyles the whole game from one place.
   ========================================================================= */
:root{
 --sun-ink:#343c4c;--sun-sub:#7f8898;--sun-faint:#aab2bf;
 --sun-surface:#ffffff;--sun-soft:#f3f6fa;--sun-line:#e4e9f0;
 --sun-blue:#1f8fe5;--sun-blue-hi:#4db6ff;--sun-blue-edge:#1570b8;--sun-blue-tint:#e3f2ff;
 --sun-yellow:#ffd84a;--sun-yellow-edge:#d9a91a;--sun-coral:#ff6b6b;--sun-green:#4cc36a;--sun-green-edge:#2f9a4c;
 --sun-lift:0 3px 0 #dde4ee,0 10px 20px -12px rgba(28,58,110,.5);
 --sun-float:0 4px 0 #e2e8f0,0 22px 44px -18px rgba(28,58,110,.45);
 --sun-font:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Arial Rounded MT Bold","Avenir Next","Segoe UI",system-ui,sans-serif;
 /* legacy tokens used across older stylesheets */
 --ink:var(--sun-ink);--edge:#d7dfea;--paper:#fff;--teal:var(--sun-blue);--gold:var(--sun-yellow);--coral:var(--sun-coral);
 --raised:var(--sun-lift);
 --notebook-paper:#fff;--notebook-edge:var(--sun-line);--notebook-tab:#fff;--notebook-ink:var(--sun-ink);--notebook-row:var(--sun-soft);--notebook-selected:var(--sun-blue-tint);--notebook-price:var(--sun-yellow);
}
body{font-family:var(--sun-font);color:var(--sun-ink);background:#9fd8ff}

/* ---------- buttons ---------- */
#game button,#game select{font-family:var(--sun-font)}
/* The Grand Sunday casino keeps its own night-time theme. */
#game button:not(:where(#casino *)){border:0;border-radius:16px;background:var(--sun-surface);color:var(--sun-ink);font-weight:800;box-shadow:var(--sun-lift);text-shadow:none;filter:none;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}
#game button:not(:where(#casino *)):hover{background:#fbfdff;border:0;filter:none}
#game button:not(:where(#casino *)):active{transform:translateY(2px);box-shadow:0 1px 0 #dde4ee,0 4px 10px -8px rgba(28,58,110,.5)}
#game button:not(:where(#casino *)):disabled{opacity:.45;filter:saturate(.4);box-shadow:0 2px 0 #e6ebf1}
#game button svg{stroke-width:2.3;filter:none}
#game button:focus-visible,#game select:focus-visible,#game input:focus-visible{outline:3px solid #8ccfff;outline-offset:3px}
#game .icon-button{border-radius:50%}
#game button:not(:where(#casino *))[aria-pressed=true]{background:var(--sun-blue-tint);color:var(--sun-blue-edge);border:0;box-shadow:inset 0 0 0 2.5px var(--sun-blue),0 3px 0 #cfe2f5}
/* primary actions */
#game .done,#game #editMode,#game button.primary,#game .panel-bottom .done,#game .join{background:linear-gradient(180deg,var(--sun-blue-hi),var(--sun-blue));color:#fff;border:0;box-shadow:inset 0 2px 0 #ffffff55,0 4px 0 var(--sun-blue-edge),0 12px 22px -10px #1f8fe5aa}
#game .done svg,#game #editMode svg{fill:none;stroke:#fff;filter:none}
#game #editMode{border-radius:99px;padding:10px 18px}
#game #editMode[aria-pressed=true]{background:linear-gradient(180deg,#ffe477,var(--sun-yellow));color:#5a4300;box-shadow:inset 0 2px 0 #fff6,0 4px 0 var(--sun-yellow-edge)}
#game #editMode[aria-pressed=true] svg{stroke:#5a4300}
/* accent (character) */
#game #avatarMode,#game #roomLight[aria-pressed=true],#game #ambientMusic[aria-pressed=true]{background:linear-gradient(180deg,#ffe477,var(--sun-yellow));color:#5a4300;box-shadow:inset 0 2px 0 #fff7,0 3px 0 var(--sun-yellow-edge),0 10px 18px -10px #d9a91a99}
#game #avatarMode svg{fill:none;stroke:#5a4300}
#game .danger,#game button.danger{color:#e14b4b}

/* ---------- HUD ---------- */
#game .home-label{border:0;border-radius:99px;background:var(--sun-surface);box-shadow:var(--sun-lift);padding:9px 18px 9px 12px}
#game .home-label strong{font-size:17px;font-weight:900;color:var(--sun-blue)}
#game .home-label small{font-size:9px;letter-spacing:.14em;color:var(--sun-faint);font-weight:800}
#game .home-dot{border:0;background:var(--sun-green);box-shadow:0 0 0 4px #dff5e5}
#game .home-controls .icon-button,#game header nav .icon-button{width:46px;height:46px;min-height:46px}
#game footer .locale{border:0;border-radius:99px;background:var(--sun-surface);box-shadow:var(--sun-lift);color:var(--sun-sub);font-weight:800}
#game #talk{border-radius:99px;padding:10px 18px}

/* ---------- panels ---------- */
#game .panel{background:var(--sun-surface);border:0;border-radius:26px;box-shadow:var(--sun-float);color:var(--sun-ink);scrollbar-color:#c9d6e6 transparent}
#game .panel>.panel-heading,#game .panel>.wardrobe-heading,#game .panel-heading{background:transparent;border:0;box-shadow:none;border-radius:0;margin:-4px -2px 6px;padding:6px 4px 12px;border-bottom:2px solid var(--sun-line)}
#game .panel .panel-heading h1,#game .panel .wardrobe-heading h1,#game .panel h1{color:var(--sun-ink);text-shadow:none;font-weight:900;font-size:24px;letter-spacing:-.01em}
#game .panel .panel-heading small,#game .panel .wardrobe-heading small,#game .panel-heading small{color:var(--sun-blue);font-weight:900;letter-spacing:.14em;font-size:10px}
#game .panel .panel-heading .icon-button,#game .panel .wardrobe-heading .icon-button,#game .panel-heading .close{background:var(--sun-soft);color:var(--sun-sub);border:0;box-shadow:none;width:36px;height:36px;min-height:36px}
#game .panel-heading .close svg{filter:none;stroke-width:2.8}
#game .panel .panel-bottom,#game .panel .clothing-detail,#game .selected-tools{border-top:2px solid var(--sun-line)}
#game .panel label,#game .panel h2{color:var(--sun-sub)}
#game .panel .wallet{background:var(--sun-yellow);color:#5a4300;border-radius:99px;box-shadow:0 2px 0 var(--sun-yellow-edge);transform:none;font-weight:900}
#game .categories button{background:var(--sun-soft);box-shadow:none;border-radius:14px}
#game .categories button svg{fill:none}
#game .categories button[aria-pressed=true]{background:var(--sun-blue);color:#fff;box-shadow:0 3px 0 var(--sun-blue-edge)}
#game .catalog button,#game .option-buttons button,#game #clothesGrid button{background:var(--sun-soft);border:0;border-radius:18px;box-shadow:none}
#game .catalog button:hover,#game .option-buttons button:hover{background:#eaf1f8}
#game .catalog button.selected,#game .option-buttons button[aria-pressed=true],#game #clothesGrid button[aria-pressed=true]{background:var(--sun-blue-tint);box-shadow:inset 0 0 0 2.5px var(--sun-blue)}
#game .catalog button.selected:after{background:var(--sun-blue);border-color:#fff;box-shadow:none}
#game .catalog span{color:var(--sun-ink)}
#game #clothesGrid img{transform:none;border:0;border-radius:14px;box-shadow:none;background:#fff}
#game #clothesGrid small{clip-path:none;border-radius:99px;background:var(--sun-yellow);color:#5a4300;font-weight:900}
#game #clothesGrid button:nth-child(even){background:var(--sun-soft)}
#game .creator-tabs button,#game .hair-tabs button{border-radius:14px}

/* ---------- forms ---------- */
#game input[type=text],#game input[type=search],#game input:not([type]),#game select,#game textarea{border:0;border-radius:12px;background:var(--sun-soft);color:var(--sun-ink);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--sun-line)}
#game input[type=range]{accent-color:var(--sun-blue)}
#game .swatches button{border-radius:50%}

/* ---------- needs card ---------- */
#game #needsPanel{background:var(--sun-surface);border:0;border-radius:24px;box-shadow:var(--sun-float);color:var(--sun-ink)}

/* ---------- dialogs & toasts ---------- */
#game dialog{border:0;border-radius:26px;background:var(--sun-surface);box-shadow:var(--sun-float);color:var(--sun-ink)}
#game dialog h2{color:var(--sun-ink);font-weight:900}
#game #dialogue{border:0;border-radius:24px;background:var(--sun-surface);box-shadow:var(--sun-float)}
#game #dialogue strong{color:var(--sun-blue);letter-spacing:.06em;text-transform:uppercase;font-size:11px}
#game #loading{background:linear-gradient(180deg,#8fd2ff,#d8f2ff);color:var(--sun-ink);font-weight:800}
#game .load-bar{background:#ffffff99;border-radius:99px}
#game .load-bar:after{background:var(--sun-blue);border-radius:99px}
#game .swatches button{background:var(--color);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--sun-line),0 3px 8px -4px rgba(28,58,110,.4)}
#game .swatches button[aria-pressed=true]{background:var(--color);border:3px solid #fff;box-shadow:0 0 0 3px var(--sun-blue)}

/* ---------- welcome & sign-up ---------- */
body:has(.welcome-world){font-family:var(--sun-font)}
.welcome-world ~ *,.welcome-world{font-family:var(--sun-font)}
.welcome-nav .quiet,.welcome-nav select{border:0;border-radius:99px;background:#fff;color:var(--sun-ink);font-weight:800;box-shadow:var(--sun-lift);font-family:var(--sun-font)}
.welcome-entry .join{border:0;border-radius:99px;background:linear-gradient(180deg,var(--sun-blue-hi),var(--sun-blue));color:#fff;font-weight:900;letter-spacing:.01em;box-shadow:inset 0 2px 0 #ffffff55,0 5px 0 var(--sun-blue-edge),0 18px 30px -12px #1f8fe5aa;font-family:var(--sun-font)}
.welcome-entry .join:hover{background:linear-gradient(180deg,#63c0ff,#2a98ea);transform:translateY(-2px)}
.welcome-entry .join svg{stroke:#fff}
.welcome-tagline{font-family:var(--sun-font);font-style:normal;font-weight:900;color:var(--sun-ink)}
.welcome-invitation{font-weight:800;color:var(--sun-ink)}
.welcome-entry p,.welcome-note p{color:var(--sun-ink);font-weight:700}
.welcome-info-links a{color:var(--sun-sub);font-weight:800}
.welcome-info-links a:hover{color:var(--sun-blue)}
#signupQuest{border:0;border-radius:28px;box-shadow:var(--sun-float);font-family:var(--sun-font);color:var(--sun-ink)}
#signupQuest button{font-family:var(--sun-font);border:0;border-radius:16px;background:#fff;color:var(--sun-ink);font-weight:800;box-shadow:var(--sun-lift)}
#signupQuest #questNext,#signupQuest button[type=submit]{background:linear-gradient(180deg,var(--sun-blue-hi),var(--sun-blue));color:#fff;box-shadow:inset 0 2px 0 #ffffff55,0 4px 0 var(--sun-blue-edge)}
#signupQuest input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]){border:0;border-radius:12px;background:var(--sun-soft);box-shadow:inset 0 0 0 1.5px var(--sun-line);font-family:var(--sun-font);font-weight:700;color:var(--sun-ink)}
#signupQuest input[type=range]{accent-color:var(--sun-blue)}
#signupQuest{background:#fff;color:var(--sun-ink)}
#signupQuest .quest-footer #questNext{border:0;border-radius:99px;background:linear-gradient(180deg,var(--sun-blue-hi),var(--sun-blue));color:#fff;box-shadow:inset 0 2px 0 #ffffff55,0 4px 0 var(--sun-blue-edge);font-weight:900}
#signupQuest .quest-login{border:0;border-radius:99px;background:var(--sun-soft);color:var(--sun-ink);box-shadow:none;font-weight:800}
#signupQuest .quest-login:hover:not(:disabled){background:#e8eef6}
.quest-progress li{border:2px solid var(--sun-line);color:var(--sun-faint);font-weight:800}
.quest-progress li[aria-current=step]{background:var(--sun-blue);border-color:var(--sun-blue);color:#fff;box-shadow:0 2px 0 var(--sun-blue-edge)}
.quest-progress li[data-done=true]{background:var(--sun-green);border-color:var(--sun-green);color:#fff}

/* venue title cards */
#game .cafe-sign,#game .garden-title,#game .neighborhood-title{background:#fff;border:0;border-radius:22px;box-shadow:var(--sun-lift);color:var(--sun-ink)}
#game .cafe-sign small,#game .garden-title small,#game .neighborhood-title small{color:var(--sun-blue);font-weight:900;letter-spacing:.14em}
#game .cafe-sign strong,#game .garden-title strong,#game .neighborhood-title strong,#game .cafe-sign h1,#game .garden-title h1,#game .neighborhood-title h1,#game .neighborhood-title span{font-family:var(--sun-font);font-weight:900;color:var(--sun-ink)}
#game .map-place,#game .map-person{font-family:var(--sun-font)}
#game .map-clock{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:3px 10px 3px 6px;border-radius:99px;background:var(--sun-soft);font-weight:900;font-size:13px;color:var(--sun-ink);width:max-content}
#game .map-clock svg{width:16px;height:16px;color:#f4a93a}
#game .map-clock[data-phase=night]{background:#1f2a4d;color:#e6ecff}
#game .map-clock[data-phase=night] svg{color:#ffe07a}
#game .map-clock[data-phase=dusk],#game .map-clock[data-phase=dawn]{background:#ffe3d1}