/* Trivia game-root styles */
:root{--gold:#C9A84C;--gold-l:#E8C96A;--gold-d:#7A5E2A;--bg:#0D0A06;--bg2:#16110A;--surf:#241A0C;--surf2:#2E2210;--brd:rgba(201,168,76,0.22);--brd-b:rgba(201,168,76,0.55);--txt:#F2E8D0;--txt-m:#9A8A6A;--xc:#6B9FD4;--xbg:rgba(107,159,212,0.12);--oc:#C96B6B;--obg:rgba(201,107,107,0.12);--ok:#5A9E6F;--ok-bg:rgba(90,158,111,0.15);--bad:#C96B6B;--bad-bg:rgba(201,107,107,0.15);}
#game-root{font-family:'Crimson Text',Georgia,serif;background:var(--bg);color:var(--txt);min-height:100%;width:100%;}
#game-root .screen{display:none;min-height:100%;width:100%;}
#game-root .screen.active{display:flex;}
#game-root #screen-setup{background:linear-gradient(135deg,#f5f0e8,#ece4d0 50%,#e0d4b8);flex-direction:column;align-items:center;padding:2rem 1rem 4rem;color:#2a1f0a;}
#game-root .setup-header{text-align:center;margin-bottom:2rem;}
#game-root .setup-ornament{font-size:11px;letter-spacing:.3em;color:#7A6030;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:.4rem;}
#game-root .setup-title{font-family:'Cinzel',serif;font-size:clamp(2rem,6vw,3.2rem);font-weight:900;color:#4a3010;line-height:1.1;margin-bottom:.3rem;}
#game-root .setup-sub{font-family:'Crimson Text',serif;font-style:italic;font-size:1.1rem;color:#7A6030;}
#game-root .setup-divider{display:flex;align-items:center;gap:10px;margin:1rem auto;max-width:250px;}
#game-root .setup-divider-line{flex:1;height:1px;background:rgba(122,96,48,0.3);}
#game-root .setup-diamond{width:5px;height:5px;background:#C9A84C;transform:rotate(45deg);flex-shrink:0;}
#game-root .setup-body{width:100%;max-width:680px;display:flex;flex-direction:column;gap:1.5rem;}
#game-root .lang-toggle-g{display:flex;align-items:center;justify-content:center;border-radius:10px;overflow:hidden;border:1px solid rgba(122,96,48,0.3);width:fit-content;margin:0 auto;}
#game-root .lang-btn{padding:.55rem 2rem;font-family:'Cinzel',serif;font-size:.85rem;font-weight:600;letter-spacing:.08em;cursor:pointer;border:none;transition:all .2s;background:transparent;color:#7A6030;}
#game-root .lang-btn.active{background:#4a3010;color:#E8C96A;}
#game-root .setup-section{background:rgba(255,255,255,0.55);border:1px solid rgba(122,96,48,0.2);border-radius:12px;padding:1.25rem 1.5rem;}
#game-root .setup-section-title{font-family:'Cinzel',serif;font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:#7A6030;margin-bottom:1rem;}
#game-root .player-inputs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
#game-root .player-field label{display:block;font-size:.8rem;font-family:'Cinzel',serif;color:#7A6030;margin-bottom:.35rem;letter-spacing:.05em;}
#game-root .player-field input{width:100%;background:rgba(255,255,255,0.8);border:1px solid rgba(122,96,48,0.3);border-radius:8px;padding:.6rem .9rem;font-family:'Crimson Text',serif;font-size:1rem;color:#2a1f0a;outline:none;}
#game-root .player-field input:focus{border-color:#C9A84C;}
#game-root .rhap-note{font-size:.9rem;color:#7A6030;font-style:italic;margin-bottom:.85rem;}
#game-root .rhap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;margin-bottom:.85rem;}
#game-root .rhap-btn{padding:.45rem .2rem;font-family:'Cinzel',serif;font-size:.8rem;font-weight:600;text-align:center;border-radius:7px;cursor:pointer;border:1px solid rgba(122,96,48,0.35);background:rgba(255,255,255,0.5);color:#4a3010;transition:all .2s;position:relative;}
#game-root .rhap-btn:hover{border-color:#C9A84C;background:rgba(201,168,76,0.15);}
#game-root .rhap-btn.selected{background:#4a3010;color:#E8C96A;border-color:#4a3010;}
#game-root .rhap-btn.locked{opacity:.4;cursor:default;}
#game-root .rhap-btn .coming{position:absolute;top:-5px;right:-3px;background:#C9A84C;color:#2a1f0a;font-size:8px;padding:1px 3px;border-radius:3px;font-family:'Cinzel',serif;display:none;}
#game-root .rhap-btn.locked .coming{display:block;}
#game-root .rhap-all-btn{width:100%;padding:.6rem;font-family:'Cinzel',serif;font-size:.82rem;font-weight:600;letter-spacing:.05em;border-radius:8px;cursor:pointer;border:1px solid rgba(122,96,48,0.35);background:rgba(255,255,255,0.5);color:#4a3010;transition:all .2s;}
#game-root .rhap-all-btn.selected{background:#4a3010;color:#E8C96A;border-color:#4a3010;}
#game-root .mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
#game-root .mode-card{border:1.5px solid rgba(122,96,48,0.25);border-radius:12px;padding:1.1rem .9rem;cursor:pointer;transition:all .2s;background:rgba(255,255,255,0.5);text-align:center;}
#game-root .mode-card:hover{border-color:#C9A84C;background:rgba(201,168,76,0.1);}
#game-root .mode-card.selected{border-color:#4a3010;background:rgba(74,48,16,0.1);}
#game-root .mode-icon{font-size:1.8rem;margin-bottom:.5rem;}
#game-root .mode-name{font-family:'Cinzel',serif;font-size:.85rem;font-weight:600;color:#2a1f0a;margin-bottom:.3rem;}
#game-root .mode-desc{font-size:.82rem;color:#7A6030;line-height:1.4;}
#game-root .start-btn{width:100%;padding:1rem;font-family:'Cinzel',serif;font-size:1rem;font-weight:700;letter-spacing:.12em;color:#2a1f0a;background:var(--gold);border:none;border-radius:10px;cursor:pointer;transition:all .2s;margin-top:.5rem;}
#game-root .start-btn:hover{background:var(--gold-l);}
#game-root .start-btn:disabled{opacity:.4;cursor:not-allowed;}
#game-root #screen-solo{flex-direction:column;align-items:center;padding:1.5rem 1rem 4rem;background:var(--bg);background-image:radial-gradient(ellipse 80% 40% at 50% -10%,rgba(201,168,76,0.07) 0%,transparent 70%);}
#game-root .solo-header{width:100%;max-width:700px;display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;}
#game-root .solo-title{font-family:'Cinzel',serif;font-size:1.1rem;font-weight:900;color:var(--gold);letter-spacing:.08em;}
#game-root .back-btn{font-family:'Cinzel',serif;font-size:.75rem;letter-spacing:.08em;color:var(--txt-m);background:transparent;border:1px solid var(--brd);border-radius:6px;padding:.4rem .85rem;cursor:pointer;transition:all .2s;}
#game-root .back-btn:hover{color:var(--gold);border-color:var(--gold-d);}
#game-root .solo-score-strip{width:100%;max-width:700px;display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin-bottom:1.5rem;}
#game-root .solo-stat{background:var(--surf);border:1px solid var(--brd);border-radius:8px;padding:.55rem .75rem;text-align:center;}
#game-root .solo-stat-label{font-family:'Cinzel',serif;font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--txt-m);margin-bottom:.15rem;}
#game-root .solo-stat-val{font-family:'Cinzel',serif;font-size:1.5rem;font-weight:900;color:var(--gold);}
#game-root .solo-timer-wrap{width:100%;max-width:700px;background:var(--surf);border:1px solid var(--brd);border-radius:8px;padding:.55rem 1rem;display:flex;align-items:center;gap:10px;margin-bottom:1.2rem;}
#game-root .solo-timer-label{font-family:'Cinzel',serif;font-size:.7rem;color:var(--txt-m);letter-spacing:.08em;}
#game-root .timer-bar-bg{flex:1;height:6px;background:var(--surf2);border-radius:3px;overflow:hidden;}
#game-root .timer-bar{height:100%;border-radius:3px;background:var(--gold);transition:width .1s linear,background .5s;}
#game-root .timer-num{font-family:'Cinzel',serif;font-size:.9rem;font-weight:600;color:var(--gold);min-width:24px;text-align:right;}
#game-root .solo-q-wrap{width:100%;max-width:700px;}
#game-root .solo-q-card{background:var(--surf);border:1px solid var(--brd);border-radius:14px;padding:1.6rem 1.8rem;position:relative;overflow:hidden;margin-bottom:1rem;}
#game-root .solo-q-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
#game-root .solo-q-num{font-family:'Cinzel',serif;font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--gold-d);margin-bottom:.5rem;}
#game-root .solo-q-text{font-size:1.3rem;line-height:1.65;color:var(--txt);font-style:italic;}
#game-root .solo-answers{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:700px;}
#game-root .solo-ans-btn{background:var(--surf2);border:1px solid var(--brd);border-radius:10px;padding:.85rem 1.1rem;text-align:left;font-family:'Crimson Text',serif;font-size:1.05rem;color:var(--txt);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:10px;}
#game-root .solo-ans-btn:hover:not(:disabled){border-color:var(--gold-d);background:rgba(201,168,76,.07);}
#game-root .solo-ans-letter{font-family:'Cinzel',serif;font-size:.72rem;font-weight:600;color:var(--gold-d);width:20px;flex-shrink:0;}
#game-root .solo-ans-btn.correct{background:var(--ok-bg);border-color:var(--ok);color:#8FD4A4;}
#game-root .solo-ans-btn.correct .solo-ans-letter{color:var(--ok);}
#game-root .solo-ans-btn.wrong{background:var(--bad-bg);border-color:var(--bad);color:var(--bad);opacity:.75;}
#game-root .solo-ans-btn.eliminated{opacity:.2;cursor:default;pointer-events:none;}
#game-root .solo-ans-btn:disabled{cursor:default;}
#game-root .solo-feedback{width:100%;max-width:700px;margin-top:.85rem;padding:.75rem 1rem;border-radius:8px;font-size:1.05rem;font-style:italic;display:none;}
#game-root .solo-feedback.show{display:block;}
#game-root .solo-feedback.ok{background:var(--ok-bg);color:#8FD4A4;border:1px solid rgba(90,158,111,.4);}
#game-root .solo-feedback.bad{background:var(--bad-bg);color:#D48080;border:1px solid rgba(201,107,107,.4);}
#game-root .solo-lifeline-bar{width:100%;max-width:700px;display:flex;align-items:center;gap:.75rem;margin-top:.85rem;}
#game-root .ll-label-solo{font-family:'Cinzel',serif;font-size:.7rem;color:var(--txt-m);letter-spacing:.08em;}
#game-root .ll-btn-solo{background:var(--surf2);border:1px solid var(--brd);border-radius:6px;padding:.35rem .9rem;font-family:'Cinzel',serif;font-size:.72rem;color:var(--gold);cursor:pointer;transition:all .2s;}
#game-root .ll-btn-solo:hover:not(:disabled){border-color:var(--gold);background:rgba(201,168,76,.1);}
#game-root .ll-btn-solo:disabled{opacity:.3;cursor:default;}
#game-root #screen-game{flex-direction:column;align-items:center;padding:1.5rem 1rem 4rem;background:var(--bg);background-image:radial-gradient(ellipse 80% 40% at 50% -10%,rgba(201,168,76,0.07) 0%,transparent 70%);}
#game-root .game-header{width:100%;max-width:820px;display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;}
#game-root .game-title{font-family:'Cinzel',serif;font-size:1.1rem;font-weight:900;color:var(--gold);letter-spacing:.08em;}
#game-root .game-wrap{width:100%;max-width:820px;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
#game-root .score-panel{display:flex;flex-direction:column;gap:.85rem;}
#game-root .player-card{background:var(--surf);border:1px solid var(--brd);border-radius:10px;padding:.9rem 1.1rem;display:flex;align-items:center;gap:12px;transition:border-color .3s,box-shadow .3s;position:relative;overflow:hidden;}
#game-root .player-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:transparent;transition:background .3s;}
#game-root .player-card.active-x{border-color:rgba(107,159,212,.5);box-shadow:0 0 20px rgba(107,159,212,.08);}
#game-root .player-card.active-x::before{background:var(--xc);}
#game-root .player-card.active-o{border-color:rgba(201,107,107,.5);box-shadow:0 0 20px rgba(201,107,107,.08);}
#game-root .player-card.active-o::before{background:var(--oc);}
#game-root .player-symbol{width:42px;height:42px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:1.4rem;font-weight:900;flex-shrink:0;}
#game-root .x-sym{background:var(--xbg);color:var(--xc);border:1px solid rgba(107,159,212,.3);}
#game-root .o-sym{background:var(--obg);color:var(--oc);border:1px solid rgba(201,107,107,.3);}
#game-root .player-info{flex:1;}
#game-root .player-label-sm{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--txt-m);font-family:'Cinzel',serif;}
#game-root .player-name{font-family:'Cinzel',serif;font-size:.95rem;font-weight:600;color:var(--txt);}
#game-root .player-score{font-family:'Cinzel',serif;font-size:1.9rem;font-weight:900;}
#game-root .score-x{color:var(--xc);}#game-root .score-o{color:var(--oc);}
#game-root .lifelines-row{display:flex;align-items:center;gap:8px;}
#game-root .ll-label{font-family:'Cinzel',serif;font-size:.7rem;color:var(--txt-m);letter-spacing:.08em;}
#game-root .ll-btn{background:var(--surf2);border:1px solid var(--brd);border-radius:6px;padding:.35rem .75rem;font-family:'Cinzel',serif;font-size:.7rem;color:var(--gold);cursor:pointer;transition:all .2s;}
#game-root .ll-btn:hover{border-color:var(--gold);background:rgba(201,168,76,.1);}
#game-root .ll-btn:disabled{opacity:.35;cursor:default;}
#game-root .timer-wrap{background:var(--surf);border:1px solid var(--brd);border-radius:8px;padding:.6rem 1rem;display:flex;align-items:center;gap:10px;}
#game-root .timer-label{font-family:'Cinzel',serif;font-size:.7rem;color:var(--txt-m);letter-spacing:.08em;}
#game-root .turn-indicator{background:var(--surf);border:1px solid var(--brd);border-radius:8px;padding:.65rem 1rem;text-align:center;font-family:'Cinzel',serif;font-size:.82rem;color:var(--txt-m);min-height:42px;display:flex;align-items:center;justify-content:center;}
#game-root .board-section{display:flex;flex-direction:column;gap:.85rem;}
#game-root .board{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;aspect-ratio:1;}
#game-root .cell{background:var(--surf);border:1px solid var(--brd);border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:clamp(1.6rem,5vw,2.5rem);font-weight:900;transition:all .2s;}
#game-root .cell.cx{color:var(--xc);background:var(--xbg);border-color:rgba(107,159,212,.35);}
#game-root .cell.co{color:var(--oc);background:var(--obg);border-color:rgba(201,107,107,.35);}
#game-root .cell.win{background:rgba(201,168,76,.12);border-color:var(--gold);animation:winPop .4s ease both;}
#game-root .cell.placeable{cursor:pointer;border-color:var(--gold-d);border-style:dashed;}
#game-root .cell.placeable:hover{background:rgba(201,168,76,.08);border-color:var(--gold);transform:scale(1.03);}
#game-root .placing-prompt{text-align:center;padding:.5rem;font-family:'Cinzel',serif;font-size:.75rem;color:var(--gold);letter-spacing:.08em;display:none;}
#game-root .placing-prompt.show{display:block;}
#game-root .question-area{grid-column:1/-1;}
#game-root .question-card{background:var(--surf);border:1px solid var(--brd);border-radius:12px;padding:1.4rem;position:relative;overflow:hidden;}
#game-root .question-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
#game-root .q-label{font-family:'Cinzel',serif;font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--gold-d);margin-bottom:.65rem;}
#game-root .q-text{font-size:1.2rem;line-height:1.6;color:var(--txt);margin-bottom:1.1rem;font-style:italic;}
#game-root .answers{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
#game-root .ans-btn{background:var(--surf2);border:1px solid var(--brd);border-radius:8px;padding:.7rem .9rem;text-align:left;font-family:'Crimson Text',serif;font-size:1rem;color:var(--txt);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:9px;}
#game-root .ans-btn:hover{border-color:var(--gold-d);background:rgba(201,168,76,.06);}
#game-root .ans-letter{font-family:'Cinzel',serif;font-size:.68rem;font-weight:600;color:var(--gold-d);width:16px;flex-shrink:0;}
#game-root .ans-btn.correct{background:var(--ok-bg);border-color:var(--ok);color:#8FD4A4;}
#game-root .ans-btn.wrong{background:var(--bad-bg);border-color:var(--bad);color:var(--bad);opacity:.7;}
#game-root .ans-btn:disabled{cursor:default;}
#game-root .ans-btn.eliminated{opacity:.25;cursor:default;}
#game-root .feedback-bar{margin-top:.9rem;padding:.7rem .9rem;border-radius:8px;font-size:1rem;font-style:italic;display:none;}
#game-root .feedback-bar.show{display:block;}
#game-root .feedback-bar.ok{background:var(--ok-bg);color:#8FD4A4;border:1px solid rgba(90,158,111,.4);}
#game-root .feedback-bar.bad{background:var(--bad-bg);color:#D48080;border:1px solid rgba(201,107,107,.4);}
#game-root .speed-setup{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:1.5rem;text-align:center;padding:2rem;}
#game-root .speed-code-box{background:var(--surf);border:1.5px solid var(--brd-b);border-radius:12px;padding:1.5rem 2.5rem;}
#game-root .speed-code{font-family:'Cinzel',serif;font-size:2.8rem;font-weight:900;color:var(--gold);letter-spacing:.25em;}
#game-root .speed-or{color:var(--txt-m);font-size:.9rem;font-family:'Cinzel',serif;}
#game-root .qr-placeholder{width:100px;height:100px;background:var(--surf);border:1px solid var(--brd);border-radius:8px;display:flex;align-items:center;justify-content:center;margin:0 auto;font-family:'Cinzel',serif;font-size:.6rem;color:var(--txt-m);text-align:center;padding:.5rem;}
#game-root .speed-waiting{font-family:'Cinzel',serif;font-size:.85rem;color:var(--txt-m);animation:blink 1.5s ease infinite;}
#game-root .join-input{background:var(--surf);border:1px solid var(--brd);border-radius:8px;padding:.7rem 1.1rem;font-family:'Cinzel',serif;font-size:1.2rem;letter-spacing:.2em;color:var(--txt);text-align:center;width:200px;outline:none;}
#game-root .join-input:focus{border-color:var(--gold);}
#game-root .gold-btn{font-family:'Cinzel',serif;font-size:.85rem;font-weight:700;letter-spacing:.1em;color:var(--bg);background:var(--gold);border:none;border-radius:8px;padding:.75rem 2rem;cursor:pointer;}
#game-root .gold-btn:hover{background:var(--gold-l);}
#game-root .winner-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;align-items:center;justify-content:center;padding:1rem;}
#game-root .winner-overlay.show{display:flex;}
#game-root .winner-modal{background:var(--bg2);border:1px solid var(--brd-b);border-radius:16px;padding:2.2rem 2.5rem;text-align:center;max-width:440px;width:100%;animation:modalPop .4s cubic-bezier(.34,1.56,.64,1) both;}
#game-root .winner-crown{font-size:2.8rem;margin-bottom:.8rem;}
#game-root .winner-title{font-family:'Cinzel',serif;font-size:1.7rem;font-weight:900;color:var(--gold);margin-bottom:.4rem;}
#game-root .winner-quote{font-style:italic;font-size:1.05rem;color:var(--txt-m);margin-bottom:1.8rem;line-height:1.6;}
#game-root .winner-scores{display:flex;gap:.85rem;justify-content:center;margin-bottom:1.8rem;}
#game-root .ws-card{padding:.65rem 1.3rem;border-radius:8px;border:1px solid var(--brd);background:var(--surf);text-align:center;}
#game-root .ws-nm{font-family:'Cinzel',serif;font-size:.7rem;color:var(--txt-m);}
#game-root .ws-val{font-family:'Cinzel',serif;font-size:1.4rem;font-weight:900;}
#game-root .ws-x{color:var(--xc);}#game-root .ws-o{color:var(--oc);}
#game-root .modal-btns{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;}
#game-root .play-again-btn{font-family:'Cinzel',serif;font-size:.85rem;letter-spacing:.1em;color:var(--bg);background:var(--gold);border:none;border-radius:8px;padding:.8rem 2rem;cursor:pointer;font-weight:600;}
#game-root .home-btn{font-family:'Cinzel',serif;font-size:.85rem;color:var(--txt-m);background:transparent;border:1px solid var(--brd);border-radius:8px;padding:.8rem 1.5rem;cursor:pointer;}
#game-root .solo-final-scores{display:flex;gap:.85rem;justify-content:center;margin-bottom:1.8rem;flex-wrap:wrap;}
#game-root .solo-fs-card{padding:.65rem 1.4rem;border-radius:8px;border:1px solid var(--brd);background:var(--surf);text-align:center;}
#game-root .solo-fs-label{font-family:'Cinzel',serif;font-size:.68rem;color:var(--txt-m);margin-bottom:.2rem;}
#game-root .solo-fs-val{font-family:'Cinzel',serif;font-size:1.5rem;font-weight:900;color:var(--gold);}
#game-root .solo-fs-val.new-hs{color:#E8C96A;}
@keyframes winPop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes modalPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
</style>