:root { --ink: #1c2434; --cream: #fff6e3; --red: #d83a34; --gold: #FFC93C; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #6ec3f0; color: var(--ink);
  font-family: Fredoka, "Trebuchet MS", system-ui, sans-serif; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; touch-action: manipulation; }
canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }

.corner { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: flex; gap: 10px; z-index: 5; }
.round { width: 52px; height: 52px; border-radius: 50%; border: 4px solid var(--ink); background: var(--cream);
  font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 4px 0 var(--ink); padding: 0; }
.round:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

.card-wrap { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; z-index: 4; pointer-events: none; }
.card-wrap[hidden] { display: none; }
.card { pointer-events: auto; background: var(--cream); border: 5px solid var(--ink); border-radius: 28px;
  box-shadow: 0 8px 0 var(--ink); padding: 22px 26px 24px; max-width: 460px; width: 100%; text-align: center;
  animation: pop-in .35s cubic-bezier(.2,1.6,.4,1); }
.card.small { max-width: 340px; }
@keyframes pop-in { from { transform: scale(.6) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }

.logo { margin: 0; font-size: clamp(44px, 12vw, 68px); line-height: .95; letter-spacing: 1px; color: var(--red);
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); transform: rotate(-3deg); }
.logo span { display: block; color: var(--gold); font-size: .62em; }
.tag { font-size: 18px; font-weight: 500; margin: 16px 0 16px; }
.diff { display: inline-flex; background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 3px; gap: 2px; margin: 0 0 4px; }
.diff button { font: 600 17px Fredoka, sans-serif; color: var(--ink); background: none; border: 0; border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.diff button.on { background: var(--gold); box-shadow: inset 0 -3px 0 rgba(28,36,52,.25); }
.diff button:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; }
.diffdesc { font-size: 14px; margin: 0 0 14px; opacity: .75; min-height: 1em; }
.how { font-size: 15px; margin: 14px 0 0; opacity: .8; }
.best { font-size: 18px; font-weight: 700; margin: 8px 0 0; min-height: 1em; }

.big { font: 700 26px Fredoka, sans-serif; color: #fff; background: var(--red); border: 4px solid var(--ink); border-radius: 999px;
  padding: 12px 34px; cursor: pointer; box-shadow: 0 6px 0 var(--ink); }
.big:hover { filter: brightness(1.06); }
.big:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.big:focus-visible, .round:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; }

h2 { margin: 0 0 12px; font-size: clamp(34px, 9vw, 46px); color: var(--red); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.stats { display: flex; justify-content: center; gap: 10px; margin: 6px 0 10px; }
.stats div { flex: 1; background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 6px 4px; }
.stats .n { display: block; font-size: 36px; font-weight: 700; }
.stats .l { display: block; font-size: 14px; opacity: .75; }
.newbest { margin: 6px 0; font-size: 24px; font-weight: 700; color: var(--ink); background: var(--gold); border-radius: 999px; padding: 4px 10px;
  animation: wiggle .6s ease-in-out infinite alternate; }
.newbest[hidden] { display: none; }
@keyframes wiggle { from { transform: rotate(-3deg) scale(1); } to { transform: rotate(3deg) scale(1.06); } }
.quip { font-size: 18px; margin: 8px 0 16px; min-height: 1.2em; }

@media (prefers-reduced-motion: reduce) { .card, .newbest { animation: none; } }

/* ===================================================================== the Worlds gallery */
.worlds-btn { display: block; margin: 12px auto 0; font: 700 18px Fredoka, sans-serif; color: var(--ink); background: var(--gold);
  border: 3px solid var(--ink); border-radius: 999px; padding: 7px 20px; cursor: pointer; box-shadow: 0 4px 0 var(--ink); }
.worlds-btn:hover { filter: brightness(1.05); transform: rotate(-2deg); }
.worlds-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.worlds-btn:focus-visible { outline: 4px solid var(--red); outline-offset: 3px; }

#gallery { position: fixed; inset: 0; z-index: 10; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: radial-gradient(circle at 20% 10%, rgba(255,201,60,.18), transparent 40%), radial-gradient(circle at 85% 30%, rgba(255,122,182,.16), transparent 45%),
    radial-gradient(rgba(255,255,255,.5) 1.2px, transparent 1.6px) 0 0 / 38px 38px, #1c2434;
  padding: 0 16px 40px; }
#gallery[hidden], #lightbox[hidden] { display: none; }
.gal-top { position: sticky; top: 0; z-index: 2; text-align: center; padding: max(14px, env(safe-area-inset-top)) 64px 12px;
  background: linear-gradient(#1c2434 70%, rgba(28,36,52,0)); }
.gal-top h2 { margin: 0; color: var(--gold); -webkit-text-stroke: 2px var(--ink); font-size: clamp(30px, 7vw, 50px); line-height: 1; transform: rotate(-2deg); text-shadow: 0 4px 0 var(--red); }
.gal-top h2 span { display: block; font-size: .5em; color: #fff; text-shadow: none; -webkit-text-stroke: 0; }
.gal-top p { margin: 8px 0 0; color: #fff; opacity: .85; font-size: 16px; }
#galClose { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 4px; }
.gal-grid { max-width: 1180px; margin: 0 auto; }
.gal-h { color: #fff; font-size: 26px; margin: 26px 4px 12px; }
.gal-h small { font-size: 15px; background: var(--red); border: 2px solid #fff; border-radius: 999px; padding: 1px 9px; vertical-align: middle; }
.tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
@media (max-width: 460px) { .tickets { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.ticket { position: relative; padding: 7px 7px 0; background: var(--cream); border: 4px solid var(--ink); border-radius: 16px; cursor: pointer;
  box-shadow: 0 6px 0 var(--ink); transform: rotate(var(--tilt, 0deg)); transition: transform .15s cubic-bezier(.2,1.6,.4,1); font: inherit; color: var(--ink); text-align: center; }
.ticket:hover, .ticket:focus-visible { transform: rotate(0) scale(1.05) translateY(-4px); z-index: 1; }
.ticket:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; }
.t-shot { aspect-ratio: 1.75; border-radius: 9px; overflow: hidden; border: 3px solid var(--ink); background: #7EC8FF; }
.t-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-name { display: block; position: relative; margin: 8px -7px 0; padding: 8px 10px 10px; border-top: 3px dashed rgba(28,36,52,.35); font-weight: 700; font-size: 16px; line-height: 1.15; }
/* the ticket's punched notches */
.t-name::before, .t-name::after { content: ""; position: absolute; top: -12px; width: 20px; height: 20px; border-radius: 50%; background: #1c2434; border: 4px solid var(--ink); }
.t-name::before { left: -14px; } .t-name::after { right: -14px; }

/* a world still waiting for its painting */
.ph { position: relative; width: 100%; height: 100%; overflow: hidden; }
.ph-e { position: absolute; font-size: 30px; animation: ph-bob 3s ease-in-out infinite; }
.ph-e:nth-child(1) { left: 12%; top: 16%; } .ph-e:nth-child(2) { left: 58%; top: 8%; } .ph-e:nth-child(3) { left: 38%; top: 40%; }
.ph-e:nth-child(4) { left: 78%; top: 38%; } .ph-e:nth-child(5) { left: 22%; top: 50%; }
.ph.ph-big .ph-e { font-size: clamp(40px, 8vw, 92px); }
@keyframes ph-bob { 50% { transform: translateY(-8px) rotate(8deg); } }
.ph-soon { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; font-size: 11px; font-weight: 700;
  background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 8px; }
.ph.ph-big .ph-soon { font-size: clamp(13px, 2vw, 18px); padding: 4px 14px; border-width: 3px; }

/* ===================================================================== the lightbox */
#lightbox { position: fixed; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #3a2f78, #120f2e 70%); }
.lb-rays { position: absolute; left: 50%; top: 45%; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax;
  background: repeating-conic-gradient(rgba(255,201,60,.16) 0 9deg, rgba(255,201,60,0) 9deg 18deg); animation: rays 40s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.lb-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px; }
.lb-sign { position: relative; z-index: 3; text-align: center; background: var(--red); color: #fff; border: 5px solid var(--gold); outline: 4px solid var(--ink);
  border-radius: 18px; padding: 6px 26px 8px; box-shadow: 0 8px 0 var(--ink), 0 0 40px rgba(255,201,60,.45); transform: rotate(-1.5deg); max-width: 92vw; }
.lb-sign.pop { animation: sign-pop .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes sign-pop { from { transform: rotate(-1.5deg) scale(.7); } }
.lb-sign h2 { margin: 0; font-size: clamp(24px, 5vw, 44px); color: var(--gold); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); line-height: 1.05; }
.lb-cat { display: inline-block; font-size: 14px; font-weight: 700; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 10px; margin-bottom: 4px; }
.lb-frame { position: relative; padding: 26px; border-radius: 26px;
  background: linear-gradient(145deg, #e8453e, #b52a25); border: 5px solid var(--ink);
  box-shadow: inset 0 0 0 6px var(--gold), inset 0 0 0 10px var(--ink), 0 14px 0 var(--ink), 0 0 70px rgba(255,201,60,.35);
  width: min(calc(94vw - 24px), calc((100dvh - var(--lb-chrome, 250px)) * 1.75 + 52px)); }
.lb-pic { position: relative; aspect-ratio: 1.75; border-radius: 12px; overflow: hidden; border: 4px solid var(--ink); background: #0d0b24; touch-action: pan-y; cursor: grab; }
.lb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.lb-pic.in { animation: pic-in .5s cubic-bezier(.2,1.4,.4,1); }
.lb-pic.in-r { animation: pic-r .45s cubic-bezier(.2,1.3,.4,1); }
.lb-pic.in-l { animation: pic-l .45s cubic-bezier(.2,1.3,.4,1); }
@keyframes pic-in { from { transform: scale(.85) rotate(-2deg); opacity: 0; } }
@keyframes pic-r { from { transform: translateX(14%) rotate(2deg); opacity: 0; } }
@keyframes pic-l { from { transform: translateX(-14%) rotate(-2deg); opacity: 0; } }
.bulb { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff3b0; border: 2px solid var(--ink);
  animation: bulb .9s steps(1) infinite; z-index: 2; pointer-events: none; }
@keyframes bulb { 0% { background: #fff8d0; box-shadow: 0 0 10px 3px rgba(255,220,90,.9); } 33% { background: #c98a12; box-shadow: none; } }
.lb-rocko { position: absolute; top: -70px; left: -160px; width: 150px; z-index: 4; pointer-events: none; opacity: 0; }
.lb-rocko.zoom { animation: rocko-zoom 1.6s cubic-bezier(.4,0,.6,1); }
.lb-rocko.back { animation: rocko-back 1.6s cubic-bezier(.4,0,.6,1); }
@keyframes rocko-zoom { 0% { opacity: 1; transform: translate(0, 30px) rotate(-8deg); } 50% { transform: translate(calc(50vw + 80px), -20px) rotate(4deg); } 100% { opacity: 1; transform: translate(calc(100vw + 260px), 20px) rotate(-6deg); } }
@keyframes rocko-back { 0% { opacity: 1; transform: translate(calc(100vw + 260px), 20px) scaleX(-1); } 100% { opacity: 1; transform: translate(0, 30px) scaleX(-1); } }
.lb-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.cf { position: absolute; top: 45%; width: 10px; height: 6px; border-radius: 2px; animation: cf 1.2s cubic-bezier(.2,.8,.4,1) forwards; }
@keyframes cf { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
.lb-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 3; }
.lb-arrow { width: 58px; height: 58px; border-radius: 50%; font-size: 24px; cursor: pointer; color: var(--ink); background: var(--gold);
  border: 4px solid var(--ink); box-shadow: 0 5px 0 var(--ink); padding: 0; }
.lb-arrow:hover { transform: scale(1.08); }
.lb-arrow:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.lb-arrow:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.lb-count { font-weight: 700; font-size: 18px; color: var(--ink); background: var(--cream); border: 3px solid var(--ink); border-radius: 10px; padding: 5px 12px; min-width: 76px; text-align: center; }
.lb-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 6; }
@media (max-width: 560px) {
  .lb-frame { padding: 16px; border-radius: 18px; }
  .lb-rocko { width: 100px; top: -50px; }
  .lb-bar .big { order: 5; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-rays, .bulb, .ph-e, .lb-rocko, .lb-sign.pop, .lb-pic.in, .lb-pic.in-r, .lb-pic.in-l { animation: none !important; }
}
/* the legal line inside the title + game-over cards: Super Rocko™ · © 2026 Rocko's World · v23 */
.legal { margin: 12px 0 0; font-size: 12px; font-weight: 600; opacity: .6; }
.logo .tm { font-size: .28em; vertical-align: super; color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; margin-left: 2px; }

/* game-over / pause: ways back out */
.card-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.card-links .worlds-btn { margin: 0; font-size: 16px; padding: 6px 16px; }

/* phones held upright: a nudge to turn sideways (Ron: "plays better in landscape") */
.rotate-hint { display: none; margin: 12px auto 0; max-width: 320px; font-size: 15px; font-weight: 700; background: var(--gold);
  border: 3px solid var(--ink); border-radius: 14px; padding: 6px 12px; animation: tilt 1.6s ease-in-out infinite; }
@keyframes tilt { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-4deg); } 85% { transform: rotate(4deg); } }
@media (orientation: portrait) and (pointer: coarse) { .rotate-hint { display: block; } }
@media (prefers-reduced-motion: reduce) { .rotate-hint { animation: none; } }

/* ===================================================================== short screens (phones sideways)
   Ron: "plays better in landscape… make sure this is perfect in mobile". Cards go two-column so
   nothing is cut off; the lightbox puts its buttons beside the picture so the painting gets the height. */
@media (max-height: 540px) {
  .card-wrap { overflow-y: auto; justify-content: flex-start; padding: 10px 16px; }
  .card { margin: auto 0; padding: 12px 20px 14px; border-radius: 22px; }
  #title .card { max-width: 660px; display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: center; }
  #title .logo { grid-column: 1; grid-row: 1 / span 6; font-size: 46px; }
  #title .card > :not(.logo) { grid-column: 2; }
  #title #btnPlay, #title .worlds-btn, #title .diff { justify-self: center; }
  #title .tag, #title .how { display: none; }
  #title .worlds-btn { margin-top: 8px; }
  #title .best { font-size: 15px; margin-top: 6px; }
  .legal { margin-top: 6px; font-size: 11px; }
  #over .legal { grid-column: 1 / span 2; grid-row: 5; }
  #over .card { max-width: 700px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-items: center; }
  #over h2 { grid-column: 1; grid-row: 1; font-size: 30px; margin: 0 0 6px; }
  #over .stats { grid-column: 1; grid-row: 2; margin: 0; }
  #over .newbest { grid-column: 1; grid-row: 3; font-size: 18px; margin: 8px 0 0; }
  #over .quip { grid-column: 1; grid-row: 4; font-size: 15px; margin: 8px 0 0; }
  #over .diff { grid-column: 2; grid-row: 1; justify-self: center; }
  #over .diffdesc { grid-column: 2; grid-row: 2; margin: 0 0 8px; align-self: start; }
  #over #btnAgain { grid-column: 2; grid-row: 3; justify-self: center; }
  #over .card-links { grid-column: 2; grid-row: 4; margin-top: 10px; }
  .stats .n { font-size: 26px; } .stats .l { font-size: 12px; }
  .big { font-size: 22px; padding: 10px 28px; }
  .diff button { font-size: 15px; padding: 6px 11px; }
  .gal-top { padding-top: max(8px, env(safe-area-inset-top)); }
  .gal-top h2 { font-size: 26px; } .gal-top p { display: none; }
  .gal-h { margin: 14px 4px 10px; font-size: 20px; }
  /* lightbox: picture as big as the height allows, the buttons in a column beside it */
  #lightbox { --lb-chrome: 64px; }
  .lb-stage { flex-direction: row; gap: 14px; padding: 30px 8px 8px; }
  .lb-frame { padding: 12px; border-radius: 18px; }
  .lb-sign { position: absolute; top: 6px; left: 50%; transform: translateX(-60%) rotate(-1.5deg); padding: 2px 16px 4px; border-width: 3px; outline-width: 3px; box-shadow: 0 4px 0 var(--ink); }
  .lb-sign.pop { animation: none; }
  .lb-sign h2 { font-size: 20px; } .lb-cat { display: none; }
  .lb-bar { flex-direction: column; gap: 10px; }
  .lb-bar .big { font-size: 17px; padding: 10px 14px; }
  .lb-arrow { width: 48px; height: 48px; font-size: 19px; }
  .lb-rocko { width: 96px; top: -30px; }
}

/* the Sound mixer, dropping down under the 🔊 button */
.mixer { position: fixed; z-index: 6; top: calc(max(12px, env(safe-area-inset-top)) + 64px); right: max(12px, env(safe-area-inset-right));
  width: min(300px, calc(100vw - 24px)); background: var(--cream); border: 4px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink);
  padding: 6px 14px 12px; animation: pop-in .25s cubic-bezier(.2,1.6,.4,1); transform-origin: top right; }
.mixer[hidden] { display: none; }
.mixer::before { content: ""; position: absolute; top: -12px; right: 18px; width: 18px; height: 18px; background: var(--cream);
  border-left: 4px solid var(--ink); border-top: 4px solid var(--ink); transform: rotate(45deg); border-radius: 4px 0 0 0; }
.mix-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding: 10px 0; border-bottom: 3px dashed rgba(28,36,52,.18); }
.mix-row .ic { font-size: 24px; }
.mix-row b { font-size: 19px; }
.mix-tog { min-width: 64px; min-height: 40px; border-radius: 999px; border: 3px solid var(--ink); cursor: pointer; font: 700 16px Fredoka, sans-serif;
  background: #2E9E5B; color: #fff; box-shadow: 0 3px 0 var(--ink); }
.mix-tog.off { background: #C9CED6; color: var(--ink); }
.mix-tog:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.mix-row input[type=range] { grid-column: 1 / -1; width: 100%; height: 30px; accent-color: var(--red); cursor: pointer; }
.mix-row input[type=range]:disabled { opacity: .35; cursor: default; }
.mix-mute { display: block; width: 100%; margin-top: 12px; font: 700 17px Fredoka, sans-serif; color: var(--ink); background: var(--gold);
  border: 3px solid var(--ink); border-radius: 999px; padding: 8px; cursor: pointer; box-shadow: 0 4px 0 var(--ink); }
.mix-mute:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.mix-tog:focus-visible, .mix-mute:focus-visible, .mix-row input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ===================================================================== the lobby (Ron: "make a bigger lobby") */
.lobby { position: fixed; inset: 0; z-index: 4; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: linear-gradient(rgba(28,36,52,.18), rgba(28,36,52,.55)); padding: max(14px, env(safe-area-inset-top)) 16px 28px; }
.lobby[hidden] { display: none; }
.lobby-in { max-width: 1120px; margin: 0 auto; }
.lobby-hero { text-align: center; padding: 18px 0 8px; }
.lobby-hero .logo { font-size: clamp(58px, 11vw, 118px); filter: drop-shadow(0 6px 0 rgba(28,36,52,.35)); animation: logo-bob 3.2s ease-in-out infinite; }
@keyframes logo-bob { 50% { transform: rotate(-3deg) translateY(-6px); } }
.lobby-hero .tag { color: #fff; font-size: clamp(16px, 2.2vw, 21px); font-weight: 600; max-width: 640px; margin: 14px auto 16px; text-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(28,36,52,.8); }
.lobby-hero .diffdesc { color: #fff; opacity: 1; text-shadow: 0 1px 0 var(--ink), 0 0 8px rgba(28,36,52,.8); }
.big.huge { font-size: clamp(34px, 5vw, 48px); padding: 14px 64px; box-shadow: 0 8px 0 var(--ink); animation: fly-pulse 1.6s ease-in-out infinite; }
@keyframes fly-pulse { 50% { transform: scale(1.06) rotate(-1deg); } }
.lobby-hero .best { color: #fff; text-shadow: 0 2px 0 var(--ink); font-size: 20px; margin-top: 14px; }
.lobby-hero .rotate-hint { max-width: 340px; }
.lobby-grid { display: grid; gap: 18px; grid-template-columns: repeat(12, 1fr); margin-top: 22px; }
.panel { background: var(--cream); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--ink); padding: 12px 16px 16px; min-width: 0; }
.panel h3 { margin: 0 0 10px; font-size: 22px; }
.panel h3 small { font-size: 14px; font-weight: 600; opacity: .65; margin-left: 6px; }
.p-wotd { grid-column: span 5; transform: rotate(-1deg); }
.p-trophy { grid-column: span 3; transform: rotate(1deg); }
.p-how { grid-column: span 4; transform: rotate(-.6deg); }
.p-worlds, .p-crew { grid-column: span 12; }
.wotd-pic { display: block; width: 100%; aspect-ratio: 1.75; padding: 0; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; cursor: pointer; background: #7EC8FF; }
.wotd-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.wotd-pic:hover img { transform: scale(1.06); }
.wotd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.wotd-row b { font-size: 19px; }
.wotd-row .worlds-btn { margin: 0; }
.trophies { list-style: none; margin: 0; padding: 0; }
.trophies li { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; margin-bottom: 6px; border-radius: 12px; background: #fff; border: 3px solid var(--ink); font-weight: 600; }
.trophies li b { font-size: 22px; }
.trophies li.on { background: var(--gold); }
.how-list { margin: 0; padding-left: 20px; line-height: 1.45; font-size: 15px; }
.how-list li { margin-bottom: 3px; }
.p-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.p-head h3 { margin: 0; }
.p-head .worlds-btn { margin: 0; }
.strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; -webkit-overflow-scrolling: touch; }
.strip-w { flex: 0 0 200px; scroll-snap-align: start; padding: 5px 5px 8px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; cursor: pointer;
  font: 700 14px Fredoka, sans-serif; color: var(--ink); text-align: center; transition: transform .15s; }
.strip-w:hover, .strip-w:focus-visible { transform: translateY(-4px) rotate(-1deg); }
.strip-w img, .strip-w .ph { width: 100%; aspect-ratio: 1.75; object-fit: cover; display: block; border-radius: 9px; margin-bottom: 6px; }
.strip-w span { display: block; line-height: 1.15; }
.crew { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mate { background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mate img { height: 110px; width: 100%; object-fit: contain; }
.mate:hover img { animation: mate-hop .5s ease; }
@keyframes mate-hop { 40% { transform: translateY(-10px) rotate(-4deg); } }
.mate b { font-size: 17px; }
.mate span { font-size: 13.5px; line-height: 1.3; opacity: .85; }
.lobby .legal { text-align: center; color: #fff; opacity: .9; text-shadow: 0 1px 2px rgba(0,0,0,.6); margin-top: 22px; }
@media (max-width: 900px) {
  .p-wotd { grid-column: span 12; } .p-trophy, .p-how { grid-column: span 6; }
  .crew { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 560px) {
  .p-trophy, .p-how { grid-column: span 12; }
  .crew { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mate img { height: 80px; } .mate span { font-size: 12.5px; }
  .panel { transform: none; }
  .strip-w { flex-basis: 160px; }
  .big.huge { padding: 12px 44px; }
}
@media (max-height: 540px) {
  .lobby-hero { padding-top: 4px; }
  .lobby-hero .logo { font-size: 54px; }
  .lobby-hero .tag { display: none; }
  .big.huge { font-size: 30px; padding: 10px 44px; }
}
@media (prefers-reduced-motion: reduce) { .lobby-hero .logo, .big.huge, .mate:hover img { animation: none; } }

/* the ⚡ SUPER! button: pops up bottom-left (thumb's reach) when the gauge is full */
.super-btn { position: fixed; z-index: 5; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
  width: 112px; height: 112px; border-radius: 50%; border: 5px solid var(--ink); cursor: pointer; padding: 0;
  background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gold) 45%, #f08a1c); box-shadow: 0 7px 0 var(--ink), 0 0 30px 6px rgba(255,201,60,.8);
  font: 700 44px/1 Fredoka, sans-serif; color: var(--red); -webkit-text-stroke: 2px var(--ink); animation: super-pulse .6s ease-in-out infinite alternate, pop-in .3s cubic-bezier(.2,1.6,.4,1);
  touch-action: none; -webkit-user-select: none; user-select: none; }
.super-btn span { display: block; font-size: 17px; color: #fff; -webkit-text-stroke: 1.5px var(--ink); margin-top: 2px; }
.super-btn[hidden] { display: none; }
.super-btn:active { transform: translateY(4px) scale(.96); box-shadow: 0 3px 0 var(--ink); }
@keyframes super-pulse { from { transform: scale(1) rotate(-4deg); } to { transform: scale(1.08) rotate(4deg); } }
@media (max-height: 540px) { .super-btn { width: 88px; height: 88px; font-size: 34px; } .super-btn span { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .super-btn { animation: none; } }