/* ============================================================
   ui-v2.css — "THE INDEX" treatment (layers over styles.css + ui.css)
   ============================================================ */

/* ---------- HERO v2 — game title screen ---------- */
.v2hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 110px 0 64px; position: relative; }
.v2hero > .wrap { display: flex; flex-direction: column; flex: 1; justify-content: space-between; }

/* HUD corner brackets */
.hud-corner { position: absolute; width: 26px; height: 26px; border: 2px solid var(--accent); opacity: 0.7; z-index: 2; }
.hud-corner.tl { top: 90px; left: 22px; border-right: none; border-bottom: none; }
.hud-corner.tr { top: 90px; right: 22px; border-left: none; border-bottom: none; }
.hud-corner.bl { bottom: 28px; left: 22px; border-right: none; border-top: none; }
.hud-corner.br { bottom: 28px; right: 22px; border-left: none; border-top: none; }

.v2hero-top { display: flex; justify-content: space-between; align-items: center; }
.hud-tag { font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); display: inline-flex; align-items: center; gap: 9px; }
.hud-mark { font-size: 11px; }
.v2hero-loc { font-family: var(--ff-mono); font-size: 12px; color: var(--faint); letter-spacing: 0.08em; }

.v2hero-mid { display: flex; flex-direction: column; align-items: center; text-align: center; }
.v2hero-player { font-family: var(--ff-mono); font-size: clamp(11px, 1.4vw, 14px); letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; }
.v2hero-name { margin: clamp(10px, 2vh, 22px) 0; line-height: 0.86; }
.v2-name-main {
  font-family: var(--ff-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(54px, 12vw, 150px); letter-spacing: -0.02em;
  color: var(--text);
  text-shadow: 0 0 50px var(--accent-glow), 0 5px 0 oklch(0.22 0.02 264);
  position: relative;
}
/* subtle accent underglow stripe */
.v2hero-name::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  width: 64%; height: 4px; background: var(--accent); box-shadow: 0 0 22px var(--accent); opacity: 0.85;
}
.v2hero-rot { display: inline-flex; align-items: baseline; gap: 14px; font-family: var(--ff-mono); }
.v2rot-key { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.18em; }
.v2rot-word { font-family: var(--ff-display); font-weight: 700; font-size: clamp(20px, 2.6vw, 34px); color: var(--accent-text); letter-spacing: 0.02em; animation: rotword .45s cubic-bezier(.2,.8,.2,1); }
.v2rot-blink { color: var(--accent-text); font-weight: 700; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes rotword { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.v2hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.v2hero-tag { color: var(--muted); font-size: clamp(15px, 1.5vw, 18px); max-width: 40ch; margin: 0; line-height: 1.45; }
.v2hero-bottom .hero-cta { margin: 0; }
.btn-start { letter-spacing: 0.1em; font-weight: 700; }
.start-tri { animation: nudge 1.1s ease-in-out infinite; display: inline-block; }
@keyframes nudge { 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .v2rot-blink, .start-tri, .v2rot-word { animation: none; } }
@media (max-width: 880px) {
  .v2hero-bottom { flex-direction: column; align-items: flex-start; gap: 22px; }
}

/* hero contacts (email + linkedin grouped) */
.hud-contacts { display: inline-flex; align-items: center; gap: 11px; font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: 0.04em; }
.hud-contacts a { color: var(--muted); transition: color .18s; }
.hud-contacts a:hover { color: var(--accent-text); }
.hud-sep { color: var(--line); }

/* about, centered between name and view-work */
.v2hero-about {
  max-width: 62ch; margin: clamp(18px, 3vh, 34px) auto 0;
  color: var(--muted); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6;
  text-align: center; text-wrap: pretty;
}

/* captivating centered view-work */
.v2-viewwork {
  align-self: center; display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--muted); text-decoration: none; padding-top: 8px;
}
.vw-label { font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: 0.26em; text-transform: uppercase; transition: color .2s; }
.vw-arrow {
  width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--line);
  display: grid; place-items: center; font-size: 22px; color: var(--accent-text);
  animation: vwbob 1.7s ease-in-out infinite; transition: background .22s, color .22s, border-color .22s, transform .22s;
}
@keyframes vwbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.v2-viewwork:hover .vw-label { color: var(--accent-text); }
.v2-viewwork:hover .vw-arrow { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .vw-arrow { animation: none; } }

/* ============================================================
   SKILL BAR — theme-morphing "loadout" of scrolling skill tokens
   Base = arcade/HUD vibe; per-theme skins live in themes.css.
   ============================================================ */
.skillbar { position: relative; padding: 44px 0 0; border-top: 1px solid var(--line-soft); }
.skillbar-head { margin-bottom: 20px; }
.skillbar-stage {
  position: relative; overflow: hidden; padding: 26px 0;
  background:
    radial-gradient(120% 140% at 50% 50%, var(--accent-glow), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg));
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.skillbar-track {
  display: flex; align-items: center; width: max-content; gap: 16px;
  animation: skillscroll 52s linear infinite;
}
.skillbar-stage:hover .skillbar-track { animation-play-state: paused; }
@keyframes skillscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .skillbar-track { animation: none; } }

/* base token = neon HUD chip */
.skilltoken {
  display: inline-flex; align-items: center; gap: 11px; white-space: nowrap;
  padding: 13px 22px; border: 1px solid var(--accent);
  border-radius: 100px; background: var(--bg-1);
  box-shadow: 0 0 0 4px var(--bg), 0 10px 26px -14px var(--accent-glow);
  position: relative;
}
.skilltoken-mark {
  width: 12px; height: 12px; flex: none; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 12px; color: var(--accent-ink); line-height: 1;
}
.skilltoken-name {
  font-family: var(--ff-display); font-weight: 700; font-size: clamp(15px, 1.7vw, 20px);
  color: var(--text); letter-spacing: -0.01em;
}

/* ---------- DESIGN PROCESS (in expanded Level) ---------- */
.proc { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line-soft); }
.proc-head { font-family: var(--ff-mono); font-size: clamp(12px, 0.9vw, 15px); letter-spacing: 0.2em; color: var(--accent-text); display: flex; align-items: center; gap: 9px; }
.proc-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 26px 0 34px; }
.proc-q-label { display: block; font-family: var(--ff-mono); font-size: clamp(11px, 0.85vw, 14px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.proc-q p { margin: 0; color: var(--muted); font-size: clamp(16px, 1.1vw, 20px); line-height: 1.72; }
.proc-arts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.proc-art { margin: 0; }
.proc-art img { width: 100%; border-radius: 10px; border: 1px solid var(--line-soft); display: block; }
.proc-art-ph {
  aspect-ratio: 4/3; border: 1px dashed var(--line); border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; padding: 14px;
  background: repeating-linear-gradient(135deg, var(--bg-1) 0 10px, transparent 10px 20px);
}
.proc-art-ph span { font-family: var(--ff-display); font-weight: 700; font-size: 14px; color: var(--muted); }
.proc-art-ph em { font-family: var(--ff-mono); font-style: normal; font-size: 10.5px; color: var(--faint); }
.proc-art figcaption { font-family: var(--ff-mono); font-size: 11px; color: var(--faint); margin-top: 8px; letter-spacing: 0.04em; }
@media (max-width: 720px) { .proc-qa { grid-template-columns: 1fr; } .proc-arts { grid-template-columns: 1fr; } }

/* ---------- CONCEPT ART gallery ---------- */
.concept { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line-soft); }
.concept-group { margin-top: 26px; }
.concept-grouphead { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; display: flex; align-items: baseline; gap: 9px; }
.concept-grouphead span { color: var(--accent-text); }
.concept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; grid-auto-flow: dense; }
.concept-cell { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line-soft); background: var(--bg-2); }
.concept-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* wide/panoramic art: span the whole row, show the full image uncropped at a uniform height */
.concept-cell.wide { grid-column: 1 / -1; aspect-ratio: auto; height: 240px; background: var(--bg-1); }
.concept-cell.wide img { object-fit: contain; }
@media (max-width: 720px) {
  .concept-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .concept-cell.wide { height: 150px; }
}

/* admin modal divider */
.fld-divider { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); border-top: 1px solid var(--line-soft); padding-top: 16px; margin-top: 6px; }

/* ---------- MARQUEE ---------- */
.marquee { background: var(--accent); color: var(--accent-ink); overflow: hidden; padding: 16px 0; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); position: relative; z-index: 1; }
.marquee-track { display: flex; gap: 0; width: max-content; animation: scrollx 38s linear infinite; }
.marquee-item { font-family: var(--ff-display); font-weight: 800; font-size: clamp(20px, 2.6vw, 34px); letter-spacing: -0.01em; white-space: nowrap; display: inline-flex; align-items: center; padding: 0 28px; }
.marquee-star { margin-left: 38px; font-size: 0.6em; opacity: 0.7; }
@keyframes scrollx { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- INDEX ---------- */
.v2work { position: relative; overflow: hidden; }
.v2-count { font-family: var(--ff-mono); font-size: 13px; color: var(--faint); }
.v2index { border-top: 1px solid var(--line); }
.v2row { border-bottom: 1px solid var(--line-soft); --hue-col: oklch(0.86 0.17 var(--rh)); }
.v2row-head {
  width: 100%; background: none; border: none; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 26px;
  padding: clamp(20px, 3vw, 38px) 6px; text-align: left; transition: padding .3s cubic-bezier(.2,.7,.2,1);
}
.v2row-head:hover { padding-left: 26px; padding-right: 18px; }
.v2row-num { font-family: var(--ff-mono); font-size: 13px; color: var(--faint); }
.v2row-title {
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(24px, 4vw, 46px); line-height: 1.0; letter-spacing: -0.03em;
  color: var(--text); transition: color .25s ease;
}
.v2row-head:hover .v2row-title, .v2row.open .v2row-title { color: var(--hue-col); }
.v2row-meta { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); white-space: nowrap; }
.v2row-tag { font-family: var(--ff-mono); font-size: clamp(12.5px, 0.9vw, 15px); color: var(--muted); }
.v2row-year { font-family: var(--ff-mono); font-size: clamp(12.5px, 0.9vw, 15px); color: var(--faint); }
.v2row-arrow { font-family: var(--ff-display); font-weight: 700; font-size: 28px; color: var(--accent-text); width: 24px; text-align: center; line-height: 1; }
@media (max-width: 720px) {
  .v2row-head { grid-template-columns: auto 1fr; gap: 14px; }
  .v2row-meta { grid-column: 2; justify-content: flex-start; margin-top: 6px; }
}

.v2row-detail { overflow: hidden; }
.v2row-detail-in { display: grid; grid-template-columns: 380px 1fr; gap: 56px; padding: 16px 6px 60px; opacity: 0; transform: translateY(-10px); transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); }
.v2row.open .v2row-detail-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .v2row-detail-in { transition: none; } }
.v2row-cover { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); }
.v2row-period { font-family: var(--ff-mono); font-size: clamp(12.5px, 0.9vw, 15px); color: var(--hue-col); letter-spacing: 0.04em; }
.v2row-tagline { font-size: clamp(18px, 2vw, 23px); color: var(--text); margin: 14px 0 22px; line-height: 1.5; max-width: 46ch; }
.v2row-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; flex-wrap: wrap; }
.v2row-admin { display: flex; gap: 8px; margin-top: 18px; }
.v2row-admin button { font-family: var(--ff-mono); font-size: 12px; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); transition: all .15s; }
.v2row-admin button:hover { border-color: var(--accent); color: var(--accent-text); }
.v2row-admin button.danger:hover { border-color: oklch(0.65 0.2 25); color: oklch(0.75 0.2 25); }
@media (max-width: 720px) { .v2row-detail-in { grid-template-columns: 1fr; gap: 20px; } .v2row-cover { aspect-ratio: 16/9; } }

.v2-add { margin-top: 24px; }

/* cursor preview */
.v2preview {
  position: absolute; top: 0; left: 0; width: 280px; height: 200px; border-radius: 14px; overflow: hidden;
  pointer-events: none; z-index: 6; opacity: 0; transform-origin: top left;
  transition: opacity .25s ease, scale .25s cubic-bezier(.2,.8,.2,1);
  scale: 0.8; box-shadow: 0 30px 70px -24px oklch(0 0 0 / 0.8); border: 1px solid var(--line);
}
.v2preview.show { opacity: 1; scale: 1; }
@media (max-width: 880px), (hover: none) { .v2preview { display: none; } }

/* ---------- richer section rhythm to kill monotony ---------- */
.about { background:
  linear-gradient(180deg, transparent, oklch(0.185 0.014 264 / 0.6) 12%, oklch(0.185 0.014 264 / 0.6) 88%, transparent);
}
.v2-section-num { font-family: var(--ff-mono); font-size: 12px; color: var(--accent-text); }