/* LaunchCharts Lab: shared styles for every game. (c) LaunchCharts Ltd. */
:root {
  --ink: #111; --white: #fff; --ground: #F5F5F2; --turf: #EEF0EA; --line: #E2E2DD; --muted: #5C5C57;
  --dark2: #232323; --green: #50781B; --accent: #8DAE54; --zgreen: #91C02E; --amber: #F8A70A; --red: #E63C24; --labred: #E63312;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { background: var(--ground); }
body { font-family: 'Space Grotesk', 'Helvetica Neue', sans-serif; padding: 12px; color: var(--ink); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* bar: same on every page */
.labbar { display: flex; justify-content: space-between; align-items: center; background: #000; border-radius: 14px; height: 60px; padding: 0 18px; margin: 0 auto 12px; max-width: 430px; }
.labbar a { text-decoration: none; }
.lb-logo img { height: 30px; width: auto; display: block; }
.lb-lab { display: inline-flex; align-items: center; gap: 6px; color: var(--labred); font-weight: 700; font-size: 18px; letter-spacing: .14em; }

/* app frame and screens */
.lc-app { max-width: 430px; margin: 0 auto; border-radius: 22px; overflow: hidden; }
.lc-screen { min-height: 720px; padding: 22px 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.lc-dark { background: var(--ink); color: var(--white); }
.lc-light { background: var(--ground); }
.lc-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.lc-h1 { font-size: 34px; line-height: 1.06; font-weight: 700; letter-spacing: -.01em; }
.lc-sub { font-size: 17px; line-height: 1.45; color: #D6D6D1; }
.lc-fixed { font-size: 13px; color: #9A9A94; }
.lc-push { margin-top: auto; }
.lc-stack { display: flex; flex-direction: column; gap: 8px; }
.lc-row { display: flex; gap: 10px; }
.lc-row > * { flex: 1 1 0; }
.lc-svg { width: 100%; height: auto; display: block; }
.lc-pic { border-radius: 18px; background: var(--turf); overflow: hidden; }
.lc-dark .lc-pic { background: var(--dark2); }

/* buttons */
.lc-btn { appearance: none; border: 0; cursor: pointer; min-height: 54px; border-radius: 999px; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; padding: 0 20px; }
.lc-btn-white { background: var(--white); color: var(--ink); }
.lc-btn-ink { background: var(--ink); color: var(--white); }
.lc-btn-line { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.lc-dark .lc-btn-line { color: var(--white); border-color: rgba(255,255,255,.5); }
.lc-btn-small { min-height: 44px; font-size: 15px; }
.lc-link { appearance: none; border: 0; background: none; cursor: pointer; min-height: 40px; font-size: 15px; font-weight: 700; color: var(--green); }
.lc-link:disabled { opacity: .3; cursor: default; }

/* fields on dark intro */
.lc-fields { display: flex; gap: 10px; }
.lc-field { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; }
.lc-field label { font-size: 13px; color: #BDBDB7; }
.lc-field select, .lc-field input { height: 48px; border-radius: 12px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; font-size: 17px; font-weight: 700; padding: 0 12px; width: 100%; }
.lc-field select option { color: #111; }
.lc-seg { display: flex; padding: 4px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); }
.lc-seg button { flex: 1 1 0; height: 42px; border: 0; border-radius: 999px; background: transparent; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.lc-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); }

/* shot screen */
.lc-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.lc-top b { font-size: 17px; }
.lc-progress { display: flex; gap: 4px; }
.lc-progress i { flex: 1 1 0; height: 6px; border-radius: 3px; background: #D6D6D1; }
.lc-progress i.done { background: var(--ink); }
.lc-progress i.mh { background: #BDBDB7; }
.lc-progress i.now { background: var(--accent); }
.lc-progress i.g { background: var(--zgreen); } .lc-progress i.a { background: var(--amber); } .lc-progress i.r { background: var(--red); }
.lc-ask { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.lc-ask small { font-size: 13px; font-weight: 700; color: var(--green); }
.lc-ask b { font-size: 40px; line-height: 1.05; }
.lc-ask span { font-size: 14px; color: var(--muted); }
.lc-hint { font-size: 14px; line-height: 1.4; color: var(--muted); text-align: center; }

/* the tap pad: left block | target line | right block */
.lc-pad .kp { display: grid; grid-template-columns: 1fr 58px 1fr; gap: 6px; }
.lc-pad .side { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.lc-pad .kp-band .side { grid-template-columns: 1fr; }
.lc-pad .kp-band button { min-height: 44px; flex-direction: row; gap: 4px; }
.lc-pad .kp-band button small { margin-top: 0; }
.lc-pad button.tall { min-height: 0; height: 100%; border-radius: 12px; background: #fff; border: 2px solid #111; padding: 4px 2px; }
.lc-pad button.tall b { font-size: 22px; }
.lc-pad .kp-band button.tall { flex-direction: column; }
.lc-pad button.tall small.w { font-size: 13px; font-weight: 700; margin-top: 0; }
.lc-pad button.tall small { font-size: 10px; line-height: 1.2; text-align: center; opacity: 1; margin-top: 6px; }
/* (older row layout) */
.lc-pad { display: flex; flex-direction: column; gap: 6px; }
.lc-pad .cap { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 2px; }
.lc-pad .r { display: grid; gap: 4px; }
.lc-pad button { appearance: none; border: 0; cursor: pointer; min-height: 52px; border-radius: 10px; font-weight: 700; font-size: 17px; color: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; transition: transform 90ms ease, filter 90ms ease; touch-action: manipulation; }
.lc-pad button small { font-size: 10px; font-weight: 700; opacity: .7; margin-top: 3px; }
.lc-pad button:active { transform: scale(.94); filter: brightness(.92); }
.lc-pad button.mid { background: #fff; border: 2px solid #111; min-height: 48px; font-size: 16px; }
.lc-pad button.on { box-shadow: 0 0 0 3px #111 inset; }
.lc-pad button.flash { animation: lcFlash 380ms ease; }
@keyframes lcFlash { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }

.lc-toast { border-radius: 14px; padding: 12px 14px; font-weight: 700; font-size: 17px; color: #fff; text-align: center; animation: lcIn 200ms ease; }
@keyframes lcIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* result */
.lc-label { font-size: 14px; font-weight: 700; color: var(--accent); }
.lc-big { font-size: 46px; line-height: 1.02; font-weight: 700; letter-spacing: -.02em; }
.lc-note { font-size: 16px; line-height: 1.4; color: #D6D6D1; }
.lc-do { background: var(--dark2); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; border-left: 4px solid var(--accent); }
.lc-do small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.lc-do p { font-size: 16px; line-height: 1.45; }
.lc-detail { border-top: 1px solid #2E2E2E; padding-top: 4px; }
.lc-detail summary { cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; padding: 10px 0; display: flex; justify-content: space-between; }
.lc-detail summary::-webkit-details-marker { display: none; }
.lc-detail summary::after { content: "+"; color: #9A9A94; }
.lc-detail[open] summary::after { content: "–"; }
.lc-detail .in { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.lc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.lc-tiles div { padding: 10px 12px; border-radius: 12px; background: var(--dark2); display: flex; flex-direction: column; gap: 2px; }
.lc-tiles small { font-size: 12px; color: #BDBDB7; }
.lc-tiles b { font-size: 18px; line-height: 1.2; }
.lc-fine { font-size: 13px; line-height: 1.45; color: #BDBDB7; }
.lc-lockline { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: #BDBDB7; }
.lc-lockline svg { flex: 0 0 15px; margin-top: 2px; }
.lc-lockline a { color: #fff; font-weight: 700; }
.lc-best { font-size: 14px; color: #BDBDB7; }

.lc-draw { stroke-dasharray: 400; stroke-dashoffset: 400; animation: lcDraw 600ms cubic-bezier(.3,0,.2,1) forwards; }
@keyframes lcDraw { to { stroke-dashoffset: 0; } }
.lc-pop { transform-box: fill-box; transform-origin: center; animation: lcPop 320ms cubic-bezier(.3,1.6,.5,1); }
@keyframes lcPop { from { transform: scale(0); } to { transform: scale(1); } }
.lc-reveal > * { animation: lcIn 360ms ease both; }
.lc-reveal > *:nth-child(2) { animation-delay: 80ms; } .lc-reveal > *:nth-child(3) { animation-delay: 160ms; } .lc-reveal > *:nth-child(4) { animation-delay: 240ms; } .lc-reveal > *:nth-child(5) { animation-delay: 320ms; }

@media (max-width: 380px) { body { padding: 0; } .lc-app { border-radius: 0; } .labbar { border-radius: 0; margin-bottom: 0; } .lc-h1 { font-size: 30px; } .lc-pad button { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .lc-draw { animation: none; stroke-dashoffset: 0; } .lc-pop, .lc-reveal > *, .lc-pad button.flash, .lc-toast { animation: none; } }