/* ============================================================
   ORBITA — herní shell (cozy sci-fi)
   Svět hero ilustrace prosakuje do celé hry: ztlumené pozadí,
   plyšové „konzole“ nad ním, ARIA jako živý společník.
   ============================================================ */

:root{
  --bg:#1b1726; --bg2:#242032; --panel:#2e2843; --panel-hi:#3a3356;
  --line:#4a4168; --line-soft:#3c3557;
  --ink:#f6ecd8; --ink-dim:#b9aed0;
  --amber:#ffb454; --amber-d:#d98a2b; --mint:#6fd6c2; --mint-d:#3fa892;
  --coral:#ff8c9e; --coral-d:#d95f74; --sky:#8bb8ff; --violet:#b79bff;
  --shadow:rgba(10,6,20,.45);
  --r-panel:22px; --r-el:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* --- svět v pozadí: hero ilustrace + švestková mlhovina --- */
body{
  min-height:100vh;
  color:var(--ink);
  font-family:'Nunito',system-ui,sans-serif;
  background:var(--bg);
  position:relative;
}
body::before{
  content:'';
  position:fixed; inset:0; z-index:-2;
  background:url('../img/hero.jpg') center 30%/cover no-repeat;
  opacity:.16;
  filter:saturate(1.1);
}
body::after{
  content:'';
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1100px 600px at 75% -10%, #35295244 0%, transparent 60%),
    radial-gradient(900px 700px at 10% 110%, #2b1f3f66 0%, transparent 55%),
    linear-gradient(180deg, #1b172688 0%, #1b1726ee 65%, #1b1726 100%);
}
h1,h2,h3{font-family:'Baloo 2',cursive;margin:0}

/* ---------- topbar: velín ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:14px;
  padding:12px 22px;
  background:#241f33d9;
  backdrop-filter:blur(10px);
  border-bottom:1px solid #ffffff12;
  box-shadow:0 6px 24px -12px var(--shadow);
}
.logo{display:flex;align-items:center;gap:10px;font-family:'Baloo 2';font-weight:800;font-size:20px;letter-spacing:.5px}
.logo .dot{
  width:14px;height:14px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 4px #ffb45426, 0 0 14px 2px #ffb45480;
  animation:beacon 2.6s ease-in-out infinite;
}
@keyframes beacon{
  0%,100%{box-shadow:0 0 0 4px #ffb45426, 0 0 10px 1px #ffb45466}
  50%{box-shadow:0 0 0 5px #ffb45433, 0 0 20px 4px #ffb454aa}
}
.chapter-badge{
  font-size:12px;font-weight:800;color:#173a33;background:var(--mint);
  padding:5px 12px;border-radius:20px;box-shadow:0 3px 0 var(--mint-d);
}
.spacer{flex:1}

/* HUD suroviny — dvě skupiny: systémy stanice / obchodovatelné suroviny */
.hud{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hud-group{
  display:flex;align-items:center;gap:6px;
  padding:4px 8px 4px 10px;
  border:1px solid var(--line-soft);border-radius:999px;
  background:#221d3366;
}
.hud-lbl{
  font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--ink-dim);margin-right:2px;
}
.res{
  display:flex;align-items:center;gap:7px;
  background:linear-gradient(180deg,#2c2740,#252036);
  border:1px solid var(--line-soft);
  border-radius:999px;padding:5px 13px 5px 6px;
  font-weight:800;font-size:13px;
  box-shadow:inset 0 1px 0 #ffffff0d, 0 2px 6px -2px var(--shadow);
}
.res .ic{
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;
  box-shadow:inset 0 -2px 3px #00000033;
}
.res.crystals{
  background:linear-gradient(180deg,#4a3d78,#372c5e);
  border-color:var(--violet);
  box-shadow:inset 0 1px 0 #ffffff1a, 0 0 12px -2px #b79bff55;
}
.btn-logout{width:38px;padding:8px 0;font-size:15px}

/* ---------- layout ---------- */
.layout{
  display:grid;grid-template-columns:290px 1fr 270px;gap:16px;
  max-width:1220px;margin:22px auto;padding:0 20px 60px;
  align-items:start;
}
@media(max-width:1000px){.layout{grid-template-columns:1fr}}

/* ---------- panely: plyšové konzole ---------- */
.panel{
  background:linear-gradient(180deg,var(--panel-hi) 0%,var(--panel) 22%);
  border:1px solid #ffffff14;
  border-radius:var(--r-panel);
  box-shadow:
    inset 0 1px 0 #ffffff14,
    0 14px 30px -14px var(--shadow),
    0 4px 0 -1px #221d33;
  padding:16px;
  animation:panel-in .5s cubic-bezier(.2,.8,.3,1.1) both;
}
.layout .panel:nth-child(1){animation-delay:.05s}
.layout .panel:nth-child(2){animation-delay:.12s}
.layout .panel:nth-child(3){animation-delay:.19s}
@keyframes panel-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.kicker{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-dim)}

/* ---------- ARIA: společník ---------- */
.ai-card{border-top:2px solid #b79bff55}
.ai-head{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.ai-portrait{
  width:60px;height:60px;border-radius:18px;flex:none;
  background:radial-gradient(circle at 30% 25%,#8a76c9,#4a3d78 70%);
  border:2px solid var(--violet);
  display:grid;place-items:center;font-size:28px;
  box-shadow:0 0 18px -2px #b79bff66, inset 0 -6px 12px #00000033;
  animation:bob 3.6s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.ai-name{font-family:'Baloo 2';font-weight:700;font-size:18px}
.ai-role{font-size:12px;color:var(--violet);font-weight:700}

/* bublina s ocáskem */
.speech{
  position:relative;
  background:#241f33;
  border:1px solid var(--line-soft);
  border-radius:16px;
  padding:13px 14px;
  font-size:14px;line-height:1.55;
  box-shadow:inset 0 1px 0 #ffffff0a;
}
.speech::before{
  content:'';
  position:absolute;top:-9px;left:22px;
  width:16px;height:16px;
  background:#241f33;
  border-left:1px solid var(--line-soft);
  border-top:1px solid var(--line-soft);
  transform:rotate(45deg);
}
.speech.pop{animation:speech-pop .35s cubic-bezier(.2,.8,.3,1.15)}
@keyframes speech-pop{
  from{opacity:0;transform:translateY(6px) scale(.97)}
  to{opacity:1;transform:none}
}

.costrow{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 2px}
.cost{
  font-size:13px;font-weight:700;
  background:#241f33;padding:6px 10px;border-radius:10px;
  border:1px solid var(--line-soft);
}
.actions{display:flex;flex-direction:column;gap:9px;margin-top:12px}

/* ---------- tlačítka: herní, mačkací ---------- */
.btn{
  position:relative;overflow:hidden;
  border:none;cursor:pointer;
  font-family:'Baloo 2';font-weight:700;font-size:15px;letter-spacing:.3px;
  padding:12px 16px;border-radius:var(--r-el);
  transition:transform .06s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(3px)}
.btn:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.btn:disabled{
  filter:grayscale(.85) brightness(.55);
  opacity:.6;cursor:not-allowed;
  box-shadow:none !important;transform:none !important;
}
.btn:disabled:hover{filter:grayscale(.85) brightness(.55)}
.btn-primary{
  background:linear-gradient(180deg,#ffc36e,var(--amber));
  color:#3a2508;box-shadow:0 4px 0 var(--amber-d), 0 8px 16px -8px #ffb45466;
}
.btn-primary:active{box-shadow:0 1px 0 var(--amber-d)}
.btn-mint{
  background:linear-gradient(180deg,#87e2cf,var(--mint));
  color:#12352e;box-shadow:0 4px 0 var(--mint-d), 0 8px 16px -8px #6fd6c255;
}
.btn-mint:active{box-shadow:0 1px 0 var(--mint-d)}
.btn-ghost{background:#ffffff10;color:var(--ink);border:1px solid var(--line-soft);box-shadow:none}

/* ---------- mapa stanice: průzor ---------- */
.map-wrap{position:relative;min-height:500px;padding:16px}
.maplbl{margin:2px 4px 10px}
.map-screen{
  position:relative;
  border-radius:16px;
  background:
    radial-gradient(closest-side at 50% 40%, #2b2440 0%, #221d33 75%, #1d1930 100%);
  border:1px solid #ffffff0f;
  box-shadow:inset 0 0 40px 6px #120e1f66, inset 0 1px 0 #ffffff0a;
  overflow:hidden;
  display:flex;justify-content:center;
}
/* hvězdy v průzoru */
.map-screen::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 20%, #f6ecd8cc 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 68%, #f6ecd888 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 12%, #b79bffaa 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 45%, #f6ecd877 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 76%, #8bb8ff99 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 88%, #f6ecd866 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 22%, #f6ecd88a 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 55%, #f6ecd866 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 64% 30%, #ffb45488 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 42%, #f6ecd855 50%, transparent 51%);
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{
  from{opacity:.55}
  to{opacity:1}
}
#game{position:relative}
#game canvas{border-radius:14px}

/* ---------- levý sloupec: sekce pod ARIA ---------- */
.side-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.side-col .panel{animation-delay:0s}
.side-card h3{font-size:15px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.side-card h3 .net-name{font-size:11px;color:var(--ink-dim);font-weight:700}
.side-card .btn-sm{width:100%;margin-top:10px}
.offer-list{max-height:56vh;overflow-y:auto;padding-right:4px}
.btn-sm{padding:8px 12px;font-size:13px}
.rows{display:flex;flex-direction:column}
.rows .row{
  padding:8px 0;border-bottom:1px dashed var(--line-soft);
  font-size:12.5px;line-height:1.45;
}
.rows .row:last-child{border-bottom:none}
.rows .row .r-top{display:flex;align-items:center;gap:6px;font-weight:800}
.rows .row .r-sub{color:var(--ink-dim);font-weight:600;font-size:11.5px;margin-top:2px}
.rows .row .r-act{margin-top:6px;display:flex;gap:6px}
.rows .row .r-act .btn{padding:6px 10px;font-size:12px;width:auto;margin:0}
.rows .empty{color:var(--ink-dim);font-size:12.5px;font-weight:600;padding:4px 0}
.rows b{color:var(--amber)}
.rows .wait{color:var(--coral);font-weight:800}
.rows .busy{color:var(--mint);font-weight:800}
.placement-hint{
  display:flex;align-items:center;gap:10px;margin-top:8px;
  font-size:12.5px;font-weight:800;color:var(--mint);
  animation:speech-pop .3s ease;
}
.placement-hint .btn{width:auto;margin:0}

/* ---------- herní modal (detail sekce, dok) ---------- */
.modal{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:#14101fb8;
  backdrop-filter:blur(3px);
}
.modal-card{
  width:100%;max-width:520px;
  max-height:88vh;overflow-y:auto;
  padding:22px;
  animation:panel-in .3s cubic-bezier(.2,.8,.3,1.1) both;
  position:relative;
}
.modal-close{
  position:absolute;top:12px;right:12px;
  width:34px;height:34px;border-radius:12px;border:1px solid var(--line-soft);
  background:#ffffff10;color:var(--ink);font-size:15px;font-weight:800;cursor:pointer;
}
.modal-close:hover{filter:brightness(1.3)}
.modal-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.modal-icon{
  width:56px;height:56px;border-radius:16px;flex:none;
  display:grid;place-items:center;font-size:27px;
  box-shadow:inset 0 -6px 12px #00000033, 0 3px 8px -3px var(--shadow);
}
.modal-head h2{font-size:21px}
.modal-sub{font-size:12.5px;color:var(--ink-dim);font-weight:700}

/* zdraví sekce */
.hpbar{height:10px;border-radius:6px;background:#221d33;overflow:hidden;margin:6px 0 2px;box-shadow:inset 0 1px 3px #00000055}
.hpbar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--mint),#87e2cf)}
.hpbar.low i{background:linear-gradient(90deg,var(--coral),#ffb0bd)}
.hplbl{font-size:12px;font-weight:800;color:var(--ink-dim);margin-bottom:10px}

/* toky surovin v detailu */
.flows{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.flow{
  font-size:12.5px;font-weight:800;padding:5px 10px;border-radius:10px;
  background:#241f33;border:1px solid var(--line-soft);
}
.flow.plus{color:var(--mint)}
.flow.minus{color:var(--coral)}

/* nabídka typů sekcí v doku */
.typegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media(max-width:520px){.typegrid{grid-template-columns:1fr}}
.type-card{
  text-align:left;cursor:pointer;
  background:linear-gradient(180deg,#332d4c,#2a2440);
  border:1px solid var(--line-soft);border-radius:16px;padding:12px;
  color:var(--ink);font-family:'Nunito',sans-serif;
  transition:transform .08s ease, border-color .15s ease, filter .15s ease;
}
.type-card:hover:not(:disabled){transform:translateY(-2px);border-color:var(--amber);filter:brightness(1.08)}
.type-card:disabled{opacity:.45;cursor:default}
.type-card .t-head{display:flex;align-items:center;gap:9px;font-family:'Baloo 2';font-weight:700;font-size:15px}
.type-card .t-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;box-shadow:inset 0 -4px 8px #00000033}
.type-card .t-flows{margin-top:7px;font-size:11.5px;font-weight:700;color:var(--ink-dim);line-height:1.5}
.type-card .t-cost{margin-top:6px;font-size:12px;font-weight:800;color:var(--amber)}
.type-card .t-lock{margin-top:6px;font-size:12px;font-weight:800;color:var(--ink-dim)}

/* ---------- výpravy ---------- */
/* letová dráha výpravy */
.flight-track{display:flex;align-items:center;gap:6px;margin:7px 0 4px}
.ft-end{font-size:14px;flex:none}
.ft-line{
  position:relative;flex:1;height:4px;border-radius:3px;
  background:repeating-linear-gradient(90deg,#4a4168 0 6px,transparent 6px 12px);
}
.ft-rocket{
  position:absolute;top:50%;transform:translate(-50%,-54%);
  font-size:15px;line-height:1;
  filter:drop-shadow(0 0 6px #ffb45488);
  transition:left .9s ease;
}
.mini-progress.points i{background:linear-gradient(90deg,var(--mint),#87e2cf);box-shadow:0 0 8px #6fd6c288}

.crew-summary{font-size:12px;font-weight:700;color:var(--ink-dim);margin-bottom:7px;line-height:1.5}
.crew-summary b{color:var(--amber)}
.crew{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.robot-chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;font-weight:800;color:var(--ink);
  background:linear-gradient(180deg,#332d4c,#282239);
  border:1px solid var(--line-soft);border-radius:999px;padding:4px 10px;
}
.robot-chip.away{opacity:.45}
.robot-chip.hurt{border-color:var(--coral)}
.robot-chip.pick{cursor:pointer;font-family:'Nunito',sans-serif;transition:border-color .15s ease, box-shadow .15s ease}
.robot-chip.pick.selected{border-color:var(--amber);box-shadow:0 0 0 3px #ffb45433}
.exp-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.exp-actions .btn{width:100%;margin:0}
#site-list{display:flex;flex-direction:column;gap:8px}
#site-list .type-card.selected{border-color:var(--amber);box-shadow:0 0 0 3px #ffb45433}
.event-box{
  margin-top:6px;padding:13px;border-radius:14px;
  background:#3a2536;border:1px solid var(--coral);
  animation:speech-pop .3s ease;
}
.event-text{font-size:14px;line-height:1.5;font-weight:700;margin-bottom:4px}
.exp-log{margin-top:12px;max-height:150px;overflow-y:auto}
.exp-log .item{
  font-size:12px;line-height:1.45;color:var(--ink-dim);
  padding:5px 0;border-bottom:1px dashed var(--line-soft);
}
.exp-log .item:last-child{border-bottom:none;color:var(--ink)}

/* ---------- 3D tiskárna ---------- */
.printer-row{cursor:pointer;border-radius:12px;padding:8px !important;margin:-2px;transition:background .15s ease}
.printer-row:hover{background:#ffffff08}
.mini-progress{height:7px;border-radius:5px;background:#221d33;overflow:hidden;margin:6px 0 4px;box-shadow:inset 0 1px 3px #00000055}
.mini-progress i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--violet),#d3c2ff);
  box-shadow:0 0 8px #b79bff88;transition:width .8s ease}

.printer-scene{
  position:relative;height:210px;border-radius:16px;margin:4px 0 14px;overflow:hidden;
  background:radial-gradient(closest-side at 50% 70%, #2b2440 0%, #201b31 70%, #1a1628 100%);
  border:1px solid #ffffff0f;
  box-shadow:inset 0 0 34px 4px #120e1f66;
}
.printer-frame{position:absolute;inset:22px 56px 18px;border:3px solid #4a4168;border-top-width:0;border-radius:0 0 14px 14px}
.printer-rail{position:absolute;top:-3px;left:-3px;right:-3px;height:8px;background:#332d4c;border-radius:6px}
.printer-head{
  position:absolute;top:-4px;left:8%;width:30px;height:17px;
  background:linear-gradient(180deg,#cdbcff,#7f68c0);border-radius:6px;
  box-shadow:0 0 14px #b79bff99, inset 0 -3px 4px #00000044;
}
.printer-head::after{content:'';position:absolute;left:50%;top:100%;width:2px;height:8px;background:#b79bff;box-shadow:0 0 8px #b79bff}
.printing .printer-head{animation:head-move 1.4s ease-in-out infinite alternate}
@keyframes head-move{from{left:6%}to{left:calc(94% - 30px)}}
.printer-build{position:absolute;left:0;right:0;top:14px;bottom:8px}
.printer-ghost,.printer-robot{
  font-size:78px;line-height:1;
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
}
.printer-ghost{opacity:.10;filter:grayscale(1)}
.printer-robot-wrap{
  position:absolute;bottom:6px;left:0;right:0;overflow:hidden;
  transition:height .9s ease;
}
.printer-robot-wrap .printer-robot{bottom:0;filter:drop-shadow(0 0 10px #b79bff66)}
.printer-laser{
  position:absolute;left:16%;right:16%;height:2px;
  background:#6fd6c2;box-shadow:0 0 12px 2px #6fd6c2aa;
  opacity:0;transition:bottom .9s ease;
}
.printing .printer-laser{opacity:.85;animation:laser-flicker .25s infinite alternate}
@keyframes laser-flicker{from{opacity:.55}to{opacity:1}}
.printer-tag{
  position:absolute;right:10px;bottom:8px;
  font-size:12px;font-weight:800;color:var(--violet);
  background:#241f33cc;padding:4px 10px;border-radius:10px;border:1px solid #b79bff44;
}
@media (prefers-reduced-motion: reduce){
  .printing .printer-head,.printing .printer-laser{animation:none}
}

/* ---------- deník ---------- */
.log-card{border-top:2px solid #ffb45444}
.log-card h3{font-size:16px;margin-bottom:10px}
#log .item{
  position:relative;
  font-size:13px;line-height:1.45;
  padding:8px 0 8px 18px;
  border-bottom:1px dashed var(--line-soft);
  color:var(--ink-dim);
}
#log .item::before{
  content:'✦';
  position:absolute;left:0;top:8px;
  color:var(--amber);font-size:10px;opacity:.7;
}
#log .item:first-child{color:var(--ink)}
#log .item:first-child::before{opacity:1}
#log .item:last-child{border:none}

/* ---------- zvýraznění prvků tutoriálem ---------- */
.highlighted{animation:orbita-pulse 1.4s ease-in-out infinite;border-radius:var(--r-panel)}
@keyframes orbita-pulse{
  0%,100%{box-shadow:0 0 0 0 #ffb45400, 0 14px 30px -14px var(--shadow)}
  50%{box-shadow:0 0 0 6px #ffb45459, 0 14px 30px -14px var(--shadow)}
}
.story-continue{margin-top:2px}
#ai-talk{width:100%;margin-top:10px}
.badge-count{
  display:inline-block;min-width:18px;padding:1px 5px;margin-left:4px;
  background:var(--violet);color:#241f2e;border-radius:10px;
  font-size:11px;font-weight:800;
}
.hint-text{font-size:13px;line-height:1.5;color:var(--ink)}

/* ---------- overlay (login / onboarding) ---------- */
.hidden{display:none !important}
.overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:
    linear-gradient(180deg,#1b1726b3 0%,#1b1726f0 75%),
    url('../img/hero.jpg') center/cover no-repeat;
}
.overlay-card{
  width:100%;max-width:460px;
  padding:30px 28px;
  background:#2e2843f2;
  backdrop-filter:blur(8px);
  max-height:92vh;overflow-y:auto;
  animation:panel-in .45s cubic-bezier(.2,.8,.3,1.1) both;
}
.overlay-card h1{font-size:30px;display:flex;align-items:center;gap:10px;margin-bottom:4px}
.overlay-card h1 .dot{
  width:14px;height:14px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 4px #ffb45426, 0 0 14px 2px #ffb45480;
}
.overlay-card .sub{font-size:13.5px;color:var(--ink-dim);margin-bottom:16px;line-height:1.55}
.overlay-card label{
  display:block;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:var(--ink-dim);margin:15px 0 6px;
}
.overlay-card input[type=text],.overlay-card input[type=email],.overlay-card select{
  width:100%;padding:12px 13px;border-radius:12px;
  border:1px solid var(--line-soft);
  background:#221d33;
  color:var(--ink);font-family:'Nunito',sans-serif;font-size:15px;font-weight:600;
  box-shadow:inset 0 2px 4px #00000026;
}
.overlay-card input:focus,.overlay-card select:focus{outline:2px solid var(--amber);outline-offset:1px}
.overlay-card .btn{width:100%;margin-top:20px}
.overlay-card .err{color:var(--coral);font-size:13px;font-weight:700;margin-top:10px;min-height:18px}
.overlay-card .note{font-size:12.5px;color:var(--ink-dim);margin-top:12px;line-height:1.55}
.devlink{margin-top:12px;padding:12px;border:1px dashed var(--mint);border-radius:12px;font-size:12px}
.devlink .btn{margin-top:10px}

/* volba kotviště (onboarding) */
.anchor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
@media(max-width:520px){.anchor-grid{grid-template-columns:1fr}}
.anchor-card{
  cursor:pointer;text-align:center;
  background:linear-gradient(180deg,#332d4c,#282239);
  border:2px solid var(--line-soft);border-radius:14px;padding:11px 8px;
  color:var(--ink);font-family:'Nunito',sans-serif;
  transition:transform .08s ease, border-color .15s ease, box-shadow .15s ease;
}
.anchor-card:hover{transform:translateY(-2px)}
.anchor-card.selected{
  border-color:var(--amber);
  box-shadow:0 0 0 3px #ffb45433, 0 0 16px -4px #ffb45466;
}
.anchor-card .a-ic{font-size:24px}
.anchor-card .a-nm{font-family:'Baloo 2';font-weight:700;font-size:13.5px;margin-top:4px}
.anchor-card .a-desc{font-size:10.5px;color:var(--ink-dim);font-weight:700;margin-top:2px;line-height:1.35}

/* obchod (Meridian) */
.overlay-card input[type=number],.modal-card input[type=number],.modal-card select{
  width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--line-soft);
  background:#221d33;color:var(--ink);font-family:'Nunito',sans-serif;font-size:15px;font-weight:600;
  box-shadow:inset 0 2px 4px #00000026;
}
.modal-card label{
  display:block;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:var(--ink-dim);margin:13px 0 6px;
}
.trade-summary{margin-top:14px;font-size:14px;line-height:1.5;background:#241f33;border:1px solid var(--line-soft);
  border-radius:12px;padding:11px 13px}
.trade-summary .lack{color:var(--coral);font-weight:800}

/* segmentový výběr suroviny (rychlejší než select) */
.seg{display:flex;gap:7px}
.seg .seg-btn{
  flex:1;cursor:pointer;text-align:center;
  background:linear-gradient(180deg,#332d4c,#282239);
  border:2px solid var(--line-soft);border-radius:12px;
  padding:9px 4px;color:var(--ink);
  font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;
  transition:transform .08s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.seg .seg-btn:hover:not(:disabled){transform:translateY(-1px)}
.seg .seg-btn.selected{
  border-color:var(--amber);
  box-shadow:0 0 0 3px #ffb45433, 0 0 14px -4px #ffb45466;
}
.seg .seg-btn:disabled{opacity:.3;cursor:not-allowed;transform:none}

/* skill allocator (onboarding) */
.skillrow{display:flex;align-items:center;gap:10px;padding:7px 0}
.skillrow .nm{flex:1;font-size:14px;font-weight:800}
.skillrow .hint{font-size:11px;color:var(--ink-dim);font-weight:600}
.skillrow button{
  width:32px;height:32px;border-radius:10px;
  border:1px solid var(--line-soft);
  background:linear-gradient(180deg,#332d4c,#282239);
  color:var(--ink);font-size:16px;font-weight:800;cursor:pointer;
  box-shadow:0 2px 0 #1d1930;
  transition:transform .06s ease, filter .15s ease;
}
.skillrow button:hover:not(:disabled){filter:brightness(1.15)}
.skillrow button:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.skillrow button:disabled{opacity:.25;cursor:default}
.skillrow .val{width:24px;text-align:center;font-weight:800;font-size:17px;font-family:'Baloo 2'}
.skillpts{margin-top:10px;font-size:13px;font-weight:800;color:var(--mint)}
.skillpts.zero{color:var(--ink-dim)}

/* chybová stránka (magic link) */
.auth-error-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-error-card{max-width:420px;text-align:center;padding:28px}
.auth-error-card .err{color:var(--coral);font-weight:700;margin:14px 0}
.auth-error-card .btn{display:inline-block;text-decoration:none}

/* ---------- přístupnost ---------- */
@media (prefers-reduced-motion: reduce){
  .panel,.overlay-card{animation:none}
  .ai-portrait,.logo .dot,.map-screen::before{animation:none}
  .speech.pop{animation:none}
  .highlighted{animation:none;box-shadow:0 0 0 4px #ffb45459}
}