@import url("podia.css?v=202610071600");
@import url("quiz-theme.css?v=202610071600");
@import url("lobby-theme.css?v=202610080900");
@import url("multiplier-badge.css?v=202610080920");

:root {
    --primary: #6366f1;
    --primary-glow: rgba(99, 102, 241, 0.5);
    --secondary: #a855f7;
    --accent: #f43f5e;
    --bg-dark: #0f172a;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --success: #10b981;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}

/* Luxury Background */
.bg-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #1e1b4b 0%, #0f172a 100%);
}

.blob {
    position: absolute;
    width: 500px;
    height: 500px;
    background: var(--primary);
    filter: blur(120px);
    border-radius: 50%;
    opacity: 0.15;
    animation: move 20s infinite alternate;
}

.blob-2 {
    background: var(--secondary);
    right: -100px;
    bottom: -100px;
    animation-delay: -5s;
}

@keyframes move {
    from { transform: translate(-10%, -10%) scale(1); }
    to { transform: translate(10%, 10%) scale(1.1); }
}

/* Panels & Cards */
.container {
    width: 90%;
    max-width: 500px;
    text-align: center;
    padding: 2rem 0;
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.glass-card:hover {
    box-shadow: 0 30px 60px -12px rgba(99, 102, 241, 0.2);
}

/* Typography */
h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #06040e;
    color: #06040e;
    letter-spacing: -0.03em;
}

.subtitle {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
}

/* Inputs */
.input-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.input-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    margin-left: 0.5rem;
}

.input-group input,
.input-group select,
.question-card input,
input[type="text"],
input[type="number"],
input[type="password"],
select {
    width: 100%;
    min-width: 0;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    color: #fff;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    outline: none;
    text-align: center;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #17183c inset;
    box-shadow: 0 0 0 1000px #17183c inset;
    caret-color: #fff;
}

input:focus {
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* Buttons */
.btn {
    width: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    border: none;
    border-radius: 14px;
    padding: 1.1rem;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.4);
    filter: brightness(1.1);
}

.btn:active {
    transform: translateY(0);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--glass-border);
    box-shadow: none;
}

.btn-secondary:hover {
    background: var(--glass-bg);
}

.btn-success { background: var(--success) !important; }

/* Grid Layouts */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 1.25rem;
    text-align: center;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary);
    display: block;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

/* Quiz Specific */
.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
}

.option-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 2rem 1.5rem;
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.option-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.02);
}

.option-btn.selected {
    background: var(--primary);
    border-color: var(--primary);
}

.timer-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    margin-bottom: 2rem;
    overflow: hidden;
}

.timer-progress {
    height: 100%;
    background: var(--accent);
    width: 100%;
    transition: width 1s linear;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Leaderboard */
.leaderboard-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--glass-bg);
    border-radius: 14px;
    margin-bottom: 0.75rem;
    border: 1px solid transparent;
}

.leaderboard-item.top-3 {
    border-color: gold;
    background: rgba(255, 215, 0, 0.05);
}

.rank {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--primary);
    width: 30px;
}

.nickname {
    flex-grow: 1;
    text-align: left;
    font-weight: 600;
    padding-left: 1rem;
}

.score {
    font-weight: 800;
    color: var(--success);
}

@media (max-width: 480px) {
    .glass-card { padding: 1.5rem; }
    h1 { font-size: 2.5rem; }
    .container { width: 95%; }
    .avatar-item { font-size: 1.5rem !important; }
}

/* BRAND LOGO */
.brand-logo {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.6), 0 0 20px rgba(99, 102, 241, 0.4), 0 0 30px rgba(168, 85, 247, 0.4);
    z-index: 1000;
    user-select: none;
}
.brand-icon {
    font-size: 2.2rem;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
    animation: floatIcon 3s ease-in-out infinite;
}
.studio-tools { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin:1rem 0; }
.studio-tools .btn { font-size:.9rem; padding:.85rem .5rem; }
.import-box { padding:1rem; border:1px dashed var(--primary); border-radius:16px; margin:1rem 0; text-align:left; }
textarea { width:100%; min-height:180px; margin:.6rem 0 1rem; padding:1rem; color:#fff; background:rgba(0,0,0,.25); border:1px solid var(--glass-border); border-radius:12px; font:13px ui-monospace,SFMono-Regular,Menlo,monospace; }
.question-card { text-align:left; padding:1rem; margin:1rem 0; border:1px solid var(--glass-border); border-radius:16px; background:rgba(15,23,42,.55); }
.question-card input { margin:.35rem 0; }
.question-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.link-danger { border:0; background:transparent; color:#fb7185; cursor:pointer; font-weight:700; }
.question-meta { display:flex; align-items:center; gap:.5rem; margin-top:.55rem; }.question-meta select{padding:.65rem;font-size:.85rem}.question-meta .time{width:78px;padding:.65rem}
.saved-set { width:100%; text-align:left; border:1px solid var(--glass-border); background:var(--glass-bg); color:#fff; border-radius:12px; padding:1rem; cursor:pointer; margin:.4rem 0; }.saved-set span{display:block;color:var(--text-muted);font-size:.8rem;margin-top:.25rem}
@media(max-width:600px){.studio-tools{grid-template-columns:1fr}.question-meta{flex-wrap:wrap}}
@keyframes floatIcon {
    0%, 100% { transform: translateY(0) rotate(-5deg); filter: hue-rotate(0deg); }
    50% { transform: translateY(-5px) rotate(5deg); filter: hue-rotate(30deg); }
}

/* Kahoot-esintili host lobisi */
.container:has(.lobby-view){width:100%;max-width:none!important;padding:0}.container:has(.lobby-view)>.brand-logo{display:none}
.lobby-view { max-width:none; padding:0; overflow:hidden; background:#25106b; border:0; border-radius:0; box-shadow:none; }
.lobby-shell { min-height:72vh; background:radial-gradient(circle at 78% 70%,rgba(117,51,213,.48),transparent 26%),linear-gradient(145deg,#351184 0%,#21085d 58%,#15043e 100%); }
.lobby-join-strip { min-height:104px; padding:14px max(24px,5vw); display:flex; align-items:center; justify-content:center; gap:24px; background:rgba(10,2,42,.46); color:#fff; }
.lobby-join-strip>div:first-child { display:flex; flex-direction:column; gap:3px; text-align:left; font-size:.9rem; color:#d9cffc; }.lobby-join-strip b { font-size:1.05rem; color:#fff; }
.lobby-pin-block { display:flex; align-items:center; gap:14px; padding:10px 18px; color:#1a1234; background:#fff; border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,.25); }.lobby-pin-block small { font-size:.63rem; font-weight:900; }.lobby-pin-block strong { font-size:2.1rem; letter-spacing:.06em; line-height:1; }
.lobby-qr { width:74px; height:74px; padding:8px; display:grid; grid-template-columns:repeat(5,1fr); gap:2px; background:repeating-conic-gradient(#180b42 0 25%,#fff 0 50%) 0/11px 11px; border:5px solid #fff; }.lobby-qr i { display:block; background:#fff; }.lobby-qr i:first-child{grid-area:1/1/3/3}.lobby-qr i:nth-child(2){grid-area:1/4/3/6}.lobby-qr i:nth-child(3){grid-area:4/1/6/3}
.lobby-stage { max-width:1100px; margin:auto; padding:30px 32px 38px; }.lobby-title { display:flex; flex-direction:column; align-items:center; color:#fff; }.lobby-title span{font-size:1.7rem}.lobby-title b{font-size:2.15rem;letter-spacing:-.08em}.lobby-title small{margin-top:8px;color:#d8ccff;font-size:1rem}.lobby-ready{text-align:center;color:#e7defe;margin:18px 0 20px;font-weight:600}
.lobby-players { min-height:178px; display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:center; gap:10px; }.lobby-player-card { min-width:132px; padding:13px 15px; border-radius:5px; background:linear-gradient(135deg,#b993ff,#8c60ef); color:#fff; font-weight:800; box-shadow:0 7px 0 rgba(22,5,70,.28); animation:playerJoin .28s ease-out both; }.lobby-player-card span{margin-right:7px}.lobby-empty{align-self:center;color:#d8ccff;font-size:1.05rem}
.lobby-footer { display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center; margin-top:22px; color:#fff; }.lobby-footer>span{text-align:center;color:#d8ccff}.lobby-footer>span b{color:#fff;font-size:1.3rem}.lobby-copy{justify-self:start;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.13);color:#fff;border-radius:8px;padding:12px 16px;font-weight:800;cursor:pointer}.lobby-start{justify-self:end;min-width:180px;border:0;border-radius:8px;padding:15px 22px;background:#fff;color:#241063;font-size:1.05rem;font-weight:900;cursor:pointer;box-shadow:0 7px 0 rgba(12,2,44,.35)}.lobby-start span{margin-left:8px}
@keyframes playerJoin{from{opacity:0;transform:scale(.75) translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:640px){.lobby-join-strip{gap:8px;padding:12px}.lobby-join-strip>div:first-child{display:none}.lobby-pin-block strong{font-size:1.55rem}.lobby-qr{width:58px;height:58px}.lobby-stage{padding:24px 16px}.lobby-player-card{min-width:112px;padding:11px}.lobby-footer{grid-template-columns:1fr 1fr}.lobby-footer>span{grid-column:1/-1;grid-row:1}.lobby-copy,.lobby-start{justify-self:stretch}.lobby-start{min-width:0}}

.container:has(.leaderboard-view){width:100%;max-width:none!important;padding:0}.container:has(.leaderboard-view)>.brand-logo{display:none}.leaderboard-view{max-width:none;padding:0;overflow:hidden;border:0;border-radius:0;background:radial-gradient(circle at 50% 83%,#7d3edd 0,rgba(76,24,151,.86) 27%,#24075e 72%);min-height:72vh;box-shadow:none}.leaderboard-screen{max-width:1050px;margin:auto;padding:44px 28px 24px}.leaderboard-heading{text-align:center;color:#fff}.leaderboard-heading>span{font-size:1.35rem;font-weight:900}.leaderboard-heading h1{margin:12px 0 8px;font-size:3rem;background:none;-webkit-text-fill-color:#fff}.leaderboard-heading p{color:#dfd2ff;font-weight:600}.podium-row{display:grid;grid-template-columns:1fr 1.18fr 1fr;align-items:end;gap:18px;margin:38px auto 28px;max-width:940px}.podium-card{min-height:184px;padding:18px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:24px;background:rgba(40,10,98,.67);color:#fff;box-shadow:0 15px 30px rgba(17,2,57,.28);animation:podiumRise .45s ease both}.podium-1{min-height:228px;background:linear-gradient(150deg,rgba(115,69,205,.98),rgba(54,18,126,.92));border:1px solid rgba(255,226,113,.7);order:2}.podium-2{order:1}.podium-3{order:3}.podium-medal{font-size:2.7rem}.podium-avatar{font-size:2rem;margin:5px}.podium-card b{font-size:1.45rem}.podium-card small{margin-top:6px;color:#e5d9ff}.podium-empty{visibility:hidden}.rank-list{max-width:540px;margin:0 auto;color:#fff}.rank-list div{display:flex;justify-content:space-between;padding:9px 6px;border-bottom:1px solid rgba(255,255,255,.45);font-size:1.08rem}.rank-list b{color:#ffe975}.leaderboard-next{display:block;margin:6px auto 36px;min-width:210px;padding:15px 20px;border:0;border-radius:9px;background:#fff;color:#26086b;font-size:1.05rem;font-weight:900;cursor:pointer;box-shadow:0 7px 0 rgba(17,2,57,.35)}@keyframes podiumRise{from{opacity:0;transform:translateY(35px) scale(.9)}to{opacity:1;transform:none}}@media(max-width:620px){.leaderboard-screen{padding:28px 14px}.leaderboard-heading h1{font-size:2.25rem}.podium-row{gap:8px;margin-top:25px}.podium-card{min-height:145px;padding:12px 5px;border-radius:15px}.podium-1{min-height:170px}.podium-medal{font-size:2rem}.podium-avatar{font-size:1.45rem}.podium-card b{font-size:1rem}.podium-card small{font-size:.78rem}}
.rank-list-live{margin-top:8px}.rank-row{opacity:0;transform:translateY(20px);animation:rankSlide .42s ease forwards;background:rgba(255,255,255,.08);border-radius:8px;margin:5px 0;padding:11px 14px!important}.rank-row em{display:inline-grid;place-items:center;width:25px;height:25px;margin-right:6px;border-radius:50%;background:rgba(255,255,255,.18);font-style:normal;font-weight:900}.rank-row span{color:#7dffb2;font-size:.78em;margin-left:4px}.score-count{display:inline-block}.score-finished{animation:scorePop .45s ease}.podium-card .score-finished{color:#ffe975}@keyframes rankSlide{to{opacity:1;transform:none}}@keyframes scorePop{50%{transform:scale(1.28);color:#fff36d}}

/* Host lobisi: :has desteği olmayan tarayıcılarda da tam ekran sahne */
body.host-lobby { display:block; min-height:100vh; background:#320b78; }
body.host-lobby .bg-blobs { display:none; }
body.host-lobby .host-shell { width:100%; max-width:none; min-height:100vh; padding:0; text-align:initial; }
body.host-lobby .host-shell > .brand-logo { display:none; }
body.host-lobby #view.lobby-view { width:100%; min-height:100vh; padding:0; overflow:hidden; border:0; border-radius:0; background:#320b78; box-shadow:none; display:block; }
body.host-lobby .lobby-shell { min-height:100vh; display:flex; flex-direction:column; background:radial-gradient(ellipse at 50% 120%,#8542d0 0,rgba(84,31,162,.92) 33%,rgba(55,13,128,.98) 67%,#30076f 100%); }
body.host-lobby .lobby-join-strip { width:100%; min-height:112px; padding:12px clamp(18px,4vw,72px); display:flex; align-items:center; justify-content:center; gap:18px; background:#23055b; color:#fff; box-shadow:0 3px 0 rgba(0,0,0,.16); }
body.host-lobby .lobby-join-copy { display:flex; flex-direction:column; min-width:195px; font-size:15px; line-height:1.15; color:#e8defe; }
body.host-lobby .lobby-join-copy b { margin-top:5px; color:#fff; font-size:18px; white-space:nowrap; }
body.host-lobby .lobby-pin-block { min-width:232px; padding:11px 18px; display:flex; align-items:center; justify-content:center; gap:13px; color:#231149; background:#fff; border-radius:4px; box-shadow:0 6px 0 rgba(16,1,50,.28); }
body.host-lobby .lobby-pin-block small { font-size:12px; font-weight:900; letter-spacing:.04em; }
body.host-lobby .lobby-pin-block strong { font-size:38px; line-height:1; letter-spacing:.03em; }
body.host-lobby .lobby-qr { flex:0 0 auto; width:80px; height:80px; }
body.host-lobby .lobby-start { justify-self:auto; min-width:126px; margin-left:auto; padding:13px 18px; border:0; border-radius:5px; background:#fff; color:#2a0968; font-size:18px; font-weight:900; cursor:pointer; box-shadow:0 6px 0 rgba(17,2,57,.38); }
body.host-lobby .lobby-stage { width:min(1120px,100%); flex:1; margin:0 auto; padding:28px 36px 42px; display:flex; flex-direction:column; }
body.host-lobby .lobby-title { margin-top:0; text-align:center; color:#fff; display:flex; flex-direction:column; align-items:center; }
body.host-lobby .lobby-title b { font-size:40px; letter-spacing:-.06em; text-shadow:0 3px 0 rgba(0,0,0,.18); }
body.host-lobby .lobby-title small { margin-top:7px; color:#e2d3ff; font-size:17px; }
body.host-lobby .lobby-ready { margin:18px 0 24px; text-align:center; color:#fff; font-size:20px; font-weight:800; }
body.host-lobby .lobby-players { flex:1; min-height:250px; display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:center; gap:10px; padding:10px 8px; }
body.host-lobby .lobby-player-card { min-width:145px; padding:14px 16px; border-radius:2px; background:#ba91ff; color:#fff; font-size:18px; font-weight:800; text-align:center; box-shadow:0 5px 0 rgba(35,6,96,.35); }
body.host-lobby .lobby-player-card span { margin-right:7px; }
body.host-lobby .lobby-empty { align-self:center; padding:24px; color:#e4d7ff; font-size:20px; }
body.host-lobby .lobby-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:14px; color:#fff; }
body.host-lobby .lobby-footer > span { color:#f5f1ff; font-size:18px; }
body.host-lobby .lobby-footer > span b { font-size:24px; }
body.host-lobby .lobby-copy { padding:12px 16px; border:2px solid rgba(255,255,255,.75); border-radius:5px; background:rgba(255,255,255,.12); color:#fff; font-size:15px; font-weight:800; cursor:pointer; }
@media(max-width:720px){body.host-lobby .lobby-join-strip{min-height:84px;padding:8px 12px;gap:9px}body.host-lobby .lobby-join-copy{display:none}body.host-lobby .lobby-pin-block{min-width:0;padding:9px 11px;gap:8px}body.host-lobby .lobby-pin-block strong{font-size:28px}body.host-lobby .lobby-qr{width:54px;height:54px}body.host-lobby .lobby-start{min-width:0;padding:11px 13px;font-size:15px}body.host-lobby .lobby-stage{padding:22px 12px 26px}body.host-lobby .lobby-title b{font-size:32px}body.host-lobby .lobby-ready{font-size:16px}body.host-lobby .lobby-player-card{min-width:120px;font-size:15px;padding:12px 9px}body.host-lobby .lobby-footer{margin-top:8px}body.host-lobby .lobby-footer>span{font-size:15px}}

/* Lobide büyük, okutulabilir QR ve oyuncu sütunları */
body.host-lobby .lobby-arena { width:min(1260px,100%); flex:1; min-height:390px; margin:0 auto; display:grid; grid-template-columns:minmax(180px,1fr) minmax(300px,410px) minmax(180px,1fr); align-items:center; gap:32px; }
body.host-lobby .lobby-player-column { min-height:300px; display:flex; flex-direction:column; justify-content:center; gap:12px; }
body.host-lobby .lobby-player-column-left { align-items:flex-end; }
body.host-lobby .lobby-player-column-right { align-items:flex-start; }
body.host-lobby .lobby-player-column .lobby-player-card { width:min(100%,280px); min-width:0; padding:16px 20px; font-size:20px; animation:none; }
body.host-lobby .lobby-qr-center { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; }
body.host-lobby .lobby-qr-center img { display:block; width:min(350px,70vw); height:auto; padding:12px; background:#fff; border-radius:8px; box-shadow:0 12px 0 rgba(24,4,73,.32),0 24px 40px rgba(13,1,49,.28); }
body.host-lobby .lobby-qr-center strong { margin-top:18px; font-size:20px; }
body.host-lobby .lobby-qr-center span { margin-top:10px; color:#e8dcff; font-size:16px; }
@media(max-width:820px){body.host-lobby .lobby-arena{grid-template-columns:1fr;gap:16px;min-height:0}body.host-lobby .lobby-player-column{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:8px;order:2}body.host-lobby .lobby-player-column-left,.lobby-player-column-right{align-items:stretch}body.host-lobby .lobby-qr-center{order:1}body.host-lobby .lobby-player-column .lobby-player-card{width:100%;font-size:16px;padding:12px 8px}body.host-lobby .lobby-qr-center img{width:min(280px,75vw)}body.host-lobby .lobby-qr-center strong{font-size:16px}}

.answer-reveal-card{width:min(620px,90%);margin:42px auto 20px;padding:38px 30px;display:flex;align-items:center;justify-content:center;gap:18px;border-radius:22px;background:linear-gradient(135deg,#2fc87b,#11a967);color:#fff;box-shadow:0 18px 0 rgba(16,80,65,.3),0 28px 45px rgba(12,3,55,.25);font-size:clamp(1.5rem,3vw,2.5rem);text-align:center}.answer-reveal-card span{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;color:#16a565;font-size:2rem}.answer-reveal-note{text-align:center;color:#e8dcff;font-weight:800;font-size:1.15rem;margin:25px 0}
.reaction-buttons{margin-top:1rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem}.reaction-buttons b{width:100%;color:#cfc2ff}.reaction-buttons button{border:0;border-radius:999px;padding:.7rem .9rem;background:#7c4de0;color:#fff;font-weight:800;cursor:pointer}.reaction-buttons button:disabled{opacity:.65}#reaction-wall{position:fixed;right:24px;bottom:28px;z-index:20;display:flex;flex-direction:column;gap:8px;pointer-events:none}#reaction-wall span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.94);color:#321070;font-weight:900;box-shadow:0 8px 18px rgba(10,0,45,.25);animation:reactionPop .35s ease both}@keyframes reactionPop{from{opacity:0;transform:translateY(18px) scale(.8)}to{opacity:1;transform:none}}
.json-file-tools{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:.4rem 0 1rem}.json-file-label{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1rem;border:1px dashed var(--primary);border-radius:10px;color:#fff;font-weight:800;cursor:pointer}.json-file-label input{display:none}.json-file-tools .btn{width:auto;padding:.8rem 1rem}.json-example{margin-top:1rem;padding:1rem;border-radius:12px;background:rgba(0,0,0,.16);text-align:left;color:var(--text-muted)}.json-example summary{cursor:pointer;color:#fff;font-weight:800}.json-example p{margin:.8rem 0;font-size:.9rem}.json-example pre{overflow:auto;padding:1rem;border-radius:8px;background:#11132d;color:#e8e2ff;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}
.set-delete-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1rem;padding:.8rem 1rem;border-radius:12px;background:rgba(255,255,255,.06);color:#fff;font-weight:700}.set-delete-bar .btn{width:auto;margin:0;background:#d84962}.set-delete-bar .btn:disabled{opacity:.45;cursor:not-allowed}.saved-set-row{display:flex;align-items:stretch;gap:.65rem;margin:.65rem 0}.saved-set-row .saved-set{flex:1;margin:0}.set-check{display:flex;align-items:center;gap:.35rem;padding:0 .5rem;color:var(--text-muted);font-size:.84rem}.set-check input{width:18px;height:18px;accent-color:#a855f7}@media(max-width:560px){.set-delete-bar{align-items:flex-start;flex-direction:column}.saved-set-row{gap:.25rem}.set-check span{display:none}}