@font-face{
  font-family:"Tekab";
  src:url('assets/tekab.ttf') format('truetype');
  font-display:swap;
}
:root{
  --purple:#351541;
  --purple-2:#421c50;
  --purple-3:#5d2a6f;
  --gold:#ffdc00;
  --white:#ffffff;
  --muted:#e2d4e6;
  --stroke:#73517e;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--purple)}
body{
  color:var(--gold);
  background:var(--purple);
  font-family:"Tekab",Tahoma,Arial,sans-serif;
  min-height:100dvh;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}
.app{min-height:100dvh;display:flex;flex-direction:column}
.topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:calc(env(safe-area-inset-top) + 10px) max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));
  background:var(--purple);
  border-bottom:1px solid #6b4a75;
}
.topbar.hidden{display:none}
.small-btn{
  background:var(--gold);
  color:var(--purple);
  border:0;
  border-radius:14px;
  min-width:48px;
  min-height:42px;
  padding:0 12px;
  font-size:24px;
  line-height:1;
}
.brand{font-size:clamp(20px,4.5vw,34px);text-align:center;flex:1}
.topbar-gap{width:48px;min-width:48px}
.main{
  width:100%;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px clamp(10px,3.5vw,18px) calc(env(safe-area-inset-bottom) + 22px);
  gap:12px;
}
.home-screen{
  min-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 18px;
}
.home-card{
  width:min(100%,420px);
  background:#3d184b;
  border:2px solid var(--gold);
  border-radius:34px;
  padding:28px 22px 26px;
  text-align:center;
  box-shadow:0 15px 45px #17061f55;
}
.home-logo{
  width:min(44vw,160px);
  aspect-ratio:1/1;
  margin:0 auto 20px;
  display:block;
}
.home-title{font-size:clamp(30px,8vw,52px);margin:0 0 8px}
.home-subtitle{color:var(--muted);line-height:1.9;font-size:clamp(14px,3.4vw,18px);margin:0 0 26px}
.poster{
  position:relative;
  width:min(100%,500px);
  aspect-ratio:9/16;
  flex:none;
  overflow:hidden;
  isolation:isolate;
}
.poster>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.hotspot{
  position:absolute;
  border:0;
  background:transparent;
  color:transparent;
  padding:0;
}
.counter{
  position:absolute;
  transform:translate(-50%,-50%);
  font-size:clamp(22px,6vw,38px);
  font-weight:bold;
  color:var(--gold);
  pointer-events:none;
  direction:ltr;
}
.categories .choice{border-radius:20%}
.categories .choice.locked{background:#351541bc;border:2px dashed #e0be00}
.categories .choice.locked::after{content:'✓';display:grid;place-items:center;font-size:34px;color:var(--gold);width:100%;height:100%}
.difficulty .difficulty-button{border-radius:20%}
.back-float{
  position:absolute;
  top:3%;
  right:4%;
  background:var(--gold);
  color:var(--purple);
  border:0;
  border-radius:999px;
  padding:5px 14px;
  font-size:clamp(12px,3vw,18px);
}
.bottom-link{font-size:13px;max-width:620px;width:100%;text-align:center;color:var(--muted);line-height:1.8}
.card{
  width:min(100%,620px);
  border:2px solid var(--gold);
  border-radius:28px;
  background:var(--purple-2);
  padding:clamp(16px,4vw,26px);
  box-shadow:0 10px 28px #200a2852;
}
.panel-title{font-size:clamp(24px,6.4vw,34px);text-align:center;margin:0 0 12px}
.subtle{color:var(--muted);text-align:center;font-size:clamp(14px,3.4vw,17px);line-height:1.9}
.gold-btn{
  background:var(--gold);
  border:0;
  border-radius:18px;
  color:var(--purple);
  padding:12px 18px;
  font-size:clamp(17px,4.4vw,24px);
  font-weight:bold;
  min-height:50px;
}
.outline-btn{
  background:transparent;
  color:var(--gold);
  border:2px solid var(--gold);
  border-radius:16px;
  padding:10px 14px;
  min-height:46px;
}
.action-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.action-row>*{flex:1 1 130px}
.field{background:#fff;border:2px solid var(--gold);border-radius:12px;padding:10px;color:#24102d;font-size:17px}
.teams-form{display:grid;gap:10px}
.team-edit{display:flex;align-items:center;gap:8px}
.team-edit input{flex:1;min-width:0}
.move{display:flex;gap:4px;direction:ltr}
.mini{background:var(--gold);color:var(--purple);border:0;border-radius:10px;min-width:38px;min-height:38px}
.word-box{
  border:2px dashed var(--gold);
  background:#32133e;
  border-radius:18px;
  padding:22px 12px;
  min-height:155px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-align:center;
}
.word{font-size:clamp(28px,8vw,44px);line-height:1.6;overflow-wrap:anywhere}
.hint{color:#eee;font-size:15px;line-height:1.8}
.phase-label{text-align:center;color:#f0dff4;font-size:16px;line-height:1.9}
.timer{
  font-family:"Tekab",Tahoma,Arial,sans-serif;
  direction:ltr;
  text-align:center;
  font-size:clamp(62px,18vw,108px);
  font-variant-numeric:tabular-nums;
  font-weight:bold;
  color:var(--gold);
  line-height:1.4;
}
.timer.urgent{color:#ff8c84}
.progress{height:12px;background:#1b0924;border-radius:50px;overflow:hidden}
.progress-inner{height:100%;background:var(--gold);width:100%;transition:width .1s linear}
.score-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:clamp(16px,3.8vw,20px)}
.score-table th,.score-table td{padding:10px 6px;border-bottom:1px solid #705278;text-align:center}
.score-table th{color:#fff;font-weight:normal}
.score-table tr.active-row td{background:#ffdc0015}
.score-table tr:last-child td{border-bottom:0}
.badge-active{display:inline-block;background:var(--gold);color:var(--purple);border-radius:999px;padding:3px 10px;font-size:14px;white-space:nowrap}
.status-box{background:#361648;border-radius:18px;padding:14px 12px;text-align:center;line-height:1.9}
.status-box.success{border:2px solid #d1ff7a;color:#f8ffd6}
.status-box.fail{border:2px solid #ff9f95;color:#ffe1dd}
.rank-row{display:flex;justify-content:space-between;border-bottom:1px solid #755b7a;padding:10px 3px;font-size:19px;gap:10px}
.rank-row:last-child{border-bottom:0}
.winner{background:var(--gold);color:var(--purple);border-radius:18px;padding:20px;text-align:center;font-size:25px}
.toolbar{display:flex;flex-wrap:wrap;gap:8px}
.toolbar select{flex:1;min-width:140px}
.word-list{max-height:45dvh;overflow:auto;margin-top:12px}
.word-entry{display:flex;align-items:center;gap:7px;justify-content:space-between;border-bottom:1px solid #66446f;padding:8px 1px}
.word-entry span{flex:1;line-height:1.7}
.word-entry button{font-size:13px;min-width:55px}
.footer-note{font-size:12px;color:#cbb6d0;text-align:center;line-height:1.8}
.toast{
  position:fixed;
  z-index:80;
  bottom:calc(16px + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:90%;
  background:var(--gold);
  color:var(--purple);
  border-radius:12px;
  padding:10px 18px;
  text-align:center;
  font-size:16px;
  display:none;
}
.toast.show{display:block}
.overlay{position:fixed;inset:0;z-index:60;background:#100916ad;display:grid;place-items:center;padding:18px}
.dialog{max-width:500px;width:100%;max-height:85dvh;overflow:auto}
.celebrities-tile{
  position:absolute;
  left:53%;top:72%;width:38%;height:22%;
  background:#351541;
  z-index:2;
  pointer-events:none;
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:flex-start;
  padding-top:3.2%;
  gap:4%;
  color:var(--gold);
}
.celebrities-icon{
  width:90%;height:62%;background:var(--gold);border-radius:22%;display:flex;align-items:center;justify-content:center;
}
.celebrities-icon svg{width:65%;height:72%}
.celebrities-tile span{font-size:clamp(20px,5.8vw,31px);line-height:1.25;white-space:nowrap;font-weight:bold}
@media(min-width:760px){.poster{width:min(100%,465px)}.main{padding-top:18px}}
@media(max-width:350px){.gold-btn{padding:10px 12px}.brand{font-size:clamp(18px,5vw,24px)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}


.home-entry{
  position:relative;
  width:min(100%,500px);
  aspect-ratio:9/16;
  overflow:hidden;
  border-radius:0;
}
.home-entry-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.home-entry-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:24px;
}
.home-entry-logo{
  width:min(52vw,220px);
  height:auto;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.18));
}
.home-start-btn{
  min-width:min(62vw,220px);
}
.round-custom .round-hotspot{background:transparent;border:0;padding:0}
.round-custom .round-hotspot.disabled-hotspot{pointer-events:none}
.round-top-meta{
  position:absolute;
  top:4.5%;
  left:7%;
  right:7%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--gold);
  font-size:clamp(16px,3.8vw,24px);
  text-shadow:0 2px 6px rgba(0,0,0,.25);
}
.round-help-note{
  position:absolute;
  left:10%;
  right:10%;
  bottom:27%;
  text-align:center;
  color:var(--gold);
  font-size:clamp(16px,4vw,24px);
  line-height:1.8;
}
.round-word-overlay{
  position:absolute;
  left:17%;
  right:17%;
  top:19%;
  height:43%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  padding:16px 18px;
}
.round-word-text{
  font-size:clamp(30px,7vw,44px);
  line-height:1.7;
  color:var(--gold);
  overflow-wrap:anywhere;
}
.round-word-hint{
  color:#f6e9ff;
  font-size:clamp(14px,3.4vw,18px);
  line-height:1.9;
}
.round-floating-timer{
  position:absolute;
  top:6.8%;
  left:50%;
  transform:translateX(-50%);
  font-size:clamp(34px,8.6vw,56px);
  line-height:1;
  width:auto;
  margin:0;
}
.round-progress-wrap{
  position:absolute;
  left:12%;
  right:12%;
  top:15%;
}
.judge-help{
  position:absolute;
  left:0;
  right:0;
  top:43%;
  text-align:center;
  color:var(--purple);
  font-size:clamp(16px,4vw,22px);
}
/* پوستر اصلی بدون کشیدگی: تمام مختصات کنترل‌ها درصدی و نسبت‌مند هستند */
.remove-extra-time{
  position:absolute;
  left:18%;right:18%;top:59%;height:18%;
  background:#361648;
  pointer-events:none;
}
.round-custom .round-word-overlay{
  top:22%;height:23%;left:20%;right:20%;padding:0 4%;
  pointer-events:none;gap:3px;
}
.round-custom .round-word-text{
  font-size:clamp(21px,5.6vw,36px);
  line-height:1.55;
  max-height:100%;
  overflow-wrap:anywhere;
}
.round-custom .round-word-hint{
  font-size:clamp(12px,2.8vw,16px);
  line-height:1.55;
  max-height:45%;
  overflow:auto;
}
.round-custom .round-floating-timer{
  top:8%;font-size:clamp(25px,7vw,43px);
  white-space:nowrap;
}
.round-custom .round-hotspot{z-index:4}
.round-custom .round-hotspot:focus-visible{outline:2px solid #fff}
.summary-card{padding:clamp(16px,3vw,24px)}
.round-result{
  margin:12px auto 18px;
  width:100%;min-height:82px;
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:8px 16px;
  padding:16px 12px;
  background:#351541;
  border:2px solid #ffdc00;
  border-radius:18px;
  color:#fff;
  text-align:center;
  font-size:clamp(16px,4vw,22px);
  line-height:1.5;
}
.round-result strong{color:#ffdc00;font-size:1.1em}
.round-result.success{border-color:#ffdc00}
.round-result.fail{border-color:#f89b9b}
.score-table{font-size:clamp(15px,3.4vw,20px)}
.score-table td,.score-table th{padding:8px 3px}
@media(max-width:390px){
 .summary-card{padding:14px 12px}
 .score-table{font-size:14px}
 .round-result{font-size:16px}
}
/* صفحه ورود تمام‌قد؛ تصویر و لوگو بدون تغییر شکل */
.home-entry{
  width:100%;
  max-width:none;
  min-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  aspect-ratio:auto;
}
.home-entry-bg{object-fit:cover}
.home-entry-overlay{
  min-height:100%;
  justify-content:center;
  padding-top:max(28px,env(safe-area-inset-top));
  padding-bottom:max(28px,env(safe-area-inset-bottom));
}
.home-entry-logo{width:min(55vw,220px);max-height:50dvh;object-fit:contain}
.home-start-btn{min-height:55px}
.round-custom .round-word-overlay{top:21%;height:18%}

/* The single-use swap control visibly locks after being used once. */
.round-custom .round-hotspot.swap-used{opacity:1;cursor:not-allowed}
.round-custom .round-hotspot.swap-used::after{
  content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#351541bf;color:#ffdc00;border:2px solid #ffdc00;border-radius:999px;
  font-family:"Tekab",Tahoma,sans-serif;font-size:clamp(20px,5vw,34px);
}