/* 2030 Vezetői Index — A játék (pixel art, zhering navy–arany) */
:root{
  --navy:#061421;--navy7:#0C2236;--navy6:#12304A;--well:#04101A;
  --gold:#C8A45D;--goldB:#DCBC82;--goldD:#A9863F;--champ:#E8C8AC;
  --white:#F4EFE7;--grey:#CBB59C;--muted:#A8957D;
  --serif:'Noto Serif Display',Georgia,serif;--sans:'Lato',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip;max-width:100%;height:100%}
body{margin:0;background:var(--navy);color:var(--white);font-family:var(--sans);
  display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
main{flex:1;display:flex;flex-direction:column;max-width:1060px;width:100%;margin:0 auto;padding:0 14px}
:focus-visible{outline:3px solid rgba(200,164,93,.65);outline-offset:3px;border-radius:6px}

.hud{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 4px}
.brand{font-family:var(--serif);font-size:1rem;text-decoration:none;color:var(--white)}
.brand .gold{color:var(--gold)}
.hud-mid,.hud-right{font-weight:700;font-size:.72rem;letter-spacing:.18em;color:var(--gold)}
.hud-right{color:var(--goldB)}

.stage-wrap{position:relative;border-radius:14px;overflow:hidden;
  border:1px solid rgba(200,164,93,.55);box-shadow:0 0 0 1px rgba(200,164,93,.15),0 18px 50px rgba(0,0,0,.5)}
canvas{display:block;width:100%;background:var(--well);cursor:grab;touch-action:none}

/* ── Overlay-k ── */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(4,16,26,.82);opacity:0;pointer-events:none;transition:opacity .3s;z-index:5;padding:16px}
.overlay.show{opacity:1;pointer-events:auto}
.ov-card{max-width:560px;width:100%;background:var(--navy7);border-radius:16px;padding:30px 30px 26px;
  box-shadow:0 0 0 1px rgba(200,164,93,.55),0 8px 28px rgba(0,0,0,.4);max-height:92%;overflow-y:auto}
.ov-card h1{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,4vw,2.1rem);margin:10px 0 12px}
.ov-card p{color:var(--grey);line-height:1.6;font-size:1rem;margin:0 0 14px}
.controls-hint{font-size:.9rem;background:var(--well);border-radius:10px;padding:12px 14px}
.controls-hint b{color:var(--goldB)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;
  border-radius:999px;font-family:var(--sans);font-weight:700;font-size:1rem;padding:14px 30px;
  background:linear-gradient(160deg,#DCBC82,#C8A45D 55%,#A9863F);color:var(--navy);
  box-shadow:0 6px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.28)}
.btn:hover{transform:translateY(-1px)}

/* döntés-kártya */
.q-card{background:url(/static/game/kartya.jpg?v=1) center/100% 100% no-repeat !important;
  box-shadow:0 18px 60px rgba(0,0,0,.65) !important;border-radius:22px;
  padding:64px 56px 72px !important}
.q-card .situation,.q-card p{color:#E8D9BC}
.q-card .q-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.q-step{font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.q-system{font-size:.82rem;color:var(--grey)}
.q-card h2{font-family:var(--serif);font-weight:500;font-size:1.45rem;margin:4px 0 8px}
.situation{font-size:1.05rem;line-height:1.6}
.answers{display:grid;gap:10px;margin-top:14px}
.answer{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;cursor:pointer;
  background:var(--navy6);border:1px solid rgba(200,164,93,.55);border-radius:12px;
  padding:13px 15px;color:var(--white);font-family:var(--sans);font-size:.98rem;line-height:1.5}
.answer:hover{border-color:var(--goldB);background:#173A59}
.answer .key{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid rgba(200,164,93,.55);
  display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--goldB)}

.log-card{text-align:center}
.log-card p{font-family:var(--serif);font-size:1.2rem;line-height:1.5;color:var(--white)}
.inter-pos{margin-top:14px;padding-top:12px;border-top:1px solid rgba(200,164,93,.3);
  font-size:.7rem !important;font-weight:700;letter-spacing:.18em;color:var(--goldB) !important;font-family:var(--sans) !important}

/* ── Kártyagyűjtemény (díszes inventory) ── */
.inventory{margin:10px auto 0;width:80%;max-width:660px;background:linear-gradient(180deg,var(--navy7),var(--well));
  border:1px solid rgba(200,164,93,.55);border-radius:12px;padding:9px 13px 11px;
  box-shadow:inset 0 0 30px rgba(4,16,26,.7),0 8px 24px rgba(0,0,0,.4);position:relative}
.inventory::before,.inventory::after{content:"";position:absolute;width:12px;height:12px;
  border-color:var(--gold);border-style:solid}
.inventory::before{top:6px;left:6px;border-width:2px 0 0 2px}
.inventory::after{bottom:6px;right:6px;border-width:0 2px 2px 0}
.inv-label{display:block;text-align:center;font-weight:700;font-size:.6rem;letter-spacing:.26em;
  color:var(--gold);margin-bottom:7px}
.slots{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.slot{aspect-ratio:3/4;border-radius:6px;background:rgba(4,16,26,.9);
  border:1px solid rgba(200,164,93,.35);box-shadow:inset 0 2px 8px rgba(0,0,0,.8);position:relative}
.slot.filled{background:url(/static/game/kartya.jpg?v=1) center/cover;
  border-color:var(--champ);box-shadow:0 0 14px rgba(200,164,93,.5);cursor:pointer}
.slot.filled:active{transform:scale(.93)}
.slot.filled::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);font-size:1.05rem;color:var(--goldB);
  text-shadow:0 1px 4px rgba(0,0,0,.8)}
@media (max-width:640px){.slots{grid-template-columns:repeat(6,1fr)}}

.foot{display:flex;gap:10px;align-items:center;justify-content:center;padding:14px 0 20px;
  color:var(--muted);font-size:.85rem}
.foot a{color:var(--muted)}
.link-btn{background:none;border:none;color:var(--muted);font-size:.85rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;font-family:var(--sans)}
.link-btn:hover{color:var(--white)}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}


/* ── Mobil UX ── */
#collect-toast{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;
  background:linear-gradient(160deg,#DCBC82,#C8A45D 60%,#A9863F);color:var(--navy);
  font-weight:700;font-size:.9rem;padding:9px 20px;border-radius:999px;opacity:0;
  pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.5)}
#collect-toast.run{animation:ctoast 1.8s ease-out forwards}
@keyframes ctoast{0%{opacity:0;transform:translateX(-50%) translateY(-14px)}
  12%{opacity:1;transform:translateX(-50%) translateY(0)}
  75%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-8px)}}
@media (max-width:560px){
  .hud{padding:10px 2px}
  .hud-mid,.hud-right{font-size:.62rem;letter-spacing:.12em}
  .brand{font-size:.9rem}
  .q-card{padding:46px 28px 58px !important}
  .q-card h2{font-size:1.25rem}
  .situation{font-size:.95rem}
  .answer{padding:11px 12px;font-size:.9rem;gap:9px}
  .answer .key{width:23px;height:23px;font-size:.72rem}
  .ov-card{padding:24px 20px 22px}
  .overlay{padding:10px}
  .inv-label{margin-bottom:7px}
  .foot{padding:10px 0 16px}
}
@media (prefers-reduced-motion:reduce){#collect-toast.run{animation:none;opacity:0}}

.log-btn{margin-top:18px;font-size:.95rem;padding:12px 26px}

/* ── Telefonos intro: a festett hajó egész oldalas háttér, csak a szövegablak ── */
.intro-bg{display:none}
@media (max-width:700px){
  body.is-intro .intro-bg{display:block;position:fixed;inset:0;z-index:0;
    background:url(/static/game/terkep.jpg?v=1) center/cover no-repeat}
  body.is-intro .intro-bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(4,16,26,.62),rgba(4,16,26,.28) 42%,rgba(4,16,26,.66))}
  body.is-intro .hud,body.is-intro .inventory,body.is-intro .foot{display:none}
  body.is-intro .stage-wrap{border:none;box-shadow:none;background:transparent}
  body.is-intro canvas{visibility:hidden}
  body.is-intro #intro{position:fixed;inset:0;z-index:10;background:transparent;padding:18px}
  body.is-intro .ov-card{background:rgba(12,34,54,.94)}
}

/* a felső szövegblokk elegáns, olvasható panelen ül a pergamen fölött */
.q-text{background:rgba(7,17,28,.66);border:1px solid rgba(200,164,93,.4);
  border-radius:14px;padding:14px 16px 10px;margin-bottom:10px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  box-shadow:0 4px 18px rgba(0,0,0,.35)}
.q-text h2{margin-top:6px}
.q-card .edit-hint{display:none;font-size:.82rem !important;color:var(--goldB) !important;
  margin:2px 0 4px;border-top:1px solid rgba(200,164,93,.3);padding-top:8px}
.q-card.editing .edit-hint{display:block !important}
.answer.selected{border-color:var(--goldB);background:#1d4066;
  box-shadow:0 0 0 1px var(--goldB),0 4px 16px rgba(200,164,93,.25)}
.answer.selected .key{background:var(--goldD);color:var(--navy);border-color:var(--goldB)}

/* ── Telefonos döntés-kártya: teljes képernyő, mind a 4 válasz egyben ── */
@media (max-width:700px){
  body.card-open{overflow:hidden}
  body.card-open .inventory,body.card-open .foot{display:none}
  body.card-open #card{position:fixed;inset:0;z-index:30;padding:0;background:rgba(4,16,26,.92);
    overscroll-behavior:none;touch-action:none}
  body.card-open #card .q-card{max-width:none;width:100%;height:100%;max-height:none;
    border-radius:0;padding:64px 30px 48px !important;position:relative;
    background:url(/static/game/kartya.jpg?v=1) center/116% 110% no-repeat !important;
    display:flex;flex-direction:column;justify-content:center;overflow-y:auto;
    overscroll-behavior:none;touch-action:pan-y}
  /* nyugtató fátyol a pergamen fölé, a vékonyodott keret belsejében */
  body.card-open #card .q-card::before{content:"";position:absolute;inset:40px 22px 34px;
    background:linear-gradient(180deg,rgba(5,15,25,.46),rgba(5,15,25,.56));
    border-radius:18px;pointer-events:none}
  body.card-open #card .q-text,body.card-open #card .answers{position:relative}
  body.card-open #card .q-head{margin-bottom:4px}
  body.card-open #card h2{font-size:1.18rem;margin:2px 0 6px}
  body.card-open #card .situation{font-size:.92rem;line-height:1.5;margin-bottom:8px}
  body.card-open #card .answers{margin-top:12px;gap:8px;padding-bottom:4px}
  body.card-open #card .answer{padding:11px 12px;font-size:.88rem;line-height:1.42;gap:9px}
  body.card-open #card .answer .key{width:22px;height:22px;font-size:.7rem}
  #card.show .q-card{animation:cardIn .28s ease}
}
@keyframes cardIn{from{transform:translateY(46px);opacity:.35}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#card.show .q-card{animation:none}}

/* ── Telefonos fő képernyő: nav + hajó-ablak + kártyatároló, semmi más ── */
@media (max-width:700px){
  .hud,.foot{display:none}
  main{padding:0 12px 10px}
  .inventory{width:100%;max-width:none;margin:8px 0 0}
  nav{padding:10px 14px !important}
}