/* ============================================================================
   ChaiCode Keyboard Kombat — Windows XP "Luna" themed stylesheet
   ========================================================================== */

:root {
  --luna-blue: #0055ea;
  --luna-blue-2: #2f8bff;
  --luna-blue-dark: #003bb3;
  --xp-green: #74b74a;
  --xp-green-2: #4e9a2a;
  --chai-orange: #ff7a1a;
  --chai-orange-2: #ff9a3d;
  --panel: #ece9d8;          /* classic XP dialog beige */
  --panel-line: #aca899;
  --ink: #1c2733;
  --btn-face: linear-gradient(#fefefe, #dfe8f6 45%, #cddaf0 55%, #eaf1fb);
  --font: 'Trebuchet MS', Tahoma, 'Segoe UI', system-ui, sans-serif;
  --mono: 'Consolas', 'DejaVu Sans Mono', 'Menlo', monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  /* XP Bliss-ish desktop */
  background:
    radial-gradient(120% 80% at 50% 120%, #3a7d1e 0%, #2c6b18 40%, transparent 70%),
    linear-gradient(#3aa0e6 0%, #63b8f0 30%, #8fd0f6 55%, #bfe3a6 72%, #6fb23e 100%);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

#desktop {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2vmin;
}

/* ---------- The application window ---------- */
#xp-window {
  width: min(1120px, 97vw);
  height: min(780px, 96vh);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--luna-blue-dark);
  border-top: none;
  border-radius: 9px 9px 4px 4px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.3);
  background: var(--panel);
}

/* ---------- Title bar ---------- */
#titlebar {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 0 8px;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
  background: linear-gradient(#0e6bff 0%, #0a5cf0 8%, #0b53d6 40%, #0a4ec8 88%, #0846b6 100%);
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.tb-left { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.tb-icon { font-size: 15px; }
.tb-buttons { display: flex; gap: 3px; }
.tb-btn {
  width: 22px; height: 21px; border: 1px solid rgba(255,255,255,0.7);
  border-radius: 3px; color: #fff; font-size: 11px; cursor: default;
  background: linear-gradient(#5b9bff, #1f6bec);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.tb-btn.close { background: linear-gradient(#f28e73, #d43b1e); }

/* ---------- Stage area / screen stack ---------- */
#stage-area { position: relative; flex: 1; overflow: hidden; background: #cfe8ff; }
.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
}
.screen.active { display: flex; }

/* ---------- XP buttons ---------- */
.xp-btn {
  font-family: var(--font);
  font-size: 14px; font-weight: bold;
  color: #17324e;
  padding: 7px 16px;
  border: 1px solid #2c5aa0;
  border-radius: 5px;
  background: var(--btn-face);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: filter .08s, transform .05s;
}
.xp-btn:hover { filter: brightness(1.06); }
.xp-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }
.xp-btn.big { font-size: 17px; padding: 11px 26px; }
.xp-btn.go {
  color: #fff; border-color: #b34e00;
  background: linear-gradient(#ffb15e, #ff8a1e 50%, #f06f00 52%, #ff9a3d);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.35);
}

/* ---------- XP panel ---------- */
.xp-panel {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #fff, 0 8px 24px rgba(0,0,0,0.35);
}

/* ============================ HOME ============================ */
#screen-home {
  align-items: center; justify-content: center;
  padding: 26px 14px 44px;
  background:
    radial-gradient(130% 90% at 50% 115%, #3f8a22 0%, transparent 62%),
    linear-gradient(#3aa0e6, #7cc3f2 55%, #a9d98b 78%, #5fa733);
  text-align: center;
}
.home-hero { position: relative; z-index: 2; padding: 0; max-height: 100%; }
.home-badge {
  display: inline-block; background: rgba(255,255,255,0.85);
  border: 1px solid #fff; border-radius: 20px; padding: 3px 14px;
  font-size: 13px; color: #2c4a66; margin-bottom: 6px;
}
.home-badge b { color: var(--chai-orange); }
.game-title { margin: 2px 0; line-height: 0; }
.title-logo {
  width: min(480px, 72vw); height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
}
/* fallback if the logo image is unavailable */
.game-title:not(:has(img)) {
  font-size: clamp(38px, 8vw, 82px); line-height: 0.9; color: #fff;
  text-shadow: 0 3px 0 #c1121f, 0 6px 0 #7a0b12, 0 10px 22px rgba(0,0,0,0.5);
}
.home-tag { color: #eaf6ff; font-size: 15px; margin: 4px 0 16px; text-shadow: 1px 1px 2px rgba(0,0,0,0.4); }
.home-buttons {
  display: flex; flex-direction: column; gap: 11px; align-items: center;
  width: min(330px, 82vw); margin: 0 auto;
}
.home-buttons .xp-btn.big { width: 100%; }        /* uniform-width mode buttons */
.home-util { display: flex; gap: 8px; justify-content: center; margin-top: 3px; }
.home-buttons .how-btn {                            /* utility action: subtler */
  width: auto; font-size: 13px; padding: 6px 14px; opacity: 0.94;
}

/* matched stat pills, centered as a pair */
.home-stats { display: flex; gap: 10px; justify-content: center; align-items: stretch; margin-top: 16px; flex-wrap: wrap; }
.stat-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.75); color: #26435c;
  padding: 6px 14px; border-radius: 14px; font-size: 13px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.stat-pill.hidden { display: none; }
.stat-pill label { color: #5a6a78; letter-spacing: 0.3px; }
.stat-pill b { font-size: 15px; }
#home-best b { color: #b34e00; }
#home-online b { color: #1a7a2a; }
.online-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #2ecc40; flex: none;
  box-shadow: 0 0 0 0 rgba(46,204,64,0.6); animation: onlinePulse 1.8s infinite;
}
@keyframes onlinePulse {
  0% { box-shadow: 0 0 0 0 rgba(46,204,64,0.55); }
  70% { box-shadow: 0 0 0 7px rgba(46,204,64,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,204,64,0); }
}
.brand-footer {
  position: absolute; bottom: 10px; left: 0; right: 0;
  font-size: 12px; color: #14324a; text-align: center;
}
.brand-footer b { color: #7a3d00; }

/* modal */
.modal { position: absolute; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 10; }
.modal.hidden { display: none; }
.modal-card { max-width: 520px; padding: 20px 24px; }
.modal-card h2 { margin: 0 0 10px; color: var(--luna-blue-dark); }
.modal-card ul { text-align: left; line-height: 1.5; font-size: 14px; margin: 0 0 16px; padding-left: 18px; }

/* ============================ SELECT ============================ */
#screen-select {
  background: linear-gradient(#12467e, #0a2c50);
  color: #eaf3ff; padding: 14px 20px; gap: 10px;
}
.select-head { display: flex; align-items: baseline; justify-content: space-between; }
#select-title { margin: 0; color: #fff; font-size: 24px; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
.select-brand { font-size: 13px; color: #bcd8f5; }
.select-brand b { color: var(--chai-orange-2); }
.select-cols { display: flex; gap: 18px; flex: 1; min-height: 0; }
.select-col { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.select-col.narrow { flex: 0 0 260px; }
.select-col h3 { margin: 4px 0 8px; font-size: 14px; color: #ffd9a0; letter-spacing: 1px; text-transform: uppercase; }

.fighter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fighter-card {
  background: linear-gradient(#1b4f86, #123a63);
  border: 2px solid #2f6aa8; border-radius: 8px;
  padding: 8px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform .08s, border-color .1s, box-shadow .1s;
}
.fighter-card:hover { transform: translateY(-2px); }
.fighter-card.sel { border-color: var(--chai-orange); box-shadow: 0 0 0 2px var(--chai-orange), 0 6px 16px rgba(0,0,0,0.4); }
.fighter-card .fc-art { display: flex; align-items: center; justify-content: center; }
.fighter-card .fc-portrait {
  width: auto; height: 150px; max-width: 100%;
  border-radius: 6px; display: block;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.fighter-card.sel .fc-portrait { box-shadow: 0 0 0 2px var(--chai-orange), 0 6px 16px rgba(0,0,0,0.5); }
.fighter-card .fc-canvas { width: 90px; height: 110px; }
.fighter-card .fc-name { font-weight: bold; color: #fff; font-size: 15px; }
.fighter-card .fc-title { font-size: 11px; color: #bcd8f5; }
.fighter-blurb { margin-top: 10px; font-size: 13px; color: #cfe4ff; min-height: 34px; font-style: italic; }

.pack-list, .stage-list { display: flex; flex-direction: column; gap: 8px; }
.pack-item, .stage-item {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(#1b4f86, #123a63);
  border: 2px solid #2f6aa8; border-radius: 6px; padding: 8px 10px; cursor: pointer;
}
.pack-item.sel, .stage-item.sel { border-color: var(--chai-orange); box-shadow: 0 0 0 1px var(--chai-orange); }
.pack-item .pi-icon { font-size: 20px; }
.pack-item .pi-name { font-weight: bold; color: #fff; font-size: 14px; }
.pack-item .pi-desc { font-size: 11px; color: #bcd8f5; }
.stage-item { padding: 6px 10px; }
.stage-swatch { width: 26px; height: 18px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.5); }
.stage-item .si-name { color: #fff; font-size: 13px; }
#stage-block { margin-top: 14px; }
#stage-block.hidden { display: none; }

.select-foot { display: flex; justify-content: space-between; align-items: center; }
.foot-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* invite (share link) box on the matchmaking screen */
.invite-box { margin: 4px 0 16px; }
.invite-box.hidden { display: none; }
.invite-label { font-size: 13px; color: #2c4a66; margin-bottom: 6px; }
.invite-row { display: flex; gap: 8px; align-items: center; }
.invite-link {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px;
  padding: 8px 10px; border: 1px solid var(--panel-line); border-radius: 5px;
  background: #fff; color: #1c2733;
}
.invite-copied { font-size: 12px; color: var(--xp-green-2); font-weight: bold; margin-top: 6px; min-height: 16px; }

/* ============================ FIGHT ============================ */
#screen-fight { background: #000; }

#fight-hud {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px;
  padding: 8px 12px; align-items: center;
  background: linear-gradient(#0a3f8f, #072a63);
  border-bottom: 2px solid #04204d;
  color: #fff;
}
.hud-names { display: flex; align-items: baseline; gap: 8px; }
.hud-names.right { justify-content: flex-end; }
.hud-name { font-weight: bold; font-size: 16px; text-shadow: 1px 1px 2px rgba(0,0,0,0.6); }
.hud-sub { font-size: 12px; color: #bcd8f5; }
.hp-track {
  height: 20px; margin-top: 4px; border-radius: 4px; overflow: hidden;
  background: #10233f; border: 1px solid #04204d;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.hp-fill {
  height: 100%; width: 100%;
  background: linear-gradient(#c8ff7a, #74b74a 45%, #4e9a2a 55%, #3a7d1e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  transition: width .18s ease-out;
}
.hp-fill.enemy { background: linear-gradient(#ffd0d0, #ff6b6b 45%, #e63030 55%, #b31414); }
.hp-fill.low { animation: hpflash .5s infinite alternate; }
@keyframes hpflash { from { filter: brightness(1); } to { filter: brightness(1.5); } }
.p2 .hp-track { direction: rtl; }

.pips { display: flex; gap: 5px; margin-top: 5px; }
.pips.right { justify-content: flex-end; }
.pip { width: 12px; height: 12px; border-radius: 50%; background: #10233f; border: 1px solid #6f97d6; }
.pip.on { background: radial-gradient(circle at 35% 30%, #fff2a0, var(--chai-orange)); box-shadow: 0 0 6px var(--chai-orange); }

.hud-center { text-align: center; }
.round-title { font-size: 12px; color: #ffd9a0; white-space: nowrap; }
.vs { font-weight: bold; font-size: 20px; color: #fff; text-shadow: 0 0 8px #ff7a1a; font-style: italic; }

#canvas-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#fight-canvas { display: block; width: 100%; height: 100%; }

.pause-btn {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  width: 34px; height: 30px; border-radius: 5px; cursor: pointer;
  border: 1px solid #2c5aa0; background: var(--btn-face); font-size: 14px;
}

/* Banner (ROUND / FIGHT / KO / SPECIAL) */
.banner {
  position: absolute; top: 34%; left: 0; right: 0; text-align: center;
  font-size: clamp(40px, 9vw, 96px); font-weight: 900; font-style: italic;
  color: #fff; pointer-events: none; opacity: 0; transform: scale(0.6);
  text-shadow: 0 4px 0 #b31414, 0 0 26px rgba(255,120,26,0.9);
  transition: none;
}
.banner.show { animation: bannerPop .4s ease-out forwards; }
.banner.fight { color: var(--chai-orange); }
.banner.special { color: #ffe14a; text-shadow: 0 0 26px #ffcf00, 0 4px 0 #b36b00; }
.banner.ko { color: #ff4a4a; font-size: clamp(56px, 13vw, 140px); }
@keyframes bannerPop {
  0% { opacity: 0; transform: scale(1.8); }
  25% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}

/* Typing panel */
#type-panel {
  background: linear-gradient(#ece9d8, #ded9c3);
  border-top: 2px solid #fff; padding: 8px 16px 10px;
}
.type-stats { display: flex; gap: 16px; justify-content: center; margin-bottom: 6px; }
.type-stats .stat { display: flex; flex-direction: column; align-items: center; min-width: 54px; }
.type-stats .stat span { font-size: 20px; font-weight: bold; color: var(--luna-blue-dark); line-height: 1; }
.type-stats .stat label { font-size: 10px; color: #6a6a5a; letter-spacing: 1px; }
.type-stats .stat.opp span { color: #b31414; }

.special-wrap { max-width: 620px; margin: 0 auto 8px; }
.special-track {
  height: 12px; border-radius: 6px; background: #b8b39a;
  border: 1px solid #8a8570; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.35);
}
.special-fill {
  height: 100%; width: 0%;
  background: linear-gradient(#ffe14a, #ff9a1e);
  transition: width .12s;
}
.special-fill.ready { animation: specGlow .4s infinite alternate; }
@keyframes specGlow { from { box-shadow: 0 0 4px #ffcf00; } to { box-shadow: 0 0 16px #ff7a1a; } }
.special-label { text-align: center; font-size: 11px; font-weight: bold; color: #8a5a00; margin-top: 2px; letter-spacing: 1px; }

.type-line {
  max-width: 760px; margin: 0 auto; text-align: center;
  font-family: var(--mono); font-size: clamp(20px, 3.2vw, 30px);
  letter-spacing: 1px; line-height: 1.5; min-height: 1.6em;
  background: #fff; border: 1px solid var(--panel-line); border-radius: 6px;
  padding: 10px 14px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.12);
  outline: none; word-break: break-word;
}
.td-done { color: var(--xp-green-2); font-weight: bold; }
.td-cur {
  background: var(--chai-orange); color: #fff; border-radius: 3px;
  padding: 0 1px; box-shadow: 0 0 0 2px rgba(255,122,26,0.4);
  animation: caretBlink .9s steps(1) infinite;
}
@keyframes caretBlink { 50% { background: #ffb15e; } }
.td-rest { color: #8a8a7a; }
.type-hint { text-align: center; font-size: 11px; color: #7a7666; margin-top: 5px; }

/* ============================ RESULT ============================ */
#screen-result {
  align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 20%, #1b5fae, #082343 70%);
}
.result-card { padding: 22px 34px; text-align: center; max-width: 560px; width: 92%; }
.result-brand { font-size: 13px; color: var(--chai-orange); font-weight: bold; letter-spacing: 1px; }
.result-title {
  margin: 6px 0 2px; font-size: 52px; font-style: italic; font-weight: 900;
  color: var(--xp-green-2); text-shadow: 0 3px 0 #2a5a12;
}
.result-title.lose { color: #c1121f; text-shadow: 0 3px 0 #6a0a10; }
.result-sub { margin: 0 0 16px; color: #4a4a3a; font-size: 15px; }
.result-stats { display: flex; gap: 18px; justify-content: center; margin: 8px 0 14px; flex-wrap: wrap; }
.rstat { display: flex; flex-direction: column; min-width: 84px; background: #fff; border: 1px solid var(--panel-line); border-radius: 8px; padding: 10px; box-shadow: inset 0 1px 0 #fff; }
.rstat span { font-size: 26px; font-weight: bold; color: var(--luna-blue-dark); }
.rstat label { font-size: 10px; color: #6a6a5a; letter-spacing: 1px; }
.res-best { min-height: 22px; color: var(--chai-orange); font-weight: bold; margin-bottom: 12px; }
.result-buttons { display: flex; gap: 12px; justify-content: center; }
.result-foot { margin-top: 14px; font-size: 12px; color: #6a6a5a; }
.result-foot b { color: #7a3d00; }

/* ============================ SIGN IN / MATCHMAKING ============================ */
#screen-signin, #screen-matching {
  align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 15%, #1b5fae, #082343 72%);
}
.signin-card, .matching-card {
  padding: 26px 34px; text-align: center; max-width: 520px; width: 92%;
}
.signin-title, .matching-title { margin: 8px 0 4px; font-size: 30px; color: var(--luna-blue-dark); }
.signin-sub, .matching-sub { margin: 0 0 18px; color: #4a4a3a; font-size: 15px; }
.signin-buttons { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-bottom: 18px; }
.signin-buttons .xp-btn { width: 260px; }
.signin-note { margin-top: 16px; font-size: 12px; color: #6a6a5a; }
.matching-you { margin: 6px 0 16px; font-size: 14px; color: #2c4a66; }
.matching-you b { color: var(--chai-orange); }
.spinner {
  width: 54px; height: 54px; margin: 6px auto 14px; border-radius: 50%;
  border: 6px solid #cdd7e6; border-top-color: var(--chai-orange);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.signed-in-chip {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #14324a; background: rgba(255,255,255,0.82);
  padding: 3px 6px 3px 12px; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.signed-in-chip .si-name { font-weight: bold; color: #7a3d00; }
.chip-btn {
  font-family: var(--font); font-size: 11px; cursor: pointer;
  border: 1px solid #a9a48f; background: linear-gradient(#fff, #e6e1d0);
  border-radius: 10px; padding: 2px 8px; color: #333;
}
.chip-btn:hover { filter: brightness(1.05); }

/* username modal */
.uname-input {
  width: 100%; font-family: var(--font); font-size: 18px; text-align: center;
  padding: 10px 12px; margin: 6px 0 4px; border: 1px solid var(--panel-line);
  border-radius: 6px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.12); outline: none;
}
.uname-input:focus { border-color: var(--chai-orange); box-shadow: inset 0 2px 4px rgba(0,0,0,0.12), 0 0 0 2px rgba(255,122,26,0.35); }
.uname-preview { font-size: 14px; color: #2c4a66; min-height: 20px; margin-bottom: 4px; }
.uname-preview b { color: var(--chai-orange); font-family: var(--mono); }
.uname-error { font-size: 13px; color: #c1121f; min-height: 18px; margin-bottom: 8px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }

/* ============================ STATUS BAR ============================ */
#statusbar {
  height: 24px; display: flex; align-items: center; gap: 2px;
  background: linear-gradient(#f2f0e6, #dcd7c4);
  border-top: 1px solid #fff; padding: 0 6px; font-size: 12px; color: #333;
}
.sb-cell { padding: 0 8px; border-right: 1px solid #bdb8a5; height: 16px; display: flex; align-items: center; }
.sb-cell.grow { flex: 1; border: none; }
.sb-cell.brand { border: none; }
.sb-cell.brand b { color: var(--chai-orange); }
.sb-toggle {
  font-family: var(--font); font-size: 11px; cursor: pointer; height: 18px;
  border: 1px solid #a9a48f; background: linear-gradient(#fff, #e6e1d0); border-radius: 3px; margin-right: 4px;
}
.sb-toggle.off { opacity: 0.5; text-decoration: line-through; }

/* utility */
.hidden { display: none !important; }

/* Small screens: stack select columns */
@media (max-width: 720px) {
  .select-cols { flex-direction: column; }
  .select-col.narrow { flex: 0 0 auto; }
  .fighter-card .fc-portrait { height: 116px; }
  .fighter-card .fc-canvas { width: 70px; height: 88px; }
  .type-stats { gap: 10px; }
}