/* ==========================================================
   screens.css — background, HUD, screens, bubbles, banners, wipe, loading
   ========================================================== */

/* ---------- living background ---------- */
#bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 15%, #8566ff 0%, #5232d8 42%, #26146e 100%); }
#bg .rays { position: absolute; left: 50%; top: 38%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.10) 0deg 10deg, rgba(255, 255, 255, 0) 10deg 20deg);
  animation: spin 90s linear infinite; }
#bg .dots { position: absolute; inset: -60px; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.22) 4px, transparent 5px), radial-gradient(circle, rgba(255, 210, 63, 0.28) 6px, transparent 7px);
  background-size: 74px 74px, 111px 111px; background-position: 0 0, 30px 40px; animation: drift 24s linear infinite; }
#bg .dots.d2 { background-image: radial-gradient(circle, rgba(255, 95, 162, 0.25) 5px, transparent 6px); background-size: 137px 137px; background-position: 50px 20px; animation-duration: 36s; animation-direction: reverse; }
@keyframes drift { to { transform: translate(74px, 111px); } }

/* ---------- stage ---------- */
#stage { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--hud-h) + var(--safe-t)); z-index: 5; touch-action: none; overflow: hidden; }
.mg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- HUD ---------- */
#hud { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--hud-h) + var(--safe-t)); padding: calc(8px + var(--safe-t)) 10px 4px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; z-index: 10; }
.hud-side { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border: 4px solid var(--ink); border-radius: 999px; box-shadow: 0 5px 0 var(--ink-2); min-width: 0; max-width: 100%; }
.hud-side.dad { background: linear-gradient(180deg, #8bbaff, var(--dad)); justify-self: start; }
.hud-side.kid { background: linear-gradient(180deg, #ffa8d0, var(--kid)); justify-self: end; flex-direction: row-reverse; padding: 6px 6px 6px 16px; }
.hud-info { display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.hud-side.kid .hud-info { align-items: flex-end; }
.hud-name { font-size: clamp(0.78rem, 2.5vmin, 1.1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11ch; }
.hud-score { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.4rem, 4.6vmin, 2.3rem); color: #fff; -webkit-text-stroke: 0.16em var(--ink); paint-order: stroke fill; }
.hud-score span { font-size: 0.8em; -webkit-text-stroke: 0; }
.hud-score.bump { animation: scoreBump 0.4s cubic-bezier(0.3, 1.8, 0.5, 1); }
@keyframes scoreBump { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-4deg); } 100% { transform: scale(1); } }
.hud-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hud-row { display: flex; align-items: center; gap: 8px; }
.hud-timer { min-width: 2.4em; text-align: center; font-size: clamp(1.7rem, 5.8vmin, 2.9rem); }
.hud-timer.urgent { color: var(--tomato); animation: urgent 0.5s ease-in-out infinite; }
@keyframes urgent { 50% { transform: scale(1.22); } }
.chaos { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.chaos-label { font-size: clamp(0.62rem, 1.9vmin, 0.85rem); letter-spacing: 0.06em; }
.chaos-bar { display: flex; gap: 3px; padding: 3px; background: var(--ink); border-radius: 10px; }
.chaos-bar i { width: clamp(10px, 2.3vmin, 18px); height: clamp(11px, 2.2vmin, 15px); border-radius: 4px; background: #4a3a8c; transition: background 0.2s, transform 0.2s; }
.chaos-bar i.on { background: var(--sun); transform: scaleY(1.12); }
.chaos-bar i.on:nth-child(n+5) { background: #ff9f1c; }
.chaos-bar i.on:nth-child(n+8) { background: var(--tomato); }
.chaos.hot .chaos-bar { animation: hot 0.35s ease-in-out infinite; }
@keyframes hot { 50% { transform: scale(1.08) rotate(-1.5deg); } }
body:not(.in-game) .hud-only { display: none; }

/* ---------- screens ---------- */
#screens { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: safe center; gap: var(--gap); padding: calc(14px + var(--safe-t)) 14px calc(14px + var(--safe-b)); overflow-x: hidden; overflow-y: auto; touch-action: pan-y; text-align: center; }
.screen.show { display: flex; pointer-events: auto; }
.screen.show > * { animation: popIn 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.screen.show > *:nth-child(2) { animation-delay: 0.06s; } .screen.show > *:nth-child(3) { animation-delay: 0.12s; }
.screen.show > *:nth-child(4) { animation-delay: 0.18s; } .screen.show > *:nth-child(5) { animation-delay: 0.24s; }
.screen.show > *:nth-child(6) { animation-delay: 0.3s; } .screen.show > *:nth-child(7) { animation-delay: 0.36s; }
.row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.title { font-size: clamp(1.8rem, 7vmin, 3.6rem); }
.tools { position: absolute; top: calc(10px + var(--safe-t)); right: 12px; display: flex; gap: 10px; z-index: 3; animation: none !important; }

/* menu */
.logo { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.05em 0.3em; font-size: clamp(2rem, 8.4vmin, 5rem); line-height: 0.95; }
.logo .l1 span { display: inline-block; animation: letterBounce 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms); }
.logo .vs { font-size: 0.6em; transform: rotate(-6deg); }
.logo .ribbon { flex-basis: auto; margin-top: 0.15em; font-size: 0.42em; padding: 0.22em 0.9em; background: var(--tomato); border: 0.22em solid var(--ink); border-radius: 0.5em; -webkit-text-stroke: 0.15em var(--ink); transform: rotate(-2deg); box-shadow: 0 0.18em 0 var(--ink-2); }
@keyframes letterBounce { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-0.16em) rotate(-4deg); } }
.menu-cast { display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 4vw, 48px); margin: 0; }
.cast-slot { position: relative; }
.cast-mid { align-self: center; }
.burst { position: relative; width: 2.3em; height: 2.3em; display: grid; place-items: center; font-size: clamp(1.5rem, 5.6vmin, 3.2rem); }
.burst::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tomato); border: 0; clip-path: polygon(50% 0%, 61% 17%, 80% 9%, 80% 30%, 100% 35%, 85% 50%, 100% 65%, 80% 70%, 80% 91%, 61% 83%, 50% 100%, 39% 83%, 20% 91%, 20% 70%, 0% 65%, 15% 50%, 0% 35%, 20% 30%, 20% 9%, 39% 17%); animation: spin 14s linear infinite; filter: drop-shadow(0 4px 0 var(--ink-2)); }
.game-row { display: flex; flex-wrap: wrap; gap: clamp(6px, 1.6vmin, 14px); justify-content: center; }
.gbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; width: clamp(66px, 13.5vmin, 96px); padding: 8px 4px 6px; background: var(--cream); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--ink-2); font-family: var(--f-display); font-weight: 800; font-size: clamp(0.72rem, 2.1vmin, 0.95rem); color: var(--ink); line-height: 1; transition: transform 0.14s cubic-bezier(0.3, 1.8, 0.5, 1), box-shadow 0.14s; animation: popIn 0.5s both; animation-delay: calc(0.3s + var(--i) * 70ms); }
.gbtn .ge { font-size: clamp(1.7rem, 5.4vmin, 2.6rem); }
@media (hover: hover) { .gbtn:hover { transform: translateY(-4px) rotate(-3deg) scale(1.06); } }
.gbtn:active { transform: translateY(5px) scale(0.96); box-shadow: 0 1px 0 var(--ink-2); }
.menu-tip { font-size: clamp(0.72rem, 2vmin, 1rem); opacity: 0.95; max-width: 34em; line-height: 1.25; }

/* player pick */
.pick-row { display: flex; gap: var(--gap); justify-content: center; flex-wrap: wrap; }
.pick { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 18px 16px; min-width: min(44vw, 230px); }
.pick.dad { background: #dbe9ff; } .pick.kid { background: #ffe0ee; }
.name-in { width: 100%; max-width: 190px; text-align: center; text-transform: uppercase; padding: 8px 10px; border: 4px solid var(--ink); border-radius: 16px; background: #fff; color: var(--ink); font-family: var(--f-display); font-weight: 800; font-size: 1.4rem; user-select: text; -webkit-user-select: text; }
.swatches { display: flex; gap: 10px; }
.swatch { width: 46px; height: 46px; border-radius: 50%; background: var(--sw); border: 4px solid var(--ink); box-shadow: 0 4px 0 var(--ink-2); transition: transform 0.15s cubic-bezier(0.3, 1.8, 0.5, 1); }
.swatch.on { transform: scale(1.22); outline: 4px solid #fff; outline-offset: 2px; }

/* minigame intro */
.round-chip { font-size: clamp(1rem, 3vmin, 1.5rem); padding: 4px 18px; background: var(--ink); border-radius: 999px; -webkit-text-stroke: 0; text-shadow: none; color: var(--sun); letter-spacing: 0.08em; }
.mg-title { font-size: clamp(1.9rem, 7.4vmin, 4rem); }
.mg-title .e { display: inline-block; animation: bounceY 1s ease-in-out infinite; -webkit-text-stroke: 0; }
.mg-demo { width: min(92vw, 560px); min-height: clamp(110px, 26vh, 230px); display: grid; place-items: center; overflow: hidden; position: relative; background: #fffaf0; }
.mg-hint { font-size: clamp(1.15rem, 3.8vmin, 2rem); }
.mg-controls { display: flex; gap: var(--gap); flex-wrap: wrap; justify-content: center; }
.ctl { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink-2); }
.ctl.dad { background: var(--dad); } .ctl.kid { background: var(--kid); }
.ctl b { font-size: clamp(0.85rem, 2.5vmin, 1.1rem); }

/* countdown */
.count { background: transparent; pointer-events: none !important; }
.count-num { font-size: clamp(7rem, 34vmin, 17rem); color: var(--sun); animation: countPop 0.8s cubic-bezier(0.2, 1.5, 0.4, 1) both !important; filter: drop-shadow(0 12px 18px rgba(20, 8, 60, 0.45)); }
.count-num.go { color: var(--mint); font-size: clamp(5rem, 26vmin, 13rem); }
@keyframes countPop { 0% { transform: scale(2.6) rotate(-14deg); opacity: 0; } 35% { transform: scale(0.92) rotate(3deg); opacity: 1; } 55% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 0.96; } }

/* results */
.res-game { font-size: clamp(1.2rem, 4vmin, 2rem); }
.res-cast { display: flex; gap: clamp(14px, 7vw, 90px); align-items: flex-end; justify-content: center; margin-top: clamp(34px, 7vh, 60px); }
.res-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.res-char { position: relative; }
.res-col.winner .res-char::after { content: ""; position: absolute; left: 50%; bottom: 4%; width: 150%; aspect-ratio: 1; margin-left: -75%; transform: translateY(40%); background: repeating-conic-gradient(rgba(255, 230, 120, 0.55) 0 12deg, transparent 12deg 24deg); border-radius: 50%; z-index: -1; animation: spin 10s linear infinite; mask-image: radial-gradient(circle, #000 25%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%); }
.crown { position: absolute; top: -9%; left: 50%; z-index: 3; font-size: clamp(2rem, 6vmin, 3.4rem); transform: translateX(-50%) rotate(-8deg); animation: crownBob 1s ease-in-out infinite; }
@keyframes crownBob { 50% { transform: translateX(-50%) translateY(-10px) rotate(6deg); } }
.res-name { font-size: clamp(1.1rem, 3.6vmin, 1.8rem); }
.res-pts { display: flex; flex-direction: column; align-items: center; padding: 4px 18px; line-height: 1; border-radius: 22px; }
.res-pts b { font-family: var(--f-display); font-size: clamp(2rem, 7vmin, 3.4rem); font-weight: 800; }
.res-pts span { font-size: clamp(0.75rem, 2vmin, 0.95rem); font-weight: 800; }
.res-pts.big b { font-size: clamp(2.6rem, 10vmin, 5rem); } .res-pts.big span { font-size: 1.6rem; }
.res-total { font-family: var(--f-display); font-weight: 800; color: #fff; font-size: clamp(0.85rem, 2.4vmin, 1.1rem); background: rgba(23, 12, 61, 0.55); padding: 2px 12px; border-radius: 999px; }
.res-title { font-size: clamp(2rem, 8.4vmin, 4.6rem); }
.fin-head { font-size: clamp(1.4rem, 5vmin, 2.6rem); letter-spacing: 0.05em; }
.fin-chaos { font-size: clamp(1rem, 3vmin, 1.5rem); }

/* chaos overlay */
.chaosov { background: radial-gradient(circle at 50% 50%, rgba(255, 93, 77, 0.78), rgba(90, 48, 207, 0.92)); pointer-events: auto; overflow: hidden; }
.chaos-rays { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; background: repeating-conic-gradient(rgba(255, 210, 63, 0.35) 0 9deg, transparent 9deg 18deg); animation: spin 5s linear infinite; z-index: -1; }
.chaos-title { font-size: clamp(2.6rem, 13vmin, 8rem); display: flex; flex-wrap: wrap; justify-content: center; }
.chaos-title span { display: inline-block; animation: chaosLetter 0.5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * 60ms); }
@keyframes chaosLetter { from { transform: translateY(0) rotate(-8deg) scale(1); } to { transform: translateY(-0.12em) rotate(8deg) scale(1.12); } }
.chaos-cast { display: flex; gap: clamp(12px, 8vw, 100px); align-items: flex-end; }
.chaos-sub { font-size: clamp(1.4rem, 5vmin, 2.6rem); }

/* pause + settings */
.pause, .settings { background: rgba(23, 12, 61, 0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.pause-panel, .settings-panel { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 26px 24px; width: min(92vw, 440px); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.1rem, 3.4vmin, 1.5rem); text-align: left; }
.set-row small { display: block; font-family: var(--f-body); font-weight: 700; font-size: 0.72em; opacity: 0.75; line-height: 1.1; }

/* ---------- speech bubbles ---------- */
#bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.bubble { position: absolute; max-width: min(80vw, 380px); transform: translateX(-50%); background: #fff; color: var(--ink); border: 4px solid var(--ink); border-radius: 22px; padding: 8px 16px; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.05rem, 3.4vmin, 1.6rem); text-align: center; line-height: 1.15; box-shadow: 0 6px 0 var(--ink-2); animation: bubbleLife 2.3s both; }
.bubble::after { content: ""; position: absolute; top: -12px; left: calc(50% + var(--tail, 0px)); width: 18px; height: 18px; background: #fff; border-left: 4px solid var(--ink); border-top: 4px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.bubble.sun, .bubble.sun::after { background: var(--sun); }
@keyframes bubbleLife { 0% { transform: translateX(-50%) scale(0.2) rotate(-6deg); opacity: 0; } 9% { transform: translateX(-50%) scale(1.14) rotate(2deg); opacity: 1; } 15% { transform: translateX(-50%) scale(1); } 86% { transform: translateX(-50%) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-14px) scale(0.9); opacity: 0; } }
:root[data-rm="1"] .bubble { animation: bubbleFade 2.3s both !important; animation-duration: 2.3s !important; }
@keyframes bubbleFade { 0% { opacity: 0; transform: translateX(-50%); } 8%, 86% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 0; transform: translateX(-50%); } }

/* ---------- banner ---------- */
#banner { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 45; opacity: 0; transition: opacity 0.25s; }
#banner.show { opacity: 1; }
#banner span { font-size: clamp(3rem, 15vmin, 9rem); text-align: center; line-height: 1; }
#banner.show span { animation: bannerPop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes bannerPop { 0% { transform: scale(0.1) rotate(-20deg); } 60% { transform: scale(1.12) rotate(3deg); } 100% { transform: scale(1) rotate(-2deg); } }

/* ---------- wipe ---------- */
#wipe { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: none; }
#wipe.in, #wipe.out { display: block; }
#wipe.in { pointer-events: auto; }
#wipe::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 20deg at 50% 50%, var(--tomato), var(--sun), var(--mint), var(--sky), var(--grape), var(--kid), var(--tomato)); clip-path: circle(0% at 50% 50%); }
#wipe.in::before { animation: wipeIn 0.42s cubic-bezier(0.6, 0, 0.4, 1) forwards; }
#wipe.out::before { animation: wipeOut 0.43s cubic-bezier(0.6, 0, 0.4, 1) forwards; }
#wipe i { position: absolute; left: 50%; top: 50%; font-style: normal; font-size: 24vmin; transform: translate(-50%, -50%) scale(0); filter: drop-shadow(0 8px 0 rgba(20, 8, 60, 0.4)); }
#wipe.in i { animation: starIn 0.42s cubic-bezier(0.3, 1.6, 0.5, 1) forwards; }
#wipe.out i { animation: starOut 0.43s ease-in forwards; }
@keyframes wipeIn { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(76% at 50% 50%); } }
@keyframes wipeOut { from { clip-path: circle(76% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); } }
@keyframes starIn { from { transform: translate(-50%, -50%) scale(0) rotate(-90deg); } to { transform: translate(-50%, -50%) scale(1) rotate(0); } }
@keyframes starOut { from { transform: translate(-50%, -50%) scale(1) rotate(0); } to { transform: translate(-50%, -50%) scale(0) rotate(120deg); } }

/* ---------- fx canvas ---------- */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 55; }

/* ---------- loading ---------- */
#loading { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 20%, #8566ff, #26146e); transition: opacity 0.6s, transform 0.6s; }
#loading.done { opacity: 0; transform: scale(1.15); pointer-events: none; }
.load-card { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.load-chick { font-size: clamp(4rem, 18vmin, 8rem); animation: loadHop 0.6s ease-in-out infinite; }
@keyframes loadHop { 0%, 100% { transform: translateY(0) scale(1.1, 0.9); } 50% { transform: translateY(-26px) scale(0.95, 1.08) rotate(8deg); } }
.load-title { font-size: clamp(1.6rem, 6vmin, 3rem); }
.load-bar { width: min(60vw, 280px); height: 20px; border: 4px solid var(--ink); border-radius: 999px; background: #3b2a8c; overflow: hidden; }
.load-bar i { display: block; height: 100%; width: 0; background: var(--sun); border-radius: 999px; animation: loadFill 0.9s ease-out forwards; }
@keyframes loadFill { to { width: 100%; } }

/* ---------- small screens ---------- */
@media (max-width: 520px) {
  :root { --hud-h: 88px; }
  .hud-name { display: none; }
  .hud-side { padding: 5px 10px 5px 5px; } .hud-side.kid { padding: 5px 5px 5px 10px; }
  .char.bust { --cw: 52px; }
  .btn-round.sm { width: 44px; height: 44px; font-size: 1.2rem; }
}
@media (max-height: 520px) {
  :root { --hud-h: 80px; }
  .menu-tip { display: none; }
  .char.bust { --cw: 52px; }
  .hud-side { padding-block: 4px; }
  .chaos-label { display: none; }
}
@media (max-height: 420px) { .screen { gap: 6px; padding-block: 8px; } .mg-demo { min-height: 90px; } }

/* ---------- narrow portrait phones ---------- */
@media (max-width: 520px) {
  #hud { padding-inline: 6px; gap: 4px; }
  .hud-side { padding: 4px 8px 4px 4px; gap: 4px; }
  .hud-side.kid { padding: 4px 4px 4px 8px; }
  .hud-score { font-size: 1.25rem; }
  .hud-row { gap: 4px; }
  .hud-mid .btn-round.sm { width: 36px; height: 36px; font-size: 1rem; border-width: 3px; box-shadow: 0 4px 0 var(--ink-2); }
  .hud-timer { font-size: 1.5rem; min-width: 1.6em; }
  .chaos-bar { gap: 2px; padding: 2px; }
  .chaos-bar i { width: 8px; height: 10px; }
  .chaos-label { font-size: 0.6rem; }
  .char.bust { --cw: 40px; }
  #scr-menu { padding-top: 64px; }
  .tools { right: 50%; transform: translateX(50%); }
  .tools .btn-round { width: 48px; height: 48px; }
}