.pg-body { background:#f8f8f5; }
.pg-page { font-size:14px; }
.pg-topbar { display:flex; align-items:center; gap:28px; padding:21px 32px; background:#f0f1eb; border-bottom:1px solid #e4e7de; }
.pg-topbar nav { display:flex; gap:24px; margin-left:auto; font-size:13px; }
.pg-practice-tag { background:#e4ddfa; padding:7px 12px; border-radius:20px; font-size:12px; }
.pg-main { max-width:1600px; padding:38px 32px 24px; margin:auto; }
.pg-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; margin-bottom:32px; }
.pg-heading h1 { font-size:36px; letter-spacing:-1.3px; margin:9px 0; }
.pg-heading p { color:#686e63; max-width:660px; }
.pg-view-switch { display:flex; flex-wrap:wrap; background:#eceee7; padding:5px; border-radius:9px; gap:4px; }
.pg-view-switch button { border:0; background:transparent; padding:10px 13px; border-radius:6px; font-size:13px; }
.pg-view-switch button[aria-pressed=true] { background:#fff; box-shadow:0 1px 5px #22262112; }
.pg-layout { display:grid; grid-template-columns:205px minmax(0,1fr); gap:28px; }
.pg-game-menu nav { display:grid; gap:5px; margin-top:15px; }
.pg-game-menu button { display:flex; gap:11px; align-items:center; width:100%; border:0; padding:12px 10px; background:transparent; border-radius:9px; text-align:left; font-size:13px; }
.pg-game-menu button[aria-pressed=true] { background:#e8eddd; }
.pg-game-menu button small { display:block; color:#6b7166; font-size:11px; margin-top:2px; }
.pg-game-glyph { display:grid; place-content:center; flex-shrink:0; width:32px; height:32px; border-radius:9px; font-size:17px; font-weight:600; }
.pg-game-menu>p { margin-top:24px; color:#747b6d; font-size:12px; }
.pg-workspace { min-width:0; }
.pg-guide { display:flex; gap:14px; align-items:center; padding:15px 18px; border:1px solid #dce5cd; background:#eff5e7; border-radius:9px; margin-bottom:20px; }
.pg-guide p { font-size:13px; }
.pg-step { padding:5px 9px; background:#dfebcc; border-radius:6px; font-size:12px; font-weight:600; flex-shrink:0; }
.pg-views { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.pg-role { display:grid; gap:16px; min-width:0; }
.pg-role-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pg-role-heading h2 { font-size:22px; margin-top:4px; }
.pg-role-note { color:#747b6d; font-size:13px; margin-top:-8px; }
.pg-role .a-kicker { font-size:10px; }
.pg-role .a-pill { font-size:11px; }
.pg-role .a-panel { min-width:0; }
.pg-settings>summary,.pg-rules>summary { padding:17px 20px; font-weight:600; cursor:pointer; }
.pg-settings>summary span { font-size:11px; font-weight:400; color:#747b6d; margin-left:8px; }
.pg-settings-form { display:grid; gap:15px; padding:0 20px 20px; }
.pg-settings-form label { display:grid; gap:6px; font-size:12px; font-weight:500; }
.pg-settings-form input,.pg-settings-form textarea,.pg-player-select select { width:100%; border:1px solid #dfe3d5; background:#fff; padding:10px 11px; border-radius:6px; color:#222621; }
.pg-settings-form textarea { resize:vertical; font-family:ui-monospace,monospace; font-size:12px; }
.pg-settings-form small { color:#747b6d; font-size:12px; }
.pg-settings-form details>summary { cursor:pointer; font-size:12px; margin-bottom:12px; }
.pg-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pg-live-panel { overflow:hidden; }
.pg-session-name { padding:14px 20px 0; font-size:13px; font-weight:600; }
.pg-live-panel .a-game-status { font-size:10px; padding:15px 20px; flex-wrap:wrap; gap:8px; }
.pg-live-panel .a-game-status>div { display:flex; align-items:center; gap:10px; }
.pg-live-panel .a-game-status .a-live-dot { font-size:10px; }
.pg-live-panel .a-puzzle { padding:22px 20px 18px; }
.pg-live-panel .a-puzzle h2 { font-size:25px; }
.pg-live-panel .a-game-waiting { padding:24px 20px; }
.pg-live-panel .a-game-waiting h2 { font-size:25px; }
.pg-live-panel .a-game-waiting p { font-size:13px; }
.pg-live-panel .a-options { padding:0 20px 18px; gap:8px; }
.pg-live-panel .a-options strong { font-size:13px; }
.pg-live-panel .a-answer-form { padding:0 20px; flex-wrap:wrap; }
.pg-live-panel .a-answer-form input { font-size:16px; min-width:0; }
.pg-live-panel .a-answer-form .a-btn { font-size:12px; }
.pg-live-panel .a-game-bottom { font-size:11px; padding:14px 20px; flex-wrap:wrap; gap:5px; }
.pg-live-panel .a-host-controls { padding:16px 20px 20px; gap:9px; }
.pg-live-panel .a-host-controls .a-btn { font-size:12px; }
.pg-live-panel .a-play-message,.pg-live-panel .a-submitted { font-size:12px; }
.pg-live-panel .a-reveal { margin:10px 20px 20px; }
.pg-live-panel .a-reveal h3 { font-size:22px; overflow-wrap:anywhere; }
.pg-live-panel .a-game-results h2 { font-size:24px; }
.pg-live-panel .a-join-prompt { padding:20px; }
.pg-player-select { display:grid; gap:4px; font-size:11px; min-width:115px; }
.pg-player-select select { padding:7px 8px; font-size:13px; }
.pg-community { display:flex; align-items:center; gap:13px; padding:18px; border-radius:10px; background:#def0ca; }
.pg-community h3 { font-size:18px; margin:5px 0; }
.pg-community p { font-size:12px; }
.pg-avatar { display:grid; place-content:center; width:45px; height:45px; border-radius:50%; background:#222621; color:#fff; font-size:16px; flex-shrink:0; }
.pg-crowd { padding:20px; display:grid; gap:14px; }
.pg-crowd h3 { font-size:15px; }
.pg-crowd p,.pg-moderation>p { font-size:12px; color:#747b6d; margin-top:6px; }
.pg-crowd .a-btn { justify-self:start; }
.pg-moderation { padding:20px; }
.pg-section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.pg-player-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:11px 0; border-top:1px solid #e4e7de; font-size:12px; }
.pg-player-row strong { margin-left:auto; }
.pg-player-row .a-btn { font-size:11px; padding:6px 8px; }
.pg-rules p { padding:0 20px 20px; font-size:13px; }
.pg-rankings { padding:20px; }
.pg-rankings h3 { margin:7px 0; font-size:18px; }
.pg-rankings>p { font-size:12px; color:#747b6d; }
.pg-rankings ol { margin:18px 0 0; padding:0; list-style:none; }
.pg-rankings li { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid #e4e7de; font-size:13px; }
.pg-rankings li>span { color:#747b6d; }.pg-rankings b { margin-left:auto; }.pg-rankings small { font-weight:400; }
.pg-bingo-title { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; padding:20px; }
.pg-bingo-note { padding:0 20px 20px; font-size:13px; }
.pg-call-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 20px 20px; }
.pg-call-grid button { border:1px solid #e0e5d6; border-radius:7px; padding:10px; background:#f4f6ef; font-size:12px; text-align:left; }
.pg-call-grid button[aria-pressed=true] { background:#e6edda; opacity:1; }
.pg-bingo-board { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; padding:0 14px 18px; }
.pg-bingo-board button { min-height:73px; padding:6px 3px; border:1px solid #e0e5d6; background:#f4f6ef; border-radius:6px; font-size:11px; line-height:1.25; overflow-wrap:anywhere; }
.pg-bingo-board button:disabled { opacity:.7; }.pg-bingo-board button[aria-pressed=true] { background:#e2daf9; border-color:#b9a9e7; opacity:1; }.pg-bingo-board button.pg-winning { background:#def0ca; border-color:#aac782; }
.pg-banned { padding:24px; }.pg-banned p { margin-top:8px; }
.pg-footer { color:#747b6d; font-size:12px; padding:25px 0 0; text-align:center; }
.pg-error { padding:13px 17px; margin-bottom:16px; background:#fce8e1; color:#8f392c; border-radius:8px; }
.pg-page[data-view=streamer] .pg-player,.pg-page[data-view=player] .pg-streamer { display:none; }
.pg-page[data-view=streamer] .pg-views,.pg-page[data-view=player] .pg-views { grid-template-columns:minmax(0,1fr); max-width:780px; margin:auto; }
.pg-unavailable { padding:60px 32px; background:#f8f8f5; min-height:100vh; display:grid; justify-items:start; align-content:start; gap:20px; }
@media(max-width:1100px) { .pg-layout { grid-template-columns:1fr; }.pg-game-menu nav { grid-template-columns:repeat(3,minmax(0,1fr)); }.pg-game-menu>p { margin-top:10px; }.pg-main { padding:26px 24px; }.pg-heading { margin-bottom:24px; } }
@media(max-width:760px) { .pg-views { grid-template-columns:1fr; gap:30px; }.pg-game-menu nav { grid-template-columns:repeat(2,minmax(0,1fr)); }.pg-topbar { padding:16px; gap:15px; flex-wrap:wrap; }.pg-topbar .a-brand { font-size:20px; }.pg-topbar nav { font-size:12px; gap:15px; }.pg-practice-tag { display:none; }.pg-main { padding:24px 16px; }.pg-heading h1 { font-size:29px; }.pg-heading p { font-size:13px; }.pg-view-switch { width:100%; }.pg-view-switch button { flex:1; padding:10px 7px; }.pg-guide { align-items:start; flex-direction:column; gap:9px; }.pg-bingo-board button { min-height:68px; }.pg-game-menu button { padding:9px 6px; font-size:12px; gap:8px; }.pg-game-glyph { width:28px; height:28px; }.pg-settings-form input,.pg-settings-form textarea,.pg-player-select select { font-size:16px; }.pg-role .a-btn { min-height:44px; }.pg-live-panel .a-word-guesses { padding:16px 20px; }.pg-live-panel .a-word-guesses>div { flex-wrap:wrap; }.pg-live-panel .a-word-guesses span { width:36px; height:42px; }.pg-live-panel .a-letter-row { flex-wrap:wrap; }.pg-live-panel .a-puzzle h2 { font-size:23px; } }
@media(prefers-reduced-motion:reduce) { .pg-page * { scroll-behavior:auto; } }

.pg-stream-example>div { display:flex;gap:12px;align-items:center; }
.pg-stream-example .sf-game-icon { width:46px;height:46px;flex-shrink:0; }
.pg-example-help { background:#eff5e7;border-bottom:1px solid #dce5cd;padding:14px 20px; }
.pg-example-help>span { font-size:9px;letter-spacing:1.4px;font-weight:700;color:#7d8e66; }
.pg-example-help p { font-size:12px;color:#657554;line-height:1.6;margin-top:5px; }
.pg-simulation .pg-settings { order:4; }
.pg-simulation .pg-crowd { order:5; }
.pg-simulation .pg-moderation { order:6; }
.pg-simulation .pg-community { display:none; }
.pg-simulation .pg-role-note { min-height:32px; }
@media(max-width:760px) { .pg-simulation .pg-role-note { min-height:0; }.pg-example-help { padding:14px 16px; } }

/* A real Twitch channel around an isolated, playable practice lobby. */
.pg-channel-shell{background:#10121b;color:#f6f4ff;min-height:100vh}
.pg-channel-header{padding:17px 4%;display:flex;align-items:center;gap:25px;border-bottom:1px solid #303044;font-size:11px;color:#b5b3c5;flex-wrap:wrap}
.pg-channel-header>a:last-child{margin-left:auto;color:#c8b0ff}.pg-channel-powered{font-weight:750;font-size:18px;color:#fff}.pg-channel-header>span{letter-spacing:1.2px;font-size:9px}
.pg-channel-hero{max-width:1500px;margin:auto;padding:30px 32px 24px;display:flex;align-items:center;gap:22px}.pg-channel-avatar{width:75px;height:75px;border-radius:24px;background:linear-gradient(140deg,#b791ff,#6650c8);display:grid;place-items:center;font-size:26px;font-weight:750;flex-shrink:0;box-shadow:0 0 50px #8b5cf629}.pg-channel-hero .a-kicker{color:#b9a7e6;font-size:10px}.pg-channel-hero h1{font-size:34px;letter-spacing:-1px;margin:8px 0}.pg-channel-hero p{font-size:13px;color:#b6b2c7}.pg-channel-featured{margin-left:auto;display:grid;gap:9px;padding:16px 20px;background:#201c31;border:1px solid #403651;border-radius:12px;max-width:350px}.pg-channel-featured>span{color:#bda3f2;font-size:9px;letter-spacing:1.5px}.pg-channel-featured strong{font-size:18px;color:#e3dbf6}.pg-channel-featured small{font-size:10px;color:#b0a8c2}
.pg-channel-nav{max-width:1500px;margin:auto;padding:0 32px 20px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}.pg-channel-nav>a{font-size:12px;color:#c8b0ff}.pg-channel-nav .pg-view-switch{background:#242234}.pg-channel-nav button{color:#c9c2dc}.pg-channel-nav button[aria-pressed=true]{background:#ae88f6;color:#1b112d}
.pg-channel-addresses{max-width:1436px;margin:0 auto 20px;border:1px solid #373146;border-radius:10px;padding:14px 18px;color:#c4bed4;font-size:12px}.pg-channel-addresses summary{cursor:pointer;color:#e2d9f5}.pg-channel-addresses p{margin:12px 0 0;line-height:1.65;overflow-wrap:anywhere}.pg-channel-addresses a{color:#c8b0ff}
.pg-channel-watch{max-width:1500px;margin:auto;padding:0 32px 28px;display:grid;grid-template-columns:minmax(400px,1fr) 320px;gap:18px;align-items:start}.pg-channel-video,.pg-channel-chat{border:1px solid #393246;border-radius:13px;overflow:hidden;background:#181721;min-width:0}.pg-channel-watch header{display:flex;justify-content:space-between;align-items:center;padding:14px 17px;gap:12px;font-size:12px}.pg-channel-watch header span{font-size:9px;color:#b6a3da;letter-spacing:1px}.pg-channel-watch header a,.pg-channel-watch p a{color:#c8b0ff}.pg-channel-watch iframe{display:block;border:0;width:100%;height:360px;background:#0e0e10}.pg-channel-chat iframe{height:360px}.pg-channel-watch p{padding:13px 17px;color:#aaa3ba;font-size:11px;line-height:1.6;min-height:56px}
.pg-channel-shell[data-view=streamer] .pg-channel-watch{display:none}.pg-channel-shell .pg-page{background:#f8f8f5;color:#222621}.pg-channel-shell .pg-topbar{display:none}.pg-channel-shell .pg-heading h1{font-size:27px}.pg-channel-shell .pg-heading>.pg-view-switch{display:none}.pg-channel-shell .pg-main{padding-top:26px}.pg-channel-shell .pg-heading p{font-size:12px}.pg-channel-shell .pg-heading{margin-bottom:20px}.pg-channel-shell[data-view=player] .pg-guide,.pg-channel-shell[data-view=player] .pg-stream-example{display:none}.pg-channel-shell[data-view=player] .pg-game-menu{display:none}.pg-channel-shell[data-view=player] .pg-layout{grid-template-columns:1fr}.pg-channel-shell[data-view=player] .pg-player{max-width:1050px;margin:auto;width:100%}
@media(max-width:1000px){.pg-channel-hero{flex-wrap:wrap}.pg-channel-featured{margin-left:0;width:100%;max-width:none}.pg-channel-watch{grid-template-columns:minmax(0,1fr)}.pg-channel-chat iframe{height:300px}.pg-channel-addresses{margin-left:32px;margin-right:32px}.pg-channel-watch iframe{height:320px}}
@media(max-width:500px){.pg-channel-hero{padding:24px 16px;gap:15px}.pg-channel-avatar{width:55px;height:55px;font-size:20px;border-radius:16px}.pg-channel-hero h1{font-size:25px}.pg-channel-nav{padding:0 16px 18px;gap:14px}.pg-channel-watch{padding:0 16px 22px}.pg-channel-watch iframe{height:300px}.pg-channel-watch header span{display:none}.pg-channel-addresses{margin-left:16px;margin-right:16px}.pg-channel-header{gap:14px}.pg-channel-header>a:last-child{margin-left:0}}
.pg-channel-game-picker{display:grid;gap:4px;color:#b9abc9;font-size:10px}.pg-channel-game-picker select{background:#242234;color:#eee6ff;border:1px solid #55466e;border-radius:7px;padding:9px 12px;font-size:12px;max-width:180px}.pg-channel-shell[data-view=player] .pg-channel-game-picker{display:none}.pg-channel-shell .pg-heading{display:none}
@media(min-width:1100px){.pg-channel-shell[data-view=player]{display:grid;grid-template-columns:minmax(400px,1fr) minmax(0,1fr);align-items:start}.pg-channel-shell[data-view=player]>.pg-channel-header,.pg-channel-shell[data-view=player]>.pg-channel-hero,.pg-channel-shell[data-view=player]>.pg-channel-nav,.pg-channel-shell[data-view=player]>.pg-channel-addresses{grid-column:1/-1;width:100%;box-sizing:border-box}.pg-channel-shell[data-view=player]>.pg-channel-watch{grid-column:1;grid-row:5;grid-template-columns:1fr;width:100%;box-sizing:border-box;padding-right:12px}.pg-channel-shell[data-view=player]>#pg-channel-game{grid-column:2;grid-row:5;margin-right:32px;border-radius:14px;overflow:hidden}.pg-channel-shell[data-view=player] .pg-main{padding:22px}.pg-channel-shell[data-view=player] .pg-player{max-width:none}.pg-channel-shell[data-view=player] .pg-channel-watch iframe{height:300px}.pg-channel-shell[data-view=player] .pg-role-note{margin-top:0}}
.pg-channel-video-fallback{min-height:210px;display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;background:linear-gradient(135deg,#2e2150,#191724)}.pg-channel-video-fallback p{padding:0;min-height:0}.pg-channel-video-fallback .a-btn{color:#e8dcff;border-color:#7b609f;background:#322445}
@media(min-width:1100px){.pg-channel-shell[data-view=player]>.pg-channel-watch{margin:0;align-self:start}}

/* The practice perspectives use the same readable controls as the live workspace. */
.pg-page,.pg-channel-shell{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;line-height:1.5}
.pg-page :is(button,input,select,textarea){font-family:inherit}
.pg-page :is(.a-btn,.pg-view-switch button,.pg-game-menu button){min-height:44px;font-size:14px;font-weight:600;border-radius:10px}
.pg-page :is(.pg-role-note,.pg-guide p,.pg-settings-form label,.pg-rules>p,.pg-crowd p){font-size:14px;line-height:1.6}
.pg-page :is(.pg-game-menu small,.pg-settings-form small,.pg-settings>summary span,.pg-role .a-pill){font-size:12px;line-height:1.5}
.pg-page .pg-game-menu>summary{font-size:14px;padding:12px;min-height:48px;border:1px solid #dfe3d5;border-radius:10px;cursor:pointer}
.pg-page .pg-game-menu>summary strong{display:block;margin-top:4px}
.pg-page .pg-settings-form :is(input,select,textarea){min-height:44px;font-size:14px;border-radius:10px;min-width:0}
.pg-page :is(.pg-fields,.pg-settings-form label){min-width:0}
.pg-page .xp-game .a-options button{font-size:14px;min-height:48px;line-height:1.5}
.pg-page .xp-game .a-options button:disabled{opacity:1}
.pg-page .xp-quiz-hud{font-size:12px;letter-spacing:.3px;flex-wrap:wrap}
.pg-page :is(.sf-privacy-note,.sf-live-leaderboard>p,.sf-progress-stats,.sf-shared-clues p){font-size:12px;line-height:1.5}
.pg-page :is(.sf-chat-activity strong,.sf-live-leaderboard li){font-size:14px}
.pg-page :is(a,button,summary,[tabindex]):focus-visible{outline:2px solid #8570b9;outline-offset:3px}
@media(max-width:760px){
  .pg-page .pg-heading{gap:16px;margin-bottom:20px}
  .pg-page .pg-heading h1{font-size:28px;letter-spacing:-.6px}
  .pg-page .pg-view-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .pg-page .pg-view-switch button{padding:10px 6px;font-size:13px}
  .pg-page .pg-layout{gap:20px}
  .pg-page .pg-game-menu>summary strong{display:inline;margin-left:8px}
  .pg-page .pg-game-menu nav{max-height:320px;overflow:auto;overscroll-behavior:contain;padding:4px}
  .pg-page .pg-game-menu>p{margin-top:12px}
  .pg-page .pg-settings-form :is(input,select,textarea){font-size:16px}
  .pg-page .pg-fields{grid-template-columns:minmax(0,1fr)}
  .pg-page .pg-bingo-example{flex-wrap:wrap}
  .pg-page .pg-bingo-example>.a-btn{width:100%}
  .pg-page .pg-live-panel .a-answer-form{flex-wrap:wrap}
  .pg-page .pg-live-panel .a-answer-form input{min-width:0;flex-basis:100%;font-size:16px}
}
.pg-page[data-view=player] .pg-stream-example{display:none}