/* OutFlux 1920 — public build (v6) styles: name entry, Hall of Fame, warming-up overlay, touch controls, rotate hint.
   Only linked by the public build (tools/build_public.py). Art Deco palette as in the start menu. */
:root { --pgold:#d9b25f; --pgold2:#f1d48a; --pcream:#f3e6c4; --pink:#0b0d18; --pmuted:#b9ab8a; }
html, body { touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body { position: fixed; inset: 0; }
#driver-menu input[type=text] { -webkit-user-select: text; user-select: text; touch-action: manipulation; }

/* start menu: card + Hall of Fame side by side; scrolls on small screens */
#driver-menu { gap: 18px; overflow-y: auto; padding: 8px; }
#driver-menu .dcard { max-height: 100%; overflow-y: auto; }
#driver-menu .pname { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; margin: 0 0 10px; color: var(--pmuted);
  font: 400 13px 'Federo', serif; letter-spacing: .2em; }
#driver-menu .pname input { width: 15em; background: rgba(11,13,24,.85); color: var(--pgold2); border: 1px solid var(--pgold); outline: 1px solid rgba(217,178,95,.45);
  outline-offset: 2px; border-radius: 0; padding: 6px 10px; font: 400 17px 'Federo', serif; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
#driver-menu .pname input:focus { border-color: var(--pgold2); box-shadow: 0 0 12px rgba(241,212,138,.35); }
#driver-menu .dcar { display: none; }
#driver-menu .dtag { width: auto; min-width: 90px; }

/* Hall of Fame table (menu + winner screen) */
.ptop { color: var(--pcream); font: 15px 'Federo', serif; letter-spacing: .06em; background: linear-gradient(180deg,#121527,#0b0d18);
  border: 2px solid var(--pgold); outline: 1px solid var(--pgold); outline-offset: -7px; padding: 14px 16px 12px; min-width: 260px; }
.ptop-menu { align-self: center; width: min(320px, 94%); }
.ptop-h { color: var(--pgold2); font: 400 17px 'Limelight', serif; letter-spacing: .16em; text-align: center; margin: 2px 0 8px;
  border-bottom: 1px solid var(--pgold); padding-bottom: 6px; }
.ptop-empty { color: var(--pmuted); text-align: center; font-style: italic; padding: 10px 0; }
.ptop-t { width: 100%; border-collapse: collapse; }
.ptop-t td { padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9.5em; }
.ptop-t td:first-child { color: var(--pgold); width: 1.6em; text-align: right; }
.ptop-t td:nth-child(3) { color: var(--pgold2); text-align: right; font-variant-numeric: tabular-nums; }
.ptop-t td:nth-child(4), .ptop-t td:nth-child(5) { color: var(--pmuted); font-size: 12px; }
.ptop-t tr.me td { color: #fff7e0; background: rgba(217,178,95,.18); }

/* winner screen: Hall of Fame + buttons on the right of the canvas results */
#pwin { position: absolute; right: 1.6%; top: 5%; width: 27%; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
#pwin[hidden] { display: none; }
#pwin .ptop { min-width: 0; font-size: 13px; padding: 10px; }
#pwin .pwin-n { margin: 0; padding: 4px 6px; background: rgba(11,13,24,.85); color: var(--pmuted); font: italic 11px 'Josefin Sans', sans-serif; text-align: center; text-shadow: 0 1px 2px #000; }
#pwin .pwin-b { display: flex; gap: 8px; justify-content: center; }
#pwin button { flex: 1; background: linear-gradient(180deg,#f3d991 0%,#d2a54c 48%,#a87a2a 100%); color: #1b1306; border: 1px solid #6b4f17; padding: 10px 6px;
  font: 400 15px 'Limelight', serif; letter-spacing: .12em; cursor: pointer; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); }
#pwin button + button { background: linear-gradient(180deg,#2a2210,#15110a); color: var(--pgold2); border-color: var(--pgold); }

/* warming up ANSELMO: Art Deco plaque with a shimmer */
#pwarm { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); width: min(560px, 80%); text-align: center; pointer-events: none;
  padding: 12px 18px 14px; background: linear-gradient(180deg, rgba(18,21,39,.92), rgba(11,13,24,.92)); border: 2px solid var(--pgold);
  outline: 1px solid var(--pgold); outline-offset: -7px; box-shadow: 0 0 0 3px #0b0d18, 0 10px 30px rgba(0,0,0,.55); transition: opacity .4s; }
#pwarm[data-state=off] { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
#pwarm .pw-t { font: 400 24px 'Limelight', serif; letter-spacing: .14em; color: var(--pgold2);
  background: linear-gradient(100deg, #a87a2a 0%, #f1d48a 40%, #fff7e0 50%, #f1d48a 60%, #a87a2a 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: pshimmer 2.2s linear infinite; }
#pwarm .pw-s { margin-top: 4px; font: 14px 'Josefin Sans', sans-serif; color: var(--pcream); letter-spacing: .05em; }
#pwarm .pw-bar { margin: 9px auto 0; width: 70%; height: 4px; border-top: 1px solid var(--pgold); border-bottom: 1px solid var(--pgold); overflow: hidden; position: relative; }
#pwarm .pw-bar i { position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, var(--pgold2), transparent); animation: pslide 1.6s ease-in-out infinite; }
#pwarm[data-state=online] .pw-t { -webkit-text-fill-color: #7dffb0; animation: none; }
#pwarm[data-state=online] .pw-bar, #pwarm[data-state=napping] .pw-bar { display: none; }
#pwarm[data-state=napping] .pw-t { animation-duration: 5s; }
@keyframes pshimmer { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@keyframes pslide { 0% { left: -30%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { #pwarm .pw-t, #pwarm .pw-bar i { animation: none; } }

/* touch controls: fixed to the screen edges (thumbs), multitouch */
#ptouch { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
#ptouch[hidden] { display: none; }
#ptouch .pt { position: absolute; pointer-events: auto; touch-action: none; border-radius: 50%; width: 76px; height: 76px;
  background: rgba(11,13,24,.45); color: var(--pgold2); border: 2px solid rgba(217,178,95,.85); font: 400 16px 'Federo', serif; letter-spacing: .08em;
  display: flex; align-items: center; justify-content: center; -webkit-user-select: none; user-select: none; padding: 0; }
#ptouch .pt.on { background: rgba(217,178,95,.55); color: #1b1306; }
#ptouch .pt-l { left: calc(14px + env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom)); font-size: 26px; }
#ptouch .pt-r { left: calc(104px + env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom)); font-size: 26px; }
#ptouch .pt-a { right: calc(14px + env(safe-area-inset-right)); bottom: calc(30px + env(safe-area-inset-bottom)); width: 92px; height: 92px; }
#ptouch .pt-b { right: calc(118px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); width: 70px; height: 70px; font-size: 13px; }
#ptouch .pt-p { left: 50%; transform: translateX(-50%); top: calc(8px + env(safe-area-inset-top)); width: 46px; height: 46px; font-size: 15px; }

/* rotate hint: phones held in portrait */
#protate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #protate { display: flex; position: fixed; inset: 0; z-index: 50; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: radial-gradient(circle at 50% 40%, #1a1d33, #07060f 70%); color: var(--pcream); text-align: center; padding: 30px;
    font: 400 20px 'Federo', serif; letter-spacing: .1em; }
  #protate .pr-i { font-size: 72px; color: var(--pgold2); animation: prot 2.4s ease-in-out infinite; }
  @keyframes prot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
}

/* small landscape screens (phones): compact menu */
@media (max-height: 520px) {
  html body #driver-menu { align-items: flex-start; }
  html body #driver-menu .dcard { padding: 8px 18px 10px; width: min(560px, 62%); }
  html body #driver-menu .dlogo { height: 22px; margin: 0 auto; }
  html body #driver-menu .dgame { font-size: 26px; }
  html body #driver-menu .drule { margin: 3px auto 4px; }
  html body #driver-menu h2 { font-size: 14px; margin: 2px 0; }
  html body #driver-menu .dsub, html body #driver-menu .dhint, html body #driver-menu .dblurb, html body #driver-menu .pstat { font-size: 11px; margin: 2px 0 6px; }
  html body #driver-menu .drow { margin: 4px 0; font-size: 14px; }
  html body #driver-menu .dopt { padding: 4px 8px; min-width: 96px; font-size: 13px; }
  html body #driver-menu .dtrack { min-width: 150px; }
  html body #driver-menu .dval { font-size: 13px; padding: 3px 8px; }
  html body #driver-menu .dsnd { font-size: 11px; gap: 8px; margin: 2px 0 6px; }
  html body #driver-menu .dstart { padding: 7px 24px; font-size: 15px; }
  html body #driver-menu .pname input { font-size: 14px; padding: 4px 8px; width: 12em; }
  html body #driver-menu .ptop-menu { width: 34%; min-width: 0; font-size: 12px; padding: 8px; align-self: flex-start; }
  html body .ptop-h { font-size: 13px; margin: 0 0 4px; }
  html body #pwin { width: 30%; top: 3%; min-width: 0; }
  html body #pwin .ptop { font-size: 11px; padding: 6px; }
  html body #pwin button { font-size: 12px; padding: 7px 4px; }
  html body #pwarm .pw-t { font-size: 17px; } html body #pwarm .pw-s { font-size: 11px; }
}
@media (max-height: 520px) {
  /* phones: keep name, track, laps, ANSELMO status and START on one screen */
  html body #driver-menu .dlogo, html body #driver-menu .dsub, html body #driver-menu .dblurb, html body #driver-menu .drow,
  html body #driver-menu .dhint, html body #driver-menu .dsnd, html body #driver-menu .dver { display: none; }
  html body #driver-menu .dcard { align-self: center; }
  html body #driver-menu .ptop-menu { align-self: center; }
  html body .ptop-t td:nth-child(4), html body .ptop-t td:nth-child(5) { display: none; }
  html body #driver-menu .pname { margin: 6px 0 8px; }
  html body #driver-menu .pstat { margin: 6px 0 8px; }
}
@media (max-width: 760px) and (orientation: landscape) { html body #driver-menu .dsnd { display: none; } }
body.touch #menu-hint { display: none; }

/* v6 contract: ANSELMO status line in the menu, score result on the winner screen */
#driver-menu .pstat { margin: -4px 0 8px; font: 13px 'Josefin Sans', sans-serif; letter-spacing: .04em; color: var(--pgold2); }
#driver-menu .pstat[data-mode=online] { color: #7dffb0; }
#driver-menu .pstat[data-mode=warming] { background: linear-gradient(100deg, #a87a2a 0%, #f1d48a 40%, #fff7e0 50%, #f1d48a 60%, #a87a2a 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: pshimmer 2.2s linear infinite; }
#pwin .pwin-r { margin: 0; padding: 8px 10px; background: rgba(11,13,24,.9); border: 1px solid var(--pgold); color: var(--pcream); font: 14px 'Federo', serif; letter-spacing: .04em; text-align: center; }
#pwin .pwin-r[hidden] { display: none; }
#pwin .pwin-r[data-state=ok] { color: #7dffb0; border-color: #7dffb0; }
#pwin .pwin-r[data-state=rejected], #pwin .pwin-r[data-state=skip] { color: #ffb0a0; }
@media (max-height: 520px) { html body #driver-menu .pstat { font-size: 11px; margin: 0 0 4px; } #pwin .pwin-r { font-size: 11px; padding: 4px 6px; } }