* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0f17; }
body { font-family: 'Russo One', system-ui, -apple-system, sans-serif; color: #f2f4f8; user-select: none; }
canvas { display: block; }

.overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(10, 14, 24, 0.72), rgba(4, 6, 12, 0.92));
  backdrop-filter: blur(3px); z-index: 10; padding: 16px;
}
#shop { z-index: 20; }
.hidden { display: none !important; }

.panel {
  width: min(640px, 100%); max-height: 100%; overflow: auto;
  background: linear-gradient(160deg, #1a2234, #121827);
  border: 2px solid #2d3a55; border-radius: 18px; padding: 28px 30px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: center;
}
.panel.wide { width: min(920px, 100%); }

h1 { font-size: clamp(30px, 6vw, 54px); letter-spacing: 2px; line-height: 1.05;
  background: linear-gradient(180deg, #ffe066, #ff7b1c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #6b2200); }
h1 span { background: linear-gradient(180deg, #a6ff6b, #2fa84f); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-size: 34px; margin-bottom: 10px; color: #ffd84a; }
h2.danger { color: #ff4d4d; }
.sub { color: #9fb0cf; margin: 10px 0 20px; font-family: system-ui, sans-serif; }

.controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; text-align: left; margin: 0 auto 18px; max-width: 460px;
  font-family: system-ui, sans-serif; font-size: 15px; color: #d6deee; }
kbd { display: inline-block; min-width: 26px; padding: 2px 7px; margin-right: 4px; border-radius: 6px; text-align: center;
  background: #2b3550; border: 1px solid #4a5a80; border-bottom-width: 3px; font-family: system-ui, sans-serif; font-size: 13px; color: #fff; }
.tips { list-style: none; text-align: left; font-family: system-ui, sans-serif; font-size: 14px; color: #b9c6df; margin: 0 auto 22px; max-width: 520px; line-height: 1.7; }

button.big { font-family: inherit; font-size: 22px; padding: 12px 34px; border-radius: 12px; border: none; cursor: pointer; color: #1a1200;
  background: linear-gradient(180deg, #ffd84a, #ff9a1c); box-shadow: 0 5px 0 #a35400; transition: transform .08s; }
button.big:active { transform: translateY(3px); box-shadow: 0 2px 0 #a35400; }
button.big small { font-size: 13px; opacity: 0.7; }
button.big.alt { background: linear-gradient(180deg, #6bd3ff, #2a8fd8); box-shadow: 0 5px 0 #165286; }
.row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

.stats { font-family: system-ui, sans-serif; font-size: 17px; line-height: 1.9; color: #d6deee; }
.stats b { color: #ffd84a; }

.wallet { font-size: 20px; margin-bottom: 16px; }
.wallet b { color: #ffd84a; font-size: 26px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.card { background: #1d273c; border: 2px solid #2f3d5c; border-radius: 14px; padding: 14px; text-align: left; position: relative;
  display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: transform .1s, border-color .1s; }
.card:hover { transform: translateY(-2px); border-color: #5a74a8; }
.card .icon { font-size: 30px; }
.card .name { font-size: 17px; }
.card .desc { font-family: system-ui, sans-serif; font-size: 13px; color: #9fb0cf; flex: 1; }
.card .price { font-size: 16px; color: #ffd84a; }
.card .num { position: absolute; top: 10px; right: 12px; font-size: 13px; color: #6d7fa5; }
.card.owned { border-color: #2fa84f; background: #183021; }
.card.owned .price { color: #6dff9b; }
.card.cant { opacity: 0.5; }
.hint { margin-top: 16px; font-family: system-ui, sans-serif; font-size: 13px; color: #8a9abb; }

@media (max-width: 520px) {
  .controls { grid-template-columns: 1fr; }
  .panel { padding: 20px 16px; }
}

/* ---------- Dokunmatik / mobil ---------- */
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
canvas, #touch { touch-action: none; }
.touch-only { display: none; }
body.touch .touch-only { display: grid; }
body.touch p.touch-only { display: block; }
body.touch .kbd-only { display: none; }
.small-note { font-family: system-ui, sans-serif; font-size: 13px; color: #9fb0cf; margin: -6px auto 16px; max-width: 460px; }
#shopClose { margin-top: 16px; }

#touch { display: none; position: fixed; inset: 0; z-index: 5; pointer-events: none; }
body.touch #touch { display: block; }
#touch .t-top, #touch .t-left, #touch .t-right, #touch button, #touch .tb { pointer-events: auto; }

#touch .t-top { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; gap: 6px; }
#touch .t-icon, #touch .t-small {
  height: 44px; min-width: 44px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(10,14,24,0.62); color: #fff; font-size: 20px; font-family: inherit;
}
#touch .t-small { font-size: 10px; padding: 0 8px; color: #8a9abb; letter-spacing: .5px; }
#touch .t-small.on { color: #6dff9b; border-color: rgba(109,255,155,0.5); }

#touch { --b: clamp(54px, 15vmin, 84px); --g: 10px; }
#touch .t-left { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: var(--g); }
#touch .t-right { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(3, var(--b)); grid-auto-rows: var(--b); gap: var(--g); }

#touch .tb {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 50%; font-size: calc(var(--b) * 0.36); color: #fff; user-select: none; -webkit-user-select: none;
  background: rgba(20,26,40,0.55); border: 2px solid rgba(255,255,255,0.22);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35); transition: transform .05s, background .05s;
}
#touch .tb small { font-size: 9px; letter-spacing: .5px; opacity: .85; }
#touch .tb.steer { width: calc(var(--b) * 1.3); height: calc(var(--b) * 1.3); font-size: calc(var(--b) * 0.5); }
#touch .tb.gas { background: rgba(46,160,80,0.55); border-color: rgba(120,255,150,0.5); }
#touch .tb.brake { background: rgba(190,50,50,0.5); border-color: rgba(255,120,120,0.45); }
#touch .tb.turbo { background: rgba(30,110,230,0.55); border-color: rgba(120,200,255,0.6); }
#touch .tb.drift { background: rgba(120,80,200,0.5); border-color: rgba(190,160,255,0.5); }
#touch .tb.weapon { background: rgba(60,60,60,0.55); }
#touch .tb.off { opacity: 0; pointer-events: none; }
#touch .tb.active { transform: scale(0.92); background: rgba(255,255,255,0.35); border-color: #fff; }

@media (max-height: 500px) {
  .panel { padding: 16px 18px; }
  h1 { font-size: 30px; }
  .sub { margin: 6px 0 10px; }
  .tips { display: none; }
}

/* Buton yerleşimi: yatayda 3x2, dikeyde 2x3 */
#touch .t-right { grid-template-areas: "g r t" "b d a"; }
#touch [data-k="KeyX"] { grid-area: g; }
#touch [data-k="KeyC"] { grid-area: r; }
#touch [data-k="ShiftLeft"] { grid-area: t; }
#touch [data-k="ArrowDown"] { grid-area: b; }
#touch [data-k="Space"] { grid-area: d; }
#touch [data-k="ArrowUp"] { grid-area: a; }
@media (orientation: portrait) {
  #touch { --b: clamp(54px, 16vw, 80px); }
  #touch .t-right { grid-template-columns: repeat(2, var(--b)); grid-template-areas: "g r" "t d" "b a"; }
  #touch .tb.steer { width: calc(var(--b) * 1.1); height: calc(var(--b) * 1.1); }
  #touch .t-left { bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (max-width: 520px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .card { padding: 10px; }
  .card .icon { font-size: 24px; }
  .card .name { font-size: 14px; }
  .card .desc { font-size: 11px; }
  h2 { font-size: 26px; }
}
#touch .t-icon.muted { opacity: 0.4; text-decoration: line-through; }