/* style.css — מסכים, סרגל כלים, חנות ואוסף. פונטים: Rubik + Suez One (כמו בשאר המשחקים). */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
  height:100%; overflow:hidden; background:#2c4a24; color:#402d20;
  font-family:'Rubik', sans-serif; user-select:none; -webkit-user-select:none;
  overscroll-behavior:none; touch-action:none;
}
#stage { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#2c4a24; }
#game { display:block; background:#9fd3f2; }
#screens { position:fixed; inset:0; pointer-events:none; }
#screens > * { pointer-events:auto; }

.screen { position:absolute; inset:0; display:flex; flex-direction:column; padding:20px; }
.screen.center { align-items:center; justify-content:center; gap:14px; text-align:center; }

.logo {
  font-family:'Suez One', serif; font-size:clamp(40px, 8vw, 84px); line-height:1.1; color:#ffd166;
  text-shadow:0 4px 0 #b3202c, 0 8px 22px rgba(0,0,0,.35);
}
.title { font-family:'Suez One', serif; font-size:clamp(26px, 4vw, 42px); }
.sub { font-size:clamp(15px, 2vw, 21px); background:rgba(251,247,238,.85); padding:6px 18px; border-radius:30px; }
.hint { font-size:15px; color:#402d20; max-width:680px; line-height:1.7; background:rgba(251,247,238,.82); padding:8px 16px; border-radius:14px; }
.saved { font-size:15px; line-height:1.9; background:rgba(251,247,238,.9); padding:8px 18px; border-radius:14px; }

.char-strip { display:flex; gap:4px; }
.char-strip img { width:clamp(64px, 11vw, 120px); height:auto; animation:bob 2.6s ease-in-out infinite; }
.char-strip img:nth-child(2) { animation-delay:.4s; } .char-strip img:nth-child(3) { animation-delay:.8s; }
.char-strip img:nth-child(4) { animation-delay:1.2s; } .char-strip img:nth-child(5) { animation-delay:1.6s; }
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .char-strip img { animation:none; } }

.btn {
  font-family:'Suez One', serif; font-size:22px; color:#fff; border:none; cursor:pointer;
  background:linear-gradient(#2f7fe0, #1e5bb0); padding:12px 34px; border-radius:16px;
  box-shadow:0 6px 0 #14407e, 0 10px 22px rgba(0,0,0,.3);
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform:translateY(4px); box-shadow:0 2px 0 #14407e, 0 6px 14px rgba(0,0,0,.3); }
.btn:disabled { opacity:.45; cursor:default; transform:none; }
.btn-big { font-size:32px; padding:16px 60px; }
.btn-orange { background:linear-gradient(#f0952e, #d06d14); box-shadow:0 6px 0 #9c4f0c, 0 10px 22px rgba(0,0,0,.3); }
.btn-orange:active { box-shadow:0 2px 0 #9c4f0c, 0 6px 14px rgba(0,0,0,.3); }
.btn-ghost { background:rgba(251,247,238,.9); border:2px solid #c9b795; box-shadow:none; color:#402d20; }
.btn-ghost:active { transform:scale(.97); box-shadow:none; }
.small { font-size:16px; padding:7px 16px; border-radius:12px; text-decoration:none; display:inline-block; }
.btn-row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

.tag { font-size:13px; padding:2px 9px; border-radius:20px; color:#fff; font-weight:600; }
.tag.p1 { background:#2f7fe0; } .tag.p2 { background:#f0952e; }

/* ---------- בחירת דמות ---------- */
.screen.center.select { justify-content:flex-start; padding-top:16px; overflow:auto; }
.char-grid { display:grid; grid-template-columns:repeat(5, minmax(110px, 200px)); gap:12px; margin:4px auto; }
@media (max-width:720px) { .char-grid { grid-template-columns:repeat(3, minmax(100px, 1fr)); } }
.char-card {
  background:rgba(251,247,238,.94); border:4px solid #ddd0b4; border-radius:20px; padding:8px 8px 10px;
  display:flex; flex-direction:column; align-items:center; gap:4px; position:relative;
  box-shadow:0 8px 18px rgba(0,0,0,.2);
}
.char-card img { width:100%; max-width:140px; height:auto; }
.char-card.cur1 { border-color:#2f7fe0; } .char-card.cur2 { border-color:#f0952e; }
.char-card.cur1.cur2 { border-color:#2f7fe0 #f0952e #f0952e #2f7fe0; }
.char-card.lock1 { background:#dbe9fb; } .char-card.lock2 { background:#fde6cc; }
.char-card.lock1.lock2 { background:linear-gradient(90deg, #fde6cc 50%, #dbe9fb 50%); }
.char-name { font-family:'Suez One', serif; font-size:18px; line-height:1.2; }
.char-trait { font-size:13px; color:#6f6552; min-height:18px; }
.pick-row { display:flex; gap:8px; margin-top:4px; }
.pick { width:44px; height:36px; border-radius:10px; border:none; cursor:pointer; color:#fff; font-family:'Suez One', serif; font-size:18px; }
.pick.p1 { background:#2f7fe0; } .pick.p2 { background:#f0952e; }
.sel-status { font-size:17px; background:rgba(251,247,238,.9); padding:6px 16px; border-radius:14px; }

/* ---------- בתוך המשחק ---------- */
.toolbar {
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
}
.toolbar .btn { font-size:15px; padding:6px 14px; }

.overlay { position:absolute; inset:0; background:rgba(30,20,10,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.panel {
  background:#fbf7ee; border-radius:24px; padding:20px 22px; width:min(760px, 100%); max-height:100%; overflow:auto;
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.panel.wide { width:min(1100px, 100%); }
.panel .hint { background:none; padding:0; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; }
@media (max-width:640px) { .cols { grid-template-columns:1fr; } }
.col { border:3px solid; border-radius:18px; padding:12px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.col.p1 { border-color:#2f7fe0; } .col.p2 { border-color:#f0952e; }
.col-title { font-family:'Suez One', serif; font-size:20px; }
.col.p1 .col-title { color:#1e5bb0; } .col.p2 .col-title { color:#c0620f; }
.mini { width:90px; height:90px; }
.money { font-size:26px; font-weight:700; }
.stat { font-size:16px; color:#6f6552; }
.dbs { display:flex; gap:4px; }
.db { width:22px; height:12px; border-radius:4px; background:#e6dcc6; position:relative; }
.db.on { background:#402d20; }
.buy { font-size:19px; padding:10px 22px; }

.coll-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px; width:100%; }
.coll-item { border:3px solid; border-radius:14px; padding:4px 4px 6px; background:#fff; display:flex; flex-direction:column; align-items:center; }
.coll-item img { width:56px; height:56px; }
.coll-item.missing { background:#efe8da; opacity:.7; }
.coll-item .q { width:56px; height:56px; display:flex; align-items:center; justify-content:center; font-family:'Suez One', serif; font-size:30px; color:#b8a98c; }
.coll-name { font-size:12px; font-weight:600; line-height:1.25; min-height:30px; }
.coll-tier { font-size:11px; font-weight:700; }