/* KartBlox (js/games/kart/). */

/* the Games menu page */
.kb-cup-art{ display: grid !important; grid-template-columns: 1fr 1fr; }
.kb-cup-art svg{ width: 100%; height: auto; }

/* the race */
.kb-root{ position: fixed; inset: 0; z-index: 90; background: #0c1422; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; }
.kb-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kb-loading{ position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 400 54px 'Lilita One', sans-serif; text-shadow: 0 4px 0 #0c1422; }
.kb-hud{ position: absolute; inset: 0; pointer-events: none; color: #fff; font-family: 'Lilita One', sans-serif;
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); }
.kb-hud > *{ position: absolute; }
.kb-tl{ top: calc(14px + var(--st)); left: calc(16px + var(--sl)); text-shadow: 0 3px 0 #0c1422; }
.kb-lap{ font-size: 34px; letter-spacing: .5px; }
.kb-lap b{ font-size: 48px; font-weight: 400; }
.kb-lap span{ font-size: 30px; opacity: .9; }
.kb-time{ font: 400 26px 'Lilita One', sans-serif; font-variant-numeric: tabular-nums; }
.kb-item{ top: calc(12px + var(--st)); left: 50%; transform: translateX(-50%); width: 96px; height: 96px; border-radius: 18px;
  background: rgba(12,20,34,.55); border: 4px solid #fff; box-shadow: 0 4px 0 #0c1422; display: grid; place-items: center; }
.kb-item.rolling{ border-color: #ffd93d; }
.kb-item-in{ width: 72px; height: 72px; position: relative; }
.kb-item-in svg{ width: 100%; height: 100%; }
.kb-uses{ position: absolute; right: -10px; bottom: -12px; font: 400 30px 'Lilita One', sans-serif; color: #fff; text-shadow: 0 3px 0 #0c1422; }
.kb-tr{ top: calc(6px + var(--st)); right: calc(18px + var(--sr)); }
.kb-place{ font: 400 92px/1 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 4px #0c1422; paint-order: stroke fill; text-shadow: 0 6px 0 #0c1422; }
.kb-place span{ font-size: 42px; vertical-align: top; margin-left: 2px; }
.kb-place.p1{ color: #ffd93d; } .kb-place.p2{ color: #dfe6ef; } .kb-place.p3{ color: #e5a35a; }
.kb-place.bump{ animation: kbbump .35s ease; }
@keyframes kbbump{ 40%{ transform: scale(1.18); } }
.kb-pause{ pointer-events: auto; top: calc(112px + var(--st)); right: calc(18px + var(--sr)); width: 58px; height: 58px; border-radius: 16px;
  background: rgba(12,20,34,.6); border: 3px solid #fff; display: grid; place-items: center; }
.kb-pause svg{ width: 30px; height: 30px; }
.kb-map{ left: calc(14px + var(--sl)); bottom: calc(14px + var(--sb)); border-radius: 16px; background: rgba(12,20,34,.35); }
.kb-msg{ left: 50%; top: 34%; transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: opacity .15s, transform .25s cubic-bezier(.2,1.6,.4,1);
  font: 400 110px/1 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 5px #0c1422; paint-order: stroke fill; text-shadow: 0 8px 0 #0c1422; text-align: center; white-space: nowrap; }
.kb-msg.on{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
.kb-msg.count{ font-size: 150px; color: #ffd93d; }
.kb-msg.go{ font-size: 160px; color: #5cf27a; }
.kb-msg.final, .kb-msg.lap{ font-size: 72px; color: #ffd93d; }
.kb-msg.wrong{ font-size: 64px; color: #ff4d5e; }
.kb-msg.name{ font-size: 64px; }
.kb-msg.finish{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kb-fin{ font-size: 100px; color: #fff; }
.kb-fin-place{ font-size: 80px; color: #ffd93d; }
.kb-boost{ inset: 0; opacity: 0; transition: opacity .2s; background: radial-gradient(ellipse at center, transparent 55%, rgba(255,170,40,.28) 100%); }
.kb-boost.on{ opacity: 1; }

/* results, standings, pause */
.kb-panel{ pointer-events: auto; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(12,20,34,.55); }
.kb-panel[hidden]{ display: none; }
.kb-card{ width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 22px; color: #1b2233; text-align: center;
  background: #fffaf0; border: 4px solid #1b2233; border-radius: 22px; box-shadow: 0 8px 0 #1b2233; max-height: calc(100% - 20px); overflow-y: auto; }
.kb-card.wide{ width: min(560px, 100%); }
.kb-card h2{ margin: 0; font: 400 38px 'Lilita One', sans-serif; }
.kb-rows{ display: flex; flex-direction: column; gap: 6px; }
.kb-row{ display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border: 3px solid #1b2233; border-radius: 12px;
  font: 800 19px Nunito, sans-serif; text-align: left; animation: kbin .35s ease both; }
.kb-row:nth-child(2){ animation-delay: .05s; } .kb-row:nth-child(3){ animation-delay: .1s; } .kb-row:nth-child(4){ animation-delay: .15s; }
.kb-row:nth-child(5){ animation-delay: .2s; } .kb-row:nth-child(6){ animation-delay: .25s; } .kb-row:nth-child(7){ animation-delay: .3s; } .kb-row:nth-child(8){ animation-delay: .35s; }
@keyframes kbin{ from{ opacity: 0; transform: translateX(-24px); } }
.kb-row.me{ background: #ffe9a8; }
.kb-row i{ width: 22px; height: 22px; border: 3px solid #1b2233; border-radius: 5px; flex: none; }
.kb-pos{ width: 52px; font: 400 24px 'Lilita One', sans-serif; }
.kb-name{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-t{ font-variant-numeric: tabular-nums; }
.kb-pts{ font: 400 22px 'Lilita One', sans-serif; color: #2f9cff; min-width: 44px; text-align: right; }
.kb-trophy{ margin: 0 auto; width: 110px; height: 110px; display: grid; place-items: center; border: 4px solid #1b2233; border-radius: 22px;
  font: 400 44px 'Lilita One', sans-serif; background: #dfe6ef; box-shadow: 0 6px 0 #1b2233; }
.kb-trophy.p1{ background: #ffd93d; } .kb-trophy.p3{ background: #e5a35a; }
.kb-acts{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kb-card > .kb-big{ width: 100%; }
.kb-big{ min-height: 64px; padding: 0 18px; border: 3px solid #1b2233; border-radius: 14px; background: #ffe600; color: #1b2233;
  font: 400 26px 'Lilita One', sans-serif; box-shadow: 0 5px 0 #1b2233; cursor: pointer; }
.kb-big.ghost{ background: #fffaf0; }
.kb-big:active{ transform: translateY(4px); box-shadow: 0 1px 0 #1b2233; }

/* phones: steer with the left of the screen, buttons on the right */
.kb-steer{ pointer-events: auto; left: 0; top: 130px; bottom: 0; width: 58%; }
.kb-btn{ pointer-events: auto; display: grid; place-items: center; border-radius: 50%; border: 4px solid rgba(255,255,255,.9);
  background: rgba(12,20,34,.45); box-shadow: 0 4px 0 rgba(12,20,34,.6); }
.kb-btn svg{ width: 52%; height: 52%; }
.kb-btn.on{ background: rgba(255,217,61,.55); transform: translateY(2px); }
.kb-drift{ width: 112px; height: 112px; right: calc(18px + var(--sr)); bottom: calc(26px + var(--sb)); }
.kb-use{ width: 96px; height: 96px; right: calc(44px + var(--sr)); bottom: calc(158px + var(--sb)); background: rgba(255,77,94,.5); }
.kb-brake{ width: 84px; height: 84px; right: calc(150px + var(--sr)); bottom: calc(30px + var(--sb)); }
.kb-hud.touch .kb-map{ left: auto; bottom: auto; top: calc(110px + var(--st)); left: calc(12px + var(--sl)); }
.kb-hud.touch .kb-place{ font-size: 70px; }
.kb-hud.touch .kb-place span{ font-size: 32px; }
.kb-hud.touch .kb-item{ width: 84px; height: 84px; }
.kb-hud.touch .kb-item-in{ width: 60px; height: 60px; }
.kb-hud.touch .kb-pause{ top: calc(90px + var(--st)); }
.kb-hud.touch .kb-lap{ font-size: 28px; } .kb-hud.touch .kb-lap b{ font-size: 40px; }
.kb-hud.touch .kb-time{ font-size: 22px; }
.kb-hud.touch .kb-msg{ font-size: 70px; }
.kb-hud.touch .kb-msg.count, .kb-hud.touch .kb-msg.go{ font-size: 120px; }
.kb-hud.touch .kb-msg.final, .kb-hud.touch .kb-msg.lap, .kb-hud.touch .kb-msg.name, .kb-hud.touch .kb-msg.wrong{ font-size: 46px; }
.kb-hud.touch .kb-fin{ font-size: 72px; } .kb-hud.touch .kb-fin-place{ font-size: 60px; }