/* ===== GTA: Grand Tractor Amritsar — styles ===== */

:root{
  --mustard:#f4b93c;
  --terracotta:#d95f43;
  --teal:#1f8a8a;
  --pink:#e3557f;
  --ink:#1a1410;
  --ink-soft:#2b2119;
  --cream:#fdf3dd;
  --gold:#ffcf5c;
  --panel:rgba(26,20,16,.72);
  --stroke:rgba(253,243,221,.16);
  --font:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{
  height:100%;
  overflow:hidden;
  background:var(--ink);
  font-family:var(--font);
  color:var(--cream);
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  touch-action:none;
}

canvas#game{display:block;width:100vw;height:100vh;}

.hidden{display:none !important;}

/* ---------- overlays ---------- */
.overlay{
  position:fixed;inset:0;z-index:40;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:
    radial-gradient(circle at 50% 30%, rgba(244,185,60,.16), transparent 60%),
    rgba(12,9,7,.86);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  overflow-y:auto;
}

.card{
  width:min(560px,100%);
  background:linear-gradient(165deg,#221a13,#171110);
  border:1px solid var(--stroke);
  border-top:3px solid var(--mustard);
  border-radius:18px;
  padding:28px 26px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  text-align:center;
}

.kicker{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mustard);opacity:.85;margin-bottom:10px;
}

h1{
  font-size:clamp(30px,7vw,50px);
  line-height:.95;letter-spacing:-.01em;
  color:var(--cream);
  text-shadow:0 3px 0 var(--terracotta), 0 6px 22px rgba(217,95,67,.4);
  margin-bottom:14px;
}
h1 em{font-style:normal;color:var(--mustard);}

h2{
  font-size:clamp(24px,5.5vw,34px);
  color:var(--mustard);margin-bottom:10px;letter-spacing:.01em;
}

.tag{
  font-size:14.5px;line-height:1.55;
  color:rgba(253,243,221,.8);
  margin-bottom:16px;
}
.tag strong{color:var(--gold);}

.rules{
  list-style:none;text-align:left;
  display:grid;gap:7px;
  margin:0 auto 18px;max-width:400px;
  font-size:13.5px;line-height:1.45;
  color:rgba(253,243,221,.78);
}
.rules li{
  padding:8px 12px;border-radius:9px;
  background:rgba(253,243,221,.05);
  border-left:2px solid var(--teal);
}
.rules b{color:var(--cream);}

.keys{
  display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;
  font-size:11.5px;color:rgba(253,243,221,.55);
  margin-bottom:20px;
}
kbd{
  display:inline-block;
  padding:2px 6px;margin:0 1px;
  font-family:inherit;font-size:11px;
  background:rgba(253,243,221,.1);
  border:1px solid var(--stroke);
  border-bottom-width:2px;
  border-radius:5px;color:var(--cream);
}

.big-btn{
  display:inline-block;width:100%;
  padding:15px 22px;
  font-family:inherit;font-size:16px;font-weight:bold;
  letter-spacing:.06em;
  color:#2a1c08;
  background:linear-gradient(180deg,var(--gold),var(--mustard));
  border:none;border-radius:12px;
  box-shadow:0 4px 0 #b3821f, 0 10px 26px rgba(244,185,60,.3);
  cursor:pointer;
  transition:transform .08s, box-shadow .08s, filter .15s;
}
.big-btn:hover{filter:brightness(1.06);}
.big-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #b3821f;}

.hiscore{margin-top:14px;font-size:12px;color:rgba(253,243,221,.5);}
.hiscore b{color:var(--mustard);}

.final{
  display:flex;justify-content:center;gap:26px;
  margin:18px 0 22px;
}
.final div{display:flex;flex-direction:column;gap:3px;}
.final b{font-size:26px;color:var(--mustard);}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;}

.hud-row{
  position:absolute;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:10px;padding:12px;
}

.panel{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:9px 13px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.stats{display:flex;gap:18px;}
.stat{display:flex;flex-direction:column;gap:1px;}
.stat-label{
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(253,243,221,.5);
}
.stat-val{font-size:19px;font-weight:bold;color:var(--cream);line-height:1.1;}
#clock.low{color:var(--terracotta);}

.aunty{display:flex;flex-direction:column;gap:3px;align-items:flex-end;}
.stars{font-size:15px;letter-spacing:2px;line-height:1;}
.stars .on{filter:none;}
.stars .off{opacity:.22;filter:grayscale(1);}

/* minimap */
#minimap{
  position:absolute;right:12px;bottom:12px;
  width:132px;height:132px;
  border:1px solid var(--stroke);
  border-radius:12px;
  background:var(--panel);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* mission ticker */
.mission{
  position:absolute;left:50%;bottom:16px;
  transform:translateX(-50%);
  max-width:min(460px,88vw);
  text-align:center;
  font-size:13.5px;line-height:1.4;
  border-left:3px solid var(--mustard);
}
.mission .m-label{
  display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mustard);margin-bottom:2px;
}

/* speedometer */
.speedo{
  position:absolute;left:12px;bottom:12px;
  display:flex;align-items:baseline;gap:4px;
  padding:7px 12px;
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:12px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#kmph{font-size:22px;font-weight:bold;color:var(--mustard);line-height:1;}
.speedo small{font-size:9px;color:rgba(253,243,221,.5);letter-spacing:.1em;}

/* toast */
.toast{
  position:absolute;left:50%;top:22%;
  transform:translate(-50%,0) scale(.9);
  font-size:clamp(20px,5vw,34px);
  font-weight:bold;letter-spacing:.01em;
  color:var(--gold);
  text-shadow:0 3px 0 #7a3a12, 0 6px 26px rgba(0,0,0,.7);
  opacity:0;
  white-space:nowrap;
  transition:opacity .18s, transform .18s;
}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1);}
.toast.bad{color:var(--terracotta);text-shadow:0 3px 0 #4a1208,0 6px 26px rgba(0,0,0,.7);}

/* ---------- touch controls ---------- */
#touch{
  position:fixed;inset:auto 0 0 0;z-index:30;
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 18px 22px;
  pointer-events:none;
}
.dpad{display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:auto;}
.dpad-mid{display:flex;gap:44px;}
.tbtn{
  width:58px;height:58px;
  font-family:inherit;font-size:18px;font-weight:bold;
  color:var(--cream);
  background:rgba(26,20,16,.66);
  border:1px solid var(--stroke);
  border-radius:14px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  pointer-events:auto;cursor:pointer;
}
.tbtn:active{background:rgba(244,185,60,.8);color:#2a1c08;}
.tbtn.horn{
  width:82px;height:82px;border-radius:50%;
  font-size:14px;line-height:1.1;
  color:var(--mustard);
  border-color:rgba(244,185,60,.4);
}

/* tighter HUD on short screens */
@media (max-height:520px){
  #minimap{width:96px;height:96px;}
  .stat-val{font-size:16px;}
}

/* ---------- multiplayer scoreboard ---------- */
.board{
  position:absolute;right:12px;top:70px;
  width:186px;
  display:flex;flex-direction:column;gap:5px;
  font-size:11.5px;
}
.board-head{
  display:flex;align-items:center;gap:6px;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(253,243,221,.55);
  padding-bottom:4px;
  border-bottom:1px solid var(--stroke);
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--terracotta);flex:none;}
.dot.online{background:#4ad4a0;box-shadow:0 0 7px #4ad4a0;}
.dot.connecting{background:var(--mustard);}
.dot.offline{background:rgba(253,243,221,.3);}

.brow{
  display:grid;
  grid-template-columns:14px 1fr 22px 42px;
  align-items:center;gap:5px;
  padding:3px 2px;border-radius:5px;
  color:rgba(253,243,221,.8);
}
.brow.me{background:rgba(244,185,60,.14);color:var(--cream);}
.bpos{color:rgba(253,243,221,.4);font-size:10px;}
.bname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bdel{text-align:right;color:rgba(253,243,221,.5);}
.bscore{text-align:right;font-weight:bold;color:var(--mustard);}

@media (max-width:520px){ .board{width:150px;top:64px;} }