/* Yksin Lapissa 3D – aloitusnäytöt (G3.Setup). Tumma arktinen teema, kylmät sävyt ja lämmin oranssi korostus.
 * Kaikki luokat alkavat .s3-; värit ovat .s3-root-tokeneita, joten tyyli ei vuoda muille sivuille.
 * Kosketuskohteet >= 44 px, safe-area huomioitu, sisällöt selattavia, ei vaakaskrollausta. */

.s3-root {
  --s3-bg: #060d15; --s3-bg2: #0a1520; --s3-panel: #0f1d2c; --s3-panel2: #162a3e;
  --s3-line: #223f5a; --s3-line2: #37607f;
  --s3-text: #e7f0f7; --s3-muted: #92a9bd; --s3-dim: #5d7489;
  --s3-fire: #ffb347; --s3-fire2: #f7842f; --s3-ice: #8fd3ff; --s3-aurora: #6ff2b8;
  --s3-good: #7fe3a1; --s3-warn: #ffd166; --s3-bad: #ff7b7b;
  --s3-serif: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  --s3-sat-t: env(safe-area-inset-top, 0px); --s3-sat-b: env(safe-area-inset-bottom, 0px);
  --s3-sat-l: env(safe-area-inset-left, 0px); --s3-sat-r: env(safe-area-inset-right, 0px);
  position: relative; z-index: 30; width: 100%; height: 100vh; height: 100dvh; overflow: hidden;     /* pelin HUD (.g3-ui) jää alle */
  background: var(--s3-bg); color: var(--s3-text); text-align: left;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.s3-root *, .s3-root *::before, .s3-root *::after { box-sizing: border-box; }
.s3-root button { font: inherit; color: inherit; cursor: pointer; }
.s3-root button:disabled { opacity: .4; cursor: default; }
.s3-root h1:focus, .s3-root h2:focus, .s3-root h3:focus { outline: none; }
.s3-root p { margin: 0; }
.s3-root img { max-width: 100%; }

.s3-scr { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
.s3-hide { opacity: 0; pointer-events: none; }

/* ---------- painikkeet ---------- */
.s3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--s3-line2); background: var(--s3-panel2);
  font-weight: 600; letter-spacing: .01em; touch-action: manipulation;
  transition: background .15s, border-color .15s, transform .08s;
}
.s3-btn:hover { background: #1b3349; border-color: #4a7aa3; }
.s3-btn:active { transform: scale(.97); }
.s3-btn.s3-primary { background: linear-gradient(180deg, #ffc067, #f7952f); color: #2a1604; border-color: #ffd08a; text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.s3-btn.s3-primary:hover { background: linear-gradient(180deg, #ffcb7f, #ffa244); }
.s3-btn.s3-ghost { background: transparent; border-color: transparent; color: var(--s3-muted); }
.s3-btn.s3-ghost:hover { color: var(--s3-text); background: rgba(255,255,255,.05); }
.s3-btn.s3-big { min-height: 52px; padding: 12px 26px; font-size: 1.05rem; }
.s3-btn.s3-sm { min-height: 44px; padding: 8px 14px; font-size: .9rem; }
.s3-btn.s3-ico { width: 44px; min-width: 44px; padding: 0; font-size: 1.3rem; line-height: 1; background: rgba(10,21,32,.88); }
.s3-btn small { font-weight: 500; opacity: .75; font-size: .85em; }
.s3-root :focus-visible { outline: 2px solid var(--s3-ice); outline-offset: 2px; }

/* ---------- aloitusnäyttö ---------- */
.s3-scr-title { overflow: hidden; }
.s3-bg {
  position: absolute; inset: -2%;
  background: #0a1420 50% 0% / cover no-repeat;
  filter: brightness(.6) saturate(.8);
  animation: s3-pan 90s ease-in-out infinite alternate;
}
@keyframes s3-pan { from { background-position: 50% 0%; } to { background-position: 50% 100%; } }
.s3-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4,9,15,.9) 0%, rgba(4,9,15,.58) 50%, rgba(4,9,15,.12) 100%),
    linear-gradient(0deg, rgba(4,9,15,.88) 0%, rgba(4,9,15,0) 48%);
}
.s3-tcontent {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; max-width: 760px;
  padding: calc(24px + var(--s3-sat-t)) calc(20px + var(--s3-sat-r)) calc(18px + var(--s3-sat-b)) calc(20px + var(--s3-sat-l));
}
.s3-eyebrow { margin: 0 0 12px !important; color: var(--s3-aurora); letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; }
.s3-tcontent h1 {
  margin: 0; font: 800 clamp(2.5rem, 10vw, 5.2rem)/.95 var(--s3-serif); letter-spacing: .03em;
  background: linear-gradient(180deg, #ffffff, #c4e4f7 62%, #86c9e9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 22px rgba(0,0,0,.6));
}
.s3-sub { margin: 14px 0 0 !important; color: #d6e6f2; font-size: 1.1rem; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.s3-chal { margin: 14px 0 0 !important; color: var(--s3-fire); font-size: .95rem; max-width: 30em; }
.s3-menu { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.s3-menu .s3-btn { min-width: min(300px, 100%); justify-content: space-between; text-align: left; }
.s3-menu .s3-btn.s3-big { min-height: 50px; }
.s3-credit { color: var(--s3-dim) !important; font-size: .76rem; max-width: 36em; }

/* ---------- ylätunniste ja vaiheet ---------- */
.s3-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: calc(6px + var(--s3-sat-t)) calc(10px + var(--s3-sat-r)) 6px calc(10px + var(--s3-sat-l));
  background: var(--s3-bg2); border-bottom: 1px solid var(--s3-line);
}
.s3-steps { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0 0 0 auto; padding: 0; font-size: .8rem; }
.s3-steps li { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--s3-line); color: var(--s3-dim); white-space: nowrap; }
.s3-steps li.on { color: var(--s3-text); border-color: var(--s3-fire); background: rgba(255,179,71,.12); }
.s3-steps li.done { color: var(--s3-good); border-color: #2d6b47; }
@media (max-width: 560px) {
  .s3-steps li span { display: none; }
  .s3-steps li.on span { display: inline; }
}

/* ---------- sisältö ja alapalkki ---------- */
.s3-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px calc(16px + var(--s3-sat-r)) 18px calc(16px + var(--s3-sat-l)); }
.s3-wrap { max-width: 1100px; margin: 0 auto; }
.s3-scr h2 { margin: 2px 0 6px; font: 700 1.55rem/1.2 var(--s3-serif); }
.s3-lead { margin: 0 0 14px !important; color: var(--s3-muted); max-width: 46em; }
.s3-bar {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px calc(14px + var(--s3-sat-r)) calc(10px + var(--s3-sat-b)) calc(14px + var(--s3-sat-l));
  background: var(--s3-bg2); border-top: 1px solid var(--s3-line);
}
.s3-hint { color: var(--s3-muted); font-size: .86rem; }

/* ---------- vaikeustaso ---------- */
.s3-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.s3-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  min-height: 132px; padding: 16px 16px 18px; border-radius: 16px;
  background: var(--s3-panel); border: 1px solid var(--s3-line);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.s3-card:hover { border-color: var(--s3-line2); }
.s3-card b { font: 700 1.2rem var(--s3-serif); }
.s3-card small { color: var(--s3-muted); line-height: 1.4; font-size: .92rem; }
.s3-card.on { border-color: var(--s3-fire); background: rgba(255,179,71,.09); box-shadow: inset 0 0 0 1px var(--s3-fire); }
.s3-tag {
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--s3-ice);
  border: 1px solid #2c5575; border-radius: 99px; padding: 2px 8px; margin-bottom: 4px;
}
.s3-card.on .s3-tag { color: var(--s3-fire); border-color: #8a6230; }

/* ---------- varusteet ---------- */
.s3-slots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.s3-slot {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 1px dashed var(--s3-line2); background: var(--s3-bg2);
  color: var(--s3-dim); font-size: 1.25rem; padding: 0;
}
button.s3-slot { border: 1px solid var(--s3-fire); background: rgba(255,179,71,.12); }
button.s3-slot:hover { background: rgba(255,179,71,.22); }
.s3-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 4px; }
.s3-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.s3-chip {
  min-height: 44px; padding: 6px 14px; border-radius: 999px; font-size: .9rem;
  border: 1px solid var(--s3-line); background: var(--s3-panel); color: var(--s3-muted);
}
.s3-chip.on { color: var(--s3-text); border-color: var(--s3-fire); background: rgba(255,179,71,.12); }
.s3-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.s3-status { min-height: 1.4em; margin: 6px 0 0; color: var(--s3-warn); font-size: .9rem; }
.s3-catlabel { margin: 18px 0 8px; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--s3-ice); }
.s3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.s3-item {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-height: 100px; padding: 10px 11px 11px; border-radius: 14px; text-align: left;
  background: var(--s3-panel); border: 1px solid var(--s3-line);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.s3-item:hover { border-color: var(--s3-line2); }
.s3-item .s3-ie { font-size: 1.6rem; line-height: 1; margin-bottom: 4px; }
.s3-iname { display: block; font-weight: 650; line-height: 1.2; padding-right: 14px; }
.s3-item small { color: var(--s3-muted); font-size: .8rem; line-height: 1.3; }
.s3-item.on { border-color: var(--s3-fire); background: rgba(255,179,71,.12); box-shadow: inset 0 0 0 1px var(--s3-fire); }
.s3-check { position: absolute; top: 8px; right: 10px; color: var(--s3-fire); font-weight: 800; }

/* ---------- alapalkin laskuri ---------- */
.s3-count { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1rem; }
.s3-count b { font-size: 1.25rem; }
.s3-count small { color: var(--s3-muted); font-size: .8rem; }
.s3-meter { display: inline-block; width: 90px; height: 6px; border-radius: 99px; background: var(--s3-panel2); overflow: hidden; vertical-align: middle; }
.s3-meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--s3-fire2), var(--s3-fire)); transition: width .2s; }

/* ---------- kartta ---------- */
.s3-mapbody { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.s3-mapwrap { position: relative; flex: 1 1 auto; min-height: 120px; overflow: hidden; background: #0a1520; }
.s3-mapvp { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.s3-mapvp.s3-drag { cursor: grabbing; }
.s3-mapstage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.s3-mapstage.s3-anim { transition: transform .35s ease; }
.s3-mapimg { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.s3-loading {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  background: var(--s3-bg2); color: var(--s3-muted); pointer-events: none; transition: opacity .3s;
}
.s3-loading.s3-hide { opacity: 0; }
.s3-mapctl { position: absolute; right: 10px; top: 10px; z-index: 5; display: flex; flex-direction: column; gap: 8px; }
.s3-layers { position: absolute; left: 10px; top: 10px; z-index: 5; display: flex; gap: 6px; }
.s3-layers .s3-chip { background: rgba(10,21,32,.88); }
.s3-maphint {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; width: max-content; max-width: calc(100% - 20px); margin: 0 auto;
  padding: 6px 12px; border-radius: 999px; pointer-events: none;
  background: rgba(5,12,20,.74); color: #d7e6f2; font-size: .8rem; text-align: center;
}
.s3-mk { position: absolute; left: 0; top: 0; pointer-events: none; }
.s3-mk-pin { z-index: 4; width: 30px; height: 40px; transform-origin: 50% 100%; }
.s3-mk-pin svg { display: block; width: 30px; height: 40px; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.s3-mk-pin path { fill: var(--s3-fire); stroke: #2a1604; stroke-width: 1.5; }
.s3-mk-pin circle { fill: #fff8ec; }
.s3-mk-pin.s3-bad path { fill: var(--s3-bad); }
.s3-mk-dot { z-index: 2; transform-origin: 50% 50%; }
.s3-mk-dot > i { display: block; width: 16px; height: 16px; border-radius: 50%; }
.s3-mk-drop > i { position: relative; border: 0; }
.s3-mk-drop > i::before, .s3-mk-drop > i::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff;
  box-shadow: 0 0 2px #000;
}
.s3-mk-drop > i::before { width: 16px; height: 2px; }
.s3-mk-drop > i::after { width: 2px; height: 16px; }
.s3-mk-rec > i { background: rgba(143,211,255,.28); border: 2px solid var(--s3-ice); box-shadow: 0 0 6px rgba(0,0,0,.5); }
.s3-mk-tag {
  position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap;
  padding: 2px 6px; border-radius: 6px; background: rgba(5,12,20,.82); color: #e9f3fb; font-size: 11px; font-weight: 700;
}

/* ---------- sivupaneeli (kartan tiedot) ---------- */
.s3-side {
  flex: 0 0 auto; max-height: 36vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 10px calc(14px + var(--s3-sat-r)) 12px calc(14px + var(--s3-sat-l));
  background: var(--s3-panel); border-top: 1px solid var(--s3-line);
}
.s3-h2s { margin: 0 0 8px !important; font: 700 1.05rem var(--s3-serif); }
.s3-sidebtns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.s3-kv { margin: 0; }
.s3-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--s3-line); }
.s3-kv dt { color: var(--s3-muted); font-size: .9rem; }
.s3-kv dd { margin: 0; text-align: right; font-weight: 600; }
.s3-warn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid #7a3040; background: rgba(255,107,107,.08); color: #ffc1c1;
}
.s3-note { margin-bottom: 8px; color: var(--s3-warn); font-size: .9rem; }
.s3-empty { color: var(--s3-muted); font-size: .92rem; }
.s3-empty b { display: block; color: var(--s3-text); margin-bottom: 4px; }
.s3-rec { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; margin-top: 12px; }
.s3-rec img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--s3-line); }
.s3-rec b { display: block; font-size: .95rem; }
.s3-rec p { margin-top: 2px !important; color: var(--s3-muted); font-size: .85rem; }

/* ---------- nimi ja yhteenveto ---------- */
.s3-field { display: flex; flex-direction: column; gap: 6px; max-width: 420px; margin: 8px 0 20px; }
.s3-field > span { color: var(--s3-muted); font-size: .9rem; }
.s3-name {
  min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--s3-line2);
  background: var(--s3-bg2); color: var(--s3-text); font: inherit; font-size: 1.05rem;
}
.s3-name::placeholder { color: var(--s3-dim); }
.s3-sum { margin: 0; max-width: 560px; }
.s3-sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--s3-line); }
.s3-sum dt { color: var(--s3-muted); }
.s3-sum dd { margin: 0; text-align: right; font-weight: 600; }
.s3-em { font-size: 1.15rem; letter-spacing: .05em; }

/* ---------- modaali ---------- */
.s3-modal {
  position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  padding: calc(14px + var(--s3-sat-t)) 16px calc(14px + var(--s3-sat-b)); background: rgba(3,8,14,.72);
}
.s3-dialog {
  width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 18px 18px 16px; border-radius: 18px; background: var(--s3-panel); border: 1px solid var(--s3-line2);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.s3-dialog h3 { margin: 0 0 8px; font: 700 1.35rem var(--s3-serif); }
.s3-dialog h4 { margin: 14px 0 4px; font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--s3-ice); }
.s3-dialog p, .s3-dialog li { color: #d3e1ec; font-size: .95rem; margin: 0 0 4px; }
.s3-dialog ul { margin: 0 0 4px; padding-left: 18px; }
.s3-dialog b { color: var(--s3-text); }
.s3-mbtns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- kapea näyttö (puhelin pystyssä): kartalle enemmän tilaa ---------- */
@media (max-width: 560px) {
  .s3-bar .s3-hint { display: none; }
  .s3-side { max-height: 32vh; padding-top: 8px; padding-bottom: 8px; }
  .s3-h2s { display: none; }
  .s3-sidebtns { flex-wrap: nowrap; gap: 6px; margin-bottom: 6px; }
  .s3-sidebtns .s3-btn { flex: 1 1 0; min-width: 0; padding: 6px 8px; font-size: .84rem; line-height: 1.2; text-align: center; }
  .s3-kv > div { padding: 3px 0; }
  .s3-kv dt, .s3-kv dd { font-size: .9rem; }
  .s3-rec { grid-template-columns: 72px 1fr; gap: 8px; margin-top: 8px; }
  .s3-rec img { width: 72px; height: 54px; }
  .s3-rec b { font-size: .88rem; }
  .s3-rec p { font-size: .8rem; }
  .s3-warn { margin-top: 8px; padding: 8px 10px; }
  .s3-maphint { font-size: .76rem; padding: 5px 10px; }
}

/* ---------- leveä näyttö: kartta ja sivupaneeli rinnakkain ---------- */
@media (min-aspect-ratio: 1/1), (min-width: 900px) {
  .s3-mapbody { flex-direction: row; }
  .s3-side {
    flex: 0 0 340px; width: 340px; max-height: none; border-top: 0; border-left: 1px solid var(--s3-line);
    padding-top: 14px;
  }
}

/* ---------- leveä aloitusnäyttö ---------- */
@media (min-aspect-ratio: 1/1) {
  .s3-tcontent { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; }
  .s3-tblock { flex: 1 1 300px; }
  .s3-menu { flex: 0 0 auto; }
  .s3-credit { flex-basis: 100%; }
}
@media (max-height: 520px) {
  .s3-tcontent { gap: 12px; }
  .s3-sub { margin-top: 8px !important; }
  .s3-chal { margin-top: 8px !important; }
  .s3-menu .s3-btn.s3-big { min-height: 44px; padding: 8px 20px; }
  .s3-eyebrow { margin-bottom: 6px !important; }
}

@media (max-height: 520px) {
  .s3-modal { padding: 8px 12px; }
  .s3-dialog { padding: 12px 14px 10px; }
  .s3-dialog h3 { margin-bottom: 4px; font-size: 1.2rem; }
  .s3-dialog h4 { margin: 8px 0 2px; }
  .s3-dialog p, .s3-dialog li { font-size: .86rem; line-height: 1.35; margin-bottom: 2px; }
  .s3-mbtns { margin-top: 10px; }
}

/* ---------- moninpeli: palvelimen osoite ja tiedot ---------- */
.s3-root [hidden] { display: none !important; }
.s3-mpwrap { max-width: 560px; }
.s3-mpwrap .s3-field { max-width: none; margin: 0 0 14px; }
.s3-mpwrap .s3-name { width: 100%; }
.s3-mpinfo { margin: 0 0 14px; padding: 4px 14px; border-radius: 14px; border: 1px solid var(--s3-line); background: var(--s3-panel); }
.s3-mpinfo:empty { display: none; }
.s3-mpinfo p { padding: 8px 0; color: var(--s3-muted); font-size: .92rem; }
.s3-mpinfo .s3-kv > div { padding: 7px 0; }
.s3-mpform[aria-busy="true"] { opacity: .75; }
.s3-mperr { min-height: 1.4em; margin: -6px 0 10px; color: var(--s3-bad); font-size: .92rem; }
.s3-mperr:empty { min-height: 0; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .s3-bg { animation: none; }
  .s3-mapstage.s3-anim { transition: none; }
}

/* ---------- hahmo: esikatselu (pyörivä 3D-hahmo tai värikuva) ja ulkonäön valinnat ---------- */
.s3-lookwrap { max-width: 1040px; }
.s3-lkname { margin: 0 0 12px !important; }
.s3-lkside { min-width: 0; }
.s3-look { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 18px; }
.s3-lkprev {
  position: sticky; top: -14px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 0 -4px; padding: 8px 4px 8px; border-radius: 16px;
  background: linear-gradient(180deg, #16293c 0%, #0f1d2c 70%); border: 1px solid var(--s3-line);
}
.s3-lkstage { position: relative; width: 100%; height: clamp(180px, 30vh, 300px); }
.s3-lkcv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.s3-lkfig { position: absolute; left: 50%; top: 4%; height: 92%; transform: translateX(-50%); }
.s3-lkstage.s3-gl .s3-lkfig { display: none; }
.s3-lkbtns { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.s3-lknote { color: var(--s3-muted); font-size: .82rem; text-align: center; min-height: 1.2em; }
.s3-lkopts { display: grid; grid-template-columns: 1fr; gap: 10px; min-width: 0; }
.s3-look:first-child { margin-top: 0; }
.s3-lkgrp { margin: 0; padding: 8px 12px 10px; border: 1px solid var(--s3-line); border-radius: 14px; background: var(--s3-panel); min-width: 0; }
.s3-lkgrp legend { padding: 0 6px; font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--s3-ice); }
.s3-lkrow { display: flex; flex-direction: column; gap: 5px; padding: 5px 0; }
.s3-lkrow + .s3-lkrow { border-top: 1px dashed var(--s3-line); }
.s3-lklab { color: var(--s3-muted); font-size: .86rem; }
.s3-lklab b { color: var(--s3-text); font-weight: 600; margin-left: 4px; }
.s3-lkopt { display: flex; flex-wrap: wrap; gap: 6px; }
.s3-lkchip { min-height: 40px; padding: 4px 12px; }
.s3-sw {
  width: 40px; height: 40px; min-width: 40px; padding: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
  transition: transform .1s, border-color .15s;
}
.s3-sw:hover { transform: scale(1.06); border-color: rgba(255,255,255,.5); }
.s3-sw.on { border-color: var(--s3-fire); box-shadow: 0 0 0 2px var(--s3-fire), inset 0 0 0 2px rgba(0,0,0,.3); }
@media (pointer: coarse) { .s3-sw { width: 44px; height: 44px; min-width: 44px; } .s3-lkchip { min-height: 44px; } }
@media (min-width: 760px) {
  .s3-look { grid-template-columns: minmax(240px, 320px) 1fr; align-items: start; }
  .s3-lkprev { top: -14px; margin: 0; }
  .s3-lkstage { height: clamp(220px, 50vh, 460px); }
  .s3-lkopts { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (max-height: 520px) and (min-width: 560px) {
  .s3-lookwrap .s3-lead { display: none; }
  .s3-look { grid-template-columns: minmax(200px, 260px) 1fr; align-items: start; }
  .s3-lkprev { top: -14px; margin: 0; padding: 4px; gap: 4px; }
  .s3-lkstage { height: 50vh; }
  .s3-lknote { display: none; }
}