/* ═══════════ الثيم (الاتجاه 2: عصري فاخر فاتح) ═══════════ لوحة كريمية بظلال ناعمة، أخضر زمردي وطيني دافئ ولمسات ذهبية. الوضع الليلي (html.dark) يبدّل خلفية الصفحة فقط — البطاقات تبقى كريمية. */ :root{ /* الخلفية (هي وحدها تتبدّل في الوضع الليلي) */ --bg0:#f5f0e6; --bg1:#efe6cf; --bg-glow1:#efe6cf88; --bg-glow2:#e9ddc288; --on-bg:#2d2a21; --on-bg-dim:#7c7361; /* نص فوق الخلفية مباشرة */ /* الأسطح — بطاقات كريمية ثابتة في الوضعين */ --panel:#fffdf8; --panel-line:#e2d6bb; --card:#fffdf8; --card2:#fbf6ec; --card-line:#e2d6bb; --surf:#f4eddf; --surf-line:#e7dcc4; --surf-hover:#ece2cf; /* عناصر داخلية */ --field:#fffef9; --field-line:#e7dcc4; /* خلفية المدخلات */ --ink:#2d2a21; --dim:#8a8270; /* نص فوق البطاقات */ /* الخلية السداسية */ --cell-fill:#fffefb; --cell-fill2:#f6efe0; --cell-edge:#e2d6bb; /* الفريقان والذهبي */ --h:#1E8C70; --h-deep:#13624F; /* الزمرّدي (أفقي يمين↔يسار) */ --v:#C24557; --v-deep:#8C2D3B; /* القرمزي (عمودي أعلى↕أسفل) */ --gold:#a8842c; --gold-soft:#cdb06a; --danger:#c0392b; /* الظلال والحُجُب */ --shadow-card:0 12px 30px #5b4a1f14; --shadow-soft:0 8px 22px #5b4a1f0f; --scrim:#2b261cd9; --font-display:'Alexandria'; --font-body:'Cairo'; --radius:16px; } /* ─── الوضع الليلي الكامل: خلفية داكنة دافئة + بطاقات داكنة ونصوص فاتحة ─── */ html.dark{ --bg0:#16130e; --bg1:#211c14; --bg-glow1:#3a311fcc; --bg-glow2:#2a241890; --on-bg:#f3ead6; --on-bg-dim:#bdb091; --panel:#272219; --panel-line:#473f2e; --card:#272219; --card2:#211c15; --card-line:#473f2e; --surf:#332d22; --surf-line:#4a4233; --surf-hover:#3d3629; --field:#332d22; --field-line:#4a4233; --ink:#f3ead6; --dim:#b3a892; --cell-fill:#2e281e; --cell-fill2:#3a3327; --cell-edge:#4a4131; --h:#1E8C70; --h-deep:#13624F; /* الزمرّدي — نفس الهوية في الداكن */ --v:#C24557; --v-deep:#8C2D3B; /* القرمزي — نفس الهوية في الداكن */ --gold:#d6b15a; --gold-soft:#e6cd8f; /* ذهبي أفتح ليبرز */ --shadow-card:0 12px 30px #00000055; --shadow-soft:0 8px 22px #00000040; --scrim:#0d0b07e0; } *{margin:0;padding:0;box-sizing:border-box; -webkit-tap-highlight-color:transparent} html,body{height:100%} /* جذر متجاوب: حجم الخط الأساس يتدرّج بنعومة مع العرض (أساس وحدات rem) */ html{font-size:clamp(15px, 0.6vw + 12.6px, 18.5px); /* لون أساس صلب فقط (لا تدرّج يتمرّر) — يمنع الومضة البيضاء ويُبقي #hive-bg ظاهراً. كل التدرّجات الموضوعية انتقلت إلى #hive-bg الثابت كي لا تتمرّر فتُحدث أشرطة فرق لون */ background:var(--bg0); transition:background .4s ease} body{ font-family:var(--font-body),sans-serif; color:var(--ink); min-height:100vh; min-height:100dvh; /* dvh يتفادى قفزات شريط عنوان الجوال؛ الخلفية على وbody شفّاف كي لا يحجب #hive-bg */ } /* ═══════════ خلفية الهوية: مشهد Canvas يُرسم مرّة + هالات عمق (خلف كل المحتوى) ═══════════ */ /* المشهد الغني (خلايا/حروف/جدران/توهّج) يرسمه js/hive-bg.js مرّة واحدة على ثم يُجمَّد → بلا filter:blur حيّ، بلا تحويل ثلاثي حيّ، بلا عمل لكل إطار، فالرامات ثابتة. الهالات وتنفّسها طبقات CSS رخيصة (radial-gradient + opacity) خلف الكانفاس. */ #hive-bg{position:fixed; top:0; left:0; right:0; height:100vh; height:100lvh; transform:translateZ(0); /* 100lvh = يغطّي أكبر ارتفاع (شريط العنوان مطويّ)؛ ثابت فلا يتغيّر عند التمرير. translateZ = طبقة GPU لتمرير ناعم */ z-index:-1; overflow:hidden; pointer-events:none; contain:layout paint; background: radial-gradient(620px 620px at 88% -6%, rgba(212,175,55,.16), transparent 60%), radial-gradient(560px 560px at -8% 108%, rgba(212,175,55,.12), transparent 60%), radial-gradient(480px 480px at 42% 40%, rgba(168,132,44,.07), transparent 62%), linear-gradient(180deg, var(--bg1), var(--bg0) 70%); /* الأساس الموضوعي — ثابت على #hive-bg فلا يتمرّر */ transition:background .4s ease} /* عمق يتنفّس — يُطلى خلف الكانفاس (::before يسبق أبناء العنصر)، حركة opacity فقط */ #hive-bg::before{content:""; position:absolute; inset:0; will-change:opacity; background: radial-gradient(440px 440px at 16% 22%, rgba(212,175,55,.10), transparent 60%), radial-gradient(380px 380px at 82% 76%, rgba(212,175,55,.08), transparent 60%); animation:hiveBreath 14s ease-in-out infinite} @keyframes hiveBreath{0%,100%{opacity:.4} 50%{opacity:.85}} @media (prefers-reduced-motion:reduce){#hive-bg::before{animation:none; opacity:.6}} /* لوحة المشهد — شفّافة فوق الهالات، تملأ العنصر. تنتقل بسلاسة عند الدخول للّعب */ #hive-bg canvas{position:absolute; inset:0; width:100%; height:100%; display:block; transform-origin:50% 50%; transition:opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1)} /* ركّز على اللعب: داخل لوحة الخلية تنزاح زخرفة الكانفاس للأطراف وتتلاشى، وتُضاف عتمة خافتة حول الوسط. تحويل/شفافية على طبقة GPU فقط — بلا إعادة رسم للكانفاس، فلا قفزة رامات ولا حمل معالج. */ body.in-game #hive-bg canvas{opacity:0; transform:scale(1.22)} #hive-bg::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 72% 62% at 50% 46%, transparent 42%, rgba(0,0,0,.45) 100%); opacity:0; transition:opacity .8s ease} body.in-game #hive-bg::after{opacity:1} @media (prefers-reduced-motion:reduce){ body.in-game #hive-bg canvas{transition:opacity .35s ease; transform:none} } .hidden{display:none !important} button{font-family:inherit; cursor:pointer; border:none; color:inherit} input{ font-family:inherit; font-size:16px; color:var(--ink); background:var(--field); border:1px solid var(--field-line); border-radius:12px; padding:12px 14px; width:100%; outline:none; transition:border-color .15s; } input:focus{border-color:var(--gold)} input::placeholder{color:var(--dim)} body:not([data-role="host"]) .host-only{display:none !important} /* زر تبديل الوضع */ .theme-toggle{ position:fixed; top:calc(14px + env(safe-area-inset-top)); left:calc(14px + env(safe-area-inset-left)); z-index:90; width:44px; height:44px; border-radius:50%; font-size:18px; /* 44px = هدف لمس مريح + احترام المنطقة الآمنة */ background:var(--card); border:1px solid var(--card-line); box-shadow:var(--shadow-soft); display:grid; place-items:center; transition:transform .15s; } .theme-toggle:hover{transform:rotate(-15deg) scale(1.05)} .primary{ background:linear-gradient(180deg,#e8d49a,var(--gold)); color:#3a2c08; font-weight:700; font-size:clamp(0.95rem, 0.4vw + 0.85rem, 1.1rem); border-radius:12px; padding:clamp(11px,1vw,15px) clamp(20px,2.2vw,32px); box-shadow:0 6px 18px #a8842c33; transition:transform .12s, box-shadow .12s; } .primary:hover{transform:translateY(-1px); box-shadow:0 10px 24px #a8842c4d} .primary:disabled{opacity:.5; transform:none} .primary.alt{background:linear-gradient(180deg,#2FA98A,var(--h)); color:#eafff7; box-shadow:0 6px 18px #1E8C7033} .primary.big{font-size:clamp(1.05rem, 0.6vw + 0.95rem, 1.35rem); padding:clamp(13px,1.3vw,18px) clamp(28px,3vw,46px)} .ghost{ background:var(--surf); border:1px solid var(--surf-line); border-radius:12px; padding:clamp(9px,0.9vw,13px) clamp(14px,1.5vw,20px); font-size:clamp(0.85rem, 0.3vw + 0.8rem, 1rem); color:var(--ink); transition:background .15s; } .ghost:hover{background:var(--surf-hover)} #toast{ position:fixed; top:18px; right:50%; transform:translate(50%,-90px); z-index:99; background:var(--card); border:1px solid var(--card-line); border-radius:14px; color:var(--ink); padding:12px 22px; font-size:15px; box-shadow:0 16px 40px #5b4a1f33; transition:transform .3s cubic-bezier(.2,.9,.3,1.3); max-width:90vw; text-align:center; } #toast.on{transform:translate(50%,0)} /* ═══════════ الهبوط ═══════════ */ #view-landing{max-width:min(94vw,1040px); margin:0 auto; text-align:center; /* حشوات تحترم المناطق الآمنة (نوتش/شريط الإيماءات)؛ الأعلى يكفي ليتجاوز زرّ الوضع العائم */ padding:calc(clamp(62px,8vh,84px) + env(safe-area-inset-top)) calc(clamp(16px,3vw,28px) + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(clamp(16px,3vw,28px) + env(safe-area-inset-left))} .logo-big{ font-family:var(--font-display); font-weight:900; font-size:clamp(42px, 7vw + 0.5rem, 84px); color:var(--on-bg); letter-spacing:-1px; } .logo-big b{color:var(--gold)} .tagline{color:var(--on-bg-dim); font-size:clamp(15px,2.6vw,19px); margin-top:8px} .landing-cards{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,26px); margin-top:clamp(28px,5vh,48px); text-align:right} .card{ background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius); padding:clamp(18px,2vw,30px); box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:12px; } .card h2{font-family:var(--font-display); font-size:clamp(1rem, 0.5vw + 0.9rem, 1.25rem); font-weight:800} .mode-note{color:var(--on-bg-dim); font-size:13px; margin-top:26px; line-height:1.8} /* ─── الغرف العامة ─── */ .pub-rooms{margin-top:34px; text-align:right} .pub-rooms h2{font-family:var(--font-display); font-size:17px; font-weight:800; margin-bottom:12px; color:var(--on-bg)} .pub-list{display:flex; flex-direction:column; gap:9px} .pub-room{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--card-line); border-radius:14px; padding:10px 14px; font-size:14px; box-shadow:var(--shadow-soft); } .pub-room .pr-name{font-weight:700; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .pub-room .pr-meta{color:var(--dim); font-size:12.5px; flex:0 0 auto} .pub-room .pr-state{color:var(--dim); font-size:12.5px; flex:0 0 auto} .pub-room .pr-state.playing{color:var(--gold); font-weight:700} .pub-room .join-pub{padding:7px 16px; font-size:13.5px} /* ─── الدردشة الصوتية ─── */ .voice-bar{ position:fixed; bottom:12px; right:12px; z-index:60; display:flex; align-items:center; gap:8px; flex-wrap:wrap; max-width:min(92vw,560px); background:var(--card); border:1px solid var(--card-line); border-radius:16px; padding:8px 10px; box-shadow:var(--shadow-card); } .voice-bar .ghost{padding:7px 13px; font-size:13px} #voice-on-controls{display:flex; align-items:center; gap:8px; flex-wrap:wrap} #voice-on-controls.hidden{display:none} #btn-voice-mute.muted{color:var(--danger); border-color:#c0392b55} .voice-parts{display:flex; gap:6px; flex-wrap:wrap} .vp{ background:var(--surf); border-radius:999px; padding:4px 11px; font-size:12.5px; display:flex; align-items:center; gap:5px; } .vp.dim{color:var(--dim)} .vp.speaking{outline:1.5px solid var(--gold); box-shadow:0 0 12px #a8842c44} .vp-kick{background:none; border:none; cursor:pointer; font-size:13px; padding:0} .consent-card{max-width:430px; text-align:right} .consent-card p{color:var(--dim); line-height:1.9; font-size:14.5px; margin:12px 0 18px} .consent-card h2{font-family:var(--font-display); font-size:20px; font-weight:800} .consent-actions{display:flex; gap:10px; justify-content:center} /* ═══════════ اللوبي ═══════════ */ #view-lobby{max-width:1000px; margin:0 auto; padding:5vh 16px 40px} .lobby-head{display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:24px} .lobby-head small{color:var(--on-bg-dim)} .lobby-head-btns{display:flex; gap:8px; flex-wrap:wrap} .room-code{ font-family:var(--font-display); font-weight:900; font-size:54px; letter-spacing:8px; color:var(--gold); text-shadow:0 2px 16px #a8842c2e; line-height:1.1; } /* شارة طبقة الغرفة (ذهبية/ماسية) — تظهر للجميع في اللوبي */ .tier-badge{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-weight:700; font-size:13px; padding:4px 12px; border-radius:999px; border:1px solid transparent; } .tier-badge.gold{ color:#5a4410; background:linear-gradient(180deg,#f0dca6,var(--gold-soft)); border-color:var(--gold); } .tier-badge.diamond{ color:#0c4a52; background:linear-gradient(180deg,#cdeef5,#8fd6e6); border-color:#3aa6bd; box-shadow:0 4px 14px #3aa6bd33; } .teams-pick{display:grid; grid-template-columns:1fr .7fr 1fr; gap:14px} .team-col{background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius); padding:14px; min-height:200px; box-shadow:var(--shadow-soft)} .team-col h3{font-family:var(--font-display); font-size:15.5px; font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:12px} .team-col h3 small{color:var(--dim); font-weight:400; font-size:11.5px} .team-col.none{opacity:.92} .dot{width:12px;height:12px;border-radius:50%; flex:0 0 auto} .team-col.h .dot,.panel.h .dot{background:var(--h)} .team-col.v .dot,.panel.v .dot{background:var(--v)} .pl{ display:flex; align-items:center; gap:9px; background:var(--surf); border-radius:11px; padding:8px 10px; margin-top:7px; font-size:14.5px; cursor:default; } body[data-role="host"] #view-lobby .pl{cursor:pointer} body[data-role="host"] #view-lobby .pl:hover{background:var(--surf-hover)} .pl.me{outline:1.5px solid var(--gold)} .pl.off{opacity:.45} .avatar{ width:27px;height:27px;border-radius:50%; background:var(--gold-soft); color:#3a2c08; display:grid; place-items:center; font-size:13px; font-weight:700; flex:0 0 auto; } .team-col.h .avatar,.panel.h .avatar{background:var(--h); color:#f2fbf7} .team-col.v .avatar,.panel.v .avatar{background:var(--v); color:#fdf3ec} .empty{color:var(--dim); font-size:13px; padding:8px 4px} .lobby-controls{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:26px; flex-wrap:wrap} .team-btn{font-weight:700; font-size:clamp(1rem, 0.5vw + 0.9rem, 1.2rem); border-radius:13px; padding:clamp(11px,1.2vw,15px) clamp(22px,2.6vw,36px)} .team-btn.h{background:linear-gradient(180deg,#2FA98A,var(--h)); color:#eafff7} .team-btn.v{background:linear-gradient(180deg,#D96576,var(--v)); color:#fff} /* فلاتر الجولة (مجال/صعوبة) */ .filters-box{ width:100%; max-width:680px; background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; gap:11px; box-shadow:var(--shadow-soft); } .f-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap} .f-label{color:var(--dim); font-size:13.5px; flex:0 0 auto; min-width:96px} .seg{display:flex; gap:6px; flex-wrap:wrap} .seg button{ background:var(--surf); border:1px solid var(--surf-line); border-radius:999px; padding:7px 14px; font-size:13.5px; color:var(--dim); transition:all .15s; } .seg button.on{background:#a8842c1f; border-color:#a8842c88; color:var(--gold); font-weight:700} .filters-note{margin-top:14px} .hq-tags{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap} .hq-tag{ background:var(--surf); border:1px solid var(--surf-line); border-radius:999px; padding:3px 12px; font-size:12.5px; color:var(--dim); } .switch{display:flex; align-items:center; gap:9px; color:var(--dim); font-size:14px; cursor:pointer} .switch input{width:auto} #host-lobby-controls .switch{color:var(--on-bg-dim)} .hint{width:100%; text-align:center; color:var(--on-bg-dim); font-size:13px} /* ═══════════ اللعب ═══════════ */ #view-game{max-width:min(96vw,1360px); margin:0 auto; padding:calc(14px + env(safe-area-inset-top)) calc(clamp(14px,2vw,28px) + env(safe-area-inset-right)) 140px calc(clamp(14px,2vw,28px) + env(safe-area-inset-left))} .topbar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px} .logo-sm{font-family:var(--font-display); font-weight:900; font-size:21px; color:var(--on-bg)} .logo-sm b{color:var(--gold)} .chips{display:flex; gap:8px; align-items:center} .chip{ background:var(--card); border:1px solid var(--card-line); border-radius:999px; padding:7px 14px; font-size:13.5px; color:var(--dim); box-shadow:var(--shadow-soft); } .chip b{color:var(--ink); font-family:var(--font-display); letter-spacing:1px} .chip.wins{display:flex; align-items:center; gap:6px} .sw{width:10px;height:10px;border-radius:50%;display:inline-block} .sw.h{background:var(--h)} .sw.v{background:var(--v)} .chip-btn{ background:var(--card); border:1px solid var(--card-line); border-radius:999px; width:38px; height:38px; font-size:16px; display:grid; place-items:center; box-shadow:var(--shadow-soft); } .chip-btn.on{border-color:var(--gold); box-shadow:0 0 0 2px #a8842c33} .qbanner{ margin:0 auto 14px; max-width:860px; display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius); padding:12px 16px; box-shadow:0 14px 36px #5b4a1f14; animation:drop .35s cubic-bezier(.2,.9,.3,1.2); } @keyframes drop{from{opacity:0; transform:translateY(-14px)}to{opacity:1; transform:none}} .qletter{ flex:0 0 auto; width:clamp(48px,5vw,66px); height:clamp(54px,5.6vw,74px); display:grid; place-items:center; clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); background:linear-gradient(170deg,#e8d49a,var(--gold-soft)); color:#4d3a0d; font-family:var(--font-display); font-weight:900; font-size:clamp(24px,2.6vw,34px); } .qtext{font-size:clamp(15px,2.4vw,19px); line-height:1.65; font-weight:600} .qtext small{display:block; color:var(--gold); font-size:12.5px; font-weight:700} .stage{display:flex; justify-content:center; align-items:flex-start} .panel{background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius); padding:13px; box-shadow:var(--shadow-soft)} .panel h3{font-family:var(--font-display); font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:8px} /* لوحة SVG */ .board-wrap{padding:4px 0} .board-svg{width:min(90vw, 74vh); height:auto; display:block; margin:0 auto; overflow:visible} .cell{cursor:default} body[data-role="host"] .cell{cursor:pointer} .cell .hx-out{fill:var(--cell-edge); transition:fill .35s} .cell .hx-in{fill:var(--cell-fill); transition:fill .35s} .cell text{ font-family:var(--font-display),sans-serif; font-weight:900; font-size:40px; fill:var(--ink); paint-order:stroke; user-select:none; pointer-events:none; } body[data-role="host"] .cell:hover .hx-in{fill:var(--cell-fill2)} .cell.own-h .hx-out{fill:var(--h)} .cell.own-h .hx-in{fill:var(--h-deep)} .cell.own-h text{fill:#eafff7} .cell.own-h{filter:drop-shadow(0 4px 8px #1E8C7040)} .cell.own-v .hx-out{fill:var(--v)} .cell.own-v .hx-in{fill:var(--v-deep)} .cell.own-v text{fill:#fff0f0} .cell.own-v{filter:drop-shadow(0 4px 8px #C2455740)} /* إطار الفريقين المحيط: ملوّن من الأساس، غير قابل للنقر، بلا نص/نبض */ .cell.frame{pointer-events:none} body[data-role="host"] .cell.frame{cursor:default} .cell.frame-h .hx-out{fill:var(--h)} .cell.frame-h .hx-in{fill:var(--h-deep)} .cell.frame-v .hx-out{fill:var(--v)} .cell.frame-v .hx-in{fill:var(--v-deep)} .cell.active .hx-out{fill:var(--gold)} .cell.active text{fill:var(--gold)} .cell.active{animation:cellpulse 1.5s infinite} @keyframes cellpulse{0%,100%{filter:drop-shadow(0 3px 6px #5b4a1f1c)}50%{filter:drop-shadow(0 0 16px #a8842c88)}} .cell.winpath .hx-out{fill:var(--gold)} .cell.winpath text{fill:#fff} .cell.winpath{animation:winpath 1s infinite} @keyframes winpath{0%,100%{filter:drop-shadow(0 0 8px #a8842c88)}50%{filter:drop-shadow(0 0 24px #a8842cd0)}} /* ترتيب الضغطات */ .buzz-order{ display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; margin:12px auto 0; font-size:14px; color:var(--on-bg-dim); } .buzz-order .first{ background:#a8842c1a; border:1px solid #a8842c88; color:var(--gold); border-radius:999px; padding:6px 16px; font-weight:700; animation:drop .3s cubic-bezier(.2,.9,.3,1.4); } .buzz-order .later{background:var(--card); border:1px solid var(--card-line); border-radius:999px; padding:6px 14px} .buzz-order small{opacity:.75} /* شريط الهوست */ .host-bar{max-width:860px; margin:16px auto 0; display:flex; flex-direction:column; gap:12px} .hq-card{ background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-card); } .hq-top{display:flex; gap:12px; align-items:flex-start} .hq-letter{ flex:0 0 auto; width:46px; height:51px; display:grid; place-items:center; clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); background:linear-gradient(170deg,#e8d49a,var(--gold-soft)); color:#4d3a0d; font-family:var(--font-display); font-weight:900; font-size:24px; } .hq-text{font-size:17.5px; line-height:1.7; flex:1; font-weight:600} .hq-answer{ margin-top:10px; background:#235c4614; border:1px dashed #235c4655; border-radius:12px; padding:9px 14px; font-size:15.5px; color:var(--h); font-weight:600; } .hq-actions{display:flex; gap:9px; margin-top:13px; flex-wrap:wrap} .buzz-judge{display:flex; flex-direction:column; gap:8px} .judge-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; background:var(--card); border:1px solid var(--card-line); border-radius:14px; padding:10px 14px; box-shadow:var(--shadow-soft); } .judge-row.first{border-color:#a8842c77; background:#a8842c12} .judge-row .who{font-size:15.5px; font-weight:700} .judge-row .who small{color:var(--dim); font-weight:400} .who.t-h{color:var(--h)} .who.t-v{color:var(--v)} .judge-row .acts{display:flex; gap:7px; flex-wrap:wrap} .judge-row button{border-radius:10px; padding:8px 13px; font-size:13.5px; font-weight:700} .judge-row .ok{background:linear-gradient(180deg,#2FA98A,var(--h)); color:#eafff7} .judge-row .ok.alt{background:#1E8C7022; color:var(--h); border:1px solid #1E8C7066} .judge-row .ok.alt.o{background:#C2455722; color:var(--v); border:1px solid #C2455766} .judge-row .no{background:#c0392b14; color:var(--danger); border:1px solid #c0392b55} /* شريط اللاعب */ .player-bar{ position:fixed; bottom:0; right:0; left:0; z-index:20; display:flex; flex-direction:column; align-items:center; gap:7px; padding:10px 14px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,transparent,var(--bg0) 62%); pointer-events:none; } .player-bar > *{pointer-events:auto} #buzzer{ width:clamp(120px,34vw,170px); height:clamp(120px,34vw,170px); border-radius:50%; font-family:var(--font-display); font-weight:900; font-size:clamp(24px,6vw,32px); color:#fff; background:radial-gradient(circle at 50% 30%, #cfc3a8, #a99e85 55%, #8a8270); box-shadow:0 12px 30px #5b4a1f33, inset 0 -8px 18px #00000022, inset 0 6px 12px #ffffff44; transition:transform .1s; } #buzzer.armed{ color:#eafff7; background:radial-gradient(circle at 50% 32%, #2FA98A, var(--h) 60%, #0E4A39); box-shadow:0 16px 34px #1E8C7040, inset 0 -8px 16px #0c3a2c55, inset 0 5px 10px #ffffff33, 0 0 0 6px var(--card), 0 0 0 7px var(--gold-soft); animation:breathe 1.5s ease-in-out infinite; } #buzzer.armed:active{transform:scale(.93)} @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} .buzz-status{font-size:13.5px; color:var(--dim); background:var(--card); border:1px solid var(--card-line); border-radius:999px; padding:4px 14px} /* الفوز */ .win-overlay{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:var(--scrim); backdrop-filter:blur(6px); animation:fadein .4s; } @keyframes fadein{from{opacity:0}to{opacity:1}} .win-card{ text-align:center; background:linear-gradient(180deg,var(--card),var(--card2)); border:1px solid var(--card-line); border-radius:26px; padding:44px 56px; box-shadow:0 30px 80px #5b4a1f4d; animation:drop .5s cubic-bezier(.2,.9,.3,1.3); } .win-burst{font-size:64px; animation:bounce 1s infinite} @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .win-card h2{font-family:var(--font-display); font-weight:900; font-size:clamp(24px,5vw,36px); margin:14px 0 24px} .win-overlay.win-h h2{color:var(--h); text-shadow:0 2px 20px #1E8C7040} .win-overlay.win-v h2{color:var(--v); text-shadow:0 2px 20px #C2455740} /* ═══════════ نافذة حوار عصرية (تأكيد/تنبيه) — بديل confirm/alert الأصلية ═══════════ */ .hg-modal{position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px; background:var(--scrim); backdrop-filter:blur(6px); animation:fadein .25s ease} .hg-modal.closing{animation:fadeout .2s ease forwards} @keyframes fadeout{to{opacity:0}} .hg-modal-card{width:100%; max-width:400px; text-align:center; background:linear-gradient(180deg,var(--card),var(--card2)); border:1px solid var(--card-line); border-radius:22px; padding:30px 28px 24px; box-shadow:0 30px 80px #5b4a1f4d; animation:drop .45s cubic-bezier(.2,.9,.3,1.3)} .hg-modal-icon{width:58px; height:58px; margin:0 auto 16px; display:grid; place-items:center; border-radius:50%; color:var(--gold); background:radial-gradient(circle at 50% 38%, #a8842c26, #a8842c0d); border:1px solid #a8842c3d} .hg-modal.danger .hg-modal-icon{color:var(--danger); background:radial-gradient(circle at 50% 38%, #c0392b26, #c0392b0d); border-color:#c0392b3d} .hg-modal-title{font-family:var(--font-display); font-weight:900; font-size:clamp(1.15rem,2vw,1.4rem); color:var(--ink); margin-bottom:8px; line-height:1.3} .hg-modal-msg{color:var(--dim); font-size:clamp(.9rem,1.4vw,1rem); line-height:1.65; margin-bottom:22px} .hg-modal-actions{display:flex; gap:10px; justify-content:center} .hg-modal-actions .primary,.hg-modal-actions .ghost{display:inline-flex; align-items:center; justify-content:center; min-width:120px} .primary.danger{background:linear-gradient(180deg,#d9554a,var(--danger)); color:#fff; box-shadow:0 6px 18px #c0392b40} .primary.danger:hover{box-shadow:0 10px 24px #c0392b59} @media (max-width:430px){.hg-modal-actions{flex-direction:column-reverse} .hg-modal-actions .primary,.hg-modal-actions .ghost{width:100%}} /* ═══════════ الأيقونات SVG ═══════════ */ .ic{vertical-align:-0.18em} [data-icon]{display:inline-flex; align-items:center; gap:6px} .primary [data-icon], .ghost [data-icon], .team-btn [data-icon]{vertical-align:middle} /* ═══════════ شاشة إعدادات الغرفة ═══════════ */ #view-config{max-width:760px; margin:0 auto; padding:4vh 16px 60px} .config-head{display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:16px} .config-head small{color:var(--on-bg-dim)} .config-title{font-family:var(--font-display); font-weight:900; font-size:26px; color:var(--on-bg); display:flex; align-items:center; gap:10px; margin-bottom:18px} .config-title .ic{color:var(--gold)} .cfg-card{ background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius); padding:18px; margin-bottom:16px; box-shadow:var(--shadow-soft); display:flex; flex-direction:column; gap:16px; } .cfg-h{font-family:var(--font-display); font-weight:800; font-size:17px; display:flex; align-items:center; gap:9px} .cfg-h .ic{color:var(--gold)} .cfg-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap} .cfg-label{color:var(--dim); font-size:14px; min-width:120px; flex:0 0 auto; display:flex; align-items:center; gap:7px} .cfg-label .ic{color:var(--gold)} #view-config .seg{flex:1; min-width:200px} /* تبديل عام/خاص */ .seg-2{display:inline-flex; gap:0; background:var(--surf); border:1px solid var(--surf-line); border-radius:999px; padding:3px} .seg-2 button{flex:1; border:none; background:transparent; color:var(--dim); border-radius:999px; padding:8px 18px; font-size:14px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:all .15s} .seg-2 button.on{background:var(--card); color:var(--ink); box-shadow:var(--shadow-soft)} /* بطاقات حجم الفريق */ .size-cards{display:flex; gap:10px; flex:1; flex-wrap:wrap} .size-card{ flex:1; min-width:96px; background:var(--surf); border:1.5px solid var(--surf-line); border-radius:14px; padding:12px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--dim); transition:all .15s; } .size-card .ic{color:var(--dim)} .size-card b{font-family:var(--font-display); font-size:18px; color:var(--ink)} .size-card small{font-size:11.5px} .size-card.on{border-color:var(--gold); background:#a8842c14; color:var(--ink)} .size-card.on .ic{color:var(--gold)} /* حقل رقمي مع وحدة (s) خارج الصندوق */ .time-row{justify-content:space-between} .num-unit{display:inline-flex; align-items:center; gap:8px} .num-unit input{width:84px; text-align:center; font-family:var(--font-display); font-weight:700; font-size:18px} .num-unit .unit{color:var(--dim); font-size:15px; font-family:var(--font-display)} /* ملخص الإعدادات في اللوبي */ .settings-summary{width:100%; text-align:center; color:var(--on-bg-dim); font-size:13.5px; line-height:1.9} /* عدّاد الجولة التنازلي */ .qb-timer{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; width:58px; height:58px; border-radius:50%; background:var(--surf); border:2px solid var(--gold); font-family:var(--font-display); font-weight:900; line-height:1; } .qb-timer #qb-timer-num{font-size:24px; color:var(--gold)} .qb-timer small{font-size:10px; color:var(--dim)} .qb-timer.t-h{border-color:var(--h)} .qb-timer.t-h #qb-timer-num{color:var(--h)} .qb-timer.t-v{border-color:var(--v)} .qb-timer.t-v #qb-timer-num{color:var(--v)} .qb-timer.urgent{border-color:var(--danger); animation:cellpulse 1s infinite} .qb-timer.urgent #qb-timer-num{color:var(--danger)} /* ═══════════ تجاوب ═══════════ */ @media (max-width:920px){ .stage{display:flex; flex-direction:column; justify-content:center; flex:1 1 auto; min-height:0} /* عمود واحد، اللوحة متوسّطة عمودياً */ .panel{display:none} .landing-cards{grid-template-columns:1fr} .teams-pick{grid-template-columns:1fr; } .team-col{min-height:auto} .room-code{font-size:42px; letter-spacing:6px} .topbar{flex-wrap:wrap; row-gap:8px} .chips{flex-wrap:wrap} /* يلتفّ بدل التجاوز الأفقي على الشاشات الضيّقة */ /* واجهة اللعب تملأ الشاشة فتتوسّط اللوحة عمودياً بدل الفراغ الأسود الكبير أسفلها */ #view-game{display:flex; flex-direction:column; min-height:100svh; padding-bottom:200px} body[data-role="host"] #view-game{padding-bottom:clamp(28px,6vh,48px)} /* المضيف بلا شريط لاعب ثابت أسفل */ .judge-row .acts{width:100%} } @media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} } /* ═══════════ المصادقة (تسجيل/دخول/اسم المستخدم) ═══════════ */ .auth-overlay{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(20,18,12,.55); backdrop-filter:blur(4px); padding:18px} .auth-card{position:relative; width:100%; max-width:380px; background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:26px 24px; max-height:92vh; overflow:auto} .auth-close{position:absolute; top:12px; left:12px; width:32px; height:32px; border:none; background:var(--surf); border-radius:50%; color:var(--dim); display:grid; place-items:center; cursor:pointer} .auth-logo{font-family:var(--font-display); font-weight:900; font-size:24px; text-align:center; margin:2px 0 18px; color:var(--ink)} .auth-logo b{color:var(--gold)} .auth-note{color:var(--dim); font-size:13.5px; text-align:center; margin:0 0 16px; line-height:1.7} .auth-social{display:flex; flex-direction:column; gap:10px} .auth-prov{display:flex; align-items:center; justify-content:center; gap:10px; padding:11px 14px; background:var(--surf); border:1px solid var(--surf-line); border-radius:13px; color:var(--ink); font-family:var(--font-body); font-weight:600; font-size:14.5px; cursor:pointer; transition:background .15s} .auth-prov:hover{background:var(--surf-hover)} .auth-sep{display:flex; align-items:center; gap:10px; color:var(--dim); font-size:12.5px; margin:16px 0} .auth-sep::before,.auth-sep::after{content:""; flex:1; height:1px; background:var(--card-line)} .auth-form{display:flex; flex-direction:column; gap:10px} .auth-form input{width:100%; padding:12px 14px; border:1px solid var(--field-line); border-radius:12px; background:var(--field); color:var(--ink); font-family:var(--font-body); font-size:15px} .auth-form input:focus{outline:none; border-color:var(--gold)} .auth-form .primary{margin-top:4px; width:100%} .otp-input{text-align:center; letter-spacing:8px; font-size:20px; font-weight:700; font-family:var(--font-display)} .auth-links{display:flex; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap} .linkbtn{background:none; border:none; color:var(--gold); font-family:var(--font-body); font-size:13.5px; cursor:pointer; padding:4px} .linkbtn:hover{text-decoration:underline} .auth-msg{min-height:18px; margin:12px 0 0; text-align:center; font-size:13px; color:var(--v)} .auth-msg.ok{color:var(--h)} .uname-status{min-height:18px; margin:2px 0 0; font-size:13px; color:var(--dim); text-align:center} .uname-status.good{color:var(--h)} .uname-status.bad{color:var(--v)} #form-username{align-items:stretch} /* شريط الحساب أعلى الرئيسية */ .account-bar{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; min-height:40px; margin-bottom:4px} .acct-btn{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; min-height:40px; border-radius:999px; background:var(--card); border:1px solid var(--card-line); color:var(--ink); font-family:var(--font-body); font-weight:600; font-size:13.5px; cursor:pointer; box-shadow:var(--shadow-soft)} .acct-btn.ghost{background:var(--surf); box-shadow:none; color:var(--dim)} .acct-info{display:flex; align-items:center; gap:10px} .acct-name{display:inline-flex; align-items:center; gap:6px; color:var(--ink); font-size:14px} .acct-name b{color:var(--gold); font-family:var(--font-display)} .sub-btn{background:linear-gradient(180deg,#e8d49a,var(--gold)); color:#3a2c08; border:none; font-weight:700; box-shadow:0 4px 14px #a8842c33} .sub-btn:hover{filter:brightness(1.05)} /* ═══════════ تزيين أسماء الطبقات (تيجان + بنر) ═══════════ */ .tier-crown{width:1.05em; height:1.05em; margin-inline-start:3px; flex:0 0 auto} /* بنر ماسي مصغّر للسياقات السطرية (ترتيب الضغطات/حكم المقدّم) — لا صندوق هناك */ .pname.name-diamond{display:inline-block; padding:1px 10px; border-radius:999px; font-weight:700; color:#eaf6fb; background:linear-gradient(180deg,#2f5f7a,#5b91b0 50%,#244c63); border:1px solid #7fb4cd; box-shadow:0 2px 8px #2f5f7a3d} .pl.tier-gold .avatar{box-shadow:0 0 0 2px var(--gold-soft)} /* ── صندوق اللاعب الماسي: البنر خلفية كاملة + تاج بارز مائل أعلى الزاوية ── */ .pl.tier-diamond{ position:relative; z-index:1; overflow:visible; margin-top:20px; /* مساحة للتاج البارز فوق الصندوق */ padding:10px 12px; color:#eaf6fb; border:1px solid #4f86a3; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='db' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232f5f7a'/%3E%3Cstop offset='.5' stop-color='%235b91b0'/%3E%3Cstop offset='1' stop-color='%23244c63'/%3E%3C/linearGradient%3E%3ClinearGradient id='dbs' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23eaf6fb'/%3E%3Cstop offset='1' stop-color='%23cfeaf4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M14 4h132l-10 16 10 16H14L4 20 14 4Z' fill='url(%23db)' stroke='%237fb4cd' stroke-width='1'/%3E%3Cpath d='M30 20l4-5 4 5-4 5-4-5Z' fill='url(%23dbs)'/%3E%3Cpath d='M126 20l4-5 4 5-4 5-4-5Z' fill='url(%23dbs)'/%3E%3Cpath d='M80 11l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3Z' fill='%23eaf6fb' opacity='.9'/%3E%3C/svg%3E") center/100% 100% no-repeat, linear-gradient(135deg,#21495e,#16313f); box-shadow:0 6px 18px #16313f55, inset 0 1px 0 #ffffff33, inset 0 0 0 1px #ffffff12; transition:transform .2s var(--ease), box-shadow .2s var(--ease); } /* توهّج لطيف عند المرور (أناقة تفاعلية) */ .pl.tier-diamond:hover{transform:translateY(-2px); box-shadow:0 10px 26px #16313f85, 0 0 0 1px #7fb4cd, inset 0 1px 0 #ffffff44} /* ومضة ضوء تمرّ ببطء على البنر */ .pl.tier-diamond::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1; background:linear-gradient(115deg,transparent 32%,#ffffff55 47%,#ffffff14 54%,transparent 70%); background-size:250% 100%; background-position:150% 0; mix-blend-mode:screen; animation:diaSheen 5.5s var(--ease) infinite; } @keyframes diaSheen{0%{background-position:150% 0} 62%,100%{background-position:-60% 0}} /* الماسي: لا أفاتار — الاسم وحده يتوسّط البنر بشكل أنيق */ .pl.tier-diamond{justify-content:center} .pl.tier-diamond .avatar{display:none} /* الاسم: تدرّج ذهبي (ثيم الموقع) فوق الأزرق — تباين فاخر لا يتداخل مع لمعات البنر */ .pl.tier-diamond .pname.name-diamond{ position:relative; z-index:2; border:none; box-shadow:none; padding:0; font-family:var(--font-display); font-weight:800; font-size:19.5px; letter-spacing:.4px; background:linear-gradient(180deg,#f7e7ba,#e3c074 52%,#c79a44); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; filter:drop-shadow(0 1px 1.5px #0a2531cc); } /* التاج الماسي: بارز خارج الصندوق عند الزاوية العليا اليسرى (RTL: جهة النهاية) */ .pl.tier-diamond{overflow:visible} .pl.tier-diamond .tier-crown{ position:absolute; top:-22px; inset-inline-end:-12px; width:36px; height:36px; transform:rotate(-18deg); filter:drop-shadow(0 4px 5px #0000007a); z-index:3; } /* ═══════════ نافذة الاشتراكات (مُضمَّنة من sub-page، منعزلة تحت #subs) ═══════════ */ .sub-overlay{position:fixed; inset:0; z-index:190; overflow:auto; padding:24px 12px; background:rgba(20,18,12,.6); backdrop-filter:blur(4px)} .sub-card{position:relative; width:min(1180px,100%); margin:0 auto; border-radius:26px; padding:34px 18px 40px; box-shadow:0 30px 80px #00000055; border:1px solid #e2d6bb; background:radial-gradient(900px 440px at 85% -10%, #efe6cf88, transparent 60%), radial-gradient(760px 420px at 8% 110%, #e9ddc288, transparent 58%), linear-gradient(180deg,#efe6cf,#f5f0e6 70%)} .sub-card>.auth-close{top:16px; left:16px} #subs{--surface-card:#fffdf8; --surface-card-2:#fbf6ec; --surface-card-line:#e2d6bb; --surface-inset:#f4eddf; --surface-inset-line:#e7dcc4; --ink:#2d2a21; --ink-dim:#8a8270; --on-bg:#2d2a21; --on-bg-dim:#7c7361; --green:#235c46; --green-deep:#18402f; --gold:#a8842c; --gold-soft:#cdb06a; --gold-bright:#e8d49a; --gold-deep:#7d6014; --on-gold:#3a2c08; --diamond:#5b91b0; --diamond-mid:#7fb4cd; --diamond-bright:#cfeaf4; --diamond-ice:#eaf6fb; --diamond-deep:#2f5f7a; --on-diamond:#103040; --radius-lg:26px; --radius-pill:999px; --shadow-card:0 12px 30px #5b4a1f14; --ease:cubic-bezier(.2,.9,.3,1); color:var(--ink)} #subs .head{text-align:center; max-width:680px; margin:0 auto 26px} #subs .brand{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:900; font-size:20px; color:var(--on-bg); margin-bottom:14px} #subs .brand b,#subs .brand .mark{color:var(--gold)} #subs .head h1{font-family:var(--font-display); font-weight:900; font-size:clamp(26px,4vw,40px); line-height:1.15; color:var(--on-bg)} #subs .head p{color:var(--on-bg-dim); font-size:clamp(14px,2vw,17px); margin-top:10px; line-height:1.6} #subs .tiers{display:grid; gap:clamp(14px,2vw,24px); grid-template-columns:repeat(3,minmax(0,330px)); justify-content:center; align-items:stretch; max-width:1080px; margin:0 auto; padding-top:26px} @media (max-width:880px){#subs .tiers{grid-template-columns:minmax(0,380px)}} #subs .card{position:relative; display:flex; flex-direction:column; background:linear-gradient(180deg,var(--surface-card),var(--surface-card-2)); border:1px solid var(--surface-card-line); border-radius:var(--radius-lg); padding:30px 26px 28px; box-shadow:var(--shadow-card); transition:transform .35s var(--ease), box-shadow .35s var(--ease); overflow:visible} #subs .card:hover{transform:translateY(-8px); box-shadow:0 26px 56px #5b4a1f24} #subs .tier-name{font-family:var(--font-display); font-weight:800; font-size:15px; letter-spacing:.5px; color:var(--ink-dim); display:inline-flex; align-items:center; gap:9px} #subs .price{margin:14px 0 4px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap} #subs .price .amount{font-family:var(--font-display); font-weight:900; font-size:40px; line-height:1; color:var(--ink)} #subs .price .period{font-size:14px; color:var(--ink-dim); font-weight:600} #subs .divider{height:1px; background:linear-gradient(90deg,transparent,var(--surface-card-line),transparent); margin:20px 0} #subs .features{list-style:none; display:flex; flex-direction:column; gap:13px; flex:1; margin:0; padding:0} #subs .features li{display:flex; align-items:flex-start; gap:11px; font-size:14.5px; line-height:1.5; color:var(--ink)} #subs .features li.off{color:var(--ink-dim)} #subs .ic{flex:0 0 auto; width:21px; height:21px; border-radius:50%; display:grid; place-items:center; margin-top:1px} #subs .ic.yes{background:var(--green-deep); color:#eaf3ee} #subs .ic.no{background:var(--surface-inset); color:var(--ink-dim); border:1px solid var(--surface-inset-line)} #subs .ic.gold{background:linear-gradient(160deg,var(--gold-bright),var(--gold)); color:var(--on-gold)} #subs .ic.dia{background:linear-gradient(160deg,var(--diamond-bright),var(--diamond-mid)); color:var(--on-diamond)} #subs .ic svg{width:13px; height:13px} #subs .cta{margin-top:24px; width:100%; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:16px; padding:14px 20px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:transform .15s var(--ease), box-shadow .15s; color:var(--ink); background:var(--surface-inset); border:1px solid var(--surface-inset-line)} #subs .cta:hover{transform:translateY(-2px)} #subs .card.free .tier-name{color:var(--green)} #subs .card.gold{border-color:#d9b85e; box-shadow:0 18px 44px #a8842c2e} #subs .card.gold:hover{box-shadow:0 30px 64px #a8842c44; border-color:var(--gold)} #subs .card.gold .tier-name{color:var(--gold-deep)} #subs .card.gold .price .amount{color:var(--gold-deep)} #subs .card.gold .cta{background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:var(--on-gold); border:none; box-shadow:0 8px 20px #a8842c40} #subs .crown-badge{position:absolute; top:0; left:50%; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%; background:linear-gradient(160deg,var(--gold-bright),var(--gold)); display:grid; place-items:center; box-shadow:0 8px 20px #a8842c4d, inset 0 1px 0 #fff6db; border:2px solid #fffdf8; z-index:2} #subs .crown-badge svg{width:28px; height:28px; color:var(--on-gold)} #subs .card.diamond{color:#eaf6fb; background:radial-gradient(120% 80% at 50% -10%,#3d6f8b,transparent 60%),linear-gradient(180deg,#244c63,#16313f); border:1px solid #4f86a3; box-shadow:0 20px 50px #1c3a4a4d, inset 0 1px 0 #ffffff22} #subs .card.diamond:hover{box-shadow:0 30px 66px #1c3a4a73, 0 0 0 1px var(--diamond-mid)} #subs .card.diamond .tier-name{color:var(--diamond-bright)} #subs .card.diamond .price .amount{color:#fff} #subs .card.diamond .price .period{color:#bcd9e6} #subs .card.diamond .features li{color:#dcecf4} #subs .card.diamond .divider{background:linear-gradient(90deg,transparent,#4f86a3,transparent)} #subs .card.diamond .ic.no{background:#ffffff14; border-color:#ffffff26; color:#9fc2d2} #subs .card.diamond .cta{background:linear-gradient(180deg,var(--diamond-bright),var(--diamond-mid)); color:var(--on-diamond); border:none; box-shadow:0 8px 22px #16313f66} #subs .crown-badge.dia{background:linear-gradient(160deg,var(--diamond-ice),var(--diamond-mid)); box-shadow:0 8px 22px #1c3a4a80, inset 0 1px 0 #fff; border:2px solid #2c566c} #subs .crown-badge.dia svg{color:var(--diamond-deep)} #subs .spark{position:absolute; pointer-events:none; color:#cfeaf4; opacity:.9; filter:drop-shadow(0 0 5px #cfeaf4aa)} #subs .spark.s1{top:64px; left:24px; width:16px; height:16px; animation:tw 2.6s var(--ease) infinite} #subs .spark.s2{top:120px; left:42px; width:10px; height:10px; animation:tw 2.6s var(--ease) .7s infinite} #subs .spark.s3{top:90px; right:28px; width:13px; height:13px; animation:tw 2.6s var(--ease) 1.3s infinite} @keyframes tw{0%,100%{opacity:.25; transform:scale(.7)} 50%{opacity:1; transform:scale(1.1)}} #subs .badge{position:absolute; top:16px; left:16px; font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.4px; padding:5px 11px; border-radius:var(--radius-pill)} #subs .card.gold .badge{background:#a8842c1f; color:var(--gold-deep); border:1px solid #a8842c66} #subs .card.diamond .badge{background:#ffffff1f; color:var(--diamond-bright); border:1px solid #ffffff3d} @media (max-width:520px){.sub-card{padding:28px 10px 30px} #subs .card{padding:26px 20px 24px}}