/* =====================================================================
   KAVALONE — Dark Game Portal Design System
   Plain CSS, no build step. Drop this file in as-is and link it with
   <link rel="stylesheet" href="kavalone-tokens.css">
   ===================================================================== */

:root {
  /* backgrounds */
  --bg-void: #07070a;
  --bg-void-2: #050506;
  --panel-top: #1c1a22;
  --panel-bottom: #0c0b10;

  /* accent — periwinkle / pale blue glow */
  --periwinkle-deep: #5670c4;
  --periwinkle-glow: #93a9e8;
  --periwinkle-bright: #cfdaf7;
  --line-periwinkle: rgba(147, 169, 232, 0.35);
  --line-periwinkle-strong: rgba(147, 169, 232, 0.6);

  /* text */
  --text-hi: #f3f1f7;
  --text-mid: #b3aec2;
  --text-low: #6e6a7c;
  --text-faint: #726d80;

  /* gauges */
  --gauge-hp: #e05572;
  --gauge-mp: #6f8bdb;
  --gauge-san: #a988d9;

  /* dice tiers */
  --dice-crit: #a3e635;      /* 대성공 — saturated bright green */
  --dice-success: #93a9e8;
  --dice-fail: #8a8696;
  --dice-fumble: #e0546b;

  /* type */
  --font-display: 'Cinzel', serif;         /* logo / character names / big titles */
  --font-display-kr: 'Black Han Sans', sans-serif; /* korean display */
  --font-body: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;

  --radius-card: 6px;
}

/* ---------- base ---------- */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-void);
  color: var(--text-hi);
  font-family: var(--font-body);
}
* { box-sizing: border-box; }
a { color: var(--periwinkle-glow); text-decoration: none; }
a:hover { color: var(--periwinkle-bright); }
::selection { background: var(--line-periwinkle-strong); color: #fff; }

@font-face { /* example — swap for your actual self-hosted Pretendard if not using the CDN */
  font-family: 'Pretendard Variable';
  src: local('Pretendard Variable');
}

/* ---------- painterly dark background (no image assets) ---------- */
.kv-bg-painterly {
  position: relative;
  background:
    radial-gradient(ellipse 900px 600px at 78% 15%, rgba(147,169,232,.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 15% 85%, rgba(86,112,196,.14), transparent 60%),
    linear-gradient(160deg, #1a1820 0%, #0c0b10 45%, #050506 100%);
  overflow: hidden;
}
.kv-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  mix-blend-mode: overlay;
  opacity: .35;
  pointer-events: none;
}

/* ---------- cards / panels ---------- */
.kv-card {
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  border: 1px solid var(--line-periwinkle);
  border-radius: var(--radius-card);
}

/* corner bracket decoration — add 4 child spans with these classes */
.kv-bracket { position: relative; }
.kv-bracket-tl, .kv-bracket-tr, .kv-bracket-bl, .kv-bracket-br {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--periwinkle-glow);
  border-style: solid;
  border-width: 0;
}
.kv-bracket-tl { top: -1px; left: -1px;  border-top-width: 2px; border-left-width: 2px; }
.kv-bracket-tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.kv-bracket-bl { bottom: -1px; left: -1px;  border-bottom-width: 2px; border-left-width: 2px; }
.kv-bracket-br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

/* ---------- buttons ---------- */
.kv-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 12px 26px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
}
.kv-btn-primary {
  color: #0a0a0e;
  background: linear-gradient(180deg, #b7c5f2, #7690dd);
  box-shadow: 0 0 22px rgba(147,169,232,.45);
  transition: box-shadow .2s;
}
.kv-btn-primary:hover { box-shadow: 0 0 30px rgba(147,169,232,.7); }
.kv-btn-secondary {
  color: #dbe3f7;
  background: rgba(147,169,232,.08);
  border: 1px solid rgba(147,169,232,.45);
  transition: background .2s, border-color .2s;
}
.kv-btn-secondary:hover { background: rgba(147,169,232,.18); border-color: rgba(147,169,232,.8); }
.kv-btn-ghost {
  color: var(--text-low);
  background: transparent;
  transition: color .2s;
}
.kv-btn-ghost:hover { color: var(--text-hi); }

/* ---------- badges ---------- */
.kv-badge-new {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  color: #0a0a0e;
  background: linear-gradient(180deg, var(--periwinkle-bright), var(--periwinkle-glow));
  padding: 5px 12px 4px;
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(147,169,232,.5);
}
.kv-star { color: #e0c96b; font-size: 18px; }
.kv-star-off { color: #3d3a47; font-size: 18px; }

.kv-dice-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 3px;
  background: rgba(0,0,0,.4);
  border: 1px solid currentColor;
}
.kv-dice-badge.is-crit    { color: var(--dice-crit);    box-shadow: 0 0 10px rgba(163,230,53,.55); }
.kv-dice-badge.is-success { color: var(--dice-success); box-shadow: 0 0 10px rgba(147,169,232,.5); }
.kv-dice-badge.is-fail    { color: var(--dice-fail);    box-shadow: 0 0 10px rgba(138,134,150,.3); }
.kv-dice-badge.is-fumble  { color: var(--dice-fumble);  box-shadow: 0 0 10px rgba(224,84,107,.5); }

/* ---------- gauge bars (HP / MP / SAN) ---------- */
.kv-gauge-row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-mid); margin-bottom: 5px; font-weight: 600; }
.kv-gauge-track {
  height: 9px;
  border-radius: 5px;
  background: #151319;
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.kv-gauge-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gauge-color, var(--periwinkle-glow)) 60%, var(--gauge-color, var(--periwinkle-glow)));
  box-shadow: 0 0 8px var(--gauge-color, var(--periwinkle-glow));
}
.kv-gauge-fill.hp  { --gauge-color: var(--gauge-hp); }
.kv-gauge-fill.mp  { --gauge-color: var(--gauge-mp); }
.kv-gauge-fill.san { --gauge-color: var(--gauge-san); }

/* ---------- divider + ribbon ---------- */
.kv-divider { display: flex; align-items: center; gap: 10px; }
.kv-divider__line { flex: 1; height: 1px; background: rgba(147,169,232,.35); }
.kv-divider__diamond {
  width: 6px; height: 6px; background: var(--periwinkle-glow);
  transform: rotate(45deg); box-shadow: 0 0 8px var(--periwinkle-glow);
}
.kv-ribbon {
  display: inline-block;
  background: linear-gradient(90deg, var(--periwinkle-deep), var(--periwinkle-glow));
  color: #0a0a0e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 7px 16px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
}

/* ---------- chat bubbles ---------- */
.kv-chat-narration { font-size: 12.5px; color: var(--text-low); font-style: italic; line-height: 1.6; }
.kv-chat-narration b { color: var(--periwinkle-bright); font-style: normal; }
.kv-chat-bubble {
  display: inline-block;
  background: linear-gradient(180deg, #211f28, #151319);
  border: 1px solid rgba(147,169,232,.25);
  border-radius: 3px 12px 12px 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-hi);
}

/* ---------- sticker (no frame — per direct request) ---------- */
.kv-sticker {
  position: relative;
  border-radius: 2px;
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
}
.kv-sticker__delete {
  position: absolute; top: -9px; right: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #151319; border: 1px solid rgba(147,169,232,.4);
  display: flex; align-items: center; justify-content: center;
  color: var(--periwinkle-glow); cursor: pointer;
}

/* ---------- tile nav menu ---------- */
.kv-tile-nav {
  position: relative;
  display: block;
  width: 190px;
  height: 250px;
  text-decoration: none;
  background: linear-gradient(165deg, #211f29, #0a090d 75%);
  border: 1px solid rgba(147,169,232,.22);
  border-radius: 3px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.kv-tile-nav:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,.5), 0 0 30px rgba(147,169,232,.25);
  border-color: rgba(147,169,232,.6);
}
.kv-tile-nav__num { position: absolute; top: 14px; right: 16px; font-size: 10px; color: var(--text-faint); font-family: ui-monospace, monospace; }
.kv-tile-nav__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--periwinkle-glow); filter: drop-shadow(0 0 16px rgba(147,169,232,.6)); }
.kv-tile-nav__label { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-hi); letter-spacing: .06em; }

/* ---------- login box ---------- */
.kv-login-box {
  width: 360px;
  background: rgba(12,11,16,.72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(147,169,232,.28);
  border-radius: 8px;
  padding: 26px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.kv-input {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(147,169,232,.2);
  border-radius: 4px;
  padding: 11px 13px;
  color: var(--text-hi);
  font-size: 13px;
  font-family: inherit;
  margin-bottom: 10px;
}
.kv-input::placeholder { color: #5c5868; }

/* ---------- calendar ---------- */
.kv-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: 10.5px; text-align: center; }
.kv-calendar__cell { padding: 4px 0; border-radius: 3px; }
.kv-calendar__cell.is-today { background: var(--periwinkle-glow); color: #0a0a0e; font-weight: 800; }
.kv-calendar__cell.is-sun { color: #e0708a; }
.kv-calendar__cell.is-sat { color: #7fa0e0; }
.kv-calendar__cell.is-muted { opacity: .35; }

/* ---------- profile poster ---------- */
.kv-poster { position: relative; background: linear-gradient(155deg, #1c1a22, #0a090d 70%); border: 1px solid rgba(147,169,232,.22); border-radius: 4px; box-shadow: 0 30px 70px rgba(0,0,0,.55); }
.kv-poster__field { border-left: 2px solid rgba(147,169,232,.35); padding-left: 12px; }
.kv-poster__field-label { font-size: 10.5px; letter-spacing: .12em; color: var(--periwinkle-glow); font-weight: 600; margin-bottom: 4px; }

/* ---------- session header ---------- */
.kv-session-header { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid rgba(147,169,232,.25); box-shadow: 0 24px 50px rgba(0,0,0,.5); }
.kv-session-header__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,5,8,.96) 8%, rgba(6,5,8,.35) 55%, rgba(6,5,8,.55) 100%); pointer-events: none; }