/* StarCon Chronicles — pastel classic-MMO interface */
:root {
  --ink: #3a2c3f;
  --ink-soft: #6a5a72;
  --panel: #fdfbff;
  --panel-2: #f3eefa;
  --line: #b9a9d0;
  --title-a: #a8c8f0;
  --title-b: #7aa4e0;
  --pink: #ff8fc0;
  --pink-d: #e0609a;
  --gold: #ffd84a;
  --font: Verdana, Tahoma, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  font: 11px/1.45 var(--font); color: var(--ink);
  background: linear-gradient(180deg, #ffd6e8 0%, #d9e4ff 55%, #c6f0ff 100%);
  user-select: none;
}
input, button { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
kbd {
  display: inline-block; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; background: #fff; font: 10px var(--font);
}

#bg-petals { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#loading { position: fixed; inset: 0; display: grid; place-items: center; font-size: 14px; }

/* ── Screens ── */
.screen { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
#screen-game { display: block; background: #2a2342; }
#screen-game.hidden { display: none; }
#world { position: absolute; inset: 0; display: block; }
#ui { position: absolute; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }

.logo { text-align: center; }
.logo h1 {
  margin: 0; font: 900 64px/1 "Trebuchet MS", Verdana, sans-serif; letter-spacing: 1px;
  color: #fff; -webkit-text-stroke: 3px #b0407a;
  text-shadow: 0 5px 0 #b0407a, 0 10px 24px rgba(176, 64, 122, .35);
}
.logo h1 span {
  display: block; font-size: 34px; color: #fff3a8; -webkit-text-stroke: 2px #5a4aa0;
  text-shadow: 0 4px 0 #5a4aa0; margin-top: 6px; letter-spacing: 6px;
}
.logo-sub { font-size: 13px; color: #8a5aa8; letter-spacing: 3px; margin-bottom: 10px; font-weight: bold; }

/* ── Panels & windows ── */
.panel, .win {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 0 rgba(255,255,255,.8) inset, 0 6px 22px rgba(60, 30, 90, .28);
  overflow: hidden;
}
.panel-title, .win-title {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px; font-weight: bold; color: #fff;
  background: linear-gradient(180deg, var(--title-a), var(--title-b));
  text-shadow: 0 1px 0 rgba(30, 50, 110, .6);
  border-bottom: 1px solid #6a90c8;
}
.panel-title { padding: 7px 12px; font-size: 13px; }
.panel-body { padding: 14px 16px; }
.win { position: absolute; min-width: 160px; }
.win-title { cursor: move; }
.win-body { padding: 8px; max-height: 70vh; overflow: auto; background: linear-gradient(180deg, var(--panel), var(--panel-2)); }
.win-close {
  width: 16px; height: 16px; line-height: 13px; padding: 0; border: 1px solid #fff; border-radius: 4px;
  background: rgba(255,255,255,.25); color: #fff; cursor: pointer; font-weight: bold;
}
.win-close:hover { background: #ff8fa8; }

label { display: block; margin-bottom: 10px; font-weight: bold; }
label input, .create-form input:not([type=number]) {
  display: block; width: 100%; margin-top: 3px; padding: 6px 8px; font-weight: normal;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  user-select: text;
}
input:focus { outline: 2px solid var(--pink); outline-offset: 0; }
.login-panel { width: 300px; }
.row { display: flex; gap: 8px; align-items: center; }
.row.center { justify-content: center; }
.hint { color: var(--ink-soft); margin: 10px 0 0; }
.err { color: #d0304a; min-height: 16px; margin-bottom: 6px; font-weight: bold; }

.btn {
  padding: 5px 14px; border: 1px solid #8a9ac8; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #e4ebfb); font-weight: bold; color: var(--ink);
  box-shadow: 0 1px 0 #fff inset;
}
.btn:hover { background: linear-gradient(180deg, #ffffff, #d6e2ff); }
.btn.primary { border-color: var(--pink-d); color: #fff; background: linear-gradient(180deg, #ffadd2, var(--pink-d)); text-shadow: 0 1px 0 rgba(120, 20, 60, .5); }
.btn.primary:hover { background: linear-gradient(180deg, #ffc0dc, #ea6aa6); }
.btn.small { padding: 2px 10px; font-size: 10px; }
.link { border: 0; background: none; color: var(--ink-soft); cursor: pointer; text-decoration: underline; padding: 0; }

/* ── Character creation ── */
.create-panel { width: min(760px, 96vw); }
.create-body { display: flex; gap: 18px; }
.create-preview {
  flex: 0 0 230px; display: flex; flex-direction: column; gap: 8px; padding: 6px;
  background: radial-gradient(circle at 50% 70%, #fff 0%, #ffe3ef 60%, #e2dcff 100%); border-radius: 10px; border: 1px solid var(--line);
}
.create-form { flex: 1; min-width: 0; }
.picker { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.picker-label { flex: 0 0 90px; font-weight: bold; }
.picker-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.swatch.active { box-shadow: 0 0 0 2px var(--pink-d); transform: scale(1.12); }
.chip { padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.chip.active { background: var(--pink); color: #fff; border-color: var(--pink-d); font-weight: bold; }
.sub-title { font-weight: bold; margin: 10px 0 4px; }
.sub-title span { color: var(--pink-d); }
.alloc-row { display: grid; grid-template-columns: 80px 1fr 20px 26px 20px; align-items: center; gap: 4px; padding: 2px 0; }
.alloc-row small { color: var(--ink-soft); }
.alloc-row b { text-align: center; font-size: 13px; }
.stat-plus {
  width: 20px; height: 18px; padding: 0; border: 1px solid #8a9ac8; border-radius: 4px; cursor: pointer;
  background: linear-gradient(180deg, #fff, #dfe7fb); font-weight: bold; line-height: 1;
}
.stat-plus:disabled { opacity: .35; cursor: default; }

/* ── HUD ── */
.hud { left: 10px; top: 10px; width: 270px; }
.hud .win-title { cursor: default; }
.hud-row { display: flex; gap: 8px; }
.hud-portrait { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 50% 40%, #fff, #ffe0ee); flex: 0 0 auto; }
.hud-portrait canvas { width: 64px; height: 64px; }
.hud-bars { flex: 1; }
.bar-label { display: flex; justify-content: space-between; font-size: 10px; font-weight: bold; }
.bar-label span { font-weight: normal; color: var(--ink-soft); }
.bar { height: 7px; background: #40354a; border-radius: 4px; overflow: hidden; margin-bottom: 2px; box-shadow: 0 1px 0 #fff; }
.bar div { height: 100%; transition: width .25s; border-radius: 4px; }
.bar.hp div { background: linear-gradient(180deg, #8ff0a8, #3cc86a); }
.bar.hp.low div { background: linear-gradient(180deg, #ff9f9f, #e04a4a); animation: pulse .8s infinite alternate; }
.bar.sp div { background: linear-gradient(180deg, #9fd4ff, #3a8ae0); }
.bar.exp div { background: linear-gradient(180deg, #fff3a8, #f0b830); }
@keyframes pulse { to { opacity: .55; } }
.hud-yen { margin: 5px 0; font-weight: bold; display: flex; align-items: center; gap: 3px; }
.yen-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); color: #8a5a00; font-size: 10px; border: 1px solid #c09020; }
.hud-buff { margin-left: auto; color: #3a7ae0; }
.hud-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.hud-menu button {
  padding: 3px 0; border: 1px solid #a9b6dc; border-radius: 6px; background: linear-gradient(180deg, #fff, #e8eefc);
  cursor: pointer; font-size: 10px; font-weight: bold;
}
.hud-menu button:hover { background: linear-gradient(180deg, #fff, #ffd9ea); border-color: var(--pink); }
.hud-foot { text-align: right; margin-top: 4px; }

/* ── Minimap ── */
.minimap { right: 10px; top: 10px; width: 210px; }
.minimap .win-title { cursor: default; }
.minimap canvas { display: block; margin: 4px; background: #2a2342; border-radius: 6px; cursor: pointer; }
.mm-pos { font-weight: normal; font-size: 10px; opacity: .85; }

/* ── Chat ── */
.chat {
  left: 10px; bottom: 10px; width: min(440px, 46vw); background: rgba(30, 22, 44, .62); border-color: rgba(255,255,255,.25);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.chat-log { height: 150px; overflow-y: auto; padding: 6px 8px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.8); user-select: text; }
.chat-line { word-wrap: break-word; }
.chat-line.c-sys { color: #e0e6ff; }
.chat-line.c-err { color: #ff9a9a; }
.chat-line.c-loot { color: #ffc6e2; }
.chat-line.c-quest { color: #9ff0ff; }
.chat-line.c-gold { color: #ffe27a; font-weight: bold; }
.chat-line.c-player { color: #ffffff; }
.chat-line.c-me { color: #fff3a8; }
.chat-form input {
  width: 100%; border: 0; border-top: 1px solid rgba(255,255,255,.2); padding: 6px 8px;
  background: rgba(255,255,255,.12); color: #fff; outline: none; user-select: text;
}
.chat-form input::placeholder { color: rgba(255,255,255,.55); }
.chat-form input:focus { background: rgba(255,255,255,.95); color: var(--ink); }

/* ── Hotbar ── */
.hotbar {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px;
  background: rgba(253, 251, 255, .92); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 18px rgba(60,30,90,.3);
}
.hb-slot {
  position: relative; width: 40px; height: 40px; border-radius: 7px; border: 1px solid #b9b0d0; cursor: pointer;
  background: linear-gradient(180deg, #fff, #ece6f6); display: grid; place-items: center;
}
.hb-slot:nth-child(4) { margin-right: 8px; }
.hb-slot:hover { border-color: var(--pink-d); background: linear-gradient(180deg, #fff, #ffe0ee); }
.hb-slot.locked, .hb-slot.empty { opacity: .4; }
.hb-key { position: absolute; left: 3px; top: 0; font-size: 9px; font-weight: bold; color: var(--ink-soft); }
.hb-qty { position: absolute; right: 3px; bottom: 0; font-size: 9px; font-weight: bold; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }

.skill-ico {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; color: #fff;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ink); text-shadow: 0 1px 1px rgba(0,0,0,.5); flex: 0 0 auto;
}
.skill-ico.fury { background: radial-gradient(circle at 35% 30%, #ffb08a, #e0503a); }
.skill-ico.sparkle { background: radial-gradient(circle at 35% 30%, #ffd0f0, #b060e0); }
.skill-ico.cheer { background: radial-gradient(circle at 35% 30%, #ffd0e0, #ff5f8f); }
.skill-ico.guard { background: radial-gradient(circle at 35% 30%, #c0e8ff, #3a8ae0); font-size: 13px; }

/* ── Items ── */
.tabs { display: flex; gap: 2px; margin-bottom: 6px; }
.tab { flex: 1; padding: 3px; border: 1px solid var(--line); border-radius: 6px 6px 0 0; background: #ece6f6; cursor: pointer; font-weight: bold; }
.tab.active { background: #fff; border-bottom-color: #fff; color: var(--pink-d); }
.inv-grid { display: grid; grid-template-columns: repeat(7, 40px); gap: 3px; justify-content: center; }
.inv-slot {
  position: relative; width: 40px; height: 40px; border-radius: 6px; border: 1px solid #c9bfdc;
  background: linear-gradient(180deg, #fff, #f1ecf8); display: grid; place-items: center; cursor: pointer;
}
.inv-slot:hover { border-color: var(--pink-d); }
.inv-slot.empty { cursor: default; background: #efeaf6; }
.inv-slot.equipped { background: linear-gradient(180deg, #fffbe0, #ffefaa); border-color: #e0b830; }
.inv-slot .qty { position: absolute; right: 2px; bottom: 0; font-size: 9px; font-weight: bold; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff; }
.eq-badge { position: absolute; left: 2px; top: 0; font-size: 8px; font-weight: bold; color: #b08000; }
.inv-foot { display: flex; justify-content: space-between; margin-top: 6px; font-weight: bold; }
.icon { image-rendering: auto; pointer-events: none; }

.tooltip {
  position: fixed; z-index: 9999; width: 250px; padding: 7px 9px; pointer-events: none;
  background: rgba(253, 251, 255, .97); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(60,30,90,.35);
}
.tt-name { font-weight: bold; font-size: 12px; color: #5a4aa0; }
.tt-type { color: var(--ink-soft); font-size: 10px; margin-bottom: 3px; }
.tt-stats { color: #2a8a50; font-weight: bold; margin-bottom: 3px; }
.tt-desc { font-style: italic; }
.tt-extra { margin-top: 4px; color: var(--pink-d); font-size: 10px; }

/* ── Status ── */
.stat-grid { display: grid; gap: 2px; }
.stat-row { display: grid; grid-template-columns: 1fr 50px 22px; align-items: center; padding: 2px 4px; border-radius: 5px; }
.stat-row:nth-child(odd) { background: rgba(185, 169, 208, .14); }
.stat-name { font-weight: bold; }
.stat-val { text-align: right; padding-right: 6px; font-weight: bold; }
.stat-val .bonus { color: #2a8a50; font-weight: normal; }
.points { margin: 6px 4px; font-weight: bold; color: var(--pink-d); }
.derived { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 12px; padding: 6px; border-top: 1px dashed var(--line); }
.drow { display: flex; justify-content: space-between; }

/* ── Equipment ── */
.equip-wrap { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.equip-col { display: flex; flex-direction: column; gap: 10px; width: 90px; }
.equip-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.equip-label small { color: var(--ink-soft); }
.equip-label div { font-weight: bold; font-size: 10px; }
.equip-preview { background: radial-gradient(circle at 50% 70%, #fff, #ffe3ef 70%, transparent 71%); }

/* ── Skills ── */
.skill-row { display: flex; gap: 8px; padding: 6px; border-radius: 8px; cursor: pointer; align-items: flex-start; }
.skill-row:hover { background: #ffe9f3; }
.skill-row.locked { opacity: .5; cursor: default; }
.skill-name { font-weight: bold; color: #5a4aa0; }
.skill-meta { font-size: 10px; color: var(--ink-soft); }

/* ── Quests ── */
.quest { padding: 7px 8px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.quest.ready { border-color: #3cc86a; background: #f0fff4; }
.quest-name { font-weight: bold; color: #5a4aa0; font-size: 12px; }
.quest.ready .quest-name { color: #2a8a50; }
.quest-area { font-size: 10px; color: var(--ink-soft); margin-bottom: 3px; }
.quest-obj { font-weight: bold; }
.quest-obj.done { color: #2a8a50; text-decoration: line-through; }
.quest-reward { margin-top: 3px; color: #b07a00; font-size: 10px; }
.quest-done summary { cursor: pointer; font-weight: bold; margin: 4px 0; }

/* ── Shop ── */
.shop-disc { color: var(--pink-d); font-weight: bold; margin-bottom: 4px; }
.shop-row { display: flex; align-items: center; gap: 8px; padding: 3px; border-bottom: 1px dashed #e0d6ee; }
.shop-info { flex: 1; }
.shop-name { font-weight: bold; }
.shop-price { color: #b07a00; }
.shop-qty { width: 42px; padding: 2px; border: 1px solid var(--line); border-radius: 4px; }

/* ── Dialogue ── */
.dialog {
  position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); width: min(560px, 92vw);
  background: rgba(253, 251, 255, .97); border: 2px solid #8aa8e0; border-radius: 12px; padding: 10px 14px 12px;
  box-shadow: 0 8px 28px rgba(40, 20, 70, .45);
  z-index: 5000;
}
.dlg-name { font-weight: bold; color: #3a6ad0; font-size: 12px; margin-bottom: 4px; }
.dlg-text { font-size: 12px; line-height: 1.6; min-height: 38px; cursor: pointer; user-select: text; }
.dlg-opts { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.dlg-opt {
  text-align: left; padding: 5px 10px; border: 1px solid #c9bfdc; border-radius: 8px; cursor: pointer;
  background: linear-gradient(180deg, #fff, #f1ecf8); font-size: 11px;
}
.dlg-opt:hover { border-color: var(--pink-d); background: linear-gradient(180deg, #fff, #ffe0ee); }
.dlg-opt.locked { opacity: .5; cursor: not-allowed; text-decoration: line-through; }
.dlg-opt.stat-str { border-left: 4px solid #e0503a; }
.dlg-opt.stat-agi { border-left: 4px solid #3cc86a; }
.dlg-opt.stat-int { border-left: 4px solid #3a8ae0; }
.dlg-opt.stat-cha { border-left: 4px solid #ff5f8f; }
.dlg-opt.stat-sou { border-left: 4px solid #9a6ae3; }

/* ── Help ── */
.help p { margin: 0 0 7px; }
.help .y { color: #d0a000; }
.help .g { color: #2a8a50; }
.tag { color: var(--pink-d); font-weight: bold; }

/* ── Zone banner ── */
#zone-banner {
  position: absolute; top: 22%; left: 0; right: 0; text-align: center; pointer-events: none; opacity: 0;
  font: 900 34px "Trebuchet MS", Verdana, sans-serif; color: #fff; -webkit-text-stroke: 1.5px #b0407a;
  text-shadow: 0 3px 0 #b0407a, 0 8px 20px rgba(0,0,0,.4); letter-spacing: 2px;
}
#zone-banner.show { animation: banner 3.2s ease-out forwards; }
@keyframes banner {
  0% { opacity: 0; transform: translateY(14px) scale(.95); }
  15% { opacity: 1; transform: none; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #c9bfdc; border-radius: 4px; }

/* Content pages and the admin scroll normally (the game itself keeps html/body fixed). */
html.scroll, html.scroll body { height: auto; min-height: 100%; overflow: auto; overflow-x: hidden; }

/* Moderation from the chat (administrators) */
.chat-line b.mod-name { cursor: pointer; text-decoration: underline dotted; }
.chat-line b.mod-name:hover { color: #ffd84a; }
#win-mod .win-body select, #win-mod .win-body input:not([type=checkbox]) { width: 100%; margin: 4px 0 8px; box-sizing: border-box; }
#win-mod label.check { display: flex; gap: 6px; align-items: center; justify-content: flex-start; font-weight: normal; margin: 0 0 8px; }
#win-mod label.check input { width: auto; flex: 0 0 auto; margin: 0; }
#win-mod .row { display: flex; gap: 8px; margin-top: 6px; }
#win-mod .btn.danger { border-color: #d0607a; color: #b0203a; }
.mod-msg.ok { color: #1f6a3a; font-weight: bold; }
.mod-msg.err { color: #b0203a; font-weight: bold; }

/* ── Target card (selected monster) ── */
.target-card { left: 50%; top: 10px; width: 280px; transform: translateX(-50%); pointer-events: none; }
.target-card .win-title { cursor: default; display: flex; justify-content: space-between; gap: 8px; }
.target-card .tc-lvl { font-weight: normal; opacity: .85; }
.target-card .win-body { padding: 6px 8px; }
.target-card .bar.hp div { background: linear-gradient(180deg, #ff9aa6, #e0455a); }
.target-card .tc-desc { font-size: 10.5px; font-style: italic; color: var(--ink-soft); margin-top: 3px; line-height: 1.35; }
.target-card.boss .win-title { background: linear-gradient(180deg, #ff7a8a, #c8344c); }
@media (max-width: 760px) { .target-card { top: auto; bottom: 120px; width: min(280px, 80vw); } }