@font-face { font-family:"Planet Hoppers Digital"; src:url("./fonts/planet-hoppers-digital.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
.theme-planet-hoppers { --ph-navy:#091a32; --ph-panel:#102740; --ph-cyan:#66deef; color:#edf8ff; background:transparent; }
.theme-planet-hoppers .panel,.theme-planet-hoppers .card,.theme-planet-hoppers .host-mode-card,.theme-planet-hoppers .roster-card,.theme-planet-hoppers .host-mode-setup-panel { background:#102740; border-color:#294862; }
.theme-planet-hoppers .host-mode-card.is-planet-selected { background:radial-gradient(circle at 18% 18%,#5479b51c,transparent 24%),linear-gradient(180deg,#102946,#071729); border-color:#4f769d; }
.theme-planet-hoppers .host-mode-card.is-planet-selected::before { opacity:1; background:radial-gradient(circle,#6f9ed333,#6f9ed300); }
.theme-planet-hoppers .room-shell { --lobby-stage-top:#050a12; --lobby-stage-bottom:#010307; --lobby-stage-radial:#7189a30d; --lobby-world-top:#050a12; --lobby-world-bottom:#010307; --lobby-world-glow:#40566f1c; --lobby-world-spark:#a6bfd40e; --player-roster-card-border:#46658f; background:transparent; }
.theme-planet-hoppers .host-lobby-stage-card { background:radial-gradient(circle at 18% 20%,#7189a313,transparent 30%),linear-gradient(180deg,#0b1420,#02050a); }
.theme-planet-hoppers .room-shell .lobby-playground-shell { background:linear-gradient(180deg,#0b1420,#02050a); border-color:#2e4359; }
.theme-planet-hoppers .room-shell .lobby-playground-stage { background:radial-gradient(circle at 72% 18%,#a6bfd41a,transparent 24%),linear-gradient(180deg,#0b1420,#02050a); }
.theme-planet-hoppers .room-shell .lobby-playground-world { background:radial-gradient(circle at 20% 20%,#40566f2b,transparent 20%),radial-gradient(circle at 78% 82%,#a6bfd41a,transparent 18%),linear-gradient(180deg,#0a111c,#010307); }
.ph-mode-button { position:relative; isolation:isolate; min-height:clamp(148px,17vh,176px); min-width:0; width:100%; padding:clamp(20px,1.8vw,26px); padding-right:clamp(24px,2.2vw,34px); border-radius:22px; border:1px solid #5879a5; display:grid; grid-template-rows:auto minmax(0,1fr); align-content:stretch; justify-items:start; gap:clamp(20px,3vh,28px); background:linear-gradient(145deg,#263f68,#132847); color:#eef4ff; text-align:left; overflow:hidden; box-shadow:inset 0 1px 0 #ffffff18,0 16px 34px #0000003d; cursor:pointer; }
.ph-mode-button::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; border-radius:22px 0 0 22px; background:linear-gradient(180deg,#b4c9ed,#5879a522); }
.ph-mode-button::after { content:""; position:absolute; right:24px; bottom:25px; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; opacity:.46; transform:rotate(-45deg); }
.ph-mode-button.selected { border-color:#a7f6ff; box-shadow:inset 0 0 0 1px #d5fdff22,0 0 0 1px #8feefc33,0 26px 46px #0000004d,0 0 42px #4ddbea2e; }
.ph-mode-button .relic-mode-kicker { color:#c7ecf2; }
.ph-mode-button .relic-mode-kicker-focus,.relic-mode-kicker-focus { color:#f1d18c; text-decoration:underline; text-decoration-color:#d7a94f; text-decoration-thickness:2px; text-underline-offset:3px; }
.ph-mode-button svg { width:44px; height:44px; color:#7ae2ee; }
.ph-mode-button:hover { border-color:#a9c5ed; }
.ph-game { width:100%; min-width:0; display:flex; }
.ph-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:start; }
.ph-layout.is-host { grid-template-columns:minmax(0,1fr) 300px; }
.ph-stage { position:relative; display:flex; flex-direction:column; background:radial-gradient(circle at 12% 8%,#1c3959 0%,#0c1e36 60%); border:1px solid #31536f; border-radius:24px; padding:clamp(16px,2.4vw,34px); color:#f0f7ff; min-width:0; overflow:hidden; box-sizing:border-box; }
.room-shell.is-active-layout #active-room-root:is(.ph-game,:has(.ph-game)),
.room-shell.is-active-layout #active-room-root:is(.ph-game,:has(.ph-game)) .ph-game,
.room-shell.is-active-layout #active-room-root:is(.ph-game,:has(.ph-game)) .ph-layout { height:100%; min-height:0; }
.room-shell.is-active-layout #active-room-root:is(.ph-game,:has(.ph-game)) .ph-layout { flex:1 1 auto; align-items:stretch; }
.room-shell.is-active-layout #active-room-root:is(.ph-game,:has(.ph-game)) .ph-stage { height:100%; min-height:0; }
.ph-round-meta { display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-size:14px; color:#a9c8dc; }
.ph-round-meta>span:first-child { margin-right:auto; }
.ph-question-progress { padding:6px 11px; border:1px solid #52758e; border-radius:999px; background:rgba(20,48,70,.72); color:#e5f7ff; font-size:15px; font-weight:800; letter-spacing:.02em; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.ph-question-heading { display:flex; align-items:center; justify-content:center; gap:clamp(20px,4vw,64px); margin:34px auto 52px; width:min(100%,1250px); }
.ph-question-copy { flex:1 1 auto; min-width:0; }
.ph-stage h1,.ph-stage h2 { color:#f0f7ff; text-align:center; font-size:clamp(28px,3.2vw,54px); line-height:1.22; margin:0; overflow-wrap:anywhere; }
.ph-launch-label { display:block; margin:0 0 10px; color:#8eeaf4; font-size:clamp(14px,1.25vw,20px); font-weight:800; letter-spacing:.14em; text-align:center; text-transform:uppercase; }
.ph-answers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:24px 0 34px; }
.ph-stage .ph-answers { margin-top:auto; }
.ph-answer-slot { position:relative; min-width:0; border-radius:18px; }
.ph-answer { position:relative; display:flex; align-items:center; gap:22px; width:100%; min-height:145px; padding:20px; border:2px solid #33506c; border-radius:18px; color:#eff8ff; background:#142c46; text-align:left; font-size:clamp(17px,1.6vw,25px); line-height:1.35; cursor:pointer; transition:border-color .15s,background .15s; }
.ph-answer-slot.ph-colour-0 .ph-answer { background:#71364d; border-color:#c96882; }
.ph-answer-slot.ph-colour-1 .ph-answer { background:#286d9e; border-color:#65b8e8; }
.ph-answer-slot.ph-colour-2 .ph-answer { background:#966b2b; border-color:#d19a3b; }
.ph-answer-slot.ph-colour-3 .ph-answer { background:#2f806f; border-color:#66c9a7; }
.ph-answer:disabled { opacity:1; cursor:default; }
.ph-answer-text { min-width:0; overflow-wrap:anywhere; flex:1; font-weight:700; }
@media(hover:hover) and (pointer:fine) { .ph-answer:not(:disabled):hover { border-color:#c6f4ff; } }
.ph-answer.is-selected { border-color:#77e5f5; box-shadow:0 0 0 3px #65ddef26; background:#1a3c56; }
.ph-answer:not(:disabled):active { filter:brightness(1.15); }
.ph-selection-marker { position:absolute; z-index:6; top:-12px; right:-8px; display:grid; place-items:center; width:32px; height:32px; border-radius:50% 50% 50% 4px; background:#d9f7ff; color:#102740; border:2px solid #fff; box-shadow:0 2px 12px #0008; font-size:22px; animation:ph-marker-pop .18s ease-out both; }
@keyframes ph-marker-pop { from { opacity:0; transform:scale(.3) rotate(-20deg); } to { opacity:1; transform:scale(1) rotate(0); } }
.ph-answer.is-confirmed { border-color:#a7f4d4; }
.ph-confirmed { position:absolute; top:9px; right:12px; color:#a7f4d4; font-size:28px; }
.ph-colour-0 { --planet:#e87373; --planet-light:#ffd5c1; --planet-dark:#8a354e; }
.ph-colour-1 { --planet:#4b9cdc; --planet-light:#b9f2ff; --planet-dark:#285080; }
.ph-colour-2 { --planet:#e5b651; --planet-light:#fff0b0; --planet-dark:#936129; }
.ph-colour-3 { --planet:#5bbd97; --planet-light:#c3ffe0; --planet-dark:#2c726b; }
.ph-planet { position:relative; isolation:isolate; display:grid; place-items:center; width:85px; height:85px; flex:0 0 85px; border-radius:50%; background:radial-gradient(circle at 30% 23%,var(--planet-light),var(--planet) 48%,var(--planet-dark) 90%); box-shadow:inset -10px -8px 14px #0003,0 5px 22px #0003,0 0 24px color-mix(in srgb,var(--planet) 32%,transparent); }
.ph-planet::before { content:""; position:absolute; inset:-16%; border-radius:50%; background:radial-gradient(circle at 18% 30%,#ffffff70 0 2px,transparent 3px),radial-gradient(circle at 76% 20%,#ffffff55 0 2px,transparent 3px),radial-gradient(circle at 84% 74%,#ffffff45 0 1px,transparent 3px),radial-gradient(circle at 22% 82%,#ffffff38 0 1px,transparent 3px); filter:blur(.3px); opacity:.9; animation:ph-particles 5s ease-in-out infinite alternate; pointer-events:none; }
.ph-planet::after { content:""; position:absolute; inset:-22%; border-radius:50%; background:radial-gradient(ellipse at center,#ffffff16,transparent 62%); filter:blur(7px); opacity:.8; pointer-events:none; }
.ph-planet strong { position:relative; z-index:3; font-size:36px; line-height:1; color:#fff; text-shadow:0 2px 2px #000b,1px 0 2px #000b,-1px 0 2px #000b; }
.ph-planet-cloud { position:absolute; inset:0; border-radius:50%; overflow:hidden; opacity:.35; transform:rotate(var(--planet-angle)); background:repeating-linear-gradient(8deg,transparent 0 13px,#fff8 15px 20px,transparent 22px 29px); }
.ph-surface-1 .ph-planet-cloud { background:radial-gradient(circle at 23% 29%,#fff7 0 10%,transparent 11%),radial-gradient(circle at 65% 61%,#0005 0 15%,transparent 17%),radial-gradient(circle at 30% 77%,#0004 0 7%,transparent 9%); }
.ph-surface-2 .ph-planet-cloud { background:radial-gradient(ellipse at 10% 60%,#fff9 0 24%,transparent 26%),radial-gradient(ellipse at 60% 10%,#0004 0 26%,transparent 29%); }
.ph-planet-ring { position:absolute; width:135%; height:29%; border:5px solid var(--planet-light); border-top-color:transparent; border-radius:50%; transform:rotate(-23deg); opacity:.65; z-index:2; }
.ph-check { position:absolute; right:10px; bottom:-12px; z-index:4; background:#174a61; color:#e6ffff; border:1px solid #67dceb; border-radius:20px; padding:7px 13px; font-size:13px; touch-action:none; user-select:none; overflow:hidden; }
.ph-check:before { content:""; position:absolute; inset:0; transform:scaleX(0); transform-origin:left; background:#a2efff36; }
.ph-check.is-holding:before { transform:scaleX(var(--ph-hold-progress,0)); }
.ph-check-count { border:1px solid #60aebe; border-radius:20px; padding:3px 10px; color:#9df2f5; }
.is-eliminated .ph-planet { transform:scale(0); transition:transform .6s ease-in; }
.is-eliminated .ph-answer { border-style:dashed; background:#102137; }
.is-eliminated .ph-answer-text { color:#8fa5b9; }
.ph-bottom { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; color:#b9d4e2; min-height:45px; }
.ph-bottom:empty { display:flex; }
.ph-bottom > :first-child { grid-column:1; min-width:0; }
.ph-host-actions { grid-column:2; display:flex; justify-content:center; flex-wrap:wrap; gap:8px; align-items:center; }
.ph-countdown { position:relative; flex:0 0 108px; width:108px; height:108px; display:grid; place-items:center; background:#0a172ded; border:2px solid #91edf8; border-radius:50%; color:#edffff; font-weight:800; line-height:1; pointer-events:none; box-shadow:0 0 28px #50d5ec35; }
.ph-countdown.is-transition { flex-basis:clamp(140px,13vw,190px); width:clamp(140px,13vw,190px); height:clamp(140px,13vw,190px); border-color:#b5fbff; background:radial-gradient(circle,#16435a 0%,#071522 72%); box-shadow:0 0 50px #50d5ec70,inset 0 0 30px #50d5ec25; }
.ph-launch-timer { font-family:"Planet Hoppers Digital",monospace; font-weight:400; font-size:clamp(86px,10vw,148px); font-variant-numeric:tabular-nums; letter-spacing:0; text-shadow:0 0 18px #a9fbff,0 0 42px #50d5ecaa; }
.ph-live-timer { font-family:"Planet Hoppers Digital",monospace; font-weight:400; font-size:64px; font-variant-numeric:tabular-nums; }
.ph-countdown[hidden] { display:none; }
.ph-countdown.is-waiting { width:76px; height:76px; border-color:#55758f; background:#071322e8; box-shadow:0 0 24px #2b668933; }
.ph-idle-rocket,[data-ph-timer],[data-ph-launch-timer] { position:absolute; inset:0; display:grid; place-items:center; }
.ph-idle-rocket { font-size:30px; filter:drop-shadow(0 0 9px #9fd9ff99); animation:ph-idle-rocket 60s ease-in-out infinite; }
.ph-countdown.is-counting .ph-idle-rocket { transform:translate(19px,-17px) rotate(-22deg) scale(.68); font-size:23px; animation:none; }
.ph-countdown.is-transition .ph-idle-rocket { transform:translate(30px,-34px) rotate(-22deg) scale(.62); font-size:24px; animation:none; }
.ph-countdown.is-expired .ph-idle-rocket { animation:ph-rocket-launch .8s cubic-bezier(.2,.8,.3,1) forwards; }
.ph-countdown.is-counting [data-ph-timer],.ph-countdown.is-transition [data-ph-launch-timer] { animation:none; }
@keyframes ph-idle-rocket { 0%,100% { transform:translateY(5px) rotate(-5deg); opacity:.7; } 50% { transform:translateY(-5px) rotate(5deg); opacity:1; } }
@keyframes ph-rocket-launch { from { transform:translateY(0) rotate(-8deg) scale(1); opacity:1; } to { transform:translate(42px,-70px) rotate(25deg) scale(.7); opacity:0; } }
@keyframes ph-digit-arrive { from { transform:scale(.65); opacity:0; } to { transform:scale(1); opacity:1; } }
.ph-rail { display:grid; gap:14px; min-width:0; }
.ph-rail .active-host-utility-strip { flex-wrap:wrap; }
.ph-rail .roster-row { display:flex; gap:8px; align-items:center; padding:6px 10px; }
.ph-ready-dot { width:7px; height:7px; border-radius:50%; background:#537187; flex-shrink:0; }
.ph-ready-dot.is-ready { background:#8de7c7; }
.ph-question-image { display:block; max-width:100%; width:auto; max-height:230px; margin:12px auto; border-radius:10px; }
.ph-credit { display:block; text-align:center; color:#9cb3c7; font-size:10px; overflow-wrap:anywhere; }
.ph-video { position:relative; aspect-ratio:16/9; width:100%; max-height:65vh; }
.ph-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:12px; }
.ph-answer-count { position:absolute; right:12px; bottom:8px; font-size:12px; color:#b5c8d8; }
.ph-orbit-crew { position:absolute; left:62px; top:50%; pointer-events:none; z-index:5; }
.ph-ship { position:absolute; width:29px; height:29px; --orbit-angle:calc(var(--ship-i) * 137.5deg); --orbit-radius:57px; --ship-scale:1; animation:ph-flight 1.6s both; animation-delay:var(--flight-delay); }
.ph-ship-body { position:absolute; width:34px; height:12px; border-radius:50%; background:linear-gradient(#e0eef3,#658aab); top:18px; left:-3px; border-bottom:3px solid #68dfee; }
/* Scale the complete 42px Capy Shield so its pixel-sized face details stay proportional.
   The bubble belongs to the ship: the capybara's pseudo-elements paint its eyes and mouth. */
.ph-astronaut.capy-shield { position:absolute; width:42px; height:42px; left:3px; top:0; transform:scale(calc(22 / 42)); transform-origin:top left; box-shadow:none; }
.ph-ship::after { content:""; position:absolute; width:28px; height:28px; left:0; top:-3px; box-sizing:border-box; border:1px solid #c2efff; border-radius:50%; background:linear-gradient(120deg,#e3ffff35,transparent 45%); box-shadow:0 0 0 2px #8bdcf02b; z-index:5; pointer-events:none; }
.ph-ship.is-orbiting { animation:ph-flight 1.6s both,ph-orbit 12s linear infinite; animation-delay:var(--flight-delay),calc(1.6s + var(--flight-delay)); }
.ph-ship.is-lost { animation:ph-flight 1.6s both,ph-lost .8s ease-in forwards; animation-delay:var(--flight-delay),2.8s; }
.is-reveal .is-wrong .ph-planet { animation:ph-collapse .85s 2.8s ease-in forwards; }
.is-reveal .is-wrong .ph-answer { filter:saturate(.68) brightness(.84); }
.is-reveal .is-correct .ph-answer { filter:none; color:#fff; border-color:#a1eacc; box-shadow:0 0 0 3px #a1eacc55; }
.is-settled .is-wrong .ph-planet,.is-settled .ph-ship.is-lost { animation:none; opacity:0; }
.is-void { filter:saturate(.5); }
@keyframes ph-flight { from { transform:translate(-40px,180px) scale(.4); opacity:0; } to { transform:rotate(var(--orbit-angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--orbit-angle))) scale(var(--ship-scale)); opacity:1; } }
@keyframes ph-particles { from { transform:rotate(0deg) scale(.96); } to { transform:rotate(10deg) scale(1.04); } }
@keyframes ph-orbit { from { transform:rotate(var(--orbit-angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--orbit-angle))) scale(var(--ship-scale)); } to { transform:rotate(calc(var(--orbit-angle) + 360deg)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--orbit-angle) - 360deg)) scale(var(--ship-scale)); } }
@keyframes ph-lost { to { transform:translate(0,0) scale(0); opacity:0; } }
@keyframes ph-collapse { to { transform:rotate(95deg) scale(0); opacity:0; } }
.ph-capy-helmet { display:none; }
[data-lobby-capy-costume="astronaut"] .ph-capy-helmet { display:block; position:absolute; inset:-12%; border:3px solid #bdeeff; border-radius:45%; background:linear-gradient(125deg,#d5ffff45,transparent 45%); z-index:5; pointer-events:none; }
.is-planet-results { background:radial-gradient(ellipse at 50% 20%,#1b4663,#091b33); color:#eef9ff; }
.ph-editor { color:#edf7ff; background:#102740; border-radius:16px; padding:16px; min-width:0; }
.ph-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.ph-toolbar>input[data-ph-title] { flex:1; min-width:150px; font-weight:700; }
.ph-editor input,.ph-editor textarea,.ph-dialog input,.ph-dialog textarea { background:#0a1c30; border:1px solid #3d5a72; border-radius:9px; padding:10px 12px; color:#f1f8ff; min-width:0; box-sizing:border-box; font:inherit; }
.ph-editor textarea,.ph-dialog textarea { width:100%; resize:vertical; }
.ph-editor input:focus,.ph-editor textarea:focus,.ph-dialog input:focus,.ph-dialog textarea:focus { outline:2px solid #76dfeb; outline-offset:1px; }
.ph-editor button,.ph-dialog button,.ph-dialog label.secondary-button { cursor:pointer; border-radius:9px; border:1px solid #46637b; padding:8px 11px; background:#19344d; color:#e5f6ff; font:inherit; }
.ph-editor button:disabled,.ph-dialog button:disabled { opacity:.45; cursor:default; }
.ph-editor button:hover:not(:disabled),.ph-dialog button:hover:not(:disabled) { border-color:#8ae7ee; }
.ph-action-icon { width:18px; height:18px; vertical-align:-4px; margin-right:5px; }
.ph-redo-icon { transform:scaleX(-1); }
.ph-upload-icon { transform:rotate(180deg); }
.ph-question-detail>.ph-toolbar button { min-width:38px; padding-inline:9px; }
.ph-question-detail>.ph-toolbar button>span { display:none; }
.ph-up-icon { transform:rotate(90deg); }
.ph-down-icon { transform:rotate(-90deg); }
.ph-editor .ph-next-action { background:linear-gradient(180deg,#f0ce7a,#bd8d37); border-color:#f8dc98; color:#1b2430; box-shadow:0 8px 18px #c8953b33; }
.ph-editor-body { display:grid; grid-template-columns:240px minmax(0,1fr); gap:16px; }
.ph-editor-body aside>input { width:100%; margin-bottom:8px; }
.ph-question-list { display:grid; gap:5px; max-height:560px; overflow-y:auto; }
.ph-question-row { display:flex; gap:9px; align-items:center; text-align:left; width:100%; }
.ph-question-row { align-items:flex-start; min-height:74px; }
.ph-question-row>span:first-child { padding-top:2px; }
.ph-question-row>span:nth-last-child(2) { flex:1; min-width:0; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-height:1.2; }
.ph-question-row img { width:28px; height:28px; object-fit:cover; border-radius:5px; }
.ph-question-row.is-selected { border-color:#72deef; background:#21506a; }
.ph-question-row.is-excluded { opacity:.5; }
.ph-question-detail { min-width:0; }
.ph-edit-answers { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.ph-edit-answers label { display:flex; gap:8px; min-width:0; align-items:center; }
.ph-edit-answers input { width:100%; }
.ph-editor .ph-correct-choice { border-radius:50%; width:38px; height:38px; flex:0 0 38px; padding:0; background:var(--planet-dark); border-color:var(--planet); }
.ph-editor .ph-correct-choice.is-correct { outline:2px solid #a5f1d0; outline-offset:2px; }
.ph-media-slots { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ph-media-slots>div { display:flex; flex-wrap:wrap; justify-content:center; align-content:center; align-items:center; gap:8px; border:1px dashed #4b6b81; border-radius:12px; min-height:85px; padding:10px; }
.ph-media-slots img { width:70px; height:55px; object-fit:contain; }
.ph-media-item { display:flex; align-items:center; gap:5px; }
.ph-editor .ph-attention { color:#ffe0a3; margin:0 0 12px; }
.ph-empty { padding:50px 12px; text-align:center; color:#a9dbe8; }
.ph-editor-body:has(.ph-empty) aside { display:none; }
.ph-editor-body:has(.ph-empty) { grid-template-columns:minmax(0,1fr); }
.ph-dialog { color:#eaf8ff; background:#102740; border:1px solid #5d8da4; border-radius:20px; padding:25px; width:min(900px,92vw); max-height:90dvh; overflow:auto; box-shadow:0 25px 90px #0009; }
.ph-dialog::backdrop { background:#03101fbb; }
.ph-dialog-close { float:right; }
.ph-dialog h2 { margin:0 0 18px; }
.ph-dialog [data-import-preview] { max-height:220px; overflow:auto; }
.ph-dialog [data-import-preview] { display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; margin:10px 0 2px; color:#b9d7e6; }
.ph-dialog [data-import-preview] small { flex-basis:100%; color:#f2d898; }
.ph-search-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0; }
.ph-search-results img { width:100%; height:120px; object-fit:contain; }
.ph-dialog .ph-toolbar input:not([type="number"]) { flex:1; }
.ph-dialog input[type="number"] { width:90px; }
.ph-dialog .ph-toolbar label { display:flex; align-items:center; gap:8px; }
.ph-watch-host { display:grid; place-content:center; min-height:300px; text-align:center; font-size:24px; color:#a7ddeb; }
.ph-letter-ghost { position:absolute; top:10px; left:12px; color:#9cb4c8; font-size:13px; }
#app .final-results-shell.is-planet-results { background:radial-gradient(ellipse at 50% 20%,#1b4663,#091b33); border-color:#4c7a94; }
#app .is-planet-results .final-result-core { background:linear-gradient(145deg,#163550ee,#0c2039ee); }
#app .is-planet-results .final-result-player { display:flex; align-items:center; justify-content:center; gap:20px; }
#app .ph-podium-capy.capy-shield { position:relative; display:inline-block; width:70px; height:70px; flex:0 0 70px; left:auto; top:auto; }
.ph-rail .ph-crew-menu { position:relative; margin-left:auto; }
.ph-ready-star { width:22px; text-align:center; font-size:16px; color:#55708a; opacity:.7; transition:color .2s ease, opacity .2s ease, text-shadow .2s ease; }
.ph-ready-star.is-thinking { color:#718ba0; }
.ph-ready-star.is-submitted { color:#8ff5ff; opacity:1; text-shadow:0 0 10px #5de9ff, 0 0 20px #5de9ff88; }
.ph-crew-menu summary { cursor:pointer; list-style:none; padding:2px 8px; }
.ph-crew-menu>div { position:absolute; right:0; top:100%; z-index:20; width:160px; background:#102a42; padding:8px; border:1px solid #45647a; border-radius:10px; box-shadow:0 8px 24px #0008; }
.ph-crew-menu button { display:block; width:100%; border:0; background:transparent; color:#e3f5fc; padding:8px; text-align:left; cursor:pointer; }
.ph-game button:focus-visible,.ph-editor button:focus-visible,.ph-dialog button:focus-visible { outline:3px solid #dcffff; outline-offset:3px; }
@media(max-width:1000px) { .ph-layout.is-host { grid-template-columns:1fr; }.ph-rail { grid-template-columns:1fr 1fr; }.ph-rail .roster-list { max-height:170px; overflow:auto; }.ph-editor-body { grid-template-columns:180px minmax(0,1fr); }.ph-edit-answers { grid-template-columns:1fr; } }
@media(max-width:600px) { .ph-stage { padding:14px; border-radius:16px; }.ph-stage h1 { font-size:22px; margin:16px 0; }.ph-answers { gap:16px 10px; margin:18px 0; }.ph-answer { flex-direction:column; text-align:center; min-height:160px; padding:13px 9px; gap:12px; font-size:16px; height:100%; }.ph-planet { width:60px; height:60px; flex-basis:60px; }.ph-planet strong { font-size:29px; }.ph-answer-slot { display:flex; }.ph-check { font-size:11px; padding:5px 8px; right:4px; bottom:-9px; }.ph-countdown { width:52px; height:52px; font-size:32px; bottom:8px; }.ph-bottom { padding-bottom:18px; }.ph-question-image { max-height:170px; }.ph-round-meta { gap:9px; font-size:12px; }.ph-question-progress { font-size:14px; padding:5px 9px; }.ph-orbit-crew { left:50%; top:42px; }.ph-ship { transform:scale(.7); }.ph-editor { padding:10px; }.ph-editor-body { grid-template-columns:1fr; }.ph-question-list { max-height:145px; }.ph-media-slots { grid-template-columns:1fr; }.ph-toolbar { gap:6px; }.ph-toolbar button { padding:8px; }.ph-rail { grid-template-columns:1fr; }.ph-search-results { grid-template-columns:repeat(2,1fr); } }
@media(prefers-reduced-motion:reduce) { .ph-ship,.ph-ship.is-orbiting,.ph-ship.is-lost,.is-reveal .is-wrong .ph-planet,.ph-idle-rocket,.ph-countdown.is-counting .ph-idle-rocket,.ph-countdown.is-counting [data-ph-timer] { animation:none; }.ph-ship { transform:rotate(var(--orbit-angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--orbit-angle))) scale(var(--ship-scale)); }.ph-ship.is-lost,.is-reveal .is-wrong .ph-planet,.ph-countdown.is-counting .ph-idle-rocket { opacity:0; }.ph-answer,.ph-planet { transition:none!important; } }
@media(max-width:600px) { .ph-ship { --orbit-radius:33px; --ship-scale:.55; }.ph-orbit-crew { left:calc(50% - 14px); top:30px; }.ph-countdown { position:fixed; bottom:20px; z-index:60; }.ph-ship.is-orbiting { transform-origin:center; } }

/* Planet Hoppers classroom layout refinements. Keep the world nearly black so the
   cyan trim and colored planets stay legible, while reserving the bottom row for
   centered host actions and the countdown marker. */
#app.theme-planet-hoppers { background:transparent; }
.room-shell.has-lobby-planet-selection {
    --lobby-stage-top:rgba(5,10,18,.98);
    --lobby-stage-bottom:rgba(1,3,7,1);
    --lobby-stage-radial:rgba(113,137,163,.05);
    --lobby-world-top:rgba(5,10,18,.98);
    --lobby-world-bottom:rgba(1,3,7,1);
    --lobby-world-glow:rgba(64,86,111,.12);
    --lobby-world-spark:rgba(166,191,212,.07);
    --lobby-stage-border:rgba(108,150,187,.23);
}
.room-shell.has-lobby-planet-selection .host-lobby-stage-card,
.room-shell.has-lobby-planet-selection .waiting-card,
.room-shell.has-lobby-planet-selection .lobby-playground-stage,
.room-shell.has-lobby-planet-selection .lobby-playground-shell,
.room-shell.has-lobby-planet-selection .lobby-playground-world { background-color:#02050a; }
.theme-planet-hoppers .room-shell .lobby-playground-stage,
.theme-planet-hoppers .room-shell .lobby-playground-shell,
.theme-planet-hoppers .room-shell .host-lobby-stage-card,
.theme-planet-hoppers .room-shell .waiting-card { background-color:#03070d; }
.ph-bottom { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); justify-content:center; }
.ph-bottom > :first-child { justify-self:start; }
.ph-host-actions { justify-self:center; }
.ph-countdown { bottom:74px; }
.ph-countdown [data-ph-timer] { width:100%; height:100%; text-align:center; line-height:1; }
.ph-countdown.is-counting .ph-idle-rocket { transform:translate(19px,-17px) rotate(-22deg) scale(.68); }
.ph-countdown.is-expired .ph-idle-rocket { transform:none; }
.ph-question-row { min-height:74px; }
.ph-question-row>span:nth-last-child(2) { -webkit-line-clamp:3; }
.ph-media-slots>div { justify-content:center; align-content:center; align-items:center; }
.ph-editor > .ph-toolbar { justify-content:center; }
.ph-editor > .ph-toolbar > input[data-ph-title] { flex:1 1 240px; }
@media(max-width:600px) {
    .ph-bottom { grid-template-columns:1fr; justify-items:center; gap:8px; }
    .ph-bottom > :first-child,.ph-host-actions { grid-column:1; justify-self:center; }
    .ph-countdown { bottom:70px; }
}
@media(prefers-reduced-motion:reduce) {
    .ph-countdown.is-counting .ph-idle-rocket { opacity:1; transform:translate(19px,-17px) rotate(-22deg) scale(.68); }
    .ph-countdown.is-expired .ph-idle-rocket { opacity:0; }
}

/* Launch countdown shares the question row so it reads clearly on a projector. */
#app.theme-planet-hoppers .ph-question-heading { margin-top:clamp(22px,3vh,38px); margin-bottom:clamp(24px,4vh,48px); }
#app.theme-planet-hoppers .ph-question-heading .ph-countdown { left:auto; bottom:auto; transform:none; }
#app.theme-planet-hoppers .ph-question-heading .ph-countdown.is-transition { width:clamp(140px,13vw,190px); height:clamp(140px,13vw,190px); }
@media(max-width:600px) {
    #app.theme-planet-hoppers .ph-question-heading { margin:16px 0; }
    #app.theme-planet-hoppers .ph-question-heading .ph-countdown { position:relative; bottom:auto; }
    #app.theme-planet-hoppers .ph-question-heading .ph-countdown.is-transition { width:100px; height:100px; }
}

/* Active host view: make the game board the visual priority and give the
   roster a compact, deliberate rail instead of letting generic room chrome
   determine its proportions. */
#app.theme-planet-hoppers .ph-layout.is-host {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 400px);
    gap: clamp(12px, 1.4vw, 20px);
}

#app.theme-planet-hoppers .ph-stage {
    background:
        radial-gradient(circle at 12% 8%, rgba(80, 111, 142, .14), transparent 34%),
        linear-gradient(180deg, #080f18 0%, #02050a 100%);
    border-color: #294252;
    padding: clamp(20px, 2.1vw, 34px);
}

#app.theme-planet-hoppers .ph-stage h1 {
    font-size: clamp(34px, 4.15vw, 68px);
    line-height: 1.16;
    margin-top: clamp(22px, 3vh, 38px);
    margin-bottom: clamp(24px, 4vh, 48px);
}

#app.theme-planet-hoppers .ph-stage .ph-answers {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    margin-top: 0;
    margin-bottom: clamp(24px, 4vh, 42px);
}

#app.theme-planet-hoppers .ph-stage .ph-answer-slot,
#app.theme-planet-hoppers .ph-stage .ph-answer {
    min-height: 0;
    height: 100%;
}

#app.theme-planet-hoppers .ph-stage .ph-answer {
    gap: clamp(22px, 2.1vw, 36px);
    padding: clamp(22px, 2.2vw, 34px);
    font-size: clamp(28px, 3.2vw, 54px);
    line-height: 1.22;
}

#app.theme-planet-hoppers .ph-stage .ph-planet {
    width: clamp(76px, 7.4vw, 116px);
    height: clamp(76px, 7.4vw, 116px);
    flex-basis: clamp(76px, 7.4vw, 116px);
}

#app.theme-planet-hoppers .ph-stage .ph-planet strong {
    font-size: clamp(34px, 3.3vw, 52px);
}

#app.theme-planet-hoppers .ph-rail {
    align-self: stretch;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
}

#app.theme-planet-hoppers .ph-rail > .active-host-utility-strip,
#app.theme-planet-hoppers .ph-rail > .roster-card {
    background: linear-gradient(180deg, #09141e, #03070d);
    border: 1px solid #263f50;
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

#app.theme-planet-hoppers .ph-rail > .active-host-utility-strip {
    padding: 12px;
}

#app.theme-planet-hoppers .ph-rail > .active-host-utility-strip {
    display: grid;
    gap: 12px;
}

#app.theme-planet-hoppers .ph-rail > .active-host-utility-strip .active-host-join-panel {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "code qr";
    justify-items: center;
    gap: 8px;
}

#app.theme-planet-hoppers .ph-rail > .active-host-utility-strip .active-room-qr-button {
    justify-self: center;
}

#app.theme-planet-hoppers .ph-rail > .active-host-utility-strip .active-room-code-display {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    line-height: .9;
    letter-spacing: .08em;
}

#app.theme-planet-hoppers .ph-rail > .active-host-utility-strip .active-host-utility-actions {
    gap: 8px;
}

#app.theme-planet-hoppers .ph-rail > .active-host-utility-strip .active-host-utility-actions .secondary-button {
    min-height: 40px;
    padding: 9px 10px;
    font-size: .86rem;
}

#app.theme-planet-hoppers .ph-rail > .roster-card {
    min-height: 0;
    overflow: hidden;
    padding: 12px;
    gap: 10px;
}

#app.theme-planet-hoppers .ph-rail > .roster-card .ph-roster-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    padding: 0 2px 2px;
    color: #dff7ff;
    font-size: .9rem;
    font-weight: 700;
}

#app.theme-planet-hoppers .ph-rail > .roster-card .ph-roster-head .roster-count {
    display: grid;
    min-width: 28px;
    min-height: 24px;
    place-items: center;
    padding: 0 7px;
    border: 1px solid rgba(125, 231, 239, .28);
    border-radius: 999px;
    background: rgba(31, 86, 103, .34);
    color: #9bf2f5;
    font-size: .76rem;
}

#app.theme-planet-hoppers .ph-rail > .roster-card .roster-body {
    min-height: 0;
    overflow: auto;
}

#app.theme-planet-hoppers .ph-rail .roster-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

#app.theme-planet-hoppers .ph-rail .roster-row {
    min-height: 34px;
    padding: 5px 7px;
    gap: 6px;
    background: rgba(6, 17, 26, .86);
    border-color: rgba(120, 202, 217, .14);
}

#app.theme-planet-hoppers .ph-rail .player-roster-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1000px) {
    #app.theme-planet-hoppers .ph-layout.is-host {
        grid-template-columns: 1fr;
    }
    #app.theme-planet-hoppers .ph-rail {
        grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr);
        grid-template-rows: auto;
    }
    #app.theme-planet-hoppers .ph-rail .roster-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    #app.theme-planet-hoppers .ph-stage h1 {
        font-size: 24px;
        line-height: 1.2;
    }
    #app.theme-planet-hoppers .ph-stage .ph-answers {
        grid-template-rows: repeat(2, minmax(150px, 1fr));
    }
    #app.theme-planet-hoppers .ph-stage .ph-answer {
        gap: 12px;
        padding: 13px 9px;
        font-size: 22px;
    }
    #app.theme-planet-hoppers .ph-stage .ph-planet {
        width: 60px;
        height: 60px;
        flex-basis: 60px;
    }
    #app.theme-planet-hoppers .ph-stage .ph-planet strong {
        font-size: 29px;
    }
    #app.theme-planet-hoppers .ph-rail .roster-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Compact editor controls: repeated actions are icons with native tooltips and aria labels. */
.ph-editor { position:relative; }
.ph-icon-button > span { display:none; }
.ph-editor-toolbar .ph-icon-button,
.ph-question-detail-head .ph-icon-button,
.ph-media-slots .ph-icon-button {
    display:inline-grid;
    place-items:center;
    width:40px;
    min-width:40px;
    height:40px;
    padding:0;
}
.ph-editor-toolbar .ph-icon-button .ph-action-icon,
.ph-question-detail-head .ph-icon-button .ph-action-icon,
.ph-media-slots .ph-icon-button .ph-action-icon,
.ph-media-item > .ph-action-icon {
    width:19px;
    height:19px;
    margin:0;
}
.ph-question-detail-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-width:0;
    margin-bottom:12px;
}
.ph-question-detail-head .ph-toolbar { margin-bottom:0; }
.ph-question-visibility {
    flex:0 0 auto;
    border-radius:999px !important;
    border-color:#5d819c !important;
}
.ph-question-visibility.is-excluded {
    color:#ffd993;
    border-color:#d29b40 !important;
    background:#4b3724 !important;
}
.ph-screen-toggle.is-active {
    color:#fff0bd;
    border-color:#e1b85d;
    background:#4d3c26;
}
.ph-screen-fog {
    position:absolute;
    inset:0;
    z-index:10;
    display:grid;
    place-content:center;
    justify-items:center;
    gap:10px;
    border:1px solid #55758f;
    border-radius:14px;
    background:
        radial-gradient(circle at 50% 40%,#1c415a55,transparent 35%),
        linear-gradient(180deg,#0a1b2c,#02060c);
    box-shadow:0 18px 40px #0008,inset 0 1px 0 #ffffff12;
    color:#cdeaf5;
    text-align:center;
    pointer-events:none;
}
.ph-screen-fog::before {
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle,#b8d6eb44 0 1px,transparent 2px);
    background-size:28px 28px;
    opacity:.35;
}
.ph-screen-fog > * { position:relative; z-index:1; }
.ph-screen-fog-icon {
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border:1px solid #668ba4;
    border-radius:50%;
    background:#071321;
}
.ph-screen-fog-icon .ph-action-icon { width:23px; height:23px; margin:0; }
.ph-screen-fog strong { color:#fff0bd; }
@media(max-width:600px) {
    .ph-editor-toolbar .ph-icon-button,
    .ph-question-detail-head .ph-icon-button,
    .ph-media-slots .ph-icon-button { width:38px; min-width:38px; height:38px; }
    .ph-question-detail-head { align-items:flex-start; }
    .ph-question-visibility { margin-top:0; }
    .ph-screen-fog { inset:0; }
}

/* Keep the timed question inside the active room's available height. On small
   screens allow document scrolling instead of clipping controls behind the footer. */
.ph-layout { width:100%; min-width:0; }
.ph-rail { min-height:0; }
@media(min-width:1001px) { .ph-layout { grid-template-rows:minmax(0,1fr); } }
#app.theme-planet-hoppers .ph-stage { overflow:auto; }
#app.theme-planet-hoppers .ph-question-heading { flex:0 0 auto; gap:24px; margin:16px 0; }
#app.theme-planet-hoppers .ph-question-heading h1 { margin:0; font-size:var(--ph-question-font); }
#app.theme-planet-hoppers .ph-stage .ph-answers { gap:16px; margin:0 0 18px; min-height:220px; }
#app.theme-planet-hoppers .ph-stage .ph-answer { padding:clamp(12px,1.4vw,24px); gap:36px; font-size:var(--ph-answer-font); }
#app.theme-planet-hoppers .ph-stage .ph-planet { width:clamp(54px,5vw,88px); height:clamp(54px,5vw,88px); flex-basis:clamp(54px,5vw,88px); }
#app.theme-planet-hoppers .ph-bottom { flex:0 0 auto; display:flex; flex-wrap:wrap; justify-content:center; }
#app.theme-planet-hoppers .ph-host-actions { flex:0 0 auto; }
#app.theme-planet-hoppers .ph-question-heading .ph-countdown {
    position:relative; flex:0 0 clamp(128px,13vw,200px); width:clamp(128px,13vw,200px); height:auto; aspect-ratio:1;
    border:0; padding:0; background:conic-gradient(#82edf5 calc(var(--ph-time-left,1)*1turn),#233848 0); box-shadow:0 0 24px #50d5ec25;
}
#app.theme-planet-hoppers .ph-countdown::before { content:""; position:absolute; inset:12px; border-radius:50%; background:#08121e; }
#app.theme-planet-hoppers .ph-countdown .ph-idle-rocket { font-size:clamp(40px,4vw,64px); transform:none; animation:none; opacity:1; }
#app.theme-planet-hoppers .ph-countdown.is-waiting { opacity:.65; }
.ph-launch-overlay { overflow:hidden; position:fixed; inset:0; width:100vw; height:100dvh; z-index:10000; display:grid; place-items:center; background:radial-gradient(circle at center,#173349,#02060c 65%); color:#edffff; }
.ph-launch-overlay[hidden] { display:none; }
.ph-launch-overlay .ph-launch-timer { position:static; font-size:clamp(180px,55vmin,600px); line-height:1; letter-spacing:0; text-indent:0; }
#app.theme-planet-hoppers .ph-rail > .roster-card { display:flex; flex-direction:column; justify-content:flex-start; align-content:start; overflow:visible; }
#app.theme-planet-hoppers .ph-rail > .roster-card .ph-roster-head { flex:0 0 auto; }
#app.theme-planet-hoppers .ph-rail > .roster-card .roster-body { flex:1 1 auto; }
#app.theme-planet-hoppers .ph-rail .roster-list { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; }
#app.theme-planet-hoppers .ph-rail .roster-row { min-width:0; }
#app.theme-planet-hoppers .ph-rail .player-roster-actions { position:relative; inset:auto; width:auto; opacity:1; flex:1; min-width:0; }
#app.theme-planet-hoppers .ph-rail .player-roster-actions-trigger { display:flex; align-items:center; justify-content:flex-start; width:100%; min-height:24px; padding:0; border:0; border-radius:4px; background:transparent; text-align:left; font-size:14px; }
#app.theme-planet-hoppers .ph-rail .player-roster-actions-trigger-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(min-width:1001px) and (max-height:780px) {
    #app.theme-planet-hoppers .ph-stage { padding:16px; }
    #app.theme-planet-hoppers .ph-question-heading { margin:10px 0; }
    #app.theme-planet-hoppers .ph-question-heading .ph-countdown { flex-basis:128px; width:128px; }

}
@media(max-width:1000px) {
    .room-shell.is-active-layout #active-room-root:is(.ph-game,:has(.ph-game)),
    .room-shell.is-active-layout #active-room-root:is(.ph-game,:has(.ph-game)) .ph-layout,
    .room-shell.is-active-layout #active-room-root:is(.ph-game,:has(.ph-game)) .ph-stage { height:auto; overflow:visible; }
    #app.theme-planet-hoppers .ph-stage .ph-answers { flex:none; grid-template-rows:repeat(2,minmax(140px,auto)); }
    #app.theme-planet-hoppers .ph-rail > .roster-card .roster-body { max-height:360px; }
}
@media(max-width:600px) {
    #app.theme-planet-hoppers .ph-stage { padding:14px; }
    #app.theme-planet-hoppers .ph-question-heading { gap:12px; }
    #app.theme-planet-hoppers .ph-question-heading h1 { font-size:var(--ph-mobile-question-font); }
    #app.theme-planet-hoppers .ph-question-heading .ph-countdown { flex-basis:96px; width:96px; }
    #app.theme-planet-hoppers .ph-countdown::before { inset:8px; }
    #app.theme-planet-hoppers .ph-stage .ph-answer { flex-direction:column; gap:12px; padding:14px 9px; font-size:var(--ph-mobile-answer-font); }
    #app.theme-planet-hoppers .ph-rail { grid-template-columns:1fr; }
}

.ph-countdown [hidden] { display:none!important; }
#app.theme-planet-hoppers .ph-countdown.is-final-countdown { background:#82edf5; }

@media(max-width:1000px) {
    #app.theme-planet-hoppers .room-shell.is-active-layout:has(.ph-game) { height:auto; max-height:none; overflow:visible; }
    #app.theme-planet-hoppers .room-shell.is-active-layout:has(.ph-game) .room-content { overflow:visible; }
}

/* Reveal keeps the question footprint; only paint and orbiting crew change. */
.ph-countdown.is-revealed { visibility:hidden; }
.ph-bottom { position:relative; }
@media(min-width:1001px) {
    .ph-layout.is-host .ph-bottom > strong { position:absolute; left:0; max-width:25%; font-size:13px; }
}
.ph-launch-fleet { position:absolute; inset:0; pointer-events:none; }
.ph-launch-fleet .ph-ship { left:-100px; top:var(--fleet-y); animation:ph-fleet-cross var(--ph-launch-duration,3s) linear both; animation-delay:var(--fleet-delay); }
.ph-launch-overlay .ph-launch-timer { z-index:1; }
@keyframes ph-fleet-cross {
    from { transform:translateX(0) scale(var(--fleet-scale,3)); }
    to { transform:translateX(calc(100vw + 200px)) scale(var(--fleet-scale,3)); }
}
@media(prefers-reduced-motion:reduce) {
    .ph-launch-fleet .ph-ship { animation:none; left:var(--fleet-x); transform:scale(1.2); }
}

@media(min-width:601px) {
    .ph-orbit-crew { left:calc(clamp(12px,1.4vw,24px) + clamp(27px,2.5vw,44px) - 14px); top:calc(50% - 14px); }
    .ph-orbit-crew .ph-ship { --orbit-radius:48px; }
}

/* Anchor the privacy cover to the content, even when the toolbar wraps. */
.ph-editor-stage { position:relative; min-width:0; }
.is-screen-hidden .ph-editor-body { visibility:hidden; }
.ph-screen-fog { pointer-events:auto; overflow:hidden; padding:24px; }
.ph-trivia-template { width:min(560px,100%); display:grid; gap:18px; justify-items:center; }
.ph-template-orbit { font-size:36px; letter-spacing:12px; }
.ph-trivia-template > strong { font-size:clamp(22px,4vw,36px); letter-spacing:.04em; }
.ph-template-question { width:100%; border:1px solid #65859b; border-radius:16px; background:#112b41; font-size:56px; color:#b8d5e8; }
.ph-template-answers { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; }
.ph-template-answer { display:flex; align-items:center; gap:14px; border:1px solid #526f8b; border-radius:12px; padding:16px; background:#102237; }
.ph-template-answer b { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--planet,#416e91); color:white; }
.ph-template-answer span { height:8px; width:65%; background:#7094b0; border-radius:8px; opacity:.45; }

.ph-screen-fog { grid-template-columns:minmax(0,560px); }
.is-screen-hidden .ph-editor-stage { min-height:400px; }
.ph-template-answer b { flex-shrink:0; }
.ph-cloud-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px; padding:10px 12px; border:1px solid #426389; border-radius:14px; background:#102740; }
.ph-cloud-toolbar button { border:1px solid #769ec1; border-radius:10px; padding:8px 12px; color:#edf8ff; background:#1a3856; font-weight:700; }
.ph-cloud-status { flex:1; color:#b9d8eb; font-size:13px; min-width:150px; }
.ph-cloud-dialog { width:min(620px,90vw); color:#eaf7ff; background:#102740; border-color:#507699; }
.ph-cloud-dialog [data-cloud-close] { float:right; }
.ph-cloud-list { display:grid; gap:10px; margin-top:16px; }
.ph-cloud-list button { display:grid; text-align:left; gap:5px; padding:14px; border:1px solid #6688a4; border-radius:12px; background:#152f48; color:#eaf7ff; }
.ph-cloud-list button span { font-size:12px; color:#b4cee0; }

.ph-scan-resource { display:flex; flex:0 0 auto; align-items:center; align-self:center; gap:12px; margin:0 0 18px; padding:8px 16px 8px 9px; border:1px solid #59fb9b; border-radius:15px; background:#08291f; color:#c8ffdb; font-size:14px; font-weight:700; box-shadow:0 0 16px #35f88824; }
.ph-scan-resource .ph-check-count { display:grid; place-items:center; min-width:57px; min-height:42px; padding:3px 8px; border:1px solid #a5ffc6; background:#0c4d30; color:#99ffb8; font-size:26px; text-shadow:0 0 12px #48ff8c; animation:ph-scanner-pulse 2.2s ease-in-out infinite; }
.ph-scan-resource.is-empty { opacity:.5; }
.ph-scan-resource.is-empty .ph-check-count { animation:none; }
.ph-game .ph-check { border-color:#76ffab; color:#b6ffce; box-shadow:0 0 12px #35ff8035; animation:ph-scanner-pulse 2.2s ease-in-out infinite; }
.ph-game .ph-check::before { background:#51ff8760; }
.ph-game .ph-answer.is-holding .ph-planet { outline-color:#5dff9a; box-shadow:0 0 25px #4bff9390; }
.ph-game .ph-answer.is-holding::after { background:#5dff9a; box-shadow:0 0 10px #5dff9a; }
@keyframes ph-scanner-pulse { 0%,100% { box-shadow:0 0 5px #36ff7d35; } 50% { box-shadow:0 0 18px #36ff7d88,inset 0 0 10px #36ff7d20; } }
@media(max-width:600px) { .ph-scan-resource { gap:9px; margin-bottom:14px; padding-right:10px; font-size:12px; width:100%; box-sizing:border-box; }.ph-scan-resource .ph-check-count { font-size:27px; } }
@media(prefers-reduced-motion:reduce) { .ph-scan-resource .ph-check-count,.ph-game .ph-check { animation:none; } }

/* Gameplay owns the space palette, including the page behind the room. */
body:has(#app.theme-planet-hoppers .ph-game) { background:#02050b; }
body:has(#app.theme-planet-hoppers .ph-game)::before { background-image:radial-gradient(circle,#a5c9f7 1px,transparent 1.5px); background-size:117px 103px; opacity:.16; mask-image:none; }
#app.theme-planet-hoppers:has(.ph-game) { background:transparent; --panel:#102740; --panel-strong:#102740; }
#app.theme-planet-hoppers .ph-stage,
#app.theme-planet-hoppers .ph-rail > .roster-card,
#app.theme-planet-hoppers .ph-rail > .active-host-utility-strip { background:#102740; border-color:#34516f; }
#app.theme-planet-hoppers .ph-stage { padding-top:46px; }
.ph-game .ph-round-meta { position:absolute; top:12px; left:22px; right:22px; flex-wrap:nowrap; gap:10px; pointer-events:none; font-size:12px; line-height:1.2; }
.ph-game .ph-round-meta > span:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ph-game .ph-round-meta > span:not(:first-child) { flex-shrink:0; }
.ph-game .ph-question-progress { font-size:13px; padding:3px 9px; }
#app.theme-planet-hoppers .ph-question-heading { display:grid; grid-template-columns:minmax(0,1fr) 108px; gap:20px; width:100%; max-width:none; margin:0 0 18px; align-items:center; }
#app.theme-planet-hoppers .ph-question-heading.has-image { grid-template-columns:minmax(0,1fr) minmax(180px,28%) 108px; }
#app.theme-planet-hoppers .ph-question-heading .ph-countdown { width:108px; height:108px; flex:none; }
#app.theme-planet-hoppers .ph-countdown::before { inset:8px; background:#0b1d32; }
.ph-question-visual { margin:0; min-width:0; }
#app.theme-planet-hoppers .ph-question-visual .ph-question-image { width:100%; height:clamp(130px,23vh,240px)!important; max-height:none; margin:0; object-fit:contain; }
.ph-timer-capy { position:absolute; inset:0; display:grid; place-items:center; animation:ph-capy-float 4s ease-in-out infinite; }
.ph-timer-capy .ph-timer-ship { position:relative; left:auto; top:auto; animation:none; transform:scale(2); }
@keyframes ph-capy-float { 0%,100% { transform:translateY(3px) rotate(-5deg); } 50% { transform:translateY(-3px) rotate(5deg); } }
.ph-game .ph-answer.is-selected { border-color:#e1faff; box-shadow:inset 0 0 0 2px #d5f6ff88,0 0 0 2px #bcefff55; }
.ph-game .ph-answer { -webkit-user-select:none; user-select:none; touch-action:manipulation; }
.ph-game .ph-answer.is-selected:has(+ .ph-check) { touch-action:none; }
.ph-answer.is-holding .ph-planet { outline:4px solid #cff5ff; outline-offset:7px; }
.ph-answer.is-holding::after { content:""; position:absolute; bottom:0; left:0; right:0; height:5px; background:#d2f5ff; transform:scaleX(var(--ph-hold-progress,0)); transform-origin:left; }
.ph-game .ph-check { min-height:38px; bottom:5px; right:7px; background:#0b1d32; }
.ph-game .ph-layout.is-player .ph-answer { padding-bottom:45px!important; }
.ph-launch-overlay { animation:ph-space-enter .35s ease-out both; }
.ph-launch-overlay.is-departing { pointer-events:none; animation:ph-space-exit .45s ease-in both; }
.ph-arriving .ph-question-heading { animation:ph-question-arrive .45s ease-out both; }
@keyframes ph-space-enter { from { opacity:0; } to { opacity:1; } }
@keyframes ph-space-exit { from { opacity:1; filter:brightness(1); } to { opacity:0; filter:brightness(1.6); } }
@keyframes ph-question-arrive { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media(max-width:1000px) {
    #app.theme-planet-hoppers .room-shell.is-active-layout .ph-stage { height:auto; min-height:0; }
    #app.theme-planet-hoppers .ph-question-heading.has-image { grid-template-columns:minmax(0,1fr) 96px; }
    .ph-question-heading.has-image .ph-question-copy { grid-column:1 / -1; }
    .ph-question-heading.has-image .ph-question-visual { max-width:420px; justify-self:center; width:100%; }
}
@media(min-width:1001px) and (max-height:800px) {
    #app.theme-planet-hoppers .ph-question-heading.has-image h1 { font-size:clamp(36px,3.6vw,58px); }
}
@media(max-width:600px) {
    #app.theme-planet-hoppers .ph-stage { padding:40px 14px 14px; }
    .ph-game .ph-round-meta { left:14px; right:14px; top:10px; gap:7px; font-size:10px; }
    .ph-game .ph-question-progress { font-size:11px; padding:3px 6px; }
    #app.theme-planet-hoppers .ph-question-heading { grid-template-columns:minmax(0,1fr) 64px; gap:12px; }
    #app.theme-planet-hoppers .ph-question-heading.has-image { grid-template-columns:minmax(0,1fr) 64px; }
    #app.theme-planet-hoppers .ph-question-heading .ph-countdown { width:64px; height:64px; }
    #app.theme-planet-hoppers .ph-countdown::before { inset:5px; }
    .ph-timer-capy .ph-timer-ship { transform:scale(1.2); }
    .ph-live-timer { font-size:44px; }
    #app.theme-planet-hoppers .ph-question-visual .ph-question-image { height:150px!important; }
    .ph-game .ph-check { min-height:34px; font-size:10px; right:4px; left:4px; padding:4px; }
}
@media(prefers-reduced-motion:reduce) {
    .ph-timer-capy,.ph-selection-marker,.ph-launch-overlay,.ph-launch-overlay.is-departing,.ph-arriving .ph-question-heading { animation:none; }
    .ph-launch-overlay.is-departing { opacity:0; }
}

.ph-player-score { color:#ffe19a; white-space:nowrap; flex-shrink:0; font-variant-numeric:tabular-nums; }

/* Reveal keeps the timer footprint and uses the same A/B/C/D palette. */
.ph-countdown.is-revealed { visibility:visible; }
.ph-answer-wheel { position:absolute; inset:0; border-radius:50%; display:grid; place-items:center; }
.ph-answer-wheel > span { width:66%; height:66%; border-radius:50%; background:#0b1d32; display:flex; flex-direction:column; align-items:center; justify-content:center; font:800 24px/1.1 system-ui; }
.ph-answer-wheel small { color:#a1eacc; font-size:14px; }
.is-reveal .is-unoccupied .ph-planet { visibility:hidden; animation:none; }
.is-reveal .ph-orbit-crew { left:calc(var(--ph-gravity-x) - 14px); top:calc(var(--ph-gravity-y) - 14px); }
.ph-black-hole { position:absolute; z-index:4; left:var(--ph-gravity-x); top:var(--ph-gravity-y); width:100px; height:100px; margin:-50px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,#010108 0 32%,#120923 35%,#b987ff 39%,#543584 44%,transparent 65%); box-shadow:0 0 30px #9670ee99; opacity:0; animation:ph-hole-open 2.4s 2.3s both; }
.ph-black-hole::after { content:""; position:absolute; inset:10px -18px; border:4px solid #c8a1ff; border-radius:50%; transform:rotate(-25deg) scaleY(.35); box-shadow:0 0 15px #b573ff; }
.is-reveal .is-wrong:not(.is-unoccupied) .ph-planet { animation:ph-gravity-planet 1.6s 2.8s both; }
.ph-ship.is-lost { animation:ph-flight 1.6s both,ph-gravity-ship 1.6s 2.8s forwards; animation-delay:var(--flight-delay),2.8s; }
@keyframes ph-hole-open { 0% { opacity:0; transform:scale(.1); } 20%,70% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(.08); } }
@keyframes ph-gravity-planet { 0% { transform:rotate(0) scale(1); opacity:1; } 30% { transform:rotate(35deg) scale(1.12,.85); filter:brightness(1.4); } 80% { opacity:1; } 100% { transform:rotate(300deg) scale(0); filter:brightness(.2); opacity:0; } }
@keyframes ph-gravity-ship { 0% { transform:rotate(var(--orbit-angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--orbit-angle))) scale(var(--ship-scale)); opacity:1; } 40% { transform:rotate(calc(var(--orbit-angle) + 150deg)) translateX(calc(var(--orbit-radius) * .65)) scale(var(--ship-scale)); opacity:1; } 100% { transform:rotate(calc(var(--orbit-angle) + 400deg)) translateX(0) scale(0); opacity:0; } }
.is-settled .ph-black-hole { animation:none; opacity:0; }
@media(max-width:600px) { .ph-answer-wheel > span { font-size:15px; }.ph-answer-wheel small { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .ph-black-hole { animation:none; display:none; }.is-reveal .is-wrong:not(.is-unoccupied) .ph-planet,.ph-ship.is-lost { animation:none; opacity:0; } }

.is-reveal.is-settled .is-wrong:not(.is-unoccupied) .ph-planet,.is-settled .ph-ship.is-lost { animation:none; opacity:0; }

/* Question and answers fit the available viewport; only post-answer media may grow. */
#app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-stage { height:var(--ph-stage-height,calc(100dvh - 100px)); min-height:0; }
#app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-question-heading { flex:0 0 30%; min-height:0; margin-bottom:12px; }
.ph-game:not(.ph-showing-media) .ph-question-copy { height:100%; min-height:0; display:flex; align-items:center; justify-content:center; }
#app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-question-heading.has-image { grid-template-columns:minmax(0,1fr) minmax(60px,24%) 64px; }
.ph-game:not(.ph-showing-media) .ph-question-heading.has-image .ph-question-copy { grid-column:auto; }
#app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-question-visual .ph-question-image { height:min(18vh,140px)!important; }
#app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-stage .ph-answers { flex:1 1 0; min-height:0; grid-template-rows:repeat(2,minmax(0,1fr)); margin:0; gap:12px; }
#app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-answer { height:100%; min-height:0; }
.ph-game:not(.ph-showing-media) .ph-answer-text { flex:0 1 auto; }
.ph-game:not(.ph-showing-media) .ph-bottom:empty { display:none; }
.ph-game:not(.ph-showing-media) .ph-bottom { padding:8px 0 0; }
#app.theme-planet-hoppers .ph-game.ph-showing-media .ph-stage { height:auto!important; overflow:visible; }
.ph-points-award { position:absolute; z-index:12; inset:0; display:flex; align-items:center; justify-content:center; gap:16px; pointer-events:none; color:#ffe89b; text-shadow:0 4px 0 #674614,0 0 24px #ffbb46; animation:ph-award-celebrate 3.2s both; }
.ph-points-award span { font-family:"Planet Hoppers Digital",monospace; font-size:clamp(100px,20vw,220px); line-height:1; }
.ph-points-award small { font-size:clamp(32px,6vw,64px); }
@keyframes ph-award-celebrate { 0% { opacity:0; transform:scale(.4); } 12% { opacity:1; transform:scale(1.14); } 22%,72% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:translateY(-70px) scale(.7); } }
.is-settled .ph-points-award { animation:none; opacity:0; }
@media(max-width:600px) {
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-answer { gap:8px; padding:10px; }
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-stage .ph-planet { width:42px; height:42px; flex-basis:42px; flex-shrink:0; }
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-stage .ph-planet strong { font-size:25px; }
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-question-heading h1 { font-size:30px; }
 .ph-game:not(.ph-showing-media) .ph-scan-resource { padding:4px 8px; margin-bottom:8px; }
 .ph-game:not(.ph-showing-media) .ph-scan-resource .ph-check-count { min-height:26px; font-size:22px; }
}
@media(prefers-reduced-motion:reduce) { .ph-points-award { animation:ph-award-still 3.2s both; } @keyframes ph-award-still { 0%,80% { opacity:1; } 100% { opacity:0; } } }

#app.theme-planet-hoppers .room-shell:has(.ph-showing-media),
#app.theme-planet-hoppers .room-shell:has(.ph-showing-media) .room-content { height:auto; max-height:none; overflow:visible; }
#app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-layout.is-host .ph-bottom { flex:0 0 48px; box-sizing:border-box; }
@media(max-width:600px) {
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-question-heading { flex-basis:24%; }
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-stage .ph-planet { width:32px; height:32px; flex-basis:32px; }
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-stage .ph-planet strong { font-size:22px; }
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-answer { gap:5px; }
}
@media(max-height:450px) {
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-stage { padding:34px 12px 8px; }
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-question-heading { flex-basis:24%; margin-bottom:6px; }
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-question-heading .ph-countdown { width:42px; height:42px; }
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-question-heading h1 { font-size:26px; }
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-answer { flex-direction:row; gap:10px; padding:6px!important; }
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-stage .ph-planet { width:30px; height:30px; flex-basis:30px; flex-shrink:0; }
 .ph-game:not(.ph-showing-media) .ph-check { display:none; }
 .ph-game:not(.ph-showing-media) .ph-scan-resource { margin-bottom:6px; padding:2px 8px; font-size:11px; }
 .ph-game:not(.ph-showing-media) .ph-scan-resource .ph-check-count { min-height:22px; font-size:18px; }
}

.ph-points-award-plaque { display:flex; align-items:center; justify-content:center; gap:16px; padding:22px 32px; border:2px solid #ffe39a; border-radius:24px; background:#07111ff5; box-shadow:0 14px 55px #000b,0 0 0 6px #09142288, inset 0 0 28px #e5ad3820; }
@media(max-width:600px) { .ph-points-award-plaque { padding:18px 24px; gap:10px; border-radius:20px; } }

/* A vivid answer-colored beacon identifies the destination without an extra checkmark. */
#app.theme-planet-hoppers .is-reveal .is-correct .ph-answer { background:color-mix(in srgb,var(--planet) 76%,#153246); border-color:var(--planet-light); box-shadow:inset 0 0 0 2px var(--planet-light),inset 0 0 34px color-mix(in srgb,var(--planet-light) 25%,transparent),0 0 22px color-mix(in srgb,var(--planet) 65%,transparent); filter:none; }
.is-reveal .is-correct .ph-planet { box-shadow:inset -10px -8px 14px #0002,0 0 0 3px var(--planet-light),0 0 28px var(--planet),0 0 48px color-mix(in srgb,var(--planet-light) 45%,transparent); }
.is-reveal .is-correct .ph-answer-text { color:#fff; text-shadow:0 2px 3px #122339bb; }
.is-reveal .is-correct .ph-answer-count { color:#fff; font-weight:900; text-shadow:0 0 8px var(--planet-light); }
.ph-planet-haze { position:absolute; inset:-12%; border-radius:50%; pointer-events:none; z-index:1; opacity:.55; background:radial-gradient(ellipse at 22% 35%,#fff9,transparent 42%),radial-gradient(ellipse at 74% 68%,var(--planet-light),transparent 45%); filter:blur(4px); animation:ph-haze-drift 7s ease-in-out infinite alternate; }
.ph-planet-pebbles { position:absolute; inset:-20%; border-radius:50%; pointer-events:none; z-index:2; animation:ph-pebble-orbit 18s linear infinite; }
.ph-planet-pebbles::before,.ph-planet-pebbles::after { content:""; position:absolute; width:5px; height:4px; border-radius:45% 60% 35% 50%; background:var(--planet-light); box-shadow:1px 1px 2px #02050baa; }
.ph-planet-pebbles::before { left:12%; top:14%; }
.ph-planet-pebbles::after { right:2%; bottom:24%; width:3px; height:3px; }
.ph-surface-1 .ph-planet-haze { animation-delay:-3s; opacity:.35; }
.ph-surface-2 .ph-planet-pebbles { animation-direction:reverse; animation-duration:24s; }
.ph-surface-2 .ph-planet-haze { animation-delay:-5s; }
@keyframes ph-haze-drift { from { transform:translate(-3%,-2%) rotate(-12deg) scale(.9); opacity:.3; } to { transform:translate(4%,3%) rotate(18deg) scale(1.06); opacity:.6; } }
@keyframes ph-pebble-orbit { from { transform:rotate(0); } to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .ph-planet::before,.ph-planet-haze,.ph-planet-pebbles { animation:none; } }

/* Reserve the timer's actual diameter, and give question media a larger share. */
.ph-game { --ph-timer-size:108px; }
#app.theme-planet-hoppers .ph-game .ph-stage { padding-top:20px; }
#app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-question-heading { flex-basis:35%; grid-template-columns:minmax(0,1fr) var(--ph-timer-size); }
#app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-question-heading.has-image { flex-basis:39%; grid-template-columns:minmax(0,1fr) minmax(0,40%) var(--ph-timer-size); }
#app.theme-planet-hoppers .ph-game .ph-question-heading .ph-countdown { width:var(--ph-timer-size); height:var(--ph-timer-size); justify-self:center; align-self:center; }
.ph-game .ph-question-visual { height:100%; min-height:0; display:flex; flex-direction:column; justify-content:center; }
#app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-question-visual .ph-question-image { height:100%!important; max-height:100%; min-height:0; object-fit:contain; }
.ph-game .ph-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ph-game .ph-bottom .ph-round-meta { position:static; display:flex; flex:1 1 0; min-width:0; gap:9px; font-size:12px; line-height:1.2; }
.ph-game .ph-bottom .ph-round-meta > span:first-child { margin-right:auto; }
.ph-game .ph-host-actions { flex:0 0 auto; }
.ph-game [data-ph-enlarge] { cursor:zoom-in; }
.ph-game [data-ph-enlarge]:focus-visible { outline:3px solid #ffe39a; outline-offset:3px; }
.ph-image-lightbox { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:32px; box-sizing:border-box; border:0; background:#020610ed; overflow:hidden; }
.ph-image-lightbox[open] { display:flex; align-items:center; justify-content:center; }
.ph-image-lightbox::backdrop { background:#020610; }
.ph-image-lightbox img { max-width:100%; max-height:100%; object-fit:contain; }
.ph-image-lightbox button { position:absolute; right:14px; top:12px; width:44px; height:44px; border:1px solid #a6c2dc; border-radius:50%; background:#102740; color:#fff; font-size:30px; cursor:pointer; }
@media(max-width:600px) {
 .ph-game { --ph-timer-size:56px; }
 #app.theme-planet-hoppers .ph-game .ph-stage { padding-top:12px; }
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-question-heading { flex-basis:29%; gap:10px; }
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-question-heading.has-image { flex-basis:36%; grid-template-columns:minmax(0,1fr) minmax(0,40%) var(--ph-timer-size); gap:8px; }
 .ph-game .ph-bottom { gap:6px; flex-wrap:wrap; }
 .ph-game .ph-bottom .ph-round-meta { font-size:10px; gap:6px; }
 .ph-game .ph-bottom .ph-host-actions { gap:5px; }
 .ph-game .ph-bottom .ph-host-actions button { padding:7px 9px; font-size:11px; }
 .ph-image-lightbox { padding:20px; }
}
@media(max-height:450px) {
 .ph-game { --ph-timer-size:42px; }
 #app.theme-planet-hoppers .ph-game .ph-stage { padding-top:10px; }
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-question-heading { flex-basis:29%; }
}
@media(prefers-reduced-motion:reduce) { .ph-launch-fleet .ph-ship { transform:scale(var(--fleet-scale,3)); } }

@media(max-width:600px) {
 #app.theme-planet-hoppers .ph-game:not(.ph-showing-media) .ph-question-heading.has-image { grid-template-columns:minmax(0,1fr) var(--ph-timer-size); grid-template-rows:minmax(0,1fr) minmax(0,1.1fr); }
 .ph-game:not(.ph-showing-media) .ph-question-heading.has-image .ph-question-copy { grid-column:1 / -1; }
 .ph-game:not(.ph-showing-media) .ph-question-heading.has-image .ph-question-visual { grid-column:1; max-width:none; }
}