@font-face { font-family: 'Unbounded'; src: url(fonts/Unbounded.ttf); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(fonts/Manrope.ttf); font-weight: 200 800; font-display: swap; }

:root { --navy: #1b3a57; --ink: #0d1520; --yellow: #ffd23f; --red: #e5202e; --green: #2fbf71; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #9fd6ff; font-family: 'Manrope', sans-serif;
  color: var(--navy); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(ellipse at center, rgba(255,40,40,0) 35%, rgba(230,20,30,.7) 100%); }
#flash.on { opacity: 1; }
button { font: inherit; cursor: pointer; }

/* ---------- экраны ---------- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(13,21,32,.35); overflow-y: auto; }
.screen[hidden] { display: none; }
.card { width: min(560px, 100%); background: #fff; border-radius: 24px; padding: 26px 24px; box-shadow: 0 10px 0 var(--navy);
  max-height: calc(100vh - 32px); overflow-y: auto; animation: pop .35s cubic-bezier(.3,1.6,.6,1); }
@keyframes pop { from { transform: scale(.8); opacity: 0; } }
.brand { font: 900 30px/1.05 'Unbounded'; color: var(--navy); }
.brand b { color: #f0a500; }
.sub { font-weight: 700; opacity: .75; margin: 6px 0 18px; }
.place { display: inline-block; background: var(--yellow); border-radius: 10px; padding: 6px 12px; font: 800 14px 'Unbounded';
  box-shadow: 0 4px 0 var(--navy); margin-bottom: 16px; }
.xpbar { font: 800 15px 'Manrope'; margin-bottom: 12px; }
.list { display: grid; gap: 10px; }
.lvl { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; border: 3px solid var(--navy);
  background: #f7f3e8; border-radius: 16px; padding: 12px 14px; box-shadow: 0 4px 0 var(--navy); transition: transform .1s; }
.lvl:hover { transform: translateY(-2px); }
.lvl:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--navy); }
.lvl .n { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: #fff;
  display: grid; place-items: center; font: 900 20px 'Unbounded'; }
.lvl.done .n { background: var(--green); }
.lvl .t { font: 800 16px/1.2 'Manrope'; }
.lvl .d { font-size: 13px; opacity: .7; margin-top: 3px; }
h2 { font: 900 22px/1.15 'Unbounded'; margin: 4px 0 12px; }
.tag { display: inline-block; font: 800 12px 'Manrope'; text-transform: uppercase; letter-spacing: .5px; background: #e8eef5;
  border-radius: 8px; padding: 4px 8px; margin-bottom: 8px; }
.q { font: 700 18px/1.35 'Manrope'; margin: 0 0 14px; }
.opts { display: grid; gap: 8px; }
.opt { text-align: left; border: 3px solid #cfd8e3; background: #fff; border-radius: 14px; padding: 12px 14px; font: 700 15px/1.3 'Manrope'; }
.opt:hover:not(:disabled) { border-color: var(--navy); }
.opt.right { border-color: var(--green); background: #e6f8ee; }
.opt.wrong { border-color: var(--red); background: #fde8ea; }
.explain { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #f7f3e8; font: 600 15px/1.4 'Manrope'; }
.explain b { font-weight: 800; }
.src { font-size: 12px; opacity: .6; margin-top: 8px; }
.btn { display: block; width: 100%; margin-top: 16px; border: 0; border-radius: 16px; padding: 16px; font: 900 18px 'Unbounded';
  background: var(--yellow); color: var(--navy); box-shadow: 0 6px 0 var(--navy); }
.btn:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--navy); }
.btn.ghost { background: #e8eef5; }
.row { display: flex; gap: 10px; } .row .btn { flex: 1; }
.keys { font-size: 13px; opacity: .7; margin-top: 12px; line-height: 1.5; }
kbd { font: 800 12px 'Manrope'; background: #e8eef5; border-radius: 6px; padding: 1px 6px; border: 1px solid #cfd8e3; }

/* результат */
.stamp { text-align: center; font: 900 30px/1.05 'Unbounded'; color: #fff; background: var(--red); border: 6px solid #fff;
  outline: 3px solid var(--red); border-radius: 18px; padding: 16px 8px; transform: rotate(-3deg); margin: 6px 0 16px; }
.stamp.ok { background: var(--green); outline-color: var(--green); transform: rotate(2deg); }
.fine { text-align: center; font: 900 52px/1 'Unbounded'; color: var(--red); margin-bottom: 4px; }
.xp { text-align: center; font: 900 46px/1 'Unbounded'; color: #f0a500; margin-bottom: 4px; }
.law { text-align: center; font: 800 14px 'Manrope'; opacity: .75; margin-bottom: 10px; }
.bubble { position: relative; background: #e8eef5; border-radius: 18px; padding: 12px 16px; font: 800 16px/1.3 'Manrope';
  margin: 14px 0 0 56px; }
.bubble::before { content: '👮'; position: absolute; left: -54px; top: 50%; transform: translateY(-50%); font-size: 40px; }
.fic { font-size: 11px; opacity: .5; margin-top: 4px; text-align: right; }

/* ---------- HUD ---------- */
#hud[hidden] { display: none; }
.hud-top { position: fixed; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; pointer-events: none; }
.task { background: rgba(13,21,32,.82); color: #fff; border-radius: 14px; padding: 10px 14px; font: 800 15px/1.3 'Manrope';
  max-width: 420px; margin-left: 52px; }
.task small { display: block; font-weight: 600; opacity: .7; }
.right { display: flex; gap: 10px; align-items: flex-start; }
.speed { background: rgba(13,21,32,.82); color: #fff; border-radius: 14px; padding: 8px 14px; font: 800 30px/1 'Unbounded'; min-width: 110px; text-align: right; }
.speed small { font: 700 13px 'Manrope'; opacity: .7; margin-left: 4px; }
.speed.over { background: var(--red); }
.tl { background: #1d232c; border-radius: 12px; padding: 7px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 4px 0 var(--ink); }
.tl[hidden], .limit[hidden], .belt[hidden] { display: none; }
.tl i { width: 24px; height: 24px; border-radius: 6px; background: #3a414c; display: block; }
.limit { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 7px solid var(--red); display: grid; place-items: center;
  font: 900 20px 'Unbounded'; color: #111; }
.hint { position: fixed; left: 50%; top: 96px; transform: translateX(-50%); background: var(--yellow); color: var(--navy);
  border-radius: 14px; padding: 10px 16px; font: 800 16px 'Manrope'; box-shadow: 0 5px 0 var(--navy); pointer-events: none;
  opacity: 0; transition: opacity .25s; text-align: center; max-width: 90vw; }
.hint.on { opacity: 1; }
.belt { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); border: 4px solid #fff; border-radius: 16px;
  background: var(--red); color: #fff; font: 900 18px 'Unbounded'; padding: 14px 20px; box-shadow: 0 6px 0 #7d0f17; }
.belt.on { background: var(--green); box-shadow: 0 6px 0 #13663a; }
.pedals { position: fixed; bottom: 18px; left: 12px; right: 12px; display: flex; justify-content: space-between; pointer-events: none; }
.pedal { pointer-events: auto; width: min(42vw, 190px); height: 96px; border: 4px solid #fff; border-radius: 22px; color: #fff;
  font: 900 20px 'Unbounded'; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  touch-action: none; opacity: .92; }
.pedal small { font: 700 11px 'Manrope'; opacity: .8; }
.pedal.brake { background: var(--red); box-shadow: 0 7px 0 #7d0f17; }
.pedal.gas { background: var(--green); box-shadow: 0 7px 0 #13663a; }
.pedal.down { transform: translateY(5px); box-shadow: none; }
.menu-btn { position: fixed; top: 12px; left: 12px; width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: rgba(13,21,32,.82); color: #fff; font-size: 22px; }

.attr { position: fixed; right: 8px; bottom: 124px; font: 700 11px 'Manrope'; color: #fff; background: rgba(13,21,32,.55);
  padding: 3px 8px; border-radius: 8px; pointer-events: none; }

@media (min-width: 900px) {
  .pedal { height: 80px; }
  .attr { bottom: 8px; right: 50%; transform: translateX(50%); }
}

/* выбор поворота */
.choose { position: fixed; left: 50%; bottom: 140px; transform: translateX(-50%); display: flex; gap: 12px; }
.choose[hidden] { display: none; }
.choose button { border: 4px solid #fff; border-radius: 16px; background: var(--navy); color: #fff; font: 900 17px 'Unbounded';
  padding: 14px 18px; box-shadow: 0 6px 0 var(--ink); touch-action: none; }
.choose button.sel { background: var(--yellow); color: var(--navy); }
.fine.long { font-size: 30px; line-height: 1.15; }
.speed { white-space: nowrap; }
.screen { padding-bottom: 30px; }
@media (max-width: 600px) {
  .attr { bottom: 3px; right: 50%; transform: translateX(50%); font-size: 10px; padding: 2px 7px; }
  .pedals { bottom: 26px; }
  .pedal { height: 84px; }
  .choose { bottom: 128px; }
  .task { font-size: 13px; padding: 8px 10px; max-width: calc(100vw - 210px); }
  .task small { font-size: 11px; }
  .speed { font-size: 24px; min-width: 0; padding: 8px 10px; }
  .stamp { font-size: 24px; }
  .fine { font-size: 40px; }
}