* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow: hidden; font-family: sans-serif; }

.webgl { position: fixed; top: 0; left: 0; outline: none; z-index: 0; }

/* ─── ui-container base ──────────────────────────────────── */
.ui-container {
    pointer-events: none;
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    display: none; z-index: 1;
}
.ui-container.visible   { display: block; }
.ui-container.invisible { display: none; }
.visible   { display: block !important; }
.invisible { display: none !important; }
.button { pointer-events: auto; }

/* ─── Menu — own stacking context, flex centered ─────────── */
#MenuOverlay {
    pointer-events: none;
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 2;
    /* display is toggled between none and flex — never block */
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
/* classList.replace('invisible','visible') triggers this */
#MenuOverlay.visible   { display: flex !important; }
#MenuOverlay.invisible { display: none  !important; }

.menu-btn {
    pointer-events: auto;
    width: 220px; padding: 14px 0;
    font-size: 18px; font-weight: bold;
    letter-spacing: 2px; border: none; border-radius: 8px; cursor: pointer;
    transition: transform 0.1s, opacity 0.15s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.menu-btn:hover  { transform: translateY(-2px); opacity: 0.9; }
.menu-btn:active { transform: translateY(0); }
#MenuPlay { background: linear-gradient(135deg, #2ecc71, #27ae60); color: white; }
#settings { background: linear-gradient(135deg, #3a4a66, #2a3a55); color: #aabbdd; border: 1px solid #445566; }

/* ─── Lobby ──────────────────────────────────────────────── */


#LevelTitle {
    position: absolute; top: 32px; left: 50%;
    transform: translateX(-50%);
    color: white; font-size: 28px; font-weight: bold;
    letter-spacing: 2px; text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
/* ─── Lobby nav buttons ──────────────────────────────────── */
#LobbyNav {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}
#LobbyNav.invisible { display: none !important; }
#LobbyNav.visible   { display: block !important; }

.lobby-nav-btn {
    position:        absolute;
    pointer-events:  all;
    background:      rgba(0, 0, 0, 0.5);
    border:          1px solid rgba(255, 255, 255, 0.18);
    color:           white;
    width:           56px;
    height:          56px;
    border-radius:   50%;
    font-size:       1.2rem;
    cursor:          pointer;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             2px;
    line-height:     1;
    transition:      background 0.15s, transform 0.1s, border-color 0.15s;
    user-select:     none;
    -webkit-user-select: none;
    backdrop-filter: blur(4px);
}
.lobby-nav-btn span {
    font-size:   0.58rem;
    opacity:     0.55;
    line-height: 1;
    letter-spacing: 0.05em;
}
.lobby-nav-btn:hover  { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.35); }
.lobby-nav-btn:active { background: rgba(255,255,255,0.22); }

#LobbyNavUp   { top: 1%;  left: 50%; transform: translateX(-50%); }
#LobbyNavDown { bottom: 1%; left: 50%; transform: translateX(-50%); }
#LobbyNavLeft  { top: 50%; left: 48px; transform: translateY(-50%); }
#LobbyNavRight { top: 50%; right: 48px; transform: translateY(-50%); }

#LobbyNavUp:active   { transform: translateX(-50%) scale(0.91); }
#LobbyNavDown:active { transform: translateX(-50%) scale(0.91); }
#LobbyNavLeft:active  { transform: translateY(-50%) scale(0.91); }
#LobbyNavRight:active { transform: translateY(-50%) scale(0.91); }


/* Larger buttons */
.lobby-nav-btn {
    width:  68px;
    height: 68px;
    font-size: 1.4rem;
}

.lobby-nav-btn span {
    font-size: 0.65rem;
}

/* ─── Lobby overlay panel ────────────────────────────────── */
/* ─── Lobby overlay panel ────────────────────────────────── */
#LobbyPanel {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 64px 100px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.92) 30%);
    width: 100vw;
    pointer-events: auto;
    animation: lobbyPanelIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes lobbyPanelIn {
    from { transform: translateX(-50%) translateY(30px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

#LobbyPanelDeco {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, transparent, #44aaff);
    margin-bottom: 16px;
}

#LevelEyebrow {
    font-size: 10px;
    letter-spacing: 6px;
    color: #44aaff;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}

#LevelTitle {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: white;
    text-shadow:
        0 0 40px rgba(68,170,255,0.5),
        0 2px 0 rgba(0,0,0,0.9);
    margin-bottom: 8px;
    white-space: nowrap;
}

#LobbyRule {
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #44aaff, transparent);
    opacity: 0.35;
    margin-bottom: 28px;
}

#LobbyPlay {
    padding: 16px 72px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 5px;
    text-transform: uppercase;
    background: transparent;
    color: #44aaff;
    border: 1px solid rgba(68,170,255,0.6);
    border-radius: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.25s;
    font-family: 'Courier New', monospace;
}

#LobbyPlay::before {
    content: '';
    position: absolute; inset: 0;
    background: #44aaff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
    z-index: 0;
}

#LobbyPlay > * { position: relative; z-index: 1; }

#LobbyPlay:hover:not(:disabled) { color: #000; }
#LobbyPlay:hover:not(:disabled)::before { transform: scaleX(1); }

#LobbyPlay:disabled {
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.2);
    cursor: not-allowed;
}
#LobbyPlay:disabled::before { display: none; }



/* ─── Round top left ─────────────────────────────────────── */
#RoundTopLeft { position: absolute; top: 20px; left: 20px; display: flex; flex-direction: column; gap: 4px; }
#WaveNumber { color: white; font-size: 20px; font-weight: bold; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
#WaveTimer  { color: #aaddff; font-size: 16px; text-shadow: 0 2px 4px rgba(0,0,0,0.6); }

/* ─── Health bar top center ──────────────────────────────── */
#HealthBarContainer { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; }

#NormalHealthBar {
    position: relative; width: 340px; height: 38px; background: #1a4a1a;
    clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%); overflow: hidden;
}
#NormalHealthFill { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(135deg, #2ecc71, #27ae60); transition: width 0.3s ease; }
#NormalHealthText { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: white; font-size: 15px; font-weight: bold; text-shadow: 0 1px 4px rgba(0,0,0,0.9); white-space: nowrap; z-index: 1; }

#BossHealthBar { display: flex; align-items: center; }
#BossIconSlot { width: 44px; height: 44px; background: rgba(0,0,0,0.5); border: 2px solid #880000; border-right: none; clip-path: polygon(10px 0%,100% 0%,90% 100%,0% 100%); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; }
#BossIconSlot img { width: 100%; height: 100%; object-fit: cover; }
#BossBarInner { position: relative; width: 460px; height: 44px; background: #3a0000; clip-path: polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%); overflow: hidden; }
#BossHealthFill { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(135deg,#cc2222,#aa1111); transition: width 0.3s ease; }
#BossHealthText { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: white; font-size: 16px; font-weight: bold; text-shadow: 0 1px 4px rgba(0,0,0,0.9); white-space: nowrap; z-index: 1; }

/* ─── Cash bottom left ───────────────────────────────────── */
#CashDisplay { position: absolute; bottom: 100px; left: 20px; color: #ffdd44; font-size: 22px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

/* ─── Start wave button ──────────────────────────────────── */
.start-wave-btn {
    position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%);
    pointer-events: auto; padding: 14px 44px; font-size: 18px; font-weight: bold;
    background: linear-gradient(135deg,#2ecc71,#27ae60); color: white;
    border: none; border-radius: 8px; cursor: pointer;
    letter-spacing: 1px; animation: pulse 2s infinite; transition: transform 0.1s, opacity 0.15s;
}
.start-wave-btn:hover { transform: translateX(-50%) translateY(-2px); opacity: 0.9; }
@keyframes pulse {
    0%,100% { box-shadow: 0 4px 16px rgba(46,204,113,0.3); }
    50%      { box-shadow: 0 4px 24px rgba(46,204,113,0.7); }
}

/* ─── Skip dialog ────────────────────────────────────────── */
#SkipDialog {
    position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
    background: rgba(20,22,30,0.88); border: 1px solid #445566; border-radius: 8px;
    padding: 10px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px;
    pointer-events: auto; min-width: 160px; box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
#SkipDialogTitle { color: #ccd6e0; font-size: 14px; font-weight: bold; }
#SkipDialogButtons { display: flex; gap: 12px; }
.skip-dialog-btn { width: 44px; height: 44px; border: none; border-radius: 6px; font-size: 22px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.1s, opacity 0.15s; }
.skip-dialog-btn:hover { transform: scale(1.08); opacity: 0.9; }
.skip-no  { background: #a33; color: white; }
.skip-yes { background: #5a8a2a; color: white; }

/* ─── Loadout bar ────────────────────────────────────────── */
#LoadoutBar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: flex-end; pointer-events: auto; }
.loadout-slot { width: 64px; background: rgba(0,0,0,0.7); border: 2px solid #445566; border-radius: 8px; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: border-color 0.15s,transform 0.1s; overflow: hidden; padding-bottom: 4px; }
.loadout-slot:hover    { border-color: #88aacc; transform: translateY(-3px); }
.loadout-slot.selected { border-color: #44aaff; box-shadow: 0 0 10px rgba(68,170,255,0.6); }
.loadout-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; color: #aabbcc; font-size: 10px; text-align: center; padding: 4px; }
.loadout-icon img { width: 100%; height: 100%; object-fit: contain; }
.loadout-cost { font-size: 11px; font-weight: bold; color: #ffdd44; text-align: center; padding: 2px 0 4px; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }

/* ─── Tower info panel ───────────────────────────────────── */
#TowerInfoPanel {
    position: fixed; top: 50%; right: 0;
    transform: translateY(-50%) translateX(105%);
    width: 240px; background: rgba(10,14,26,0.95);
    border: 1px solid #334466; border-right: none;
    border-radius: 10px 0 0 10px; padding: 16px;
    z-index: 10; pointer-events: auto;
    transition: transform 0.25s ease; color: white;
    display: flex; flex-direction: column; gap: 8px;
}
#TowerInfoPanel.visible   { display: flex; transform: translateY(-50%) translateX(0%); }
#TowerInfoPanel.invisible { display: flex; transform: translateY(-50%) translateX(105%); }

#TowerInfoHeader { display: flex; justify-content: space-between; align-items: center; }
#TowerInfoName   { font-size: 15px; font-weight: bold; color: #aaddff; }
#TowerInfoClose  { background: none; border: none; color: #aaa; font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
#TowerInfoClose:hover { color: white; }

#TowerStatsContainer { font-size: 13px; }
.stats-header { display: grid; grid-template-columns: 1fr 1fr 1fr; color: #667799; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #223344; }
.stat-row { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 4px 0; border-bottom: 1px solid #1a2233; }
.stat-label   { color: #8899aa; }
.stat-cur     { color: #ccddee; text-align: center; }
.stat-next    { color: #888; text-align: center; }
.stat-improved { color: #44ee88; font-weight: bold; }

/* Bard buff highlight */
.bard-buff { color: #44ffcc; font-weight: bold; }

.killstack-section { padding-top: 10px; border-top: 1px solid #2a1a3a; font-size: 12px; }
.killstack-header  { color: #cc88ff; font-weight: bold; font-size: 13px; margin-bottom: 6px; }
.killstack-row     { display: flex; justify-content: space-between; padding: 3px 0; color: #8899aa; border-bottom: 1px solid #1a1a2a; }

/* ─── Ability button ─────────────────────────────────────── */
.ability-btn { width: 100%; padding: 10px; border: none; border-radius: 6px; font-size: 13px; font-weight: bold; cursor: pointer; letter-spacing: 0.5px; transition: opacity 0.15s; }
.ability-ready    { background: linear-gradient(135deg,#8844ff,#6622cc); color: white; }
.ability-ready:hover { opacity: 0.85; }
.ability-cooldown { background: #2a1a44; color: #7755aa; cursor: not-allowed; }

/* ─── Upgrade button ─────────────────────────────────────── */
.upgrade-btn { width: 100%; padding: 10px; border: none; border-radius: 6px; font-size: 13px; font-weight: bold; cursor: pointer; letter-spacing: 0.5px; transition: opacity 0.15s; }
.upgrade-ready       { background: linear-gradient(135deg,#2ecc71,#27ae60); color: white; }
.upgrade-ready:hover { opacity: 0.85; }
.upgrade-cant-afford { background: #334455; color: #667788; cursor: not-allowed; }
.upgrade-max         { background: #aa8800; color: #ffdd88; cursor: default; }

/* ─── End screen ─────────────────────────────────────────── */
.end-screen {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    display: flex; align-items: center; justify-content: center;
    z-index: 20; pointer-events: auto;
    opacity: 0; transition: opacity 0.6s ease;
}
.end-screen.visible   { display: flex; opacity: 1; }
.end-screen.invisible { display: none; opacity: 0; }

/* Animated backdrop */
#EndScreen::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(10,20,40,0.96) 0%, rgba(0,0,0,0.98) 100%);
    z-index: 0;
}

#EndScreenInner {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    align-items: center; gap: 0;
    text-align: center;
    animation: endScreenReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes endScreenReveal {
    from { transform: translateY(24px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* Decorative top line */
#EndScreenDeco {
    width: 2px; height: 60px;
    background: var(--end-accent, #88eeff);
    margin-bottom: 24px;
    box-shadow: 0 0 16px var(--end-accent, #88eeff);
    animation: decoGrow 0.5s 0.2s ease both;
}
@keyframes decoGrow {
    from { height: 0; opacity: 0; }
    to   { height: 60px; opacity: 1; }
}

#EndScreenEyebrow {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 6px;
    color: var(--end-accent, #88eeff);
    text-transform: uppercase;
    margin-bottom: 12px;
    opacity: 0.8;
}

#EndScreenTitle {
    font-size: 72px;
    font-weight: 900;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: white;
    line-height: 1;
    margin-bottom: 8px;
    text-shadow:
        0 0 40px var(--end-glow, rgba(136,238,255,0.5)),
        0 0 80px var(--end-glow, rgba(136,238,255,0.2)),
        0 2px 0 rgba(0,0,0,0.8);
}

/* Horizontal rule */
#EndScreenRule {
    width: 280px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--end-accent, #88eeff), transparent);
    margin: 20px 0;
    opacity: 0.5;
}

#EndScreenMessage {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #8899aa;
    letter-spacing: 2px;
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 360px;
}

#EndScreenBtn {
    position: relative;
    padding: 14px 48px;
    border: 1px solid var(--end-accent, #88eeff);
    border-radius: 0;
    background: transparent;
    color: var(--end-accent, #88eeff);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}
#EndScreenBtn::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--end-accent, #88eeff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
    z-index: -1;
}
#EndScreenBtn:hover {
    color: #000;
    text-shadow: none;
}
#EndScreenBtn:hover::before {
    transform: scaleX(1);
}

/* Corner decorations */
#EndScreenInner::before,
#EndScreenInner::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    border-color: var(--end-accent, #88eeff);
    border-style: solid;
    opacity: 0.4;
}
#EndScreenInner::before {
    top: -16px; left: -24px;
    border-width: 1px 0 0 1px;
}
#EndScreenInner::after {
    bottom: -16px; right: -24px;
    border-width: 0 1px 1px 0;
}

/* Win state */
#EndScreen.win {
    --end-accent: #ffcc44;
    --end-glow: rgba(255,204,68,0.4);
}
/* Loss state */
#EndScreen.loss {
    --end-accent: #ff4433;
    --end-glow: rgba(255,68,51,0.4);
}


/* ─── Sell button ────────────────────────────────────────────── */
.sell-btn {
    width: 100%; padding: 10px; border: none; border-radius: 6px;
    font-size: 13px; font-weight: bold; cursor: pointer;
    letter-spacing: 0.5px; transition: opacity 0.15s;
    background: linear-gradient(135deg, #cc3333, #aa2222);
    color: white; margin-top: 4px;
}
.sell-btn:hover { opacity: 0.85; }

/* ─── Settings overlay ───────────────────────────────────────── */
#SettingsOverlay {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.75);
    display: none; align-items: center; justify-content: center;
    z-index: 30; pointer-events: auto;
}
#SettingsOverlay.visible   { display: flex !important; }
#SettingsOverlay.invisible { display: none  !important; }

#SettingsPanel {
    background: rgba(14,18,30,0.98);
    border: 1px solid #334466;
    border-radius: 12px;
    padding: 32px;
    min-width: 320px;
    display: flex; flex-direction: column; gap: 20px;
    color: white;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
#SettingsPanel h2 {
    font-size: 20px; font-weight: bold;
    color: #aaddff; letter-spacing: 2px;
    text-align: center; margin-bottom: 4px;
}
.settings-row {
    display: flex; flex-direction: column; gap: 8px;
}
.settings-label {
    font-size: 13px; color: #8899aa;
    display: flex; justify-content: space-between;
}
.settings-label span { color: #ccddee; font-weight: bold; }
input[type="range"] {
    width: 100%; accent-color: #44aaff;
    height: 4px; cursor: pointer;
}
#SettingsClose {
    align-self: center;
    padding: 10px 32px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #3a6aaa, #2a5a99);
    color: white; font-size: 14px; font-weight: bold;
    cursor: pointer; letter-spacing: 1px; transition: opacity 0.15s;
}
#SettingsClose:hover { opacity: 0.85; }

/* ─── Settings toggle button ─────────────────────────────── */
.settings-toggle {
    align-self: flex-start;
    padding: 6px 20px;
    border: 1px solid #334466;
    border-radius: 4px;
    background: #1a2233;
    color: #667788;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 2px;
}
.settings-toggle.active {
    background: #1a3a55;
    border-color: #44aaff;
    color: #44aaff;
}
.settings-toggle:hover { opacity: 0.85; }
#LoginOverlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.88);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         9999;
}

#LoginPanel {
  background:    #13110d;
  border:        1px solid #4a3a22;
  padding:       2.5rem 2.75rem;
  width:         340px;
  display:       flex;
  flex-direction: column;
  gap:           1rem;
  box-shadow:    0 8px 60px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255,200,100,0.05);
}

.login-title {
  color:          #e8c87a;
  font-size:      1.3rem;
  font-weight:    bold;
  letter-spacing: 0.25em;
  text-align:     center;
}

.login-subtitle {
  color:       #6a5a40;
  font-size:   0.75rem;
  text-align:  center;
  margin-top: -0.5rem;
}

.login-tabs {
  display:       flex;
  border-bottom: 1px solid #3a2a18;
  margin-bottom: 0.25rem;
}

.login-tab {
  flex:           1;
  background:     none;
  border:         none;
  border-bottom:  2px solid transparent;
  color:          #6a5a40;
  padding:        0.5rem;
  cursor:         pointer;
  font-size:      0.75rem;
  letter-spacing: 0.12em;
  margin-bottom: -1px;
  transition:     color 0.15s, border-color 0.15s;
}

.login-tab.active {
  color:         #e8c87a;
  border-bottom: 2px solid #e8c87a;
}

.login-fields {
  display:        flex;
  flex-direction: column;
  gap:            0.65rem;
}

.login-fields input {
  background:  #0a0906;
  border:      1px solid #3a2a18;
  color:       #d4c4a0;
  padding:     0.6rem 0.75rem;
  font-size:   0.9rem;
  outline:     none;
  transition:  border-color 0.15s;
  width:       100%;
  box-sizing:  border-box;
}

.login-fields input:focus { border-color: #8a6a30; }

.login-error {
  color:       #d05050;
  font-size:   0.78rem;
  min-height:  1.1rem;
  text-align:  center;
}

.login-submit {
  background:     #3a2a18;
  border:         1px solid #6a4a20;
  color:          #e8c87a;
  padding:        0.7rem;
  cursor:         pointer;
  font-size:      0.82rem;
  letter-spacing: 0.18em;
  transition:     background 0.15s, border-color 0.15s;
  margin-top:     0.15rem;
}

.login-submit:hover:not(:disabled) {
  background:   #4a3a22;
  border-color: #9a7a30;
}

.login-submit:disabled { opacity: 0.45; cursor: default; }

.login-guest {
  background:     none;
  border:         none;
  color:          #4a3a28;
  font-size:      0.72rem;
  cursor:         pointer;
  text-align:     center;
  text-decoration: underline;
  padding:        0;
  transition:     color 0.15s;
}

.login-guest:hover { color: #7a6a48; }