/* Phone looks a game can choose (editor > Game > Phone look). "stage" is theme.css as it is.
   Each look only restyles; the screens and buttons are the same. */

/* ================= CLASSIC: like QuizXpress - purple header bar, light cards ================= */
body.phone[data-theme="classic"] { --text: #161a33; --muted: #5d6385; background: linear-gradient(180deg, #f3f2f7, #dedce8) fixed; color: var(--text); }
[data-theme="classic"] .ph-top { background: linear-gradient(180deg, #4a0f5a, #33083f); border-bottom: 5px solid #6b2a7d; color: #fff; }
[data-theme="classic"] .ph-top .rk { color: #e7c9ef; }
[data-theme="classic"] .ph-top .sc { background: #fff; color: #33083f; box-shadow: none; }
[data-theme="classic"] .ph-q { background: #fff; border: 0; color: #161a33; box-shadow: 0 4px 14px rgba(40, 10, 60, .12); font-family: var(--font); font-weight: 800; }
[data-theme="classic"] .ph-center h2 { color: #161a33; text-shadow: none; }
[data-theme="classic"] .ph-center p, [data-theme="classic"] .muted { color: var(--muted); }
[data-theme="classic"] .timerbar { background: #fff; border-color: #d4cfe0; }
[data-theme="classic"] .timerbar i { background: linear-gradient(90deg, #6b2a7d, #a64fc0); box-shadow: none; }
[data-theme="classic"] .opt { border: 0; border-radius: 14px; text-shadow: none; background: var(--c2); box-shadow: 0 4px 0 var(--edge), 0 6px 14px rgba(0, 0, 0, .15); }
[data-theme="classic"] .opt::before { display: none; }
[data-theme="classic"] .opt .l { border: 0; background: rgba(255, 255, 255, .28); }
[data-theme="classic"] .opt.sel { box-shadow: 0 0 0 4px #33083f, 0 4px 0 var(--edge); }
[data-theme="classic"] .opts:has(.opt.sel) .opt:not(.sel) { opacity: .4; }
[data-theme="classic"] input { background: #fff !important; color: #161a33; border-color: #cfc8dc !important; box-shadow: none !important; }
[data-theme="classic"] .ph-send, [data-theme="classic"] button.primary { background: linear-gradient(180deg, #6b2a7d, #4a0f5a); color: #fff; border-color: #4a0f5a; text-shadow: none; box-shadow: 0 4px 0 #2a0634; }
[data-theme="classic"] .ph-card { background: #fff; box-shadow: 0 6px 18px rgba(40, 10, 60, .14); }
[data-theme="classic"] .ph-card.win { background: #4a0f5a; color: #fff; }
[data-theme="classic"] .result { box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
[data-theme="classic"] .result.ok::before, [data-theme="classic"] .result.ok::after { display: none; }
[data-theme="classic"] .ph-logo { filter: drop-shadow(0 6px 10px rgba(40, 10, 60, .25)); }

/* ================= NEON: black with glowing outlines, big 2x2 answer tiles ================= */
body.phone[data-theme="neon"] { --neon: #ff2fd8; --neon2: #20e3ff; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 47, 216, .22), transparent 60%), radial-gradient(ellipse 70% 40% at 50% 100%, rgba(32, 227, 255, .2), transparent 60%), #04010d fixed; }
[data-theme="neon"] .ph-top { background: rgba(4, 1, 13, .85); border-bottom: 2px solid var(--neon); box-shadow: 0 0 18px rgba(255, 47, 216, .6); }
[data-theme="neon"] .ph-top .sc { background: transparent; color: var(--neon2); border: 2px solid var(--neon2); box-shadow: 0 0 10px rgba(32, 227, 255, .7), inset 0 0 8px rgba(32, 227, 255, .4); text-shadow: 0 0 8px var(--neon2); }
[data-theme="neon"] .ph-q { background: rgba(4, 1, 13, .7); border: 2px solid var(--neon2); box-shadow: 0 0 14px rgba(32, 227, 255, .45), inset 0 0 14px rgba(32, 227, 255, .15); text-shadow: 0 0 10px rgba(255, 255, 255, .4); }
[data-theme="neon"] .ph-center h2 { text-shadow: 0 0 12px var(--neon); }
[data-theme="neon"] .timerbar { background: transparent; border: 1px solid var(--neon); }
[data-theme="neon"] .timerbar i { background: var(--neon); box-shadow: 0 0 12px var(--neon); }
[data-theme="neon"] .opts { grid-template-columns: 1fr 1fr; gap: 12px; }
[data-theme="neon"] .opt { flex-direction: column; justify-content: center; text-align: center; gap: 8px; min-height: 132px; font-size: 18px; color: var(--c1); background: rgba(4, 1, 13, .75); border: 3px solid var(--c1); box-shadow: 0 0 14px color-mix(in srgb, var(--c1) 70%, transparent), inset 0 0 18px color-mix(in srgb, var(--c1) 30%, transparent); text-shadow: 0 0 10px var(--c1); }
[data-theme="neon"] .opt::before { display: none; }
[data-theme="neon"] .opt .l { width: 46px; height: 46px; background: transparent; border: 3px solid var(--c1); color: var(--c1); box-shadow: 0 0 10px var(--c1); }
[data-theme="neon"] .opt[data-v="A"] { --c1: #3ea6ff; } [data-theme="neon"] .opt[data-v="B"] { --c1: #ff9b3d; } [data-theme="neon"] .opt[data-v="C"] { --c1: #3dff8f; }
[data-theme="neon"] .opt[data-v="D"] { --c1: #ffe83d; } [data-theme="neon"] .opt[data-v="E"] { --c1: #c46bff; } [data-theme="neon"] .opt[data-v="F"] { --c1: #ff4d6d; }
[data-theme="neon"] .opt[data-v="D"] .l { color: var(--c1); border-color: var(--c1); background: transparent; }
[data-theme="neon"] .opt.sel { background: color-mix(in srgb, var(--c1) 22%, #04010d); box-shadow: 0 0 26px var(--c1), inset 0 0 24px color-mix(in srgb, var(--c1) 45%, transparent); border-color: #fff; }
[data-theme="neon"] .opt.sel::after { position: absolute; top: 8px; right: 8px; transform: none; background: var(--c1); color: #04010d; }
[data-theme="neon"] .opt:active:not(:disabled) { transform: scale(.97); }
[data-theme="neon"] input { border: 2px solid var(--neon2) !important; box-shadow: 0 0 12px rgba(32, 227, 255, .4) !important; }
[data-theme="neon"] .ph-send, [data-theme="neon"] button.primary { background: transparent; color: #fff; border: 3px solid var(--neon); text-shadow: 0 0 10px var(--neon); box-shadow: 0 0 18px rgba(255, 47, 216, .7), inset 0 0 14px rgba(255, 47, 216, .35); }
[data-theme="neon"] .ph-card { background: rgba(4, 1, 13, .8); color: #fff; border: 2px solid var(--neon); box-shadow: 0 0 18px rgba(255, 47, 216, .55); text-shadow: 0 0 10px var(--neon); }
[data-theme="neon"] .ph-card.win { border-color: #ffe83d; box-shadow: 0 0 26px #ffe83d; color: #ffe83d; text-shadow: 0 0 12px #ffe83d; background: rgba(4, 1, 13, .8); }
[data-theme="neon"] .buzzer svg { filter: drop-shadow(0 0 16px rgba(255, 47, 216, .7)); }
[data-theme="neon"] .result { background: rgba(4, 1, 13, .85) !important; }
[data-theme="neon"] .result.ok { border: 3px solid #3dff8f; box-shadow: 0 0 26px #3dff8f; color: #3dff8f; }
[data-theme="neon"] .result.no { border: 3px solid #ff4d6d; box-shadow: 0 0 26px #ff4d6d; color: #ff4d6d; }
[data-theme="neon"] .result .big, [data-theme="neon"] .result h2 { text-shadow: 0 0 14px currentColor; }
[data-theme="neon"] .result p, [data-theme="neon"] .result .muted { color: #e8e6ff; }
[data-theme="neon"] .result.ok::before, [data-theme="neon"] .result.ok::after { opacity: .5; }

/* ================= HALLOWEEN: deep purple, pumpkin orange, slime green ================= */
body.phone[data-theme="halloween"] { --gold1: #ffd08a; --gold2: #ff7a18; --gold3: #b34700; background: radial-gradient(ellipse 90% 45% at 50% 105%, rgba(255, 122, 24, .35), transparent 60%), radial-gradient(ellipse 70% 40% at 50% -5%, rgba(142, 68, 173, .45), transparent 60%), #0e0418 fixed; }
[data-theme="halloween"] .ph-top { background: linear-gradient(180deg, #24093a, #14041f); border-bottom: 3px solid #ff7a18; }
[data-theme="halloween"] .ph-top .sc { color: #1a0800; }
[data-theme="halloween"] .ph-q { background: rgba(36, 9, 58, .85); border: 2px solid rgba(255, 122, 24, .5); }
[data-theme="halloween"] .opt[data-v="A"] { --c1: #ffb46b; --c2: #ff7a18; --c3: #b34700; --edge: #5c2400; }
[data-theme="halloween"] .opt[data-v="B"] { --c1: #c48be0; --c2: #8e44ad; --c3: #5b1f78; --edge: #2e0c40; }
[data-theme="halloween"] .opt[data-v="C"] { --c1: #a6f27a; --c2: #5ecc3c; --c3: #318a1c; --edge: #16470b; }
[data-theme="halloween"] .opt[data-v="D"] { --c1: #fff6df; --c2: #e8dcc0; --c3: #b8a985; --edge: #6b5f45; color: #241405; }
[data-theme="halloween"] .opt[data-v="D"] .l { color: #241405; }
[data-theme="halloween"] .opt[data-v="E"] { --c1: #ff7a7a; --c2: #c0182b; --c3: #7d0a17; --edge: #3f040b; }
[data-theme="halloween"] .opt[data-v="F"] { --c1: #7ee0d6; --c2: #1aa69a; --c3: #0e6b62; --edge: #053631; }
[data-theme="halloween"] .opt.sel { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 0 0 4px #ff7a18, 0 6px 0 var(--edge), 0 0 24px rgba(255, 122, 24, .8); }
[data-theme="halloween"] .ph-card { background: #f4ead2; color: #241405; }
[data-theme="halloween"] .ph-card.win { background: linear-gradient(180deg, #ffb46b, #ff7a18); color: #1a0800; }
[data-theme="halloween"] .buzzer .dome { filter: hue-rotate(28deg) saturate(1.2); }   /* pumpkin-orange buzzer */
[data-theme="halloween"] .buzzer:disabled .dome { filter: hue-rotate(28deg) grayscale(.85) brightness(.75); }
[data-theme="halloween"] .result.ok { background: linear-gradient(180deg, #a6f27a, #5ecc3c 60%, #318a1c); border-color: #d9ffc2; }
[data-theme="halloween"] .result.ok::before, [data-theme="halloween"] .result.ok::after { background-image: radial-gradient(circle, #ff7a18 0 4px, transparent 5px), radial-gradient(circle, #8e44ad 0 3px, transparent 4px), radial-gradient(circle, #fff 0 2px, transparent 3px), radial-gradient(circle, #ff7a18 0 3px, transparent 4px); }
[data-theme="halloween"] .timerbar i { background: linear-gradient(90deg, #b34700, #ff7a18, #ffd08a); box-shadow: 0 0 10px rgba(255, 122, 24, .7); }
[data-theme="halloween"] .buzzer.won .dome { filter: hue-rotate(28deg) saturate(1.2); }

/* ================= MILLIONAIRE: blue studio, silver-edged lozenges, gold letters ================= */
body.phone[data-theme="millionaire"] { --gold1: #ffd76a; --gold2: #ffb000; --gold3: #b87400;
  background: repeating-conic-gradient(from 200deg at 50% -20%, rgba(255, 255, 255, .05) 0 4deg, transparent 4deg 13deg),
              radial-gradient(ellipse 90% 60% at 50% 20%, #2a3fb0 0%, #13207a 45%, #050a38 100%) fixed; }
[data-theme="millionaire"] .ph-top { background: linear-gradient(180deg, rgba(5, 10, 56, .95), rgba(10, 20, 90, .95)); border-bottom: 2px solid #c9d4ff; box-shadow: 0 2px 14px rgba(120, 150, 255, .4); }
[data-theme="millionaire"] .ph-top .nm { font-family: var(--font); font-weight: 800; letter-spacing: .02em; }
[data-theme="millionaire"] .ph-top .sc { background: linear-gradient(180deg, #ffd76a, #ffb000 60%, #b87400); color: #1a0d00; }
/* the question sits in a lozenge with a line running out to the edges, like on the show */
[data-theme="millionaire"] .ph-q { position: relative; border: 0; border-radius: 0; background: #c9d4ff; padding: 18px 34px; text-align: center; font-family: var(--font); font-weight: 800; font-size: 20px;
  clip-path: polygon(0 50%, 24px 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 24px 100%); box-shadow: none; }
[data-theme="millionaire"] .ph-q::before { content: ''; position: absolute; inset: 2px; z-index: -1; background: linear-gradient(180deg, #1b3a8f, #050f3d);
  clip-path: polygon(0 50%, 23px 0, calc(100% - 23px) 0, 100% 50%, calc(100% - 23px) 100%, 23px 100%); }
[data-theme="millionaire"] .ph-q { isolation: isolate; color: #fff; }
[data-theme="millionaire"] .opts { gap: 10px; }
[data-theme="millionaire"] .timerbar { height: 6px; border: 0; background: rgba(201, 212, 255, .2); }
[data-theme="millionaire"] .timerbar i { background: linear-gradient(90deg, #c9d4ff, #ffffff); box-shadow: 0 0 10px rgba(201, 212, 255, .8); }
[data-theme="millionaire"] .ph-center h2 { font-family: var(--font); font-weight: 900; }
[data-theme="millionaire"] input { background: rgba(5, 15, 61, .9) !important; border: 2px solid #c9d4ff !important; }
[data-theme="millionaire"] .ph-send, [data-theme="millionaire"] button.primary { background: linear-gradient(180deg, #ffbe3d, #f28c00 55%, #c46400); color: #1a0d00; border-color: #ffd76a; text-shadow: none; box-shadow: 0 4px 0 #6b3500; }
[data-theme="millionaire"] .ph-card { background: linear-gradient(180deg, #1b3a8f, #050f3d); color: #fff; border: 2px solid #c9d4ff; }
[data-theme="millionaire"] .ph-card.win { background: linear-gradient(180deg, #ffbe3d, #f28c00); color: #1a0d00; border-color: #ffd76a; }
/* final answer turns green, wrong turns orange-red, as on the show */
[data-theme="millionaire"] .result { border-radius: 0; clip-path: polygon(0 50%, 28px 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 28px 100%); border: 0; padding: 30px 40px; }
[data-theme="millionaire"] .result.ok { background: linear-gradient(180deg, #5fe07a, #1f9c3c 60%, #106a26); }
[data-theme="millionaire"] .result.no { background: linear-gradient(180deg, #ff9a5c, #e0501c 60%, #9e2c08); }
[data-theme="millionaire"] .result.ok::before, [data-theme="millionaire"] .result.ok::after { display: none; }
[data-theme="millionaire"] .buzzer svg { filter: drop-shadow(0 0 18px rgba(120, 150, 255, .7)); }

/* ================= DUDE STOLE MY VOWELS: sunny sky, navy panels with a yellow edge ================= */
body.phone[data-theme="dude"] { --gold1: #fff19a; --gold2: #ffd21f; --gold3: #c99500;
  background: radial-gradient(ellipse 34% 7% at 18% 16%, rgba(255, 255, 255, .95), transparent 70%), radial-gradient(ellipse 28% 6% at 30% 13%, rgba(255, 255, 255, .9), transparent 70%),
              radial-gradient(ellipse 30% 6% at 82% 30%, rgba(255, 255, 255, .9), transparent 70%), radial-gradient(ellipse 22% 5% at 72% 27%, rgba(255, 255, 255, .85), transparent 70%),
              linear-gradient(180deg, #2a8fe0 0%, #5bbcf5 45%, #a9e2ff 78%, #e9f8ff 100%) fixed; }
[data-theme="dude"] .ph-top { background: #13235e; border-bottom: 4px solid #ffd21f; }
[data-theme="dude"] .ph-top .sc { background: #ffd21f; color: #13235e; box-shadow: 0 2px 0 #8a6a00; }
[data-theme="dude"] .ph-q { background: #13235e; border: 4px solid #ffd21f; border-radius: 18px; color: #fff; font-size: 24px; text-align: center; letter-spacing: .04em; box-shadow: 0 0 0 3px #2c6fd1, 0 10px 20px rgba(10, 30, 80, .35); }
[data-theme="dude"] .ph-center h2 { color: #13235e; text-shadow: 0 2px 0 rgba(255, 255, 255, .6); }
[data-theme="dude"] .ph-center p, [data-theme="dude"] .muted { color: #1d3a7a; }
[data-theme="dude"] .timerbar { background: rgba(255, 255, 255, .7); border: 2px solid #13235e; }
[data-theme="dude"] .timerbar i { background: linear-gradient(90deg, #ff9d1f, #ffd21f); box-shadow: none; }
[data-theme="dude"] input { background: #fff !important; color: #13235e; border: 3px solid #13235e !important; box-shadow: none !important; font-weight: 800; }
[data-theme="dude"] .ph-send, [data-theme="dude"] button.primary { background: linear-gradient(180deg, #fff19a, #ffd21f 55%, #e8b400); color: #13235e; border: 3px solid #13235e; text-shadow: none; box-shadow: 0 5px 0 #13235e; }
[data-theme="dude"] .opt, [data-theme="dude"] .opt[data-v] { --c1: #24408f; --c2: #13235e; --c3: #0b1640; --edge: #050b24; border: 3px solid #ffd21f; }
[data-theme="dude"] .opt .l { background: #ffd21f; color: #13235e; border-color: #13235e; }
[data-theme="dude"] .opt.sel { box-shadow: 0 0 0 4px #fff, 0 6px 0 #050b24, 0 0 22px rgba(255, 210, 31, .9); }
[data-theme="dude"] .ph-card { background: #13235e; color: #fff; border: 4px solid #ffd21f; }
[data-theme="dude"] .ph-card.win { background: #ffd21f; color: #13235e; border-color: #13235e; }
[data-theme="dude"] .result { border-width: 4px; }
[data-theme="dude"] .result.ok { border-color: #ffd21f; }
[data-theme="dude"] .ph-out { color: #13235e; }
[data-theme="dude"] .ph-logo { filter: drop-shadow(0 6px 8px rgba(10, 30, 80, .35)); }
[data-theme="dude"] .opt[data-v] .l { background: #ffd21f; color: #13235e; border-color: #13235e; }
[data-theme="dude"] .opt[data-v] { color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
[data-theme="dude"] .ph-body p, [data-theme="dude"] .ph-body p b { color: #13235e !important; }
[data-theme="dude"] .opts:has(.opt.sel) .opt:not(.sel) { opacity: .6; filter: none; }
[data-theme="dude"] .opt.sel { --c1: #fff19a; --c2: #ffd21f; --c3: #e8b400; --edge: #8a6a00; color: #13235e; text-shadow: none; border-color: #13235e; }
[data-theme="dude"] .opt.sel .l { background: #13235e; color: #ffd21f; border-color: #13235e; }