:root {
  --gold: #c9a84c;
  --gold-light: #e8c96a;
  --cream: #f0e6d0;
  --teal: #2a9d8f;
  --teal-light: #52c5b5;
  --blue: #264653;
  --blue-light: #457b9d;
  --dark: #0a0a0f;
  --text: #f0e6d0;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:#000; }

/* ── FULLSCREEN BG ── */
#bg {
  position:fixed; inset:0; z-index:0;
  background-size:cover; background-position:center;
  transition:background-image 1.2s ease;
}
#overlay {
  position:fixed; inset:0; z-index:1;
  background:rgba(5,5,15,0.75);
}

/* ── SWIPE GLOW ── */
#glowL, #glowR {
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .1s;
}
#glowL { background:radial-gradient(ellipse 50% 100% at 0% 50%, rgba(42,157,143,0.35), transparent); }
#glowR { background:radial-gradient(ellipse 50% 100% at 100% 50%, rgba(69,123,157,0.35), transparent); }

/* ── LAYOUT ── */
#screen {
  position:fixed; inset:0; z-index:3;
  display:flex; flex-direction:column;
  font-family:'Crimson Text', serif;
}

/* ── TOP BAR ── */
#topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 32px 0;
  flex-shrink:0;
}
#game-logo {
  font-family:'Cinzel', serif; font-size:13px; font-weight:600;
  color:var(--gold); letter-spacing:4px; text-transform:uppercase;
  opacity:0.8;
}
#day-counter {
  font-family:'Cinzel', serif; font-size:12px; color:var(--cream);
  opacity:0.5; letter-spacing:2px;
}

/* RESOURCES */
#resources {
  display:flex; justify-content:center; gap:24px;
  padding:14px 32px 0;
  flex-shrink:0;
  flex-wrap:wrap;
}
.res-block {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  min-width:70px;
}
.res-icon { font-size:28px; line-height:1; }
.res-label {
  font-family:'Cinzel', serif; font-size:9px; letter-spacing:1.5px;
  color:var(--cream); opacity:0.55; text-transform:uppercase;
}
.res-value {
  font-family:'Cinzel', serif; font-size:20px; font-weight:700;
  color:var(--cream); line-height:1;
  transition:color 0.4s;
}
.res-value.danger { color:#e07070; }
.res-value.warning { color:#e0c070; }
.res-bar-track {
  width:60px; height:3px;
  background:rgba(255,255,255,0.1); border-radius:2px; overflow:hidden;
}
.res-bar-fill {
  height:100%; border-radius:2px;
  transition:width 0.5s cubic-bezier(.34,1.2,.64,1), background 0.4s;
}

/* ── DIVIDER ── */
.divider {
  width:100%; height:1px;
  background:linear-gradient(to right, transparent, rgba(201,168,76,0.3), transparent);
  margin:14px 0 0;
  flex-shrink:0;
}

/* ── CARD AREA ── */
#card-area {
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:16px 64px;
  position:relative;
  overflow:hidden;
}

/* ARROW BUTTONS */
.arrow-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(201,168,76,0.25);
  background:rgba(0,0,0,0.3); backdrop-filter:blur(8px);
  color:var(--gold); font-size:20px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s; z-index:10;
  opacity:0.5;
}
.arrow-btn:hover { opacity:1; border-color:rgba(201,168,76,0.6); background:rgba(0,0,0,0.5); }
#arrowL { left:10px; }
#arrowR { right:10px; }

/* THE CARD */
#card {
  max-width:600px; width:100%;
  cursor:grab; user-select:none; touch-action:none;
  will-change:transform;
  display:flex; flex-direction:column;
  border-radius:8px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
  border:1px solid rgba(201,168,76,0.2);
  background: linear-gradient(
    135deg,
    rgba(8,8,20,0.97) 0%,
    rgba(15,12,30,0.97) 30%,
    rgba(10,18,28,0.97) 60%,
    rgba(8,8,20,0.97) 100%
  );
  position:relative;
}
#card::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(201,168,76,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 100%, rgba(42,157,143,0.05) 0%, transparent 60%);
  pointer-events:none;
}

#card:active { cursor:grabbing; }

/* WHO BADGE */
#card-who {
  font-family:'Cinzel', serif; font-size:10px; letter-spacing:3px;
  color:var(--gold); text-transform:uppercase; opacity:0.8;
  text-align:center;
  padding:22px 24px 0;
}

/* HIDE IMAGE */
#card-image { display:none; }

/* MAIN TEXT */
#card-text {
  font-family:'Crimson Text', serif; font-size:22px;
  color:var(--cream); line-height:1.7; text-align:center;
  padding:20px 28px 24px;
  text-shadow:0 2px 12px rgba(0,0,0,0.8);
  flex:1;
}



#choices {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid rgba(201,168,76,0.15);
}
.choice-btn {
  padding:18px 20px;
  font-family:'Crimson Text', serif; font-size:16px;
  text-align:center; line-height:1.4; pointer-events:none;
  border:none; transition:all .2s;
  display:flex; align-items:center; gap:8px;
  position: relative;
}
#choiceL {
  background:rgba(42,157,143,0.12);
  border-right:1px solid rgba(201,168,76,0.15);
  color:#7dd8ce;
  justify-content:flex-start;
}
#choiceR {
  background:rgba(69,123,157,0.12);
  color:#90bcdb;
  justify-content:flex-end;
}

/* SWIPE HINT LABEL - hidden */
#swipe-hint { display:none; }

/* SIDE LABELS (appear on drag) */
#labelL, #labelR {
  position:fixed; top:50%; z-index:20; pointer-events:none;
  opacity:0; transition:opacity .12s;
  font-family:'Cinzel', serif; font-size:12px; letter-spacing:3px;
  text-transform:uppercase; writing-mode:vertical-lr;
}
#labelL { left:16px; transform:translateY(-50%) rotate(180deg); color:#7dd8ce; }
#labelR { right:16px; transform:translateY(-50%); color:#90bcdb; }

/* TOAST */
#toast {
  position:fixed; bottom:80px; left:50%;
  transform:translateX(-50%) translateY(10px);
  background:rgba(10,10,20,0.9); border:1px solid rgba(201,168,76,0.3);
  color:var(--cream); font-family:'Crimson Text',serif; font-size:16px;
  padding:11px 22px; border-radius:3px;
  opacity:0; pointer-events:none; z-index:50; white-space:nowrap;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* INTRO */
#intro {
  position:fixed; inset:0; z-index:80;
  background:rgba(5,5,15,0.88); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 32px; gap:20px;
  transition:opacity .6s;
}
#intro.gone { opacity:0; pointer-events:none; }
#intro-crown { font-size:56px; line-height:1; }
#intro-title {
  font-family:'Cinzel', serif; font-size:32px; font-weight:700;
  color:var(--gold); letter-spacing:4px; text-align:center;
  text-shadow:0 2px 20px rgba(201,168,76,0.4);
}
#intro-sub {
  font-family:'Cinzel', serif; font-size:11px; letter-spacing:5px;
  color:var(--cream); opacity:0.45; text-transform:uppercase; text-align:center;
}
.intro-divider {
  width:120px; height:1px;
  background:linear-gradient(to right, transparent, var(--gold), transparent);
}
#intro-story {
  font-family:'Crimson Text', serif; font-size:18px; font-style:italic;
  color:var(--cream); opacity:0.85; line-height:1.75;
  text-align:center; max-width:440px;
}
#intro-resources {
  display:flex; gap:0; padding:16px 0px;
  border:1px solid rgba(201,168,76,0.2); border-radius:4px;
  background:rgba(255,255,255,0.03);
}
.ir {
  flex:1; text-align:center;
  padding:0px 0px;
  border-right:1px solid rgba(201,168,76,0.1);
  min-width:78px;
  max-width: 78px;
}

.ir:last-child {
  border-right:none;
}
.ir-icon { font-size:22px; }
.ir-name {
  font-family:'Cinzel', serif; font-size:8px; letter-spacing:0.5px;
  color:var(--cream); opacity:0.5; text-transform:uppercase; margin-top:4px;
}
#start-btn {
  font-family:'Cinzel', serif; font-size:14px; letter-spacing:4px;
  text-transform:uppercase; color:var(--dark);
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  border:none; padding:16px 48px; border-radius:2px;
  cursor:pointer; transition:all .2s;
  box-shadow:0 4px 24px rgba(201,168,76,0.3);
}
#start-btn:hover { transform:scale(1.04); box-shadow:0 6px 32px rgba(201,168,76,0.45); }

/* GAME OVER */
#go {
  position:fixed; inset:0; background:rgba(5,5,15,0.95);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:100; gap:16px; padding:40px;
  opacity:0; pointer-events:none; transition:opacity .6s;
}
#go.show { opacity:1; pointer-events:all; }
#go-icon { font-size:64px; }
#go-title {
  font-family:'Cinzel', serif; font-size:26px; color:var(--gold);
  letter-spacing:4px; text-align:center;
}
#go-reason {
  font-family:'Crimson Text', serif; font-size:18px; font-style:italic;
  color:var(--cream); opacity:0.7; text-align:center; max-width:340px; line-height:1.6;
}
#go-days {
  font-family:'Cinzel', serif; font-size:11px; letter-spacing:3px;
  color:var(--gold); opacity:0.45;
}
#restart-btn {
  font-family:'Cinzel', serif; font-size:13px; letter-spacing:3px;
  color:var(--dark); background:linear-gradient(135deg, var(--gold), var(--gold-light));
  border:none; padding:14px 40px; border-radius:2px;
  cursor:pointer; margin-top:8px; transition:all .2s;
}
#restart-btn:hover { transform:scale(1.04); }

#ad-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#ad-overlay.show {
  opacity: 1;
  pointer-events: all;
}
#ad-modal {
  position: relative;
  border: 1px solid #ddd;
  background: #fff;
  display: inline-flex;
}
#ad-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #222;
  border: 1px solid #ddd;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s;
}
#ad-close:hover { background: #444; }

#ad-content {
  min-width: 300px;
  min-height: 250px;
  background: #f0f0f0; /* להסיר אחרי בדיקה */
}

/* ── MOBILE PORTRAIT ── */
@media (max-width:600px) {
  #card-area {
    padding:8px 16px;
  }
  #card-who {
    font-size:9px; letter-spacing:2px;
    padding:16px 16px 0;
  }
#card-text {
  font-family:'Crimson Text', serif; font-size:22px;
  color:var(--cream); line-height:1.7; text-align:center;
  padding:32px 28px 36px;
  text-shadow:0 2px 12px rgba(0,0,0,0.8);
  flex:1;
  min-height:160px;
}
  #choices {
    grid-template-columns:1fr;
  }
  #choiceL {
    border-right:none;
    border-bottom:1px solid rgba(201,168,76,0.15);
  }
  .choice-btn {
    font-size:15px;
    padding:14px 16px;
  }
  #resources {
    gap:14px;
    padding:10px 16px 0;
  }
  .res-block { min-width:55px; }
  .res-value { font-size:16px; }
  .res-label { font-size:8px; }
  .res-bar-track { width:45px; }
  .arrow-btn { display:none; }
  #topbar { padding:14px 16px 0; }
  #game-logo { font-size:11px; }
  #day-counter { font-size:10px; }
}

/* ── MOBILE LANDSCAPE ── */
@media (max-height:500px) and (orientation:landscape) {
  #resources { gap:16px; padding:8px 16px 0; }
  .res-value { font-size:15px; }
  .res-label { font-size:7px; }
  .res-bar-track { width:40px; }
  .divider { margin:8px 0 0; }
  #card-area { padding:8px 56px; }
  #card-who { font-size:9px; padding:12px 20px 0; }
  #card-text {
  font-size:17px;
  padding:22px 16px 26px;
  min-height:120px;
}
  .choice-btn { font-size:14px; padding:12px 16px; }
  #topbar { padding:10px 24px 0; }
}