/* Desktop-launcher style shell for /play + home hero strip */

.launcher-shell {
  --ln-bg: #0a0806;
  --ln-panel: rgba(18, 14, 10, 0.88);
  --ln-edge: rgba(240, 210, 122, 0.45);
  --ln-gold: #f0d27a;
  --ln-gold2: #d9b54a;
  --ln-muted: #a89880;
  --ln-green: #4ecf7a;
  --ln-blue: #5aa8ff;
  /* Match .portal-stack / home column width for vertical symmetry */
  max-width: 1200px;
  margin: 18px auto 0;
  padding: 0 14px;
  box-sizing: border-box;
}

.launcher-window {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--ln-edge);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.65),
    0 22px 60px rgba(0,0,0,.72),
    0 0 40px rgba(217,181,74,.12);
  background: #100c08;
}

.launcher-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #3a2c1a 0%, #1c140d 100%);
  border-bottom: 1px solid rgba(240,210,122,.35);
}
.launcher-titlebar .dots { display:flex; gap:6px; }
.launcher-titlebar .dots i {
  width: 11px; height: 11px; border-radius: 50%;
  display:block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.launcher-titlebar .dots i:nth-child(1) { background:#e2554a; }
.launcher-titlebar .dots i:nth-child(2) { background:#e6b84a; }
.launcher-titlebar .dots i:nth-child(3) { background:#4ecf7a; }
.launcher-titlebar .title {
  font-family: Cinzel, Philosopher, serif;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ln-gold);
  font-size: 13px;
  flex: 1;
}
.launcher-titlebar .ver {
  font-size: 11px;
  color: var(--ln-muted);
  letter-spacing: .6px;
}

.launcher-hero {
  position: relative;
  min-height: 280px;
  background:
    linear-gradient(90deg, rgba(8,6,4,.92) 0%, rgba(8,6,4,.55) 42%, rgba(8,6,4,.25) 100%),
    url("/img/launcher/splash.jpg") center / cover no-repeat;
}
.launcher-hero-inner {
  position: relative;
  z-index: 1;
  padding: 28px 28px 18px;
  max-width: 56%;
}
.launcher-hero .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ln-gold);
  border: 1px solid rgba(240,210,122,.35);
  background: rgba(0,0,0,.35);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.launcher-hero .badge .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ln-green);
  box-shadow: 0 0 10px var(--ln-green);
  animation: ln-pulse 1.6s infinite;
}
@keyframes ln-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.85); }
}
.launcher-hero h1 {
  margin: 0 0 8px;
  font-family: Cinzel, Philosopher, serif;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  color: #fff6d8;
  text-shadow: 0 2px 18px rgba(0,0,0,.8), 0 0 24px rgba(217,181,74,.25);
}
.launcher-hero p {
  margin: 0;
  color: #e8dcc4;
  text-shadow: 0 1px 6px #000;
  font-size: 14px;
  line-height: 1.55;
}

.launcher-body {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 0;
  background: linear-gradient(180deg, #15100b 0%, #0d0a07 100%);
}
@media (max-width: 860px) {
  .launcher-body { grid-template-columns: 1fr; }
  .launcher-hero-inner { max-width: 100%; }
}

.launcher-main {
  padding: 20px 22px 22px;
  border-right: 1px solid rgba(240,210,122,.15);
}
.launcher-side {
  padding: 20px 18px 22px;
  background: rgba(0,0,0,.22);
}

.ln-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ln-gold2);
  margin: 0 0 10px;
  font-weight: 700;
}

/* Progress bars */
.ln-bars { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.ln-bar-row { display: grid; grid-template-columns: 88px 1fr 48px; gap: 10px; align-items: center; }
.ln-bar-row .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--ln-muted);
  font-weight: 700;
}
.ln-bar-track {
  position: relative;
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(180deg, #1a140e, #0c0906);
  border: 1px solid rgba(240,210,122,.22);
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.65);
}
.ln-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  border-radius: 7px;
  background: linear-gradient(90deg, #8a6420 0%, #d9b54a 40%, #f5e3a0 70%, #d9b54a 100%);
  box-shadow: 0 0 12px rgba(240,210,122,.55), inset 0 1px 0 rgba(255,255,255,.35);
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.ln-bar-fill.green {
  background: linear-gradient(90deg, #1f6b3a 0%, #3dcf72 45%, #9af0b8 100%);
  box-shadow: 0 0 12px rgba(78,207,122,.45);
}
.ln-bar-fill.blue {
  background: linear-gradient(90deg, #1e4d8a 0%, #4a9dff 50%, #b6d8ff 100%);
  box-shadow: 0 0 12px rgba(90,168,255,.4);
}
.ln-bar-fill.shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: ln-shine 1.8s linear infinite;
}
@keyframes ln-shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.ln-bar-row .pct {
  font-size: 12px;
  font-weight: 800;
  color: var(--ln-gold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ln-status-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 22px;
  margin: 4px 0 16px;
  font-size: 13px;
  color: #e6d9c0;
}
.ln-status-line .spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(240,210,122,.25);
  border-top-color: var(--ln-gold);
  border-radius: 50%;
  animation: ln-spin .7s linear infinite;
  flex-shrink: 0;
}
.ln-status-line.ok .spinner { display: none; }
@keyframes ln-spin { to { transform: rotate(360deg); } }

.ln-actions {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
}
@media (max-width: 560px) {
  .ln-actions { grid-template-columns: 1fr; }
  .ln-bar-row { grid-template-columns: 70px 1fr 42px; }
}

.btn-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: Cinzel, Philosopher, serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #2a1d07;
  background:
    linear-gradient(180deg, #ffe9a8 0%, #f0d27a 28%, #d9b54a 62%, #a67f28 100%);
  box-shadow:
    0 8px 28px rgba(217,181,74,.4),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -3px 8px rgba(100,70,10,.35);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-launch:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 0 36px rgba(240,210,122,.55), 0 10px 28px rgba(0,0,0,.4);
}
.btn-launch:active { transform: translateY(0); filter: brightness(.96); }
.btn-launch:disabled {
  opacity: .7;
  cursor: wait;
  filter: saturate(.7);
}
.btn-launch .ico {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(42,29,7,.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 14px;
  border-radius: 10px;
  border: 1px solid rgba(240,210,122,.35);
  background: linear-gradient(180deg, rgba(50,40,28,.9), rgba(20,15,10,.95));
  color: var(--ln-gold);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
  text-decoration: none;
  transition: .15s ease;
}
.btn-secondary:hover {
  border-color: var(--ln-gold);
  color: #fff2c4;
  box-shadow: 0 0 18px rgba(217,181,74,.25);
}

.ln-crest {
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 2px solid rgba(240,210,122,.45);
  box-shadow: 0 0 24px rgba(217,181,74,.3), inset 0 0 20px rgba(0,0,0,.5);
  background: url("/img/launcher/crest.jpg") center / cover no-repeat;
}
.ln-side-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(240,210,122,.14);
  border-radius: 10px;
  padding: 12px 12px;
  margin-bottom: 10px;
}
.ln-side-card h3 {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--ln-gold);
  font-family: Cinzel, serif;
  letter-spacing: .6px;
}
.ln-side-card p {
  margin: 0;
  font-size: 12px;
  color: var(--ln-muted);
  line-height: 1.45;
}
.ln-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.ln-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(240,210,122,.12);
  font-size: 12px;
  color: #d8ccb6;
}
.ln-steps li:last-child { border-bottom: 0; }
.ln-steps li::before {
  content: counter(step);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  color: #2a1d07;
  background: linear-gradient(180deg, #f0d27a, #b8923a);
  box-shadow: 0 0 10px rgba(217,181,74,.35);
}

/* Home page launcher strip — never pull next sections under this box */
.home-launcher-strip {
  margin: 20px auto 0;
  max-width: 1200px;
  position: relative;
  z-index: 1;
  isolation: isolate;
}
.home-launcher-strip .launcher-window {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.home-launcher-strip .launcher-hero { min-height: 220px; }
.home-launcher-strip .launcher-main { padding-bottom: 20px; }

/* Metrics inside launcher must not use portal hero-metrics min-heights that inflate
   the shell into the next band */
.home-launcher-strip .hero-metrics,
.launcher-main .hero-metrics {
  width: 100%;
  margin: 16px 0 0;
  gap: 8px;
}
.home-launcher-strip .hero-metrics div,
.launcher-main .hero-metrics div {
  min-height: 58px;
  padding: 8px 6px;
}
.home-launcher-strip .hero-metrics b,
.launcher-main .hero-metrics b {
  font-size: 22px;
}

/* floating particles (playful) */
.launcher-particles {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.launcher-particles span {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(240,210,122,.7);
  box-shadow: 0 0 8px rgba(240,210,122,.8);
  animation: ln-float linear infinite;
  opacity: .0;
}
@keyframes ln-float {
  0% { transform: translateY(20px); opacity: 0; }
  15% { opacity: .8; }
  100% { transform: translateY(-120px); opacity: 0; }
}

/* ==========================================================================
   /play — one card, three states  (2026-08-02 redesign)
   The old page simulated a desktop launcher window: four "system check" bars that
   measured nothing, a sidebar, a step list. That is scaffolding, not information.
   This version shows exactly the state the player is in, and makes the card's own
   frame the progress meter — the gold hairline + corner brackets are the game's own
   window vocabulary, so the page reads as part of Knight Online rather than a portal
   pretending to be one. All classes are .pl-* so nothing here can collide with the
   .launcher-* rules the old markup and /downloads still use.
   ========================================================================== */

.pl-stage{
  min-height:calc(100vh - 190px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:56px 20px 72px;
}

.pl-card{
  --p:0;                                   /* 0-100, drives the frame fill */
  position:relative; width:100%; max-width:560px;
  padding:44px 44px 34px; border-radius:4px; text-align:center;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(217,181,74,.07), transparent 62%),
    linear-gradient(180deg, var(--panel2,#2a2118), var(--panel,#221b13));
  box-shadow:var(--shadow-deep,0 14px 34px rgba(0,0,0,.6));
}
/* resting hairline */
.pl-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(180deg, rgba(217,181,74,.55), rgba(217,181,74,.16));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; pointer-events:none;
}
/* SIGNATURE: the same border, lit, filling clockwise from the top-left as --p climbs.
   Not a separate widget — the window frame IS the meter. */
.pl-card::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:conic-gradient(from 315deg,
    var(--gold2,#f0d27a) 0, var(--gold2,#f0d27a) calc(var(--p) * 1%), transparent 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0; transition:opacity .35s ease; pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(240,210,122,.45));
}
.pl-card[data-state="working"]::after{ opacity:1 }

/* corner brackets — eight hairlines, zero extra DOM */
.pl-corners{ position:absolute; inset:9px; pointer-events:none; opacity:.75 }
.pl-corners::before, .pl-corners::after{
  content:''; position:absolute; width:14px; height:14px;
  border-color:var(--gold,#d9b54a); border-style:solid; border-width:0;
}
.pl-corners::before{ top:0; left:0; border-top-width:1px; border-left-width:1px }
.pl-corners::after{ bottom:0; right:0; border-bottom-width:1px; border-right-width:1px }

.pl-crest{ color:var(--gold,#d9b54a); opacity:.9; margin-bottom:16px; line-height:0 }
.pl-crest svg{ display:inline-block }

.pl-eyebrow{
  margin:0 0 10px; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold,#d9b54a); font-weight:600;
}
.pl-title{
  margin:0 0 14px; font-weight:500; letter-spacing:.005em; line-height:1.08;
  font-size:clamp(30px,5.2vw,44px); color:var(--text,#e9e0cf);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  text-wrap:balance;
}
.pl-lede{
  margin:0 auto 22px; max-width:42ch; font-size:14.5px; line-height:1.6;
  color:var(--muted,#9b8f78);
}

/* data reads as data */
.pl-chips{
  list-style:none; margin:0 0 26px; padding:0;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.pl-chips li{
  font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:11.5px;
  letter-spacing:.04em; color:var(--muted,#9b8f78);
  padding:5px 11px; border:1px solid var(--line,#3a2e20); border-radius:999px;
  background:rgba(0,0,0,.25);
}

.pl-progress{ margin:0 0 22px; text-align:left }
.pl-progress-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:13.5px; color:var(--text,#e9e0cf);
}
.pl-progress-head b{
  font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:15px;
  color:var(--gold2,#f0d27a); font-variant-numeric:tabular-nums;
}
.pl-progress-note{ margin:6px 0 0; font-size:12px; color:var(--muted,#9b8f78) }

.pl-actions{ display:flex; flex-direction:column; align-items:center; gap:12px }
.pl-go{
  width:100%; max-width:340px; cursor:pointer; border:0; border-radius:3px;
  padding:15px 26px; font-size:15px; font-weight:700; letter-spacing:.02em;
  color:#1a1408; background:linear-gradient(180deg,#f0d27a,#c9a227);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 8px 22px rgba(201,162,39,.24);
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.pl-go:hover{ filter:brightness(1.06); box-shadow:0 1px 0 rgba(255,255,255,.34) inset, 0 10px 28px rgba(201,162,39,.34) }
.pl-go:active{ transform:translateY(1px) }
.pl-go:focus-visible{ outline:2px solid var(--gold2,#f0d27a); outline-offset:3px }
.pl-go[disabled]{ opacity:.5; cursor:default; filter:none; box-shadow:none }

.pl-alt{
  background:none; border:0; cursor:pointer; padding:4px 6px;
  font-size:12.5px; color:var(--muted,#9b8f78); text-decoration:underline;
  text-underline-offset:3px;
}
.pl-alt:hover{ color:var(--text,#e9e0cf) }
.pl-alt:focus-visible{ outline:2px solid var(--gold,#d9b54a); outline-offset:2px; border-radius:2px }

.pl-foot{ margin:20px auto 0; max-width:44ch; font-size:12px; line-height:1.6; color:var(--muted,#9b8f78) }

.pl-realm{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--line,#3a2e20);
  font-size:12px; color:var(--muted,#9b8f78);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.pl-dot{ width:6px; height:6px; border-radius:50%; background:var(--red,#c0392b) }
.pl-realm[data-up="1"] .pl-dot{ background:var(--green,#3da35d); box-shadow:0 0 8px rgba(61,163,93,.7) }

.pl-escape{ margin:0; font-size:12.5px; color:var(--muted,#9b8f78); text-align:center }
.pl-escape a{ color:var(--gold,#d9b54a) }

@media (max-width:560px){
  .pl-card{ padding:34px 24px 26px }
  .pl-stage{ padding:32px 14px 48px }
}
@media (prefers-reduced-motion:reduce){
  .pl-card::after{ transition:none }
  .pl-go{ transition:none }
}

/* home hero realm line — replaces the old spinner + four timer-driven "ready check" bars */
.ln-status-line[data-up] .ln-state-dot{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--red,#c0392b);
}
.ln-status-line[data-up="1"] .ln-state-dot{
  background:var(--green,#3da35d); box-shadow:0 0 8px rgba(61,163,93,.75);
}