@import url('vendor/fonts-local.css');

:root{
  --ink:#17140f;
  --ink-soft:#241f16;
  --yellow:#f4b400;
  --yellow-dim:#caa233;
  --meter-red:#ff4433;
  --permit:#e4d3ab;
  --brass:#9c8752;
  --green:#3fae62;
}

html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);font-family:'Rajdhani',sans-serif}
canvas#game{position:fixed;inset:0;width:100%;height:100%}

/* ---------- MONSOON: a faint lens vignette; the rain itself is drawn in the scene ---------- */
#rainOverlay{
  position:fixed;inset:0;z-index:15;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,rgba(90,110,130,0) 45%,rgba(60,75,95,.28) 100%);
}
}

.meter{font-family:'VT323',monospace;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.label{font-family:'Rajdhani',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1.6px}

/* ---------- HUD: fare meter unit + gauge cluster + switches + permit card ---------- */
#hud{position:fixed;z-index:20;left:10px;right:10px;top:10px;display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;pointer-events:none}

/* meter unit — mounted fare-meter box, red LED digits, hire flag */
#meterUnit{position:relative;background:linear-gradient(180deg,#1c1812,#0d0b08);border:1px solid #000;border-radius:3px;padding:6px 16px 7px;box-shadow:inset 0 0 0 1px #3a3226,0 3px 10px #0009;min-width:98px}
#meterUnit::before,#meterUnit::after{content:"";position:absolute;top:4px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#9c8752,#3a3226);box-shadow:0 0 0 1px #000}
#meterUnit::before{left:4px}
#meterUnit::after{right:4px}
.meterLabel{font:700 8px/1 'Rajdhani',sans-serif;letter-spacing:2px;color:#7a6c4d;text-align:center}
#cash{display:block;font-family:'VT323',monospace;font-size:27px;line-height:1;color:#ff3b30;text-shadow:0 0 6px #ff3b3099,0 0 1px #ff3b30;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:1px;margin-top:3px}
#hireFlag{margin-top:4px;text-align:center;font:700 9px/1 'Rajdhani',sans-serif;letter-spacing:1.5px;padding:2px 0;border-radius:2px;background:#2a2118;color:#8a7a55}
#hireFlag.hired{background:#39d353;color:#0d1a0f}

/* gauge cluster — speed / fuel / shift clock, labeled like dash gauges */
#gaugeCluster{display:flex;background:linear-gradient(180deg,rgba(36,31,22,.92),rgba(23,20,15,.92));border:1px solid var(--brass);border-radius:5px;padding:6px 4px 5px;box-shadow:0 2px 8px #0007}
.gauge{display:flex;flex-direction:column;align-items:center;padding:0 9px;position:relative;min-width:58px}
.gauge:not(:last-child)::after{content:"";position:absolute;right:0;top:10%;bottom:10%;width:1px;background:#9c875255}
.gauge span{font-family:'VT323',monospace;font-size:17px;color:var(--permit);font-variant-numeric:tabular-nums}
#speed{color:var(--meter-red)!important}
.gauge small{display:block;font:700 8px/1 'Rajdhani',sans-serif;letter-spacing:1.5px;color:#7a6c4d;margin-top:2px}

/* dash switches */
#switchRow{display:flex;align-items:center;gap:7px;background:linear-gradient(180deg,rgba(36,31,22,.92),rgba(23,20,15,.92));border:1px solid var(--brass);border-radius:5px;padding:5px 8px;box-shadow:0 2px 8px #0007}
.toggleSw{pointer-events:auto;cursor:pointer;position:relative;width:36px;height:19px;border-radius:10px;border:1px solid var(--brass);background:#2a2118;padding:0;flex:none}
.toggleSw .nub{position:absolute;top:1px;left:1px;width:15px;height:15px;border-radius:50%;background:linear-gradient(180deg,#e4d3ab,#9c8752);transition:left .15s ease}
.toggleSw:not(.off) .nub{left:18px;background:linear-gradient(180deg,#6ee89a,#2f9e55)}
.hudBtn{pointer-events:auto;cursor:pointer;background:linear-gradient(180deg,#2c2519,#181410);color:var(--yellow);border:1px solid var(--brass);border-radius:5px;padding:5px 10px;font:700 11px 'Rajdhani',sans-serif;letter-spacing:1px;text-transform:uppercase;box-shadow:inset 0 1px 0 #ffffff14,0 2px 4px #0007}
.hudBtn.off{opacity:.45;color:#ccc}

/* permit card — taped-on RTO/reputation card */
#permitCard{position:relative;margin-left:auto;background:linear-gradient(155deg,#efe2bd,#dcc998);border-radius:3px;padding:8px 16px 6px;transform:rotate(-2.5deg);box-shadow:0 3px 8px #0007,inset 0 0 0 1px #b8a367;min-width:96px}
#permitCard .tapeL,#permitCard .tapeR{position:absolute;top:-7px;width:26px;height:14px;background:#cfcabd;opacity:.55;box-shadow:0 1px 2px #0005}
#permitCard .tapeL{left:-6px;transform:rotate(-25deg)}
#permitCard .tapeR{right:-6px;transform:rotate(25deg)}
.permitLabel{font:700 8px/1 'Rajdhani',sans-serif;letter-spacing:1.5px;color:#7a5a2e;text-align:center}
#rep{display:block;font-family:'VT323',monospace;font-size:21px;color:#5a4322;text-align:center;margin-top:2px}
.permitNo{font-family:'VT323',monospace;font-size:10px;letter-spacing:1px;color:#8a6f3e;text-align:center;margin-top:1px}

/* ---------- Trip callout (permit banner) ---------- */
/* pointer-events:none -- this is a readout with no clickable children, so it shouldn't swallow
   taps meant for the tap-anywhere-to-go layer underneath it */
#tripBox{position:fixed;z-index:20;top:60px;left:50%;transform:translateX(-50%);min-width:280px;text-align:center;background:linear-gradient(180deg,var(--ink-soft),var(--ink));color:#fff;border:1px solid var(--brass);border-top:3px solid var(--yellow);border-radius:2px 2px 8px 8px;padding:8px 16px;box-shadow:0 3px 10px #0008;pointer-events:none}
#tripTitle{font-family:'Yatra One',cursive;font-weight:400;font-size:16px;color:var(--yellow);letter-spacing:.5px}
#tripSub{font-family:'VT323',monospace;font-size:15px;margin-top:2px;color:var(--permit);letter-spacing:.3px}

/* ---------- Minimap ---------- */
/* bottom-left on wide screens, clear of the horn/brake on the right; on phones it moves up
   under the trip banner (see the max-width:480px block) so the steering thumb never covers it */
/* pointer-events:none -- pure readout, no clickable children, so it shouldn't swallow taps
   meant for the tap-anywhere-to-go layer underneath it */
#miniWrap{position:fixed;z-index:20;left:12px;bottom:130px;background:var(--ink-soft);border:1px solid var(--brass);padding:5px;border-radius:8px;box-shadow:0 2px 8px #0007;pointer-events:none}
#mini{display:block;width:230px;height:230px;background:#1d1d1d;image-rendering:pixelated;border-radius:3px}
#miniLegend{font-family:'Rajdhani',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--permit);font-size:11px;padding:5px 2px 0;text-align:center}
#miniLegend span{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 4px 0 10px}.yellow{background:var(--yellow)}.green{background:var(--green)}.orange{background:#ff7a2f}

/* ---------- Panels (permit cards) ---------- */
.panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;background:var(--ink);color:#fff;border:1px solid var(--brass);border-radius:4px;padding:22px 20px 20px;width:min(86vw,420px);box-shadow:0 12px 40px #000a;max-height:calc(100dvh - 170px);overflow-y:auto;overscroll-behavior:contain}
.panel::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:6px;background:repeating-linear-gradient(135deg,var(--yellow) 0 10px,var(--ink) 10px 20px);border-radius:4px 4px 0 0}
.panel h2{margin:10px 0 6px;font-family:'Yatra One',cursive;font-weight:400;font-size:22px;color:var(--yellow)}
.panel p{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:16px;color:var(--permit);margin:4px 0}
#routeLine{color:#fff!important;font-weight:700!important}
.panel button{width:100%;padding:12px;margin-top:9px;font:700 15px 'Rajdhani',sans-serif;letter-spacing:1px;text-transform:uppercase;border-radius:5px;cursor:pointer;border:1px solid var(--brass);background:var(--ink-soft);color:#fff}
.panel button[data-fare="1"]{border-color:var(--green);color:var(--green)}
.panel button[data-fare="1.25"]{border-color:var(--yellow);color:var(--yellow)}
.panel button[data-fare="1.55"]{border-color:var(--meter-red);color:var(--meter-red)}
.panel button small{display:block;font-family:'Rajdhani',sans-serif;font-weight:600;text-transform:none;letter-spacing:0;font-size:11px;opacity:.65;margin-top:2px}
#refuse{opacity:.7}
#watchAdBtn{border-color:#4c9fd9;color:#4c9fd9}
#watchAdBtn:disabled{opacity:.45;cursor:default}
.hidden{display:none}

/* ---------- Garage ---------- */
#garageList{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.garageItem{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:5px;border:1px solid var(--brass);background:var(--ink-soft);color:#fff;cursor:pointer;font-family:'Rajdhani',sans-serif}
.garageItem:disabled{cursor:default;opacity:.55}
.garageItem.owned{border-color:var(--green)}
.garageItem .gName{grid-column:1;grid-row:1;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:14px;color:var(--yellow)}
.garageItem.owned .gName{color:var(--green)}
.garageItem .gDesc{grid-column:1;grid-row:2;font-size:12px;opacity:.75}
.garageItem .gCost{grid-column:2;grid-row:1/3;align-self:center;font-family:'VT323',monospace;font-size:20px;color:var(--permit)}

/* ---------- Tap-anywhere-to-go: invisible full-screen layer under the HUD/controls that
   stands in for the old dedicated GO button -- gas is the control you hold down almost the
   whole drive, so the whole screen is a much easier target than one small button. Sits above
   the canvas but below every HUD/control element (which all have higher z-index), so nothing
   else loses its own clicks. ---------- */
#gasZone{position:fixed;inset:0;z-index:12;touch-action:none;pointer-events:auto;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}

/* ---------- On-screen controls ---------- */
#controls{position:fixed;right:20px;bottom:16px;z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
#controls::before{content:"";position:fixed;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#9c875266,transparent);z-index:29}
#controls button{pointer-events:auto;touch-action:none;border:1px solid var(--brass);border-radius:10px;background:var(--ink-soft);color:#fff;font:700 17px 'Rajdhani',sans-serif;letter-spacing:.5px;min-width:70px;min-height:58px}
#horn{background:var(--yellow)!important;color:var(--ink)!important;border-color:var(--yellow)!important;font-weight:800!important}
.go{background:var(--green)!important;border-color:var(--green)!important}
@media(min-width:900px) and (hover:hover) and (pointer:fine){#controls{opacity:.48}}

/* floating steering joystick: hidden until a thumb lands on the left half of the screen, then
   drawn centred under it (game.js sets left/top). Purely visual -- #gasZone owns the touches. */
.joystick{position:fixed;z-index:25;display:none;transform:translate(-50%,-50%);pointer-events:none;width:104px;height:104px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#241f16,#0d0b08);border:2px solid var(--brass);box-shadow:inset 0 0 0 1px #3a3226,0 3px 10px #0009;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.joyKnob{position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:linear-gradient(180deg,#e4d3ab,#9c8752);border:1px solid var(--brass);box-shadow:0 2px 6px #0007;transition:transform .12s ease}
.joystick.on{display:block}
.joystick.on .joyKnob{transition:none;background:linear-gradient(180deg,#6ee89a,#2f9e55);box-shadow:0 0 0 6px #3fae6233,0 2px 6px #0007}

/* first-drive hint for touch screens: one faint label per half, gone after the first touch */
#touchHint{display:none;position:absolute;left:0;right:0;bottom:22%;pointer-events:none;justify-content:space-around;font:700 15px 'Rajdhani',sans-serif;letter-spacing:2px;color:#fff;opacity:.62;text-shadow:0 1px 3px #000}
#touchHint span{text-align:center}
#touchHint small{display:block;font-size:11px;letter-spacing:1px;opacity:.8;text-transform:uppercase}
#touchHint.gone{display:none!important}
.touch-hint{display:none;margin:10px 0 0;font-size:12px;letter-spacing:1px;opacity:.55}
@media (hover:none) and (pointer:coarse){#touchHint{display:flex}.touch-hint{display:block}}

/* ---------- Title screen ---------- */
#titleScreen{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:opacity .5s ease}
#titleScreen.hidden{opacity:0;pointer-events:none}
#titleScreen .plate{border:3px solid var(--yellow);border-radius:8px;padding:26px 40px 22px;position:relative;box-sizing:border-box;max-width:min(380px,calc(100vw - 60px))}
#titleScreen .plate::before,#titleScreen .plate::after{content:"";position:absolute;top:8px;bottom:8px;width:6px;background:repeating-linear-gradient(180deg,var(--yellow) 0 8px,var(--ink) 8px 16px)}
#titleScreen .plate::before{left:-13px}
#titleScreen .plate::after{right:-13px}
#titleScreen h1{font-family:'Yatra One',cursive;font-weight:400;font-size:min(15vw,72px);color:var(--yellow);margin:0;letter-spacing:1px}
#titleScreen .reg{font-family:'VT323',monospace;font-size:19px;color:var(--permit);letter-spacing:3px;margin-top:4px}
#titleScreen .tag{font-family:"Rajdhani",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:#9c8752;font-size:12px;margin-top:10px}
#titleScreen #scStreak{color:var(--yellow);margin-top:14px}
#titleScreen .go{font-family:'Rajdhani',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--ink);background:var(--yellow);border-radius:5px;padding:11px 26px;margin-top:16px;font-size:14px;animation:pulse 1.6s ease-in-out infinite;border:none;cursor:pointer}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
@media (prefers-reduced-motion: reduce){#titleScreen .go{animation:none}}

/* ---------- Shift Card (evening shift briefing) ---------- */
#titleScreen .shiftCardBody{margin-top:18px;text-align:left;min-width:230px}
#titleScreen .scHeading{font-family:'Yatra One',cursive;font-size:20px;color:var(--yellow);text-align:center;letter-spacing:1px}
#titleScreen .scHours{font-family:'VT323',monospace;font-size:16px;color:var(--permit);text-align:center;letter-spacing:1px;margin-bottom:10px}
#titleScreen .scRow{display:flex;justify-content:space-between;gap:16px;font-family:'Rajdhani',sans-serif;font-weight:600;color:#c9bd9e;font-size:13px;text-transform:uppercase;letter-spacing:1px;padding:3px 0;border-bottom:1px dashed #9c875233}
#titleScreen .scRow b{font-family:'VT323',monospace;font-size:16px;color:#fff;letter-spacing:.5px}
#titleScreen .scMeta,#titleScreen #scMeta{margin-top:14px}

/* ---------- Shift results ---------- */
#walletAmt{color:var(--yellow)}
.bestBanner{text-align:center;font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:1px;color:var(--ink);background:var(--yellow);border-radius:4px;padding:5px 0;margin:2px 0 8px;text-transform:uppercase}
.profitLine{font-size:19px!important;font-weight:700;color:var(--yellow)!important}
#resTarget{font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:13px}
#resTarget.hit{color:var(--green)!important}
#resTarget.miss{color:var(--meter-red)!important}
.scEvent{font-family:"Rajdhani",sans-serif;font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--yellow);margin:8px 0 4px;text-align:center}
.scGoal{display:flex;justify-content:space-between;gap:10px;font-family:"Rajdhani",sans-serif;font-weight:600;font-size:13px;padding:3px 0;border-top:1px dashed #3a3326;color:var(--permit)}
.scGoal b{color:var(--yellow)}
.scGoal.done{opacity:.55;text-decoration:line-through}
.scGoal.done b{color:var(--green);text-decoration:none}
#resGoals div{font-family:"Rajdhani",sans-serif;font-weight:700;font-size:13px;color:var(--green);letter-spacing:.5px;margin:2px 0}
#resStreak{font-size:12px;opacity:.85}
.linkBtn{background:none!important;border:none!important;color:#9c8752!important;font:600 12px "Rajdhani",sans-serif!important;letter-spacing:2px;text-transform:uppercase;margin-top:6px!important;padding:6px 10px!important;cursor:pointer;animation:none!important}
#scrapList{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow-y:auto;margin:6px 0}
.clip{background:#f1e9d2;color:#2a2418;padding:8px 10px;border-left:4px solid var(--yellow);transform:rotate(-.4deg);font-family:"Rajdhani",sans-serif}
.clip:nth-child(even){transform:rotate(.5deg)}
.clip b{display:block;font-size:14px;letter-spacing:1px;text-transform:uppercase}
.clip span{font-size:13px;font-weight:600}
.clip.locked{background:#2b2620;color:#8a7f6b;border-left-color:#4a4134;transform:none}
#scrapPanel{z-index:130}
#resWear{font-size:12px;opacity:.8}
#askBox{position:fixed;z-index:21;top:128px;left:50%;transform:translateX(-50%);width:min(88vw,360px);background:var(--ink);border:1px solid var(--yellow);border-radius:5px;padding:8px 10px 8px;box-shadow:0 8px 24px #000a}
#askBox.hidden{display:none}
#askText{font-family:"Rajdhani",sans-serif;font-weight:600;font-size:14px;color:#f1e9d2;text-align:center;margin-bottom:6px}
.askRow{display:flex;gap:8px}
.askRow button{flex:1;padding:6px 6px;font:700 13px "Rajdhani",sans-serif;letter-spacing:1px;border-radius:4px;border:1px solid var(--brass);background:var(--ink-soft);color:#fff;cursor:pointer}
.askRow button small{display:block;font-weight:600;font-size:10px;opacity:.7;text-transform:none;letter-spacing:0}
#askYes{border-color:var(--green);color:var(--green)}
@media(max-width:480px){#askBox{top:224px}}
#resTomorrow{font-size:12px;opacity:.78;margin-top:-2px}
#resumeShiftBtn{background:transparent!important;color:var(--yellow)!important;border:2px solid var(--yellow)!important;animation:none!important}
#resOvertime{font-size:12px!important;opacity:.7}
.roast{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:12px!important;font-style:italic;color:var(--brass)!important;opacity:.85;letter-spacing:.5px;margin:6px 0 0!important}

/* ---------- Shift toast (target hit / time warnings) ---------- */
#shiftToast{position:fixed;z-index:26;top:96px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,var(--ink-soft),var(--ink));border:1px solid var(--yellow);color:var(--yellow);font:700 13px/1 'Rajdhani',sans-serif;letter-spacing:1.4px;text-transform:uppercase;padding:9px 18px;border-radius:5px;box-shadow:0 3px 10px #0008;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;text-align:center}
#shiftToast.show{opacity:1;transform:translateX(-50%) translateY(4px)}

/* ---------- Narrow/portrait phones: the HUD row, trip banner and minimap were all tuned for a
   wide viewport and collide on a real phone screen -- this compacts and re-stacks them so
   nothing overlaps. ---------- */
@media(max-width:480px){
  .panel{top:72px;transform:translateX(-50%);max-height:calc(100dvh - 72px - 150px);padding:14px 16px 14px}
  .panel p{font-size:14px;margin:2px 0}
  .panel button{padding:10px;margin-top:6px}
  .panel h2{margin:4px 0 4px;font-size:20px}
  #hud{gap:6px}
  #meterUnit{padding:4px 10px 5px;min-width:0}
  .meterLabel{font-size:7px}
  #cash{font-size:19px;margin-top:2px}
  #hireFlag{font-size:8px}
  #gaugeCluster{padding:4px 2px 4px}
  .gauge{padding:0 6px;min-width:42px}
  .gauge span{font-size:14px}
  .gauge small{font-size:6.5px}
  #switchRow{padding:4px 6px;gap:5px}
  .toggleSw{width:30px;height:16px}
  .toggleSw .nub{width:12px;height:12px}
  .toggleSw:not(.off) .nub{left:15px}
  .hudBtn{padding:4px 7px;font-size:9px}
  #permitCard{padding:5px 10px 4px;min-width:0}
  .permitLabel{font-size:6.5px}
  #rep{font-size:15px}
  .permitNo{font-size:7.5px}

  /* trip banner: pushed down far enough to clear the HUD row even once it wraps to two lines
     (measured: HUD row bottom lands around 118-120px on a 390px-wide phone) */
  #tripBox{top:128px;width:88vw;min-width:0;padding:6px 12px}
  #tripTitle{font-size:14px}
  #tripSub{font-size:13px}
  #shiftToast{top:186px}

  /* minimap: shrunk and lifted to just under the trip banner, out of the bottom-left where the
     left thumb lands to steer (a floating joystick there would cover it mid-turn) */
  #miniWrap{left:10px;right:auto;top:192px;bottom:auto;padding:3px}
  #mini{width:92px;height:92px}
  #miniLegend{font-size:0;padding:3px 0 0;line-height:0}
  #miniLegend span{width:6px;height:6px;margin:0 4px}

  /* controls: joystick kept close to full size (it's the one you hold for the whole turn) while
     horn/brake shrink a little so everything fits on a narrow screen */
  #controls{right:12px;bottom:12px}
  .joystick{width:92px;height:92px}
  .joyKnob{width:42px;height:42px;margin:-21px 0 0 -21px}
  #controls button{min-width:58px;min-height:50px;font-size:14px}
}

/* Desktop-only keyboard hint: hidden on touch devices, shown where there's a real pointer. */
.kbd-hint{display:none;}
@media (hover:hover) and (pointer:fine){
  .kbd-hint{
    display:block;
    margin:10px 0 0;
    font-size:12px;
    letter-spacing:1px;
    opacity:0.55;
  }
}

/* ---------- career mode: message panel over the shift card ---------- */
#cmShade{position:fixed;inset:0;z-index:109;background:#0e0c08e6}
#careerMsg{z-index:110}
#careerMsg .cmCard{font-family:'VT323',monospace;font-size:15px;letter-spacing:2px;color:var(--permit);margin-top:8px}
#careerMsg h2{font-size:18px}
#careerMsg p{font-size:17px;line-height:1.3}

/* short phones (browser toolbars showing): the shift card must fit without clipping */
@media(max-height:720px){
  #titleScreen{overflow-y:auto;justify-content:flex-start;padding:8px 0 10px}
  #titleScreen .plate{padding:10px 26px 8px;margin-top:4px}
  #titleScreen h1{font-size:min(11vw,44px)}
  #titleScreen .reg{font-size:14px;letter-spacing:2px;margin-top:1px}
  #titleScreen .shiftCardBody{margin-top:6px}
  #titleScreen .scHeading{font-size:17px}
  #titleScreen .scHours{font-size:13px;margin-bottom:3px}
  #titleScreen .scRow{padding:1px 0;font-size:12px}
  #titleScreen .scRow b{font-size:14px}
  .scEvent{margin:4px 0 2px;font-size:11px}
  .scGoal{padding:1px 0;font-size:12px}
  #titleScreen .tag{margin-top:5px;font-size:11px}
  #titleScreen #scStreak{margin-top:7px}
  #titleScreen .go{padding:8px 20px;margin-top:8px;font-size:13px}
  .linkBtn{margin-top:0!important;padding:3px 10px!important;font-size:11px!important}
  .kbd-hint{display:none!important}
}