* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; font-family: Georgia, 'Times New Roman', serif; background: #08090f; color: #f7e7bd; }
button, input { font: inherit; }
.hidden { display: none !important; }

.auth-screen { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: radial-gradient(circle at 70% 20%, #26365d, #0b0d16 55%, #030409); }
.moon { position: absolute; right: 12%; top: 9%; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff7d0, #c9d6ff 65%, #7a86b8); box-shadow: 0 0 60px #c9d6ff88; }
.mountains { position: absolute; left: -5%; right: -5%; bottom: 28%; height: 28%; background: linear-gradient(135deg, transparent 48%, #161c2f 49% 52%, transparent 53%) 0 0/220px 220px, linear-gradient(45deg, transparent 48%, #101626 49% 52%, transparent 53%) 0 40px/260px 240px; opacity: .95; }
.castle { position: absolute; left: 8%; bottom: 12%; width: 560px; height: 440px; filter: drop-shadow(0 22px 32px #000a); }
.keep, .tower, .gate { position: absolute; bottom: 0; background: linear-gradient(90deg, #293044, #4a5368 45%, #202737); border: 2px solid #66708c; }
.keep { left: 150px; width: 260px; height: 290px; clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 100%, 0 100%); }
.tower { width: 120px; height: 355px; border-radius: 12px 12px 0 0; }
.tower::before { content: ''; position: absolute; left: -12px; right: -12px; top: -34px; height: 45px; background: repeating-linear-gradient(90deg, #343b52 0 20px, #596178 20px 38px); clip-path: polygon(0 45%, 12% 45%, 12% 0, 28% 0, 28% 45%, 44% 45%, 44% 0, 60% 0, 60% 45%, 76% 45%, 76% 0, 92% 0, 92% 45%, 100% 45%, 100% 100%, 0 100%); }
.tower-left { left: 70px; }
.tower-right { right: 70px; }
.gate { left: 220px; width: 120px; height: 135px; border-radius: 60px 60px 0 0; background: linear-gradient(90deg, #3b2116, #1a0e0a); border-color: #996b3c; }
.mist { position: absolute; left: -20%; width: 140%; height: 90px; background: radial-gradient(ellipse, #ffffff22, transparent 62%); filter: blur(15px); animation: drift 16s linear infinite; }
.mist-a { bottom: 10%; }
.mist-b { bottom: 22%; animation-duration: 24s; opacity: .65; }
@keyframes drift { from { transform: translateX(-8%); } to { transform: translateX(8%); } }

.auth-card { position: absolute; right: 7%; top: 50%; transform: translateY(-50%); width: min(560px, 88vw); padding: 30px; border: 1px solid #9e7c3c; border-radius: 18px; background: linear-gradient(180deg, #17131eee, #09080eee); box-shadow: 0 20px 70px #000, inset 0 0 34px #b47a2440; }
.auth-card h1 { margin: 0 0 6px; font-size: 34px; letter-spacing: 1px; color: #ffd985; text-shadow: 0 0 18px #bf6b25; }
.subtitle { margin: 0 0 20px; color: #d5c08c; }
.tabs { display: flex; gap: 10px; margin-bottom: 16px; }
.tabs button, .auth-form button, .top-bar button, .target-panel button, .skills-panel button, .inventory-panel button, .dialogue button, .chat-panel button { border: 1px solid #8c6a35; border-radius: 8px; padding: 9px 14px; color: #ffe5aa; background: linear-gradient(#4b3218, #17100a); cursor: pointer; box-shadow: inset 0 0 12px #f3b14b33; }
.tabs button.active { background: linear-gradient(#8b5722, #291609); }
.auth-form { display: grid; gap: 12px; }
.auth-form label { display: grid; gap: 5px; color: #ddc696; }
.auth-form input, .chat-panel input { width: 100%; border: 1px solid #665032; border-radius: 8px; padding: 10px; color: #f9e7c0; background: #06070dcc; outline: none; }
.error { min-height: 20px; margin-top: 12px; color: #ff8c7d; }
.race-title { color: #ffd985; margin-top: 4px; }
.race-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.race-card { border: 1px solid #614a2a; border-radius: 10px; padding: 10px; background: #0c0d14cc; cursor: pointer; min-height: 92px; }
.race-card.active { border-color: #ffd27c; box-shadow: 0 0 18px #d4882844; }
.race-card h3 { margin: 0 0 4px; color: #ffe2a4; }
.race-card p { margin: 0; font-size: 12px; color: #cdbb91; }
.race-stats { margin-top: 6px; font-size: 11px; color: #aaa; }

.game-screen { width: 100vw; height: 100vh; background: #05070a; }
#gameCanvas { display: block; width: 100vw; height: 100vh; cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M2 2 L20 10 L11 13 L8 22 Z" fill="%23ffd27c" stroke="%23000"/></svg>') 2 2, auto; }
.top-bar, .target-panel, .skills-panel, .inventory-panel, .quest-panel, .chat-panel, .dialogue { position: absolute; border: 1px solid #8c6a35; background: linear-gradient(180deg, #121018ee, #060609ee); box-shadow: 0 0 24px #000b, inset 0 0 22px #b47a2428; border-radius: 12px; }
.top-bar { left: 14px; right: 14px; top: 12px; min-height: 62px; display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
.player-name { min-width: 150px; color: #ffd985; font-weight: bold; }
.meter { display: grid; grid-template-columns: 32px 180px 72px; align-items: center; gap: 6px; font-size: 13px; }
.meter div { height: 14px; border: 1px solid #4b251f; background: #1b0808; border-radius: 8px; overflow: hidden; }
.meter div i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #842323, #ff5d49); transition: width .15s linear; }
.meter.mana div { background: #071326; border-color: #1a3c6d; }
.meter.mana div i { background: linear-gradient(90deg, #184a9a, #5ab4ff); }
.small-stat { color: #d7c28e; }
.small-stat b { color: #fff0c7; }
.ping b { color: #92ffb2; }
.target-panel { right: 18px; top: 92px; width: 260px; padding: 12px; display: grid; gap: 10px; }
.skills-panel { left: 50%; transform: translateX(-50%); bottom: 18px; display: flex; gap: 8px; padding: 10px; }
.skills-panel button small { color: #ffca6f; margin-left: 4px; }
.inventory-panel { left: 18px; bottom: 18px; padding: 10px; display: flex; gap: 8px; align-items: center; }
.quest-panel { left: 18px; top: 92px; width: 280px; padding: 12px; color: #d7c28e; }
.chat-panel { right: 18px; bottom: 18px; width: 360px; padding: 10px; }
.log-box { height: 170px; overflow: auto; font-size: 12px; color: #d4c09c; margin-bottom: 8px; }
.log-entry { margin-bottom: 4px; }
.log-entry.warn { color: #ffb067; }
.log-entry.combat { color: #ffdf8a; }
.chat-panel form { display: flex; gap: 6px; }
.dialogue { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, 90vw); padding: 22px; z-index: 5; }
.dialogue h2 { margin: 0 0 8px; color: #ffd985; }
.dialogue-close { position: absolute; right: 12px; top: 10px; padding: 4px 10px !important; }
#dialogueQuest { display: grid; gap: 8px; }

@media (max-width: 900px) {
  .auth-card { left: 5%; right: 5%; width: auto; }
  .castle { opacity: .45; }
  .top-bar { flex-wrap: wrap; }
  .meter { grid-template-columns: 30px 120px 62px; }
  .chat-panel { width: calc(100vw - 36px); }
  .skills-panel { bottom: 220px; }
}

.character-card { width: min(620px, 90vw); }
.character-list { display: grid; gap: 10px; margin: 14px 0 18px; max-height: 220px; overflow: auto; }
.character-row { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; text-align: left; border: 1px solid #8c6a35; border-radius: 10px; padding: 12px; color: #ffe5aa; background: linear-gradient(#2c211a, #0d0b0b); cursor: pointer; box-shadow: inset 0 0 12px #f3b14b22; }
.character-row b { color: #ffd985; font-size: 18px; }
.character-row span { color: #d5c08c; }
.character-row small { grid-column: 1 / -1; color: #a99a75; }
.empty-characters { border: 1px dashed #6d5531; border-radius: 10px; padding: 14px; color: #cdbb91; background: #080910aa; }
.character-form { border-top: 1px solid #4e3c24; padding-top: 14px; }
.secondary-btn { margin-top: 12px; border: 1px solid #5e4a2d; border-radius: 8px; padding: 8px 12px; color: #d5c08c; background: #080910cc; cursor: pointer; }

.panel-title { width: 100%; color: #ffd985; font-weight: bold; letter-spacing: .3px; }
.inventory-panel { width: 330px; display: grid; grid-template-columns: 1fr; gap: 8px; align-items: stretch; }
.inventory-currencies { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.inventory-items { display: grid; grid-template-columns: repeat(6, 42px); gap: 6px; min-height: 42px; }
.item-slot { position: relative; height: 42px; border: 1px solid #5f4a2d; border-radius: 8px; background: radial-gradient(circle at 30% 25%, #2a2531, #09090e); display: grid; place-items: center; box-shadow: inset 0 0 12px #0008; }
.item-slot span { font-size: 21px; }
.item-slot b { position: absolute; right: 4px; bottom: 2px; font: bold 11px Arial, sans-serif; color: #fff4c8; text-shadow: 0 1px 2px #000; }
.item-slot.uncommon { border-color: #5ea56f; box-shadow: inset 0 0 12px #0b2, 0 0 8px #2f8b4d55; }
.item-slot.rare { border-color: #73a9ff; box-shadow: inset 0 0 12px #28f, 0 0 10px #477dff66; }
.empty-inventory { grid-column: 1 / -1; padding: 10px; border: 1px dashed #5f4a2d; border-radius: 8px; color: #9f916f; text-align: center; }
.inventory-panel.pulse { animation: invPulse .35s ease; }
@keyframes invPulse { 0% { transform: scale(1); } 50% { transform: scale(1.025); } 100% { transform: scale(1); } }

.hero-info-panel { position: absolute; left: 18px; top: 250px; width: 300px; padding: 16px; border: 1px solid #8c6a35; background: linear-gradient(180deg, #121018ee, #060609ee); box-shadow: 0 0 24px #000b, inset 0 0 22px #b47a2428; border-radius: 12px; z-index: 4; }
.hero-info-panel h2 { margin: 0 0 12px; color: #ffd985; font-size: 19px; }
.hero-name-card { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #4e3c24; }
.hero-name-card b { color: #fff0c7; }
.hero-name-card span { color: #cdbb91; }
.hero-stat-grid { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13px; color: #d7c28e; }
.hero-stat-grid b { color: #fff0c7; }
.quest-line { margin-top: 6px; line-height: 1.35; }
.quest-line.done, .quest-status.done { color: #a9ffad; }
.quest-status { color: #d7c28e; }
.log-entry.chat { color: #b7d7ff; }
.log-entry.info { color: #d4c09c; }

@media (max-width: 900px) {
  .inventory-panel { width: calc(100vw - 36px); }
  .inventory-items { grid-template-columns: repeat(6, 42px); }
  .hero-info-panel { left: 18px; right: 18px; width: auto; top: 160px; }
}

/* v17 MMORPG UI pass */
.race-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.race-mini { position: relative; width: 34px; height: 46px; border-radius: 16px 16px 10px 10px; background: linear-gradient(#27384f, #172033); box-shadow: inset 0 0 0 2px #d6b36a55, 0 5px 12px #0008; }
.race-mini::before { content: ''; position: absolute; left: 8px; top: -7px; width: 18px; height: 18px; border-radius: 50%; background: #f2c48d; box-shadow: inset 0 -3px 0 #6b452866; }
.race-mini::after { content: ''; position: absolute; left: 7px; right: 7px; top: 23px; height: 4px; background: #d6b36a; border-radius: 4px; }
.race-mini.race-elf { background: linear-gradient(#2f7b68, #153b34); }
.race-mini.race-elf::before { background: #b9f3d4; }
.race-mini.race-dark_elf { background: linear-gradient(#33245d, #171023); }
.race-mini.race-dark_elf::before { background: #9b86ff; }
.race-mini.race-orc { width: 40px; background: linear-gradient(#5c6330, #242d19); }
.race-mini.race-orc::before { background: #8ed36a; }
.race-mini.race-dwarf { width: 38px; height: 40px; margin-top: 6px; background: linear-gradient(#6b4a2c, #2d1c10); }
.race-mini.race-dwarf::before { background: #d69b54; }

.top-bar button, .target-panel button, .skills-panel button, .inventory-panel button, .dialogue button { transition: transform .08s ease, border-color .15s ease, box-shadow .15s ease; }
.top-bar button:hover, .target-panel button:hover, .skills-panel button:hover, .inventory-panel button:hover, .dialogue button:hover { transform: translateY(-1px); border-color: #ffd27c; box-shadow: inset 0 0 12px #f3b14b55, 0 0 14px #d4882830; }

.inventory-panel { left: 18px; top: 92px; bottom: auto; width: 420px; max-height: calc(100vh - 130px); overflow: auto; padding: 16px; z-index: 4; }
.inventory-panel .dialogue-close { top: 10px; right: 10px; }
.inventory-currencies { padding-right: 40px; }
.equipment-title { color: #cdbb91; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; margin-top: 6px; }
.equipment-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.equipment-slot { min-height: 64px; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 1fr 1fr; gap: 2px 8px; align-items: center; text-align: left; background: radial-gradient(circle at 25% 18%, #27212c, #0a090e); border-color: #5f4a2d; }
.equipment-slot span { grid-row: 1 / 3; font-size: 24px; text-align: center; }
.equipment-slot b { color: #ffe5aa; font-size: 12px; }
.equipment-slot small { color: #9f916f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.equipment-slot.empty { opacity: .8; border-style: dashed; }
.equipment-slot.uncommon, .item-slot.uncommon { border-color: #5ea56f; box-shadow: inset 0 0 12px #0b2, 0 0 8px #2f8b4d55; }
.equipment-slot.rare, .item-slot.rare { border-color: #73a9ff; box-shadow: inset 0 0 12px #28f, 0 0 10px #477dff66; }
.equipment-slot.epic, .item-slot.epic { border-color: #b66dff; box-shadow: inset 0 0 14px #74f, 0 0 12px #a54dff66; }
.inventory-items { grid-template-columns: repeat(7, 42px); }
.item-slot { padding: 0; cursor: default; }
.item-slot.equippable { cursor: pointer; }
.item-slot.equipped { outline: 2px solid #ffd27c; }
.item-slot em { position: absolute; left: 4px; top: 2px; color: #a9ffad; font-style: normal; font-size: 12px; text-shadow: 0 1px 2px #000; }
.inventory-help { color: #9f916f; font-size: 12px; line-height: 1.35; }

.hero-info-panel { top: 92px; left: 456px; }
.panel-title { padding-right: 38px; }

@media (max-width: 900px) {
  .inventory-panel { left: 18px; right: 18px; top: 140px; width: auto; }
  .equipment-slots { grid-template-columns: repeat(2, 1fr); }
  .inventory-items { grid-template-columns: repeat(6, 42px); }
  .hero-info-panel { left: 18px; right: 18px; top: 140px; }
}