/* ===========================================================
   نون بیار، کباب ببر — Design System
   Teahouse / warm / cartoon-Persian
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Lalezar&family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');

:root{
  /* Brand */
  --bg-base:#2B1B14;
  --bg-deep:#1B100B;
  --bg-surface:#3A2620;
  --bg-surface-2:#46302770;
  --brand-primary:#F4B324;   /* gold */
  --brand-secondary:#E5601F; /* kebab orange */
  --brand-accent:#C7281C;    /* manghal red */

  /* Semantic */
  --self:#F4B324;
  --enemy:#5B8DEF;
  --enemy-2:#7A5CE0;
  --success:#3FB36B;
  --danger:#E0392B;
  --warning:#F5A623;
  --info:#2BC4C4;

  /* Text */
  --text-primary:#FFF7EC;
  --text-secondary:#C9B8AC;
  --text-muted:#9c8678;
  --text-on-action:#2B1B14;

  /* Gold ornament */
  --gold-1:#FBE08A;
  --gold-2:#F4B324;
  --gold-3:#A9711A;
  --gold-line:#C8923A;

  /* Radius / shadow */
  --r-card:16px;
  --r-btn:13px;
  --shadow-card:0 8px 22px -6px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.04) inset;
  --shadow-pop:0 14px 30px -8px rgba(0,0,0,.6);

  --font-display:'Lalezar', sans-serif;
  --font-body:'Vazirmatn', sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; background:#0d0907; font-family:var(--font-body); }
body{ display:flex; align-items:center; justify-content:center; overflow:hidden; }

/* ---------- 9:19.5 phone stage ---------- */
.stage{ position:fixed; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.screen{
  position:relative; width:432px; height:936px; flex:0 0 auto;
  transform-origin:center center;
  background:var(--bg-base);
  color:var(--text-primary);
  direction:rtl;
  overflow:hidden;
  border-radius:2px;
  isolation:isolate;
}

/* Persian kashi tile texture (subtle) */
.kashi{
  background-image:
    radial-gradient(circle at 50% 0%, rgba(244,179,36,.05), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e5601f' stroke-opacity='0.10' stroke-width='1.4'%3E%3Cpath d='M32 4l8 8-8 8-8-8z'/%3E%3Cpath d='M32 44l8 8-8 8-8-8z'/%3E%3Cpath d='M4 32l8-8 8 8-8 8z'/%3E%3Cpath d='M44 32l8-8 8 8-8 8z'/%3E%3Cpath d='M32 24a8 8 0 100 16 8 8 0 000-16z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:auto, 78px 78px;
}

/* ---------- status bar ---------- */
.statusbar{
  height:34px; display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; font-size:14px; font-weight:700; color:var(--text-primary);
  letter-spacing:.3px; position:relative; z-index:40;
}
.statusbar .sb-time{ font-variant-numeric:tabular-nums; }
.statusbar .sb-right{ display:flex; gap:6px; align-items:center; }
.sb-bars{ display:flex; gap:2px; align-items:flex-end; height:11px; }
.sb-bars i{ width:3px; background:currentColor; border-radius:1px; display:block; }
.sb-bars i:nth-child(1){ height:4px } .sb-bars i:nth-child(2){ height:6px }
.sb-bars i:nth-child(3){ height:8px } .sb-bars i:nth-child(4){ height:11px }
.sb-batt{ width:22px; height:11px; border:1.4px solid currentColor; border-radius:3px; position:relative; }
.sb-batt::after{ content:''; position:absolute; right:-3px; top:3px; width:2px; height:5px; background:currentColor; border-radius:0 1px 1px 0; }
.sb-batt::before{ content:''; position:absolute; inset:1.5px; right:6px; background:currentColor; border-radius:1px; }

/* ---------- gold framed surface ---------- */
.gold-frame{
  position:relative; border-radius:var(--r-card);
  background:linear-gradient(180deg,#4a3026,#33211a);
  padding:2px;
  background-clip:padding-box;
  box-shadow:var(--shadow-card);
}
.gold-frame::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 40%,var(--gold-3));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

/* ---------- chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  height:34px; padding:0 6px 0 12px; border-radius:18px;
  background:linear-gradient(180deg,#23150f,#160d09);
  border:1.5px solid var(--gold-line);
  font-weight:800; font-size:15px; color:var(--text-primary);
  font-variant-numeric:tabular-nums; box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.chip .ic{ width:22px; height:22px; flex:0 0 auto; }
.chip .plus{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2)); color:#3a230b;
  font-weight:900; font-size:16px; line-height:1; margin-inline-start:auto;
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.chip.gem .plus{ background:linear-gradient(180deg,#9fd0ff,#3e8fe0); color:#06243f; }

/* ---------- buttons ---------- */
.btn{
  border:none; cursor:pointer; font-family:var(--font-display);
  border-radius:var(--r-btn); color:var(--text-primary);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  position:relative; -webkit-user-select:none; user-select:none;
}
.btn-cta{
  width:100%; height:74px; font-size:31px; letter-spacing:.5px;
  color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.35);
  background:linear-gradient(180deg,#e23b2b,#b71e16);
  border:2px solid #f7b15a;
  box-shadow:0 8px 0 #7c130d, 0 14px 22px -6px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.25);
}
.btn-cta .play{ width:34px; height:34px; }
.btn-cta:active{ transform:translateY(4px); box-shadow:0 4px 0 #7c130d, 0 8px 14px -6px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.25); }

/* ---------- mode cards ---------- */
.mode-card{
  position:relative; border-radius:var(--r-card); padding:16px 16px;
  min-height:96px; display:flex; align-items:center; gap:14px;
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.10); overflow:hidden; cursor:pointer;
}
.mode-card::after{ /* gold top sheen */
  content:''; position:absolute; inset:0 0 auto 0; height:42%;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent); pointer-events:none;
}
.mode-card .mc-art{ width:64px; height:64px; flex:0 0 auto; display:grid; place-items:center; filter:drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.mode-card .mc-text{ flex:1; }
.mode-card .mc-title{ font-family:var(--font-display); font-size:24px; line-height:1.1; }
.mode-card .mc-sub{ font-size:13px; color:var(--text-secondary); margin-top:3px; font-weight:600; }
.mode-card .mc-meta{ font-size:12.5px; font-weight:700; margin-top:5px; display:inline-flex; align-items:center; gap:6px; color:#cfe6c4;}
.dot-online{ width:9px;height:9px;border-radius:50%;background:var(--success); box-shadow:0 0 7px var(--success); }

.card-red{ background:linear-gradient(180deg,#7a2118,#54160f); }
.card-green{ background:linear-gradient(180deg,#2f5b34,#1f3d23); }
.card-purple{ background:linear-gradient(180deg,#4b3170,#33214d); }
.card-blue{ background:linear-gradient(180deg,#234a78,#172f4d); }
.card-amber{ background:linear-gradient(180deg,#7a4d1c,#523210); }

/* ---------- section header ---------- */
.sec-head{ display:flex; align-items:center; justify-content:space-between; margin:6px 2px 10px; }
.sec-head .t{ font-family:var(--font-display); font-size:21px; display:flex; align-items:center; gap:8px; }
.see-all{ font-size:12.5px; font-weight:700; color:var(--brand-primary); display:inline-flex; align-items:center; gap:5px;
  border:1.4px solid var(--gold-line); border-radius:14px; padding:5px 11px; background:#1b100b88; }

/* ---------- skin card ---------- */
.skin-card{ border-radius:13px; padding:9px 7px 8px; text-align:center; position:relative;
  border:1.5px solid rgba(255,255,255,.10); box-shadow:var(--shadow-card); }
.skin-card .hand-wrap{ height:78px; display:grid; place-items:center; margin-bottom:6px; }
.skin-card .sk-name{ font-size:12px; font-weight:700; color:var(--text-primary); }
.skin-card.owned::after{ content:'✓'; position:absolute; top:6px; inset-inline-start:6px; width:20px;height:20px; border-radius:50%;
  background:var(--success); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:900; box-shadow:0 2px 5px rgba(0,0,0,.4);}
.sk-1{ background:linear-gradient(180deg,#5a3a28,#3c2419);}
.sk-2{ background:linear-gradient(180deg,#2f5b3a,#1f3d27);}
.sk-3{ background:linear-gradient(180deg,#6e2420,#481512);}
.sk-4{ background:linear-gradient(180deg,#1f5a5e,#123c3f);}

/* ---------- daily reward ---------- */
.daily{ display:flex; gap:7px; }
.day{ flex:1; border-radius:11px; padding:6px 2px 7px; text-align:center; position:relative;
  background:linear-gradient(180deg,#3a2620,#2a1a13); border:1.4px solid rgba(255,255,255,.08); }
.day .d-lbl{ font-size:10px; color:var(--text-secondary); font-weight:700; }
.day .d-ic{ width:26px; height:26px; margin:3px auto 2px; display:block; }
.day .d-amt{ font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; }
.day.done{ background:linear-gradient(180deg,#2f5b34,#21401f); border-color:#5db35f;}
.day.today{ border-color:var(--brand-primary); box-shadow:0 0 0 1.5px var(--brand-primary), 0 6px 14px -6px rgba(244,179,36,.5); }
.day.today::after{ content:''; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--brand-primary); }

/* ---------- bottom nav ---------- */
.nav{ position:absolute; bottom:0; left:0; right:0; height:78px; z-index:30;
  display:flex; align-items:flex-start; justify-content:space-around; padding:10px 8px 0;
  background:linear-gradient(180deg,#3a2620,#21140e);
  border-top:2px solid var(--gold-line); box-shadow:0 -6px 18px rgba(0,0,0,.45); }
.nav-item{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--text-muted); font-size:11.5px; font-weight:700; cursor:pointer; flex:1; }
.nav-item .ni{ width:26px; height:26px; }
.nav-item.active{ color:var(--brand-primary); }
.nav-item.home{ position:relative; align-self:stretch; }
.home-arch{ position:absolute; left:50%; bottom:3px; transform:translateX(-50%);
  width:84px; height:92px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:3px; padding-top:26px; }
.home-arch .arch-fill{ position:absolute; inset:0; z-index:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 164' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='ga' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fbe08a'/%3E%3Cstop offset='0.5' stop-color='%23f4b324'/%3E%3Cstop offset='1' stop-color='%23a9711a'/%3E%3C/linearGradient%3E%3ClinearGradient id='ra' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e8412f'/%3E%3Cstop offset='1' stop-color='%23a01910'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M14 158 L14 64 C14 30 42 12 66 6 C90 12 118 30 118 64 L118 158 Q118 162 114 162 L18 162 Q14 162 14 158 Z' fill='url(%23ga)'/%3E%3Cpath d='M22 153 L22 66 C22 37 47 20 66 15 C85 20 110 37 110 66 L110 153 Q110 156 107 156 L25 156 Q22 156 22 153 Z' fill='url(%23ra)'/%3E%3Cpath d='M66 1 L72 9 L66 17 L60 9 Z' fill='url(%23ga)'/%3E%3Cpath d='M30 150 L30 67 C30 43 50 27 66 22' fill='none' stroke='%23ffffff' stroke-opacity='0.22' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.55)); }
.home-arch .ni{ position:relative; z-index:1; width:31px; height:31px; color:#f8d98a;
  filter:drop-shadow(0 1.5px 0 #8a4f12) drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.home-arch b{ position:relative; z-index:1; font-family:var(--font-display); font-weight:400; font-size:13.5px;
  color:#ffe9c2; text-shadow:0 1px 2px rgba(80,10,6,.7); letter-spacing:.5px; }

/* ---------- battle ---------- */
.battle-top{ display:flex; align-items:center; justify-content:space-between; padding:6px 14px 0; position:relative; z-index:20; }
.round-pill{ position:absolute; left:50%; transform:translateX(-50%); top:2px; text-align:center; }
.round-pill .rl{ font-family:var(--font-display); font-size:18px; line-height:1; }
.timer-ring{ width:58px; height:58px; position:relative; margin:3px auto 0; }
.timer-ring .tnum{ position:absolute; inset:0; display:grid; place-items:center; flex-direction:column;
  font-family:var(--font-display); font-size:24px; color:var(--text-primary); }
.timer-ring .tsub{ font-size:9px; color:var(--text-secondary); font-weight:700; }

.icon-btn{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg,#3a2620,#21140e); border:1.6px solid var(--gold-line);
  color:var(--text-primary); cursor:pointer; box-shadow:var(--shadow-card); }
.icon-btn .ic{ width:24px; height:24px; }

/* player strip */
.pstrip{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:14px; margin:8px 12px;
  border:1.5px solid rgba(255,255,255,.12); box-shadow:var(--shadow-card); position:relative; z-index:15; }
.pstrip.enemy{ background:linear-gradient(90deg,#284e86,#15294a); border-color:rgba(123,148,210,.45); }
.pstrip.self{ background:linear-gradient(90deg,#7a4d1c,#43290f); border-color:rgba(244,179,36,.5); }
.pstrip .pav{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; border:2px solid var(--gold-2); overflow:hidden; background:#1b100b; }
.pstrip .pinfo{ flex:1; }
.pstrip .pname{ font-family:var(--font-display); font-size:20px; line-height:1; }
.pstrip .prank{ font-size:12px; font-weight:700; color:var(--text-secondary); display:flex; align-items:center; gap:5px; margin-top:3px; }
.hearts{ display:flex; gap:5px; }
.heart{ width:22px; height:22px; }

/* battle board */
.board{ position:absolute; left:10px; right:10px; top:150px; bottom:236px; border-radius:18px; overflow:hidden;
  border:2px solid var(--gold-line); box-shadow:inset 0 0 60px rgba(0,0,0,.6), var(--shadow-card); }
.board .rug{ position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 50%, #6e241c 0%, #4d1813 38%, #34110d 70%, #240b08 100%);
}
.board .rug::after{ content:''; position:absolute; inset:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23f4b324' stroke-opacity='0.22' stroke-width='1.3'%3E%3Cpath d='M60 14 L74 46 L106 60 L74 74 L60 106 L46 74 L14 60 L46 46 Z'/%3E%3Ccircle cx='60' cy='60' r='20'/%3E%3Ccircle cx='60' cy='60' r='30'/%3E%3C/g%3E%3C/svg%3E");
  background-position:center; background-size:140px 140px; background-repeat:no-repeat;
  mix-blend-mode:screen;}
.board .rug-border{ position:absolute; inset:8px; border:2px solid rgba(244,179,36,.35); border-radius:12px; }

.hand-cell{ position:absolute; width:50%; height:50%; display:grid; place-items:center; }
.hand-cell.tl{ top:0; left:0 } .hand-cell.tr{ top:0; right:0 }
.hand-cell.bl{ bottom:0; left:0 } .hand-cell.br{ bottom:0; right:0 }
.hand-cell .label{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  background:#160d09cc; border:1px solid var(--gold-line); color:var(--text-primary);
  font-size:11px; font-weight:700; padding:3px 10px; border-radius:11px; white-space:nowrap; }
.hand-cell svg.hand{ width:120px; height:142px; filter:drop-shadow(0 8px 10px rgba(0,0,0,.55)); }

.glow-self svg.hand{ filter:drop-shadow(0 0 10px var(--self)) drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.glow-enemy svg.hand{ filter:drop-shadow(0 0 10px var(--enemy)) drop-shadow(0 6px 8px rgba(0,0,0,.5)); }

/* powers panel */
.powers{ position:absolute; left:12px; right:12px; bottom:96px; z-index:15; }
.powers .ph{ text-align:center; font-family:var(--font-display); font-size:16px; margin:0 0 6px;
  position:relative; }
.powers .ph span{ background:linear-gradient(180deg,#4a3026,#33211a); padding:2px 16px; border-radius:12px; border:1.4px solid var(--gold-line); }
.power-row{ display:flex; gap:9px; padding:10px; border-radius:16px;
  background:linear-gradient(180deg,#3a2620,#241710); border:1.6px solid var(--gold-line); box-shadow:var(--shadow-card); }
.power{ flex:1; border-radius:13px; padding:8px 4px 6px; text-align:center; position:relative;
  background:radial-gradient(circle at 50% 35%, #5a3a28, #2c1b13); border:1.5px solid rgba(255,255,255,.12); }
.power .pic{ width:40px; height:40px; margin:0 auto 3px; display:block; }
.power .pn{ font-size:11px; font-weight:700; color:var(--text-primary); }
.power .cnt{ position:absolute; top:5px; inset-inline-end:6px; background:var(--brand-primary); color:#3a230b;
  font-size:11px; font-weight:900; border-radius:9px; padding:1px 6px; box-shadow:0 2px 4px rgba(0,0,0,.4); }
.power.locked{ filter:grayscale(.6) brightness(.7); }
.power.locked .pic{ opacity:.5; }

/* battle bottom dock */
.dock{ position:absolute; left:0; right:0; bottom:0; height:88px; z-index:20;
  display:flex; align-items:center; gap:12px; padding:0 16px 14px;
  background:linear-gradient(180deg,transparent,#160d09 38%); }
.dock .btn-cta{ flex:1; height:66px; font-size:28px; }

/* targeting bits (off in idle) */
.reticle, .attack-path{ display:none; }

/* ambient props in board corners (simple food motifs, drawn flat) */
.prop{ position:absolute; font-size:0; opacity:.92; filter:drop-shadow(0 4px 5px rgba(0,0,0,.5)); }

/* helpers */
.row{ display:flex; gap:12px; }
.col{ display:flex; flex-direction:column; }
.px16{ padding-left:16px; padding-right:16px; }
.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}.mt16{margin-top:16px}

/* ---------- (1) flip chevron arrows horizontally ---------- */
svg.ic use[href="#ic-chevron"]{ transform-box:fill-box; transform-origin:center; transform:scaleX(-1); }

/* ---------- (4) universal button press feedback ---------- */
button, .btn, .mode-card, .nav-item, .tab, .price-btn, .m-claim, .add-btn,
.share-btn, .ic-btn, .see-all, .skin-card, .shop-card, .day, .pack, .pc-edit,
.auth-btn, .auth-tab, .seg .o, .bo-btn, .toggle, .back, .gear, .chip .plus, .s-cancel-top, .btn-cancel {
  -webkit-tap-highlight-color:transparent;
  transition:transform .09s ease, filter .09s ease, box-shadow .09s ease;
}
/* press-down + release for buttons WITHOUT their own :active transform */
button:not(.btn-cta):active, .mode-card:active, .nav-item:active, .tab:active,
.price-btn:active, .m-claim:not(:disabled):active, .add-btn:active, .share-btn:active,
.ic-btn:active, .see-all:active, .skin-card:active, .shop-card:active, .day:active,
.pack:active, .pc-edit:active, .auth-btn:active, .auth-tab:active, .seg .o:active,
.back:active, .gear:active, .btn-cancel:active {
  transform:scale(.94);
  filter:brightness(.9);
}
/* buttons that already move on press keep their motion, just dim slightly */
.btn-cta:active, .bo-btn.primary:active{ filter:brightness(.93); }