/* 3.4.7 The website. Everything here only applies in a browser (html.is-web, set by web-bridge.js);
   the Android app never gets the class. PC: the phone-width app in the middle on the base background. */
/* Tablet / small window: the app centred, a bit wider than a phone. */
@media (min-width:600px) and (max-width:1023px){
 .is-web main{max-width:640px!important;margin-left:auto!important;margin-right:auto!important}
 .is-web #nav{width:min(640px,calc(100% - 24px))!important}
}

/* ===== PC (1024 px and wider): a normal website =====
   Left sidebar instead of the bottom bar, full-width pages, grids for episodes, clips, ideas, games and photos,
   Home in two columns. Phones and the Android app never see this. */
@media (min-width:1024px){
 .is-web{--side:232px}
 .is-web body{padding-left:var(--side)}
 .is-web .app-header{position:sticky;top:0;margin-left:calc(-1 * var(--side));padding-left:28px!important;padding-right:32px!important;height:72px}
 .is-web .brand{width:calc(var(--side) - 28px)}
 /* Sidebar */
 .is-web #nav{position:fixed!important;left:0!important;top:72px!important;bottom:0!important;right:auto!important;transform:none!important;width:var(--side)!important;min-height:0!important;
  display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:stretch!important;gap:6px;padding:20px 14px!important;border-radius:0!important;border:0!important;border-right:1px solid #ffffff14!important;box-shadow:none!important;background:#07060cd9!important}
 .is-web #nav button{flex:none!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:14px;width:100%!important;min-height:50px!important;padding:0 16px!important;border-radius:14px!important;font-size:14px!important;text-align:left}
 .is-web #nav button svg{width:22px!important;height:22px!important;margin:0!important;flex:none}
 .is-web #nav button:before{inset:0!important;border-radius:14px!important;width:auto!important;height:auto!important;transform:none!important;left:0!important;top:0!important}
 .is-web #nav button:after{left:0!important;right:auto!important;top:12px!important;bottom:12px!important;width:3px!important;height:auto!important;border-radius:3px!important;transform:none!important}
 .is-web #nav button:hover{background:#ffffff0d}
 /* Page area */
 .is-web main{max-width:1320px!important;margin:0 auto!important;padding:32px 48px 64px!important}
 .is-web main h1{font-size:clamp(32px,3vw,46px)}
 .is-web main .search{max-width:640px}
 .is-web dialog{width:min(560px,92vw)}
 .is-web #toast{left:calc(50% + var(--side)/2)!important}

 /* Home: left = you + next recording, right = latest episode; seasons and crew corner full width */
 .is-web main[data-page=Home]{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:36px;align-items:start}
 .is-web main[data-page=Home]>*{grid-column:1/-1;min-width:0}
 .is-web main[data-page=Home]>:is(.ph-top,.ph-next,.gcal-row,.ph-daymode-row,.web-big-open,.web-hint,.ph-day){grid-column:1}
 .is-web main[data-page=Home]>.ph-hero{grid-column:2;grid-row:2/span 6;margin-top:0!important}
 .is-web main[data-page=Home]>.ph-ticker,.is-web main[data-page=Home]>.web-join{grid-row:1}
 .is-web main[data-page=Home] .crew-home>div,.is-web main[data-page=Home] .crew-tiles{grid-template-columns:repeat(6,minmax(0,1fr))!important}

 .is-web main[data-page=Home] .ph-rail{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));overflow:visible!important;gap:16px}
 .is-web main[data-page=Home] .ph-rail>*{width:auto!important;min-width:0!important}
 .is-web main[data-page=Home] .ph-heading :is(small,span,a):last-child:not(:first-child){display:none}
 /* Watch: cards in a grid */
 .is-web #episode-results{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;align-items:start}
 .is-web #episode-results>.empty{grid-column:1/-1}
 .is-web #episode-results .watch-card{margin:0!important;height:100%}
 .is-web .clip-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important}
 .is-web .host-row{max-width:640px}
 .is-web .season-hero{min-height:260px}
 /* Ideas: wider board and cards */
 .is-web .subject-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important}
 .is-web #idea-results:has(.idea){display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;align-items:start}
 .is-web #idea-results .idea{margin:0!important}
 /* Calendar and Info: comfortable reading width */
 .is-web main[data-page=Calendar],.is-web main[data-page=Info]{max-width:1040px!important}
 /* Play: game cards side by side */
 .is-web .arcade-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;display:grid!important;gap:18px}
 /* Crew corner: photos in more columns */
 .is-web main[data-page=Crew] :is(.photo-grid,.crew-photos,.photos){grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important}
 /* Games run full width next to the sidebar; the game screen itself covers it */
 .is-web body.web-game #nav{display:none!important}
 .is-web body.web-game{padding-left:0}
}

/* Phone-only things the website can't do */
.is-web #notification-settings,.is-web #connection-button,.is-web #info-safety-backup,.is-web .safety-note,.is-web #make-stickers{display:none!important}

/* Join note, iPhone tip, big-screen button (Home) */
.web-join{margin:6px 0 18px;padding:18px;border-radius:22px;border:1px solid var(--cardb,#ffffff22);background:var(--card,#ffffff0d)}
.web-join h2{margin:0 0 8px;font-size:20px}.web-join p{margin:0;line-height:1.5}
.web-hint{display:flex;gap:12px;align-items:center;margin:4px 0 14px;padding:12px 14px;border-radius:18px;border:1px dashed #ffffff40;background:#ffffff0a}
.web-hint p{margin:0;font-size:12px;line-height:1.45;flex:1}.web-hint button{flex:none;min-height:44px}
.web-big-open{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:0 0 12px;border-radius:16px;border:1px solid var(--cardb,#ffffff22);background:var(--card,#ffffff0d);color:inherit;font:inherit;cursor:pointer}
@media (pointer:coarse) and (max-width:599px){.web-big-open{display:none}}

/* Video player layer */
#web-player{position:fixed;inset:0;z-index:200;background:#000}
#web-player iframe{width:100%;height:100%;border:0;display:block}
body.web-player-open{overflow:hidden}

/* Big-screen recording timer */
#web-big{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:4vh 4vw;overflow:auto;color:#fff;
 background:radial-gradient(1200px 700px at 20% 10%,color-mix(in srgb,var(--g2,#7c3aed) 45%,transparent),transparent),radial-gradient(900px 600px at 85% 90%,color-mix(in srgb,var(--g3,#22c55e) 30%,transparent),transparent),var(--t0,#0a0820)}
#web-big .wb-close{position:absolute;top:16px;right:16px;width:52px;height:52px;border-radius:50%;border:1px solid #ffffff33;background:#ffffff14;color:#fff;font-size:28px;cursor:pointer}
#web-big .wb-full{position:absolute;top:16px;left:16px;min-height:52px;padding:0 18px;border-radius:26px;border:1px solid #ffffff33;background:#ffffff14;color:#fff;font:inherit;font-size:14px;cursor:pointer}
.wb-in{text-align:center;max-width:1400px}
.wb-badge{display:inline-flex;align-items:center;gap:10px;margin:0 0 2vh;padding:8px 18px;border-radius:999px;background:#ffffff14;border:1px solid #ffffff2a;font-size:clamp(12px,1.4vw,22px);letter-spacing:2px}
.wb-badge i{width:12px;height:12px;border-radius:50%;background:var(--ta,#86efac);box-shadow:0 0 14px var(--ta,#86efac)}
.wb-in.is-live .wb-badge i{background:#ff4d6d;box-shadow:0 0 18px #ff4d6d;animation:wbpulse 1.2s infinite}
@keyframes wbpulse{50%{opacity:.35}}
.wb-in h1{margin:0 0 3vh;font-size:clamp(26px,4.4vw,72px);line-height:1.12}
.wb-digits{display:flex;justify-content:center;align-items:flex-start;gap:1.5vw}
.wb-digits span{display:grid;justify-items:center;min-width:16vw;padding:2vh 1vw;border-radius:3vw;background:#ffffff10;border:1px solid #ffffff22}
.wb-digits b{font-size:clamp(56px,13vw,240px);line-height:1;font-variant-numeric:tabular-nums}
.wb-digits small{margin-top:1vh;font-size:clamp(11px,1.3vw,22px);letter-spacing:4px;opacity:.75}
.wb-digits i{font-style:normal;font-size:clamp(40px,9vw,170px);line-height:1.2;opacity:.5}
.wb-word{font-size:clamp(64px,16vw,280px);line-height:1;letter-spacing:4px}
.wb-word.is-live{color:#ff4d6d;text-shadow:0 0 40px #ff4d6d88}
.wb-sub{margin:2vh 0 0;font-size:clamp(13px,1.6vw,26px);opacity:.8}
.wb-people{display:flex;flex-wrap:wrap;justify-content:center;gap:2vw;margin-top:4vh}
.wb-people span{display:grid;justify-items:center;gap:8px}.wb-people b{font-weight:400;font-size:clamp(12px,1.3vw,20px)}
.wb-format{margin-top:3vh;opacity:.7;font-size:clamp(12px,1.3vw,20px)}

/* Shikka Defence on a PC: the hint shows the keyboard + mouse controls */
@media (pointer:fine){.is-web #g3-jump{display:none!important}.is-web .g3-hint span{display:none}.is-web .g3-hint::after{content:"A D walk · W / space jump · S drop · hold the mouse to aim + fire";font-size:12px}.is-web .g3-rot{display:none!important}}