/* ON THE EDGE: CURVE CAMERA. The paperwork of a deadpan traffic authority over a dusk canyon. */
@font-face { font-family: "Big Shoulders"; font-weight: 900; font-display: swap; src: url(/src/fonts/big-shoulders-900.woff2) format("woff2"); }
@font-face { font-family: "Big Shoulders"; font-weight: 700; font-display: swap; src: url(/src/fonts/big-shoulders-700.woff2) format("woff2"); }
@font-face { font-family: "Doto"; font-weight: 800; font-display: swap; src: url(/src/fonts/doto-800.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-display: swap; src: url(/src/fonts/barlow-sc-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url(/src/fonts/barlow-sc-700.woff2) format("woff2"); }

:root {
  --paper: #F1EBDC; --ink: #1F2330; --stamp: #D7263D; --signal: #FFB000;
  --dusk: #23284F; --ember: #EF6A3A; --rock: #8E3F2B; --pink: #F4CBD0;
  --big: "Big Shoulders", Impact, "Arial Narrow", sans-serif;
  --dot: "Doto", "Courier New", monospace;
  --lab: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --top: env(safe-area-inset-top, 0px); --bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--dusk); color: var(--paper); overflow: hidden;
  font-family: var(--lab); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  overscroll-behavior: none; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; touch-action: manipulation; }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#play { position: fixed; inset: 0; z-index: 1; }

/* the live screen: one number, one sentence */
#hud { position: fixed; top: calc(var(--top) + 10px); left: 0; right: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s; }
#hud.on { opacity: 1; }
.brand { position: absolute; left: 12px; top: 0; background: var(--paper); color: var(--ink); padding: 4px 8px 5px; transform: rotate(-2deg);
  box-shadow: 0 2px 0 #0004; line-height: 1; }
.brand b { display: block; font: 900 17px/1 var(--big); letter-spacing: .04em; color: var(--stamp); }
.brand span { font: 700 9px/1.2 var(--lab); letter-spacing: .22em; }
#recordBtn { position: absolute; right: 12px; top: 0; pointer-events: auto; background: var(--paper); color: var(--ink);
  font: 700 13px/1 var(--lab); letter-spacing: .08em; padding: 10px 12px; min-height: 44px; min-width: 44px; box-shadow: 0 2px 0 #0004; }
.gauge { text-align: center; margin-top: 50px; line-height: .9; }
#speed { font: 900 88px/0.9 var(--big); color: var(--paper); text-shadow: 0 3px 0 var(--ink), 0 0 24px #0008; transition: color .15s; }
#speed.over { color: #ff5a6a; }
.gauge small { display: block; font: 900 16px var(--big); letter-spacing: .2em; margin-top: 2px; text-shadow: 0 2px 0 var(--ink); }
#limit { display: inline-block; margin-top: 8px; background: var(--signal); color: var(--ink); font: 900 18px/1 var(--big); letter-spacing: .06em; padding: 5px 10px 4px; }
/* the teaching strip: where flying starts, for a new player who keeps letting go too early */
#teach { display: none; position: relative; width: min(64vw, 260px); height: 10px; margin: 14px auto 36px; background: #1F2330b3; box-shadow: 0 0 0 2px var(--ink); }
#teach.on { display: block; }
#teachFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--paper); }
#teachLim, #teachFly { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; }
#teachLim { background: var(--signal); }
#teachFly { background: var(--stamp); }
#teachFly b { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font: 900 15px/1 var(--big); letter-spacing: .14em; color: var(--stamp);
  background: var(--paper); padding: 3px 4px 2px 6px; }
#teachFly.past b { background: var(--stamp); color: var(--paper); }
#curveName { text-align: center; margin-top: 6px; font: 700 11px var(--lab); letter-spacing: .22em; text-shadow: 0 1px 0 var(--ink); opacity: .9; }
#hint { position: fixed; left: 50%; bottom: calc(var(--bottom) + 28px); transform: translate(-50%, 12px); z-index: 4; pointer-events: none;
  background: #1F2330dd; color: var(--paper); font: 700 16px/1.3 var(--lab); letter-spacing: .12em; padding: 12px 18px; width: max-content; max-width: 92vw; text-align: center;
  opacity: 0; transition: opacity .25s, transform .25s; border-left: 5px solid var(--signal); }
#hint.on { opacity: 1; transform: translate(-50%, 0); }
body.paper-up .gauge, body.paper-up #curveName, body.in-view .gauge, body.in-view #curveName, body.paper-up #hint { visibility: hidden; }

/* the Curve Camera's viewfinder: everything outside the 3:2 frame goes dark */
#viewfinder { position: fixed; inset: 0; z-index: 3; pointer-events: none; display: none; }
#viewfinder.on { display: block; }
#vfFrame { position: absolute; box-shadow: 0 0 0 200vmax #0a0b10d9; }
#vfFrame .c { position: absolute; width: 26px; height: 26px; border: 3px solid var(--paper); }
.c.tl { left: -4px; top: -4px; border-right: 0; border-bottom: 0; } .c.tr { right: -4px; top: -4px; border-left: 0; border-bottom: 0; }
.c.bl { left: -4px; bottom: -4px; border-right: 0; border-top: 0; } .c.br { right: -4px; bottom: -4px; border-left: 0; border-top: 0; }
.cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border: 2px solid #f1ebdc88; border-radius: 50%; }
#vfFrame .rec { position: absolute; left: 8px; top: -30px; color: #ff4455; font: 800 16px var(--dot); }
#vfTime, #vfSpeed { position: absolute; top: -30px; font: 800 16px var(--dot); color: var(--paper); }
#vfTime { right: 8px; } #vfSpeed { left: 50%; transform: translateX(-50%); }
#vfStamp { position: absolute; left: 50%; top: 50%; font: 900 min(18vw, 96px)/1 var(--big); color: var(--stamp); border: 6px solid var(--stamp);
  padding: 2px 16px 0; transform: translate(-50%, -50%) rotate(-9deg) scale(2.4); opacity: 0; letter-spacing: .03em; }
#vfStamp.on { animation: slam .28s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes slam { to { transform: translate(-50%, -50%) rotate(-9deg) scale(1); opacity: .92; } }
.shutter { position: absolute; left: 50%; bottom: -74px; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%;
  border: 4px solid var(--paper); box-shadow: inset 0 0 0 6px #0a0b10, inset 0 0 0 30px var(--stamp); animation: pulse .7s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(1.18); } }
#flash { position: fixed; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }
#flash.go { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* paper that slides up from the printer slot */
.panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; padding: 14px 14px calc(var(--bottom) + 14px);
  background: linear-gradient(#23284F00, #16182ef2 18%); transform: translateY(110%); transition: transform .32s cubic-bezier(.2,.9,.3,1);
  max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.panel.on { transform: translateY(0); }
.paper canvas { display: block; width: auto; height: auto; max-width: min(92vw, 520px); max-height: calc(100vh - 290px); max-height: calc(100dvh - 290px);
  box-shadow: 0 10px 30px #0009; transform: rotate(-0.6deg); }
#ticket.on .paper canvas, #theirs.on .paper canvas { animation: print .45s cubic-bezier(.2,.9,.3,1); }
@keyframes print { from { transform: translateY(40px) rotate(-0.6deg); clip-path: inset(0 0 100% 0); } to { transform: translateY(0) rotate(-0.6deg); clip-path: inset(0 0 0 0); } }
.why { margin: 10px 4px 0; max-width: 520px; text-align: center; font: 500 16px/1.3 var(--lab); color: var(--paper); }
.best { margin: 8px 0 0; font: 900 18px var(--big); letter-spacing: .1em; color: var(--signal); min-height: 0; }
.best:empty { display: none; }
.side { display: flex; flex-direction: column; align-items: center; width: 100%; }
.row { display: flex; gap: 10px; margin-top: 12px; width: min(92vw, 520px); }
.big { flex: 1.3; min-height: 60px; background: var(--paper); color: var(--ink); font: 900 30px/1 var(--big); letter-spacing: .06em; padding: 8px 10px;
  box-shadow: 0 3px 0 #0006; }
.big small { display: block; font: 700 11px var(--lab); letter-spacing: .2em; margin-top: 4px; }
.send { flex: 1; min-height: 60px; background: var(--stamp); color: var(--paper); font: 900 22px/1.05 var(--big); letter-spacing: .06em; box-shadow: 0 3px 0 #0006; }
/* one tap into the two chat apps people share in most; the share sheet stays the main button */
.chats { margin-top: 8px; }
.chat { flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); text-decoration: none;
  font: 900 17px/1 var(--big); letter-spacing: .1em; padding: 6px 8px; box-shadow: 0 3px 0 #0006; border-left: 6px solid var(--paper); text-align: center; }
.chat.wa { border-left-color: #25D366; } .chat.tg { border-left-color: #2AABEE; }
.chat small { display: block; font: 700 10px var(--lab); letter-spacing: .2em; margin-top: 3px; opacity: .8; }
.slipPaper { background: var(--paper); color: var(--ink); width: min(92vw, 520px); padding: 16px 18px; transform: rotate(0.8deg);
  box-shadow: 0 8px 24px #0008; border-top: 6px dotted var(--dusk); }
.slipPaper b { font: 900 34px var(--big); letter-spacing: .08em; color: var(--ink); border: 3px solid var(--ink); padding: 0 8px; display: inline-block; transform: rotate(-3deg); }
.slipPaper h3 { margin: 10px 0 4px; font: 900 24px var(--big); letter-spacing: .04em; }
.slipPaper p { margin: 0; font: 500 16px/1.3 var(--lab); }
.banner { position: fixed; left: 50%; top: calc(var(--top) + 150px); transform: translateX(-50%); z-index: 3; background: var(--stamp); color: var(--paper);
  font: 900 20px var(--big); letter-spacing: .08em; padding: 8px 14px 6px; white-space: nowrap; display: none; }
.banner.on { display: block; }
#nogl { top: 40%; white-space: normal; max-width: 90vw; text-align: center; }

/* the record: a driving record, naturally */
.sheet { top: 0; background: var(--paper); color: var(--ink); align-items: stretch; overflow-y: auto; padding-top: calc(var(--top) + 16px); touch-action: pan-y; }
.sheetHead { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--ink); }
.sheet h2 { margin: 0; font: 900 28px var(--big); letter-spacing: .06em; }
#recordClose { background: none; font-size: 26px; min-width: 44px; min-height: 44px; }
.driver { font: 700 14px var(--lab); letter-spacing: .14em; margin: 12px 0 4px; }
.driver b { font: 800 22px var(--dot); letter-spacing: 0; margin: 0 6px; }
#newAlias, #moveBtn, #soundBtn { background: var(--ink); color: var(--paper); font: 700 12px var(--lab); letter-spacing: .12em; padding: 10px 12px; min-height: 44px; }
.bestsLine { font: 900 17px var(--big); letter-spacing: .06em; margin: 6px 0 10px; }
#recordList { list-style: none; margin: 0; padding: 0; }
#recordList li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #1F233033; }
#recordList b { font: 900 18px var(--big); letter-spacing: .04em; }
#recordList span { font: 500 14px var(--lab); text-align: right; }
#recordList li.todo { opacity: .38; }
#recordList li.secret b { color: var(--stamp); letter-spacing: .3em; }
#recordList li.secret span { font-style: italic; }
.small { font: 500 13px/1.4 var(--lab); margin: 14px 0 0; }
#toast { position: fixed; left: 50%; top: calc(var(--top) + 64px); transform: translate(-50%, -10px); z-index: 6; background: var(--ink); color: var(--paper);
  font: 700 15px var(--lab); letter-spacing: .06em; padding: 12px 16px; opacity: 0; transition: .25s; pointer-events: none; border-left: 5px solid var(--signal); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (orientation: landscape) and (max-height: 520px) {
  .gauge { margin-top: 6px; } #speed { font-size: 60px; } #curveName { display: none; }
  .panel:not(.sheet) { flex-direction: row; justify-content: center; align-items: center; gap: 18px; padding: 10px 14px; top: 0; background: #16182ef2; }
  .paper canvas { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); max-width: 44vw; }
  .side { width: min(46vw, 380px); } .row { width: 100%; } .why { max-width: 100%; }
  .slipPaper { width: min(46vw, 420px); }
}
@media (prefers-reduced-motion: reduce) {
  #flash.go { animation: flashSoft .5s ease-out; } @keyframes flashSoft { 0% { opacity: .3; } 100% { opacity: 0; } }
  .shutter { animation: none; } #vfStamp.on { animation: none; transform: translate(-50%, -50%) rotate(-9deg); opacity: .92; }
  .panel { transition: none; } #ticket.on .paper canvas, #theirs.on .paper canvas { animation: none; }
}