/* ====== Base overrides ====== */
body{
  min-height:100dvh;
  padding-top: calc(80px + env(safe-area-inset-top));
  padding-bottom: calc(70px + env(safe-area-inset-bottom));
}

/* ====== Layout & Progress ====== */
.container{display:flex;flex-direction:column;align-items:center;width:100%}
.progress-wrap{width:100%;max-width:520px;margin:6px auto 14px;display:grid;gap:8px}
.progress-bar{width:100%;height:10px;background-color:rgba(0,25,45,.65);border-radius:999px;overflow:hidden;border:1px solid rgba(0,212,232,.2)}
.progress{width:0%;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-400));transition:width .35s ease}
.progress-label{font-weight:800;letter-spacing:.2px;color:var(--brand-300);font-size:.95rem;text-shadow:0 0 12px rgba(0,212,232,.4)}

/* ====== Buttons ====== */
.btn{max-width:520px}
.btn.ghost{background:rgba(0,212,232,.1);color:var(--brand-200);border-color:rgba(0,212,232,.35)}
.btn.ghost:hover{background:rgba(0,212,232,.2)}

/* ====== Question & Grid ====== */
.question{font-size:1.35rem;margin:6px 0 10px;color:var(--brand-200);font-weight:900}
.helper{margin:0 0 12px;font-size:.98rem;color:var(--brand-200);opacity:.92}

.grid{display:grid;gap:10px;width:100%;max-width:520px;grid-template-columns:1fr;margin:0 auto}
@media (min-width:420px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (orientation:landscape) and (min-width:720px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.card{
  background:rgba(0,20,40,.55);
  border:1px solid rgba(0,212,232,.3);
  border-radius:16px;padding:18px 16px;display:grid;gap:8px;place-items:center;
  cursor:pointer;transition:.2s ease;min-height:104px;color:var(--paper);
  backdrop-filter:blur(10px);
}
.card:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:0 12px 32px rgba(0,212,232,.18)}
.card.selected{border-color:var(--brand);box-shadow:0 0 30px rgba(0,212,232,.45),var(--ring);background:rgba(0,212,232,.15)}
.card .emoji{font-size:1.8rem}
.card .flag{width:42px;height:28px;object-fit:cover;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.card .label{font-weight:900;color:var(--paper)}

/* ====== Modals ====== */
.modal{display:none;position:fixed;inset:0;z-index:130;background:rgba(12,24,26,.6);backdrop-filter:blur(4px)}
.modal-content{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:linear-gradient(180deg,var(--ink-800),var(--ink-700));
  color:var(--paper);width:min(92%,560px);margin:0;padding:22px;border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 30px rgba(0,212,232,.18);border:1px solid rgba(0,212,232,.35)
}
.modal-content.welcome{border-color:transparent}
.close-btn{
  position:absolute;left:12px;top:10px;background:transparent;border:none;color:var(--brand-300);
  font-size:28px;cursor:pointer;line-height:1;padding:4px;border-radius:8px
}
.close-btn:hover{color:#fff;background:rgba(255,255,255,.06)}
.welcome-title{margin:6px 0 8px;font-weight:900;color:var(--brand-200);text-shadow:0 0 18px rgba(0,212,232,.4)}
.welcome-text{line-height:1.9;font-weight:700;margin:8px 0 18px;color:var(--brand-200)}

/* ====== Result text ====== */
.result-text{font-size:1.1rem;margin:12px 0 10px;color:var(--brand-200)}

/* ====== Truck Ticket ====== */
.ticket-wrap{display:grid;place-items:center;margin:12px auto 6px;max-width:520px}
.ticket{
  position:relative;background:#fff;color:#122; width:100%; aspect-ratio:7/3;
  border-radius:16px; box-shadow:0 14px 32px rgba(0,0,0,.22); overflow:hidden;
}
.ticket:before, .ticket:after{
  content:""; position:absolute; top:50%; width:22px; height:22px; background:var(--ink-800); border-radius:50%;
  transform:translateY(-50%);
}
.ticket:before{right:-11px}
.ticket:after{left:-11px}
.ticket .body{
  position:absolute; inset:0; display:grid; grid-template-columns:1fr 160px; gap:12px; padding:18px;
  align-items:center;
  background:linear-gradient(180deg,#fff,#f7f7f7);
}
.ticket .ticket-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  text-align:center;
  padding:20px;
}
.ticket .ticket-shop{
  font-size:1.5em;
  color:#333;
  margin:0;
}
.ticket .stamp{
  border-left:2px dashed #d7d7d7; display:grid; place-items:center; padding-left:14px;
}
.ticket .stamp i{font-size:64px; color:var(--brand-700); animation:truck-bump 1.6s ease infinite}
@keyframes truck-bump{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.ticket .title{font-weight:900; font-size:1.1rem; color:#0e4c50; margin:0 0 6px}
.ticket .subtitle{font-weight:800; color:#188; margin:0}
.ticket .brand-line{height:6px; background:linear-gradient(90deg,var(--brand),var(--brand-400))}

/* ====== Danger state ====== */
.state-danger{
  border:2px dashed #ff6460;padding:12px;border-radius:12px;background:rgba(255,100,96,.08);
  color:#ffdede;margin-top:10px
}

/* ====== Print ====== */
@media print{
  body{background:#fff;color:#000;padding:0}
  nav,.progress-wrap,#quiz-container,.close-btn,.btn{display:none!important}
  .modal{position:static;background:#fff}
  .modal-content{border:none;box-shadow:none;width:100%;margin:0;padding:0;background:transparent;color:#000}
}