:root { --gold: #c9a45c; --ink: #e9e6df; --mute: #8a877f; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #040405; overflow: hidden;
  font-family: "Helvetica Neue", Inter, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#loader { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #040405; z-index: 20; transition: opacity 1.2s ease; letter-spacing: .25em; font-size: 11px; color: var(--mute); text-transform: uppercase; }
#loader .ring { width: 54px; height: 54px; border: 1px solid #222; border-top-color: var(--gold); border-radius: 50%;
  animation: spin 1.1s linear infinite; margin-bottom: 22px; }
@keyframes spin { to { transform: rotate(360deg); } }
#loader.done { opacity: 0; pointer-events: none; }
#hud-top { position: fixed; top: 34px; left: 44px; z-index: 5; pointer-events: none; max-width: 52vw; }
.brand { font-size: 11px; letter-spacing: .55em; color: var(--gold); font-weight: 600; }
.brand span { color: #555; margin: 0 .1em; }
h1 { font-weight: 200; font-size: 30px; letter-spacing: .06em; margin: 14px 0 8px; text-transform: uppercase; line-height: 1.15; }
.sub { font-size: 11px; letter-spacing: .22em; color: var(--mute); text-transform: uppercase; }
#stats { position: fixed; top: 38px; right: 44px; z-index: 5; text-align: right; font-size: 10.5px; letter-spacing: .18em;
  color: var(--mute); text-transform: uppercase; line-height: 2; pointer-events: none; }
#stats b { color: var(--ink); font-weight: 500; letter-spacing: .08em; }
#controls { position: fixed; bottom: 46px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 14px; align-items: center; }
#controls button { background: rgba(14,14,16,.55); color: var(--ink); border: 1px solid rgba(255,255,255,.14);
  padding: 11px 20px; font: inherit; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all .25s; }
#controls button:hover { border-color: rgba(201,164,92,.7); }
#controls button.on { border-color: var(--gold); color: #fff; background: rgba(201,164,92,.16); }
.seg { display: flex; } .seg button + button { border-left: none !important; }
#hint { position: fixed; bottom: 16px; width: 100%; text-align: center; font-size: 10px; letter-spacing: .2em; color: #5d5b56; text-transform: uppercase; z-index: 5; pointer-events: none; }
#hint b { color: #8d8a83; font-weight: 500; }
#strip { position: fixed; right: 30px; top: 50%; transform: translateY(-50%); z-index: 6; display: grid; grid-template-columns: repeat(2, 78px);
  gap: 6px; max-height: 70vh; overflow-y: auto; padding: 6px; transition: opacity .4s; }
#strip img { width: 78px; height: 52px; object-fit: cover; cursor: pointer; border: 1px solid rgba(255,255,255,.12); opacity: .75; transition: all .2s; }
#strip img:hover, #strip img.on { opacity: 1; border-color: var(--gold); }
.hidden { opacity: 0 !important; pointer-events: none !important; }
#photo-card { position: fixed; left: 44px; bottom: 110px; width: 300px; z-index: 6; background: rgba(10,10,12,.7); border: 1px solid rgba(201,164,92,.5);
  padding: 8px; transition: opacity .5s; backdrop-filter: blur(8px); }
#photo-card img { width: 100%; display: block; }
#photo-card .meta { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 8px 2px 2px; color: var(--mute); }
#photo-card a { color: var(--gold); text-decoration: none; }
#overlay { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .5; z-index: 4; pointer-events: none; }
#run-pick { pointer-events: auto; margin-top: 14px; background: rgba(14,14,16,.55); color: var(--ink); font: inherit;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.14); padding: 7px 10px; cursor: pointer; }
#run-pick:hover { border-color: rgba(201,164,92,.7); }
#run-pick.hidden { display: none; }