/* Midgard real client: the game world is drawn in WebGL (#map-canvas) with names, HP bars, damage numbers and
   chat bubbles on a 2D overlay (#overlay-canvas). Windows, HUD and chat come from the debug client's UI layer
   (../debug/css/style.css); this file adapts them to a world drawn behind them and carries the client's look.
   Three looks, switched in the options window: the original client's windows (body.theme-ro, default, in
   theme-ro.css), the pastel theme (body.theme-pastel) and the debug client's dark one (no class). */

/* ---- world layer (both themes) ---- */
html, body { background: #000; }
#map-canvas { cursor: default; background: #000; }
#overlay-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; z-index: 1; }
.hud, #bottom, #windows, .banner, .announce { z-index: 5; }
.panel { background: rgba(16, 20, 26, 0.80); backdrop-filter: blur(2px); }
#chat.panel { background: rgba(10, 13, 17, 0.62); }
.render-stats { position: absolute; right: 8px; bottom: calc(var(--bottom-h, 0px) + 96px); z-index: 6; font: 11px/1.3 var(--mono);
	color: #b9f6c5; background: rgba(0, 0, 0, 0.55); padding: 3px 6px; border-radius: 4px; pointer-events: none; white-space: pre; }
.render-stats.hidden { display: none; }
.login-card a { color: var(--accent); }
.brand { display: none; }

/* =================================================================================================================
   Pastel theme: milky lilac windows, plum ink, periwinkle / lavender ribbon title bars (a nod to the RO window bars),
   rose / periwinkle / butter / lavender gauges. The chat stays a dark glass so the coloured channels read on any map.
   ================================================================================================================= */
body.theme-pastel {
	--milk: #fbf8ff;          /* window body */
	--mist: #f1ecfa;          /* insets, rows, inputs */
	--plum: #3b3550;          /* ink */
	--plum-2: #6e6688;        /* secondary ink */
	--peri: #8fb8f0;          /* primary */
	--peri-deep: #4f7fca;     /* primary fill (white text 4:1) */
	--peri-ink: #3f6bb3;
	--lav: #b9a2e8;
	--rose: #f28fa6;
	--butter: #f6c977;
	--mint: #8fd6b8;
	--edge: #dcd2ef;          /* borders */
	--bg: #e9e4f5; --panel: rgba(251, 248, 255, 0.90); --panel-solid: var(--milk); --line: var(--edge); --head: var(--lav);
	--text: var(--plum); --muted: var(--plum-2); --accent: var(--peri); --accent-2: var(--peri-deep);
	--danger: #e07a8f; --ok: #4fb38c; --warn: #d9a23a; --btn: #ffffff; --btn-hover: #efe9fb;
	--font: var(--game-font);
	--round: var(--game-font);
	color: var(--plum);
	font-family: var(--font);
}
.theme-pastel button { background: var(--btn); border-color: var(--edge); color: var(--plum); border-radius: 9px; font-family: var(--round); font-weight: 500; }
.theme-pastel button:hover:not(:disabled) { background: var(--btn-hover); }
.theme-pastel button.primary { background: var(--peri-deep); border-color: var(--peri-ink); color: #fff; font-weight: 600; }
.theme-pastel button.primary:hover:not(:disabled) { background: var(--peri-ink); }
.theme-pastel button.danger { background: #fbe3ea; border-color: #eeb3c1; color: #a3324e; }
.theme-pastel button.ghost { background: transparent; }
.theme-pastel input, .theme-pastel select, .theme-pastel textarea { background: #fff; border-color: var(--edge); color: var(--plum); border-radius: 8px; }
.theme-pastel input::placeholder, .theme-pastel textarea::placeholder { color: #a39cb8; }
.theme-pastel input:focus, .theme-pastel select:focus, .theme-pastel textarea:focus, .theme-pastel button:focus-visible { outline: 2px solid var(--peri-deep); }
.theme-pastel code { background: var(--mist); color: var(--plum); }
.theme-pastel .error { color: #c2405f; }
.theme-pastel .good { color: #2f9a72; }
.theme-pastel .bad { color: #c2405f; }

/* ---- login: pastel sky, the game name set large in the rounded face ---- */
.theme-pastel #screen-login, .theme-pastel #screen-chars {
	background:
		radial-gradient(ellipse 60% 18% at 22% 30%, rgba(255, 255, 255, 0.75), transparent 70%),
		radial-gradient(ellipse 45% 14% at 78% 18%, rgba(255, 255, 255, 0.65), transparent 70%),
		radial-gradient(ellipse 70% 20% at 60% 78%, rgba(255, 255, 255, 0.55), transparent 70%),
		linear-gradient(180deg, #a9c8f5 0%, #c9c2f2 46%, #f6d5e3 100%);
}
.theme-pastel .card { background: var(--milk); border-color: var(--edge); border-radius: 18px; box-shadow: 0 18px 40px -18px rgba(59, 53, 80, 0.45); }
.theme-pastel .login-card { max-width: 400px; margin-top: 8vh; padding: 26px 28px 22px; }
.theme-pastel .login-card h1 { display: none; }
.theme-pastel .brand { display: block; text-align: center; margin: 0 0 6px; }
.theme-pastel .brand .name { font: 700 46px/1.05 var(--round); color: var(--plum); letter-spacing: 0.01em;
	text-shadow: 0 3px 0 #fff, 0 5px 0 rgba(143, 184, 240, 0.55); }
.theme-pastel .brand .sub { font: 500 14px var(--round); color: var(--plum-2); margin-top: 6px; }
.theme-pastel .login-card label { font-weight: 600; color: var(--plum); }
.theme-pastel .hint { background: #eef6ff; border-color: #cfe0f7; color: var(--plum); }
.theme-pastel .login-card a { color: var(--peri-deep); }

/* ---- character select ---- */
.theme-pastel .chars-head h2 { font: 700 26px var(--round); color: #fff; text-shadow: 0 2px 0 rgba(59, 53, 80, 0.35); }
.theme-pastel .chars-head .muted { color: #f5f2ff; }
.theme-pastel .char-card { background: var(--milk); border-color: var(--edge); border-radius: 16px; box-shadow: 0 12px 30px -16px rgba(59, 53, 80, 0.5); }
.theme-pastel .char-card h3 { font: 700 19px var(--round); }
.theme-pastel .char-card.empty { background: rgba(251, 248, 255, 0.82); border-style: dashed; color: var(--plum-2); }
.theme-pastel .char-card canvas.char-prev { background: radial-gradient(ellipse at 50% 88%, rgba(185, 162, 232, 0.35), transparent 62%); }
.theme-pastel .char-card .stats { color: var(--plum-2); }

/* ---- HUD over the world ---- */
.theme-pastel .panel { background: rgba(251, 248, 255, 0.88); border-color: rgba(220, 210, 239, 0.95); border-radius: 14px; backdrop-filter: blur(4px);
	box-shadow: 0 10px 26px -14px rgba(30, 24, 48, 0.55); }
.theme-pastel .hud-name b { font: 700 16px var(--round); }
.theme-pastel .bar { height: 15px; background: #ebe5f6; border: 0; border-radius: 999px; }
.theme-pastel .bar span { color: var(--plum); text-shadow: 0 0 3px rgba(255, 255, 255, 0.9); font-weight: 600; }
.theme-pastel .bar.hp i { background: linear-gradient(90deg, #f7a9ba, var(--rose)); border-radius: 999px; }
.theme-pastel .bar.sp i { background: linear-gradient(90deg, #b3cff6, var(--peri)); border-radius: 999px; }
.theme-pastel .bar.exp i { background: linear-gradient(90deg, #fadf9f, var(--butter)); border-radius: 999px; }
.theme-pastel .bar.jexp i { background: linear-gradient(90deg, #d4c5f2, var(--lav)); border-radius: 999px; }
.theme-pastel .efst { background: #efe8fb; border-color: #d3c4f0; color: var(--plum); }
.theme-pastel #minimap { border-radius: 10px; background: #2c2840; }
.theme-pastel .banner { background: var(--milk); border-color: var(--peri); color: var(--plum); }
.theme-pastel .announce { color: #fff; }

/* ---- windows: the ribbon title bar is the one loud element ---- */
.theme-pastel .win { background: var(--milk); border: 1px solid var(--edge); border-radius: 14px; box-shadow: 0 20px 44px -18px rgba(30, 24, 48, 0.6); overflow: hidden; }
.theme-pastel .win-head { background: linear-gradient(100deg, #b4d0f7 0%, #d3c4f3 100%); border-bottom: 1px solid #cdbfec; padding: 7px 8px 7px 14px; }
.theme-pastel .win-head h3 { font: 600 15.5px var(--round); color: #2e2942; }
.theme-pastel .win-head .x { background: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.8); color: #2e2942; border-radius: 50%; width: 28px; min-height: 28px; }
.theme-pastel .win-head .x:hover { background: #fff; }
.theme-pastel .win-foot { border-top-color: var(--edge); background: var(--mist); }
.theme-pastel .tabs button.on, .theme-pastel .chat-tabs button.on, .theme-pastel .menubar button.on { background: var(--peri-deep); border-color: var(--peri-ink); color: #fff; }
.theme-pastel table.grid td, .theme-pastel table.grid th { border-bottom-color: #ebe5f6; }
.theme-pastel .item-row { border-bottom-color: #ebe5f6; border-radius: 8px; }
.theme-pastel .item-row:hover, .theme-pastel .item-row.sel { background: #eee8fb; }
.theme-pastel .desc { background: var(--mist); border-color: var(--edge); color: var(--plum); }
.theme-pastel .party-member { border-bottom-color: #ebe5f6; }
.theme-pastel .npc-text { font-size: 15.5px; }
.theme-pastel .npc-cutin { border-color: var(--edge); color: var(--plum-2); }
.theme-pastel .trade-box { border-color: var(--edge); background: #fff; }

/* ---- bottom: chat (dark glass), hotbar, menu ---- */
.theme-pastel #chat.panel { background: rgba(43, 38, 62, 0.66); border-color: rgba(185, 162, 232, 0.35); color: #f4f0ff; }
.theme-pastel #chat button { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); color: #f4f0ff; }
.theme-pastel #chat button.on { background: var(--peri-deep); border-color: var(--peri-ink); }
.theme-pastel #chat input { background: rgba(255, 255, 255, 0.92); }
.theme-pastel .chat-form { border-top-color: rgba(255, 255, 255, 0.16); }
.theme-pastel .ch-system { color: #ddd6ff; } .theme-pastel .ch-party { color: #b6f2c9; } .theme-pastel .ch-guild { color: #b7dcff; }
.theme-pastel .ch-whisper { color: #ffe08a; } .theme-pastel .ch-item { color: #bff5e4; } .theme-pastel .ch-error { color: #ffb0c0; }
.theme-pastel .hotbar .hk { background: rgba(251, 248, 255, 0.9); border-color: var(--edge); border-radius: 10px; }
.theme-pastel .hotbar .hk b { color: var(--peri-deep); }
.theme-pastel .menubar { background: rgba(251, 248, 255, 0.94); border-top-color: var(--edge); backdrop-filter: blur(4px); }
.theme-pastel .menubar button kbd { color: #a39cb8; }
.theme-pastel .menubar button.on kbd { color: #eef4ff; }

/* ---- popups, toasts, overlays ---- */
.theme-pastel .popup { background: var(--milk); border-color: var(--lav); border-radius: 14px; box-shadow: 0 16px 36px -14px rgba(30, 24, 48, 0.6); }
.theme-pastel .popup.menu .title { border-bottom-color: var(--edge); font-family: var(--round); }
.theme-pastel .toast { background: #eaf8f1; border-color: var(--mint); color: #22644b; box-shadow: 0 8px 20px -10px rgba(30, 24, 48, 0.5); }
.theme-pastel .toast.err { background: #fde9ee; border-color: var(--rose); color: #9c2f4b; }
.theme-pastel .overlay { background: rgba(59, 53, 80, 0.45); }
.theme-pastel .death-card h2 { font-family: var(--round); color: #c2405f; }
.theme-pastel .spinner { border-color: var(--edge); border-top-color: var(--peri-deep); }

@media (prefers-reduced-motion: reduce) { .theme-pastel .spinner { animation-duration: 2s; } }