.pppl-pro-root{
  --pp-bg:#061226;
  --pp-bg-soft:#0b1833;
  --pp-surface:#101d39;
  --pp-surface-2:#132446;
  --pp-line:rgba(139,172,221,.16);
  --pp-line-strong:rgba(139,172,221,.26);
  --pp-text:#f3f7ff;
  --pp-muted:#97abc9;
  --pp-blue:#3165e8;
  --pp-blue-2:#4f88ff;
  --pp-cyan:#7fdcff;
  --pp-gold:#f2c45b;
  --pp-silver:#dbe4f1;
  --pp-bronze:#df9668;
  --pp-green:#39bf86;
  --pp-red:#da5f6d;
  font-family:"Yekan Bakh","Vazirmatn","IRANSansX",Tahoma,Arial,sans-serif;
  color:var(--pp-text);
  direction:rtl;
}
.pppl-pro-root *{box-sizing:border-box}
.pppl-pro-root button,
.pppl-pro-root input,
.pppl-pro-root select,
.pppl-pro-root textarea{font-family:inherit}
.pppl-pro-app{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:720px;
  padding:30px;
  border-radius:30px;
  background:
    radial-gradient(circle at 8% 12%, rgba(96,147,255,.16), transparent 25%),
    radial-gradient(circle at 88% 88%, rgba(127,220,255,.10), transparent 26%),
    linear-gradient(180deg, #071427 0%, #081528 28%, #091930 100%);
  border:1px solid rgba(173,199,238,.18);
  box-shadow:0 22px 56px rgba(1,8,20,.26), inset 0 1px 0 rgba(255,255,255,.04);
}
.pppl-pro-app:before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.03);
  pointer-events:none;
}
.pppl-bg-formula{
  position:absolute;
  color:rgba(146,170,204,.14);
  font:italic 700 32px Georgia,serif;
  direction:ltr;
  z-index:-1;
  user-select:none;
}
.pppl-bg-formula.f1{left:34px;top:118px;transform:rotate(-8deg)}
.pppl-bg-formula.f2{right:46px;bottom:78px;transform:rotate(8deg)}
.pppl-bg-formula.f3{left:13%;bottom:160px}

.pppl-pro-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}
.pppl-pro-kicker,
.pppl-section-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(127,165,224,.25);
  background:rgba(255,255,255,.04);
  color:#d8e6ff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.1px;
}
.pppl-section-badge.alt{
  background:rgba(242,196,91,.08);
  color:#ffe0a2;
  border-color:rgba(242,196,91,.24);
}
.pppl-pro-header h2{
  margin:12px 0 8px;
  font-size:38px;
  line-height:1.22;
  letter-spacing:-.8px;
  color:#fff;
}
.pppl-pro-header p{
  margin:0;
  color:var(--pp-muted);
  font-size:15px;
  line-height:1.9;
}
.pppl-pro-orbit{
  position:relative;
  width:92px;
  height:92px;
  min-width:92px;
  border-radius:50%;
  background:radial-gradient(circle at 48% 48%, rgba(127,220,255,.12), rgba(0,0,0,0) 68%);
}
.pppl-pro-orbit span,
.pppl-pro-orbit i,
.pppl-pro-orbit b{
  position:absolute;
  inset:14px;
  border:2px solid rgba(127,220,255,.68);
  border-radius:50%;
  transform:rotate(25deg);
}
.pppl-pro-orbit i{transform:rotate(83deg);border-color:rgba(120,150,255,.6)}
.pppl-pro-orbit b{inset:35px;border:0;background:linear-gradient(135deg,#74d8ff,#7b66ff)}

.pppl-pro-alert{
  margin:0 0 18px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(242,196,91,.24);
  background:rgba(242,196,91,.08);
  color:#ffe8b5;
  font-weight:700;
}

.pppl-card{
  background:linear-gradient(180deg, rgba(18,31,60,.92), rgba(10,19,38,.96));
  border:1px solid var(--pp-line);
  border-radius:24px;
  padding:24px;
  box-shadow:0 14px 34px rgba(2,8,22,.20), inset 0 1px 0 rgba(255,255,255,.03);
}
.pppl-card h3{
  margin:10px 0 10px;
  font-size:24px;
  color:#fff;
  letter-spacing:-.3px;
}
.pppl-card p{
  margin:0 0 18px;
  color:var(--pp-muted);
  line-height:1.95;
}

.pppl-home-grid,
.pppl-room-grid,
.pppl-game-grid,
.pppl-finish-grid{
  display:grid;
  grid-template-columns:1.24fr .92fr;
  gap:22px;
}
.pppl-single-card{max-width:620px;margin:20px auto}

.pppl-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.pppl-form-grid label,
.pppl-card label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:14px;
  font-weight:800;
  color:#d7e5ff;
}
.pppl-pro-root input,
.pppl-pro-root select,
.pppl-pro-root textarea{
  width:100%;
  padding:13px 14px;
  border-radius:14px;
  border:1px solid rgba(144,173,216,.18);
  background:rgba(255,255,255,.03);
  color:#fff;
  outline:none;
  font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.pppl-pro-root input::placeholder,
.pppl-pro-root textarea::placeholder{color:#8ba1c4}
.pppl-pro-root input:focus,
.pppl-pro-root select:focus,
.pppl-pro-root textarea:focus{
  border-color:rgba(127,220,255,.44);
  box-shadow:0 0 0 4px rgba(127,220,255,.10);
  background:rgba(255,255,255,.05);
}
.pppl-code-input{
  direction:ltr;
  text-align:center;
  letter-spacing:4px;
  font-weight:900;
  text-transform:uppercase;
}

.pppl-primary,
.pppl-secondary,
.pppl-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:14px 18px;
  border-radius:16px;
  border:0;
  cursor:pointer;
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  font-weight:900;
}
.pppl-primary{
  color:#fff;
  background:linear-gradient(180deg, #4274f0 0%, #315fda 100%);
  box-shadow:0 10px 24px rgba(49,101,232,.24);
}
.pppl-secondary{
  color:#13203b;
  background:linear-gradient(180deg, #f5cf77 0%, #efbd58 100%);
  box-shadow:0 10px 24px rgba(242,196,91,.18);
}
.pppl-ghost{
  color:#ddecff;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(159,182,219,.18);
}
.pppl-primary:hover,
.pppl-secondary:hover,
.pppl-ghost:hover{transform:translateY(-1px)}
.pppl-primary:hover{box-shadow:0 12px 28px rgba(49,101,232,.28)}
.pppl-secondary:hover{box-shadow:0 12px 26px rgba(242,196,91,.22)}
.pppl-wide{width:100%;margin-top:16px}

.pppl-mini-note,
.pppl-waiting{
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(159,182,219,.14);
  background:rgba(255,255,255,.03);
  color:#bfd0e9;
  line-height:1.9;
}
.pppl-home-features{
  display:grid;
  gap:12px;
  margin-top:18px;
}
.pppl-home-features div{
  position:relative;
  padding:13px 14px 13px 38px;
  border-radius:15px;
  border:1px solid rgba(159,182,219,.12);
  background:rgba(255,255,255,.03);
  color:#e2edff;
}
.pppl-home-features div:before{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  transform:translateY(-50%);
  background:linear-gradient(180deg,#8fdbff,#4274f0);
  box-shadow:0 0 0 5px rgba(79,136,255,.12);
}

.pppl-room-code{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:18px 0;
  padding:18px 20px;
  border-radius:20px;
  border:1px solid rgba(242,196,91,.26);
  background:linear-gradient(180deg, rgba(242,196,91,.06), rgba(255,255,255,.025));
}
.pppl-room-code span{color:#cfdcff}
.pppl-room-code strong{
  direction:ltr;
  letter-spacing:6px;
  color:#ffdf8b;
  font-size:42px;
  font-weight:900;
}
.pppl-copy-box{display:flex;gap:10px;margin-bottom:16px}
.pppl-copy-box input{direction:ltr;text-align:left}
.pppl-copy-box button{white-space:nowrap}
.pppl-room-meta{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.pppl-room-meta div{
  padding:13px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(159,182,219,.10);
  color:#aebfde;
}
.pppl-room-meta b{color:#fff}

.pppl-player-panel h3,
.pppl-live-board h3,
.pppl-story-panel h3{margin-top:0}
.pppl-player-chip{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  margin-bottom:10px;
  border-radius:16px;
  border:1px solid rgba(159,182,219,.10);
  background:rgba(255,255,255,.035);
}
.pppl-player-chip.mine{
  border-color:rgba(127,220,255,.28);
  background:linear-gradient(180deg, rgba(127,220,255,.08), rgba(255,255,255,.03));
}
.pppl-avatar{
  width:40px;
  height:40px;
  min-width:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#5c8eff 0%, #4370e1 100%);
  color:#fff;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.pppl-player-chip b{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pppl-player-chip em{font-style:normal;color:#8ee6bd;font-size:12px}

.pppl-game-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.pppl-game-top span{color:#b9cff1;font-weight:900}
.pppl-game-top strong{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(180deg,#4d7bff 0%, #315fda 100%);
  box-shadow:0 10px 18px rgba(49,101,232,.24);
  font-size:24px;
}
.pppl-progress{
  height:10px;
  overflow:hidden;
  margin-bottom:18px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
}
.pppl-progress i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#69d8ff,#f3c860);
  transition:width .28s ease;
}
.pppl-question-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.pppl-question-meta b,
.pppl-question-meta span{
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(159,182,219,.10);
  background:rgba(255,255,255,.03);
  color:#d5e4fc;
  font-size:13px;
}
.pppl-question-card h3{
  margin:10px 0 22px;
  font-size:26px;
  line-height:1.95;
  letter-spacing:-.2px;
}
.pppl-options{display:grid;gap:12px}
.pppl-options button{
  display:flex;
  align-items:center;
  gap:12px;
  text-align:right;
  padding:15px 16px;
  border-radius:18px;
  border:1px solid rgba(159,182,219,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  color:#fff;
  font-size:16px;
  font-weight:800;
  line-height:1.8;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.pppl-options button:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:rgba(127,220,255,.32);
  background:linear-gradient(180deg, rgba(72,120,210,.20), rgba(255,255,255,.03));
}
.pppl-options button:disabled{opacity:.72;cursor:not-allowed}
.pppl-options button span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(127,220,255,.12);
  color:#aeeeff;
  font-weight:900;
}
.pppl-result{
  margin-top:16px;
  padding:14px 16px;
  border-radius:16px;
  font-weight:900;
}
.pppl-result.good{
  background:rgba(57,191,134,.10);
  border:1px solid rgba(57,191,134,.28);
  color:#baf1d9;
}
.pppl-result.bad{
  background:rgba(218,95,109,.10);
  border:1px solid rgba(218,95,109,.28);
  color:#ffd3d8;
}

.pppl-board-list{display:grid;gap:10px}
.pppl-board-row{
  display:grid;
  grid-template-columns:46px 40px minmax(0,1fr) 90px;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:16px;
  border:1px solid rgba(159,182,219,.10);
  background:rgba(255,255,255,.03);
}
.pppl-board-row.mine{border-color:rgba(127,220,255,.28)}
.pppl-board-row.top1{background:rgba(242,196,91,.10);border-color:rgba(242,196,91,.24)}
.pppl-board-row.top2{background:rgba(219,228,241,.08);border-color:rgba(219,228,241,.18)}
.pppl-board-row.top3{background:rgba(223,150,104,.09);border-color:rgba(223,150,104,.18)}
.pppl-board-row strong{color:var(--pp-gold);font-size:18px;text-align:center}
.pppl-board-row b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pppl-board-row em{font-style:normal;text-align:left;color:#fff;font-weight:900}

.pppl-final-table{
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(159,182,219,.10);
  background:rgba(255,255,255,.02);
}
.pppl-final-table table{width:100%;border-collapse:collapse;min-width:620px}
.pppl-final-table th,
.pppl-final-table td{
  padding:15px 13px;
  border-bottom:1px solid rgba(159,182,219,.10);
  text-align:right;
  white-space:nowrap;
  color:#ecf4ff;
}
.pppl-final-table th{
  color:#b9cdea;
  font-size:13px;
  font-weight:800;
  background:rgba(255,255,255,.03);
}
.pppl-final-table tr:hover td{background:rgba(255,255,255,.02)}
.pppl-final-table tr.top1 td{background:rgba(242,196,91,.08)}
.pppl-final-table tr.top2 td{background:rgba(219,228,241,.06)}
.pppl-final-table tr.top3 td{background:rgba(223,150,104,.07)}
.pppl-rank-badge{
  display:inline-grid;
  place-items:center;
  min-width:34px;
  height:34px;
  padding:0 10px;
  border-radius:12px;
  font-size:14px;
  font-weight:900;
  color:#101728;
}
.pppl-rank-badge.pppl-rank-1{background:linear-gradient(180deg,#f8d985,#efbf52)}
.pppl-rank-badge.pppl-rank-2{background:linear-gradient(180deg,#edf3fa,#d8e0ea)}
.pppl-rank-badge.pppl-rank-3{background:linear-gradient(180deg,#f1be9d,#da9568)}
.pppl-rank-badge.pppl-rank-other{background:rgba(255,255,255,.08);color:#edf4ff}

.pppl-button-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.pppl-story-panel canvas{
  width:100%;
  height:auto;
  display:block;
  margin:12px 0;
  border-radius:18px;
  border:1px solid rgba(159,182,219,.14);
  background:#061024;
}
.pppl-story-panel a,
.pppl-story-panel button{width:100%;margin-top:10px}
.pppl-story-panel p{margin-top:-4px}
.pppl-lobby-main,
.pppl-question-card,
.pppl-final-card{min-width:0}

@media (max-width:900px){
  .pppl-pro-app{padding:18px;border-radius:22px}
  .pppl-pro-header{align-items:flex-start}
  .pppl-pro-header h2{font-size:29px}
  .pppl-pro-orbit{width:64px;height:64px;min-width:64px}
  .pppl-home-grid,
  .pppl-room-grid,
  .pppl-game-grid,
  .pppl-finish-grid{grid-template-columns:1fr}
  .pppl-form-grid{grid-template-columns:1fr}
  .pppl-room-meta{grid-template-columns:1fr}
  .pppl-copy-box{flex-direction:column}
  .pppl-room-code strong{font-size:32px}
  .pppl-question-card h3{font-size:20px}
  .pppl-card{padding:18px}
  .pppl-board-row{grid-template-columns:38px 34px minmax(0,1fr) 72px}
}

.pppl-theme-switcher{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 8px}
.pppl-theme-btn{appearance:none;border:1px solid rgba(145,180,230,.22);background:rgba(9,21,46,.7);color:#eef4ff;border-radius:14px;padding:12px 14px;font:700 14px/1.4 Tahoma,Arial,sans-serif;cursor:pointer;transition:.2s ease;text-align:center}
.pppl-theme-btn:hover{transform:translateY(-1px);border-color:rgba(112,182,255,.46)}
.pppl-theme-btn.active{background:linear-gradient(135deg,#1b61e9,#1847b8);border-color:rgba(132,209,255,.82);box-shadow:0 10px 22px rgba(39,112,255,.22)}

.pppl-pro-root select{color:#ffffff !important;-webkit-text-fill-color:#ffffff;background-color:rgba(255,255,255,.03)}
.pppl-pro-root select option{color:#ffffff !important;background:#0b1833 !important}

.pppl-pro-root select{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background-color:#0b1833 !important;
}
.pppl-pro-root select option{
  color:#ffffff !important;
  background:#0b1833 !important;
}