:root {
  color-scheme: light;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --ink: #251b52;
  --muted: #85889b;
  --paper: rgba(251, 252, 255, 0.9);
  --accent: #51449b;
  --accent-deep: #21174f;
  --mint: #42d89a;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; min-height: 100%; margin: 0; overflow: hidden; }

body {
  background: #d8dce9;
  color: var(--ink);
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

button, input, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }

#app { position: relative; width: 100%; height: 100%; isolation: isolate; }
@supports (height: 100dvh) { #app { height: 100dvh; } }
#game-canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.hud {
  position: fixed;
  z-index: 5;
  inset: max(30px, calc(env(safe-area-inset-top) + 15px)) clamp(20px, 4vw, 48px) auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.score-wrap { display: flex; min-width: 110px; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--accent-deep); }
#score { font-size: clamp(54px, 8vw, 78px); font-weight: 900; letter-spacing: -.045em; line-height: .86; text-shadow: 0 7px 18px rgba(54,43,114,.13); }
.best-line { display: flex; align-items: center; gap: 7px; color: #a9aab8; font-size: clamp(18px, 2.5vw, 25px); font-weight: 800; line-height: 1; }
.crown-icon { color: #56d998; font-size: 25px; line-height: 1; transform: translateY(-1px); }
.combo { margin-top: 4px; padding: 5px 9px; border-radius: 99px; background: rgba(255,255,255,.52); color: var(--accent); font-weight: 800; font-size: 12px; box-shadow: 0 8px 22px rgba(56,49,104,.08); backdrop-filter: blur(12px); }
.game-brand { position: absolute; left: 50%; top: 2px; display: grid; justify-items: center; transform: translateX(-50%); color: var(--accent-deep); }
.game-brand strong { position: relative; font-size: clamp(31px, 5vw, 48px); font-weight: 900; letter-spacing: -.055em; line-height: 1; text-shadow: 0 8px 22px rgba(48,38,103,.08); }
.game-brand strong i { position: absolute; width: 10px; height: 10px; left: 2px; top: -4px; border-radius: 50%; background: var(--mint); box-shadow: 0 4px 10px rgba(48,207,145,.32); }
.game-brand > span { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: #c3c5d1; font-size: 8px; letter-spacing: 4px; }
.game-brand > span b { width: 30px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #c9cbd5); }
.game-brand > span b:last-child { background: linear-gradient(90deg, #c9cbd5, transparent); }
.game-brand > span em { font-style: normal; }
.room-status { position: absolute; left: 50%; top: 62px; max-width: 54vw; transform: translateX(-50%); padding: 8px 13px; border-radius: 99px; background: rgba(255,255,255,.72); font-size: 13px; font-weight: 700; backdrop-filter: blur(14px); box-shadow: 0 9px 28px rgba(49,52,81,.08); }
.hud-actions { display: flex; gap: clamp(8px, 1.5vw, 14px); pointer-events: auto; }
.icon-button {
  position: relative; display: grid; width: clamp(48px, 6vw, 64px); height: clamp(48px, 6vw, 64px); place-items: center;
  border: 1px solid rgba(255,255,255,.75); border-radius: 19px;
  background: rgba(255,255,255,.6); color: var(--accent-deep);
  box-shadow: 0 16px 34px rgba(52,55,92,.11), inset 0 1px rgba(255,255,255,.9); backdrop-filter: blur(14px);
  transition: transform .16s ease, background .16s ease;
}
.icon-button:active { transform: translateY(2px) scale(.97); background: rgba(255,255,255,.78); }
.icon-button svg { width: 65%; height: 65%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.online-dot { position: absolute; z-index: 1; right: -2px; top: -4px; width: 15px; height: 15px; border: 3px solid rgba(250,251,255,.95); border-radius: 50%; background: var(--mint); box-shadow: 0 4px 10px rgba(29,197,132,.26); }
.sound-button.is-muted .online-dot { background: #b8bac6; box-shadow: none; }

.screen {
  position: fixed; z-index: 10; inset: 0; display: none;
  align-items: center; justify-content: center; flex-direction: column;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
}
.screen.visible { display: flex; }
#start-screen { justify-content: flex-end; background: transparent; }
#start-screen .brand-mark, #start-screen > .eyebrow, #start-screen > h1 { display: none; }

.brand-mark { display: flex; gap: 7px; align-items: flex-end; height: 58px; margin-bottom: 18px; transform: skewY(-13deg); }
.brand-mark i { display: block; width: 24px; border-radius: 5px; background: linear-gradient(145deg, #7369c1, #302a72); box-shadow: 0 12px 24px rgba(52,45,118,.2); }
.brand-mark i:nth-child(1) { height: 28px; }
.brand-mark i:nth-child(2) { height: 42px; }
.brand-mark i:nth-child(3) { height: 56px; }
.eyebrow { margin: 0 0 8px; color: #777a93; font-size: 11px; font-weight: 800; letter-spacing: .23em; }
h1 { margin: 0; font-size: clamp(58px, 15vw, 92px); letter-spacing: .08em; line-height: 1; }
h2 { margin: 0 0 24px; font-size: 32px; }
.subtitle { margin: 0 0 16px; padding: 8px 14px; border-radius: 99px; background: rgba(255,255,255,.46); color: #76798d; font-size: 13px; font-weight: 700; letter-spacing: .06em; backdrop-filter: blur(10px); }
.main-actions { width: min(100%, 330px); display: grid; gap: 12px; }
.main-actions.compact { margin-top: 26px; }
.primary, .secondary {
  width: 100%; min-height: 54px; padding: 13px 20px; border-radius: 18px; font-weight: 800; border: 0;
  transition: transform .14s ease, box-shadow .14s ease;
}
.primary { background: linear-gradient(145deg, #695fc1, #382c86); color: white; box-shadow: 0 14px 30px rgba(54,43,133,.28), inset 0 1px rgba(255,255,255,.2); }
.secondary { background: rgba(255,255,255,.72); color: var(--ink); box-shadow: 0 12px 28px rgba(65,69,101,.1), inset 0 0 0 1px rgba(255,255,255,.72); backdrop-filter: blur(14px); }
.primary:active, .secondary:active { transform: translateY(2px) scale(.99); }
.secondary small { margin-left: 5px; color: var(--muted); font-weight: 600; }
.text-button { border: 0; color: #696c83; background: transparent; font-weight: 700; padding: 15px; }
.tip { margin: 5px 0 max(2px, env(safe-area-inset-bottom)); color: #85889b; font-size: 12px; }
.tip span { color: var(--mint); }

.panel-screen { background: rgba(48,48,76,.2); backdrop-filter: blur(16px); }
.panel { position: relative; width: min(100%, 420px); max-height: min(84vh, 720px); overflow: auto; padding: 34px; border: 1px solid rgba(255,255,255,.7); border-radius: 30px; background: var(--paper); box-shadow: 0 28px 80px rgba(40,42,62,.22), inset 0 1px rgba(255,255,255,.85); text-align: center; }
.small-panel { max-width: 350px; }
.small-panel .primary { margin-top: 8px; }
.close-button { position: absolute; right: 18px; top: 16px; width: 38px; height: 38px; border: 0; background: transparent; color: #7b7e90; font-size: 30px; line-height: 1; }
.final-score { display: block; font-size: 86px; line-height: 1; letter-spacing: .03em; }
.result-message { min-height: 24px; color: var(--accent); font-weight: 800; }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 24px; }
.result-stats div { padding: 13px 6px; border-radius: 15px; background: rgba(100,99,140,.08); }
.result-stats span { display: block; color: var(--muted); font-size: 11px; }
.result-stats b { display: block; margin-top: 4px; font-size: 20px; }

.charge { position: fixed; z-index: 6; left: 50%; bottom: max(32px, calc(env(safe-area-inset-bottom) + 18px)); width: min(54vw,240px); height: 7px; transform: translateX(-50%); border-radius: 99px; background: rgba(255,255,255,.45); opacity: 0; overflow: hidden; transition: opacity .15s; }
.charge.visible { opacity: 1; }
.charge i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #675dbb, #ff8560); }
.special-progress { position: fixed; z-index: 6; left: 50%; bottom: max(34px, calc(env(safe-area-inset-bottom) + 20px)); width: 170px; transform: translateX(-50%); color: #53556c; text-align: center; font-size: 12px; font-weight: 800; }
.special-progress b { display: block; height: 5px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.58); }
.special-progress i { display: block; width: 0; height: 100%; background: var(--accent); }
.turn-hint { position: fixed; z-index: 6; left: 50%; bottom: max(32px, calc(env(safe-area-inset-bottom) + 18px)); transform: translateX(-50%); padding: 10px 16px; border-radius: 99px; background: rgba(255,255,255,.75); color: #55566b; font-size: 13px; font-weight: 800; backdrop-filter: blur(10px); }
.toast { position: fixed; z-index: 30; left: 50%; top: 18%; transform: translate(-50%,-10px); padding: 10px 16px; border-radius: 99px; background: rgba(40,41,57,.82); color: white; font-size: 13px; font-weight: 700; opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.boot-error { position: fixed; z-index: 50; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); display: none; transform: translateX(-50%); width: min(calc(100% - 32px), 420px); padding: 12px 16px; border-radius: 14px; background: #8f3340; color: #fff; text-align: center; font-size: 13px; font-weight: 700; box-shadow: 0 10px 30px rgba(65,20,28,.25); }
.boot-error.visible { display: block; }
.hidden { display: none !important; }

.leaderboard-list, .player-list { list-style: none; padding: 0; margin: 4px 0 0; text-align: left; }
.leaderboard-list li, .player-list li { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; min-height: 48px; padding: 7px 11px; border-bottom: 1px solid rgba(70,71,91,.08); }
.leaderboard-list li:nth-child(-n+3) .rank { color: #ef7a4c; }
.rank { color: #888a9c; font-weight: 900; }
.leaderboard-list strong { font-size: 20px; }
.leaderboard-list .loading { display: block; text-align: center; color: var(--muted); }
.field { display: block; margin-bottom: 16px; color: var(--muted); text-align: left; font-size: 12px; font-weight: 700; }
.field input, .field select, .join-row input { display: block; width: 100%; height: 50px; margin-top: 7px; padding: 0 15px; border: 1px solid rgba(70,71,91,.12); border-radius: 14px; outline: none; background: rgba(255,255,255,.72); color: var(--ink); }
.divider { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: #989aaa; font-size: 12px; }
.divider::before, .divider::after { content: ''; height: 1px; flex: 1; background: rgba(70,71,91,.1); }
.join-row { display: grid; grid-template-columns: 1fr 92px; gap: 9px; }
.join-row input { margin: 0; text-transform: uppercase; text-align: center; letter-spacing: .18em; font-weight: 900; }
.join-row .secondary { min-height: 50px; }
.room-code-label { color: var(--muted); font-size: 12px; }
.room-code-label button { display: block; margin: 4px auto 16px; border: 0; background: transparent; color: var(--ink); font-size: 34px; font-weight: 900; letter-spacing: .18em; }
.player-list li { grid-template-columns: 1fr auto; }
.player-list small { color: var(--muted); }
.lobby-note { color: var(--muted); font-size: 13px; }

/* PepLive voice-room layer */
.hud { inset: max(22px, calc(env(safe-area-inset-top) + 12px)) 22px auto; align-items: flex-start; }
.game-brand { position: relative; left: auto; top: auto; display: flex; align-items: flex-start; flex-direction: column; transform: none; color: white; }
.game-brand strong { position: relative; font-size: clamp(42px, 5.4vw, 64px); font-style: italic; font-weight: 950; letter-spacing: -.075em; line-height: .92; color: #fff; -webkit-text-stroke: 2px #462073; text-shadow: 0 5px 0 #2c1553, 0 10px 24px rgba(40,27,89,.3); }
.game-brand strong i { position: absolute; left: auto; right: -10px; top: -6px; width: auto; height: auto; background: none; color: #fff; font-size: 17px; font-style: normal; box-shadow: none; -webkit-text-stroke: 1px #462073; }
.game-brand small { margin-top: 12px; color: white; font-size: clamp(11px, 1.45vw, 17px); font-weight: 900; letter-spacing: .04em; text-shadow: 0 2px 0 #352158, 0 4px 12px rgba(33,27,70,.35); }
.room-dock { width: clamp(310px, 43vw, 438px); overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 25px; background: rgba(45,48,91,.56); color: white; box-shadow: 0 18px 46px rgba(42,40,86,.17), inset 0 1px rgba(255,255,255,.12); backdrop-filter: blur(18px); pointer-events: auto; }
.room-dock-title { display: flex; align-items: center; justify-content: space-between; min-height: 53px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.room-dock-title strong { font-size: 20px; }
.room-dock-title > span { color: rgba(255,255,255,.86); font-weight: 800; }
.room-dock-body { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 8px 10px 8px 16px; }
.room-avatars { display: flex; min-width: 0; align-items: center; }
.avatar { display: inline-grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; overflow: hidden; border: 2px solid #c58bff; border-radius: 50%; background: linear-gradient(145deg,#8867cf,#382768); color: white; font-style: normal; font-size: 13px; font-weight: 900; box-shadow: 0 4px 12px rgba(30,25,68,.25); }
.room-avatars .avatar + .avatar { margin-left: -5px; }
.avatar.a1 { border-color: #8ab3ff; background: linear-gradient(145deg,#6ed7c1,#28759c); }
.avatar.a2 { border-color: #ec9dff; background: linear-gradient(145deg,#ef98bc,#87469f); }
.avatar.a3 { border-color: #ffd65c; background: linear-gradient(145deg,#ffb85f,#d94e5f); }
.avatar.a4 { border-color: #7de9e7; background: linear-gradient(145deg,#64bace,#335590); }
.avatar.is-eliminated { filter: grayscale(1); opacity: .42; }
.hud-actions { display: flex; gap: 7px; }
.hud-actions .icon-button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(30,31,73,.25); color: white; font-size: 19px; box-shadow: inset 0 1px rgba(255,255,255,.08); backdrop-filter: none; }
.hud-actions .sound-button.is-muted { opacity: .48; }
.room-status { top: 128px; color: white; background: rgba(45,48,91,.62); }

.glass-card { position: fixed; z-index: 6; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: rgba(43,45,80,.64); color: white; box-shadow: 0 18px 48px rgba(40,39,80,.18), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(16px); transition: opacity .24s ease, transform .24s ease; }
.score-card { left: 22px; top: max(169px, calc(env(safe-area-inset-top) + 145px)); display: flex; width: 184px; padding: 16px 22px; flex-direction: column; align-items: flex-start; pointer-events: none; }
.score-card > span:first-child { color: rgba(255,255,255,.7); font-size: 15px; }
.score-card #score { margin: 7px 0 11px; color: white; font-size: 58px; line-height: .9; text-shadow: 0 3px 0 rgba(25,20,59,.35), 0 10px 24px rgba(25,20,59,.25); }
.score-card .combo { width: 100%; margin: 0; padding: 10px 0 8px; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0; background: none; color: #ffd73e; font-size: 17px; box-shadow: none; backdrop-filter: none; }
.score-card > small { color: rgba(255,255,255,.76); font-size: 13px; }
.score-card .best-line { margin-top: 10px; color: rgba(255,255,255,.56); font-size: 12px; }
.score-card .crown-icon { font-size: 17px; }

.mini-ranking { left: 22px; top: max(482px, calc(env(safe-area-inset-top) + 458px)); width: 206px; padding: 14px 0; overflow: hidden; }
.mini-ranking h2 { margin: 0; padding: 0 16px 12px; color: rgba(255,255,255,.86); font-size: 15px; text-align: center; }
.mini-ranking ol { max-height: 285px; margin: 0; padding: 0; overflow: hidden; list-style: none; }
.mini-ranking li { display: grid; grid-template-columns: 24px 31px 1fr auto; align-items: center; min-height: 42px; padding: 5px 14px; color: rgba(255,255,255,.88); font-size: 13px; }
.mini-ranking li:first-child { background: linear-gradient(90deg,rgba(169,75,255,.5),rgba(110,78,207,.62)); }
.mini-ranking li > span { color: rgba(255,255,255,.7); }
.mini-ranking li > .avatar { width: 26px; height: 26px; border-width: 1px; font-size: 9px; }
.mini-ranking li > b { min-width: 0; padding-left: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-ranking li > strong { padding-left: 7px; }

.combo-burst { position: fixed; z-index: 8; right: clamp(28px, 8vw, 88px); top: 190px; display: grid; justify-items: center; color: #ff7615; pointer-events: none; opacity: 0; transform: translateY(8px) rotate(-7deg) scale(.8); filter: drop-shadow(0 3px 0 #fff) drop-shadow(0 8px 12px rgba(111,68,9,.22)); }
.combo-burst.show { animation: combo-pop .95s cubic-bezier(.2,.9,.2,1); }
.combo-burst > span { font-size: clamp(22px,3vw,36px); font-weight: 950; font-style: italic; }
.combo-burst > strong { font-size: clamp(38px,5vw,64px); line-height: .95; }
.combo-burst > b { margin-top: 10px; padding: 7px 18px; border-radius: 99px; background: rgba(50,50,88,.55); color: #ffdf3f; font-size: 17px; transform: rotate(-2deg); }
@keyframes combo-pop { 0%{opacity:0;transform:translateY(12px) rotate(-9deg) scale(.55)} 18%,72%{opacity:1;transform:translateY(0) rotate(-7deg) scale(1)} 100%{opacity:0;transform:translateY(-10px) rotate(-5deg) scale(1.08)} }

.chat-layer { position: fixed; z-index: 7; left: 22px; bottom: max(155px, calc(env(safe-area-inset-bottom) + 138px)); width: min(330px, 33vw); pointer-events: none; transition: opacity .24s ease, transform .24s ease; }
.chat-list { display: grid; gap: 6px; margin-bottom: 10px; }
.chat-list p { width: fit-content; max-width: 100%; margin: 0; padding: 8px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(38,40,75,.57); color: white; font-size: 14px; box-shadow: 0 8px 20px rgba(37,36,77,.12); backdrop-filter: blur(12px); }
.chat-list b { color: #bd8dff; }.chat-list b.mint{color:#7cf0aa}.chat-list b.pink{color:#ff91c8}.chat-list b.orange{color:#ffd05a}
.chat-form { display: grid; grid-template-columns: 1fr 42px; height: 48px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(36,38,72,.62); pointer-events: auto; backdrop-filter: blur(15px); }
.chat-form input { min-width: 0; border: 0; outline: 0; padding: 0 8px 0 16px; background: transparent; color: white; user-select: text; }
.chat-form input::placeholder { color: rgba(255,255,255,.5); }
.chat-form button { border: 0; background: transparent; color: rgba(255,255,255,.75); font-size: 24px; }

.interaction-bar { position: fixed; z-index: 7; right: 22px; bottom: max(18px, env(safe-area-inset-bottom)); left: 22px; display: flex; align-items: stretch; gap: 10px; height: 108px; pointer-events: none; transition: opacity .24s ease, transform .24s ease; }
.interaction-bar button { pointer-events: auto; }
.social-action { position: relative; display: grid; width: 100px; flex: 0 0 100px; place-items: center; padding: 10px 8px 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: rgba(42,44,80,.67); color: white; box-shadow: 0 14px 34px rgba(35,34,75,.18), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(16px); }
.social-action > span { font-size: 34px; line-height: 1; }.social-action > b { font-size: 13px; }.social-action > small { position: absolute; right: 9px; top: 8px; min-width: 20px; padding: 2px 5px; border-radius: 10px; background: #ff4f96; font-size: 10px; }
.social-action.is-on::after { content:''; position:absolute; right:14px; top:13px; width:8px; height:8px; border-radius:50%; background:#4be29b; box-shadow:0 0 9px #4be29b; }
.gift-tray { display: flex; min-width: 0; flex: 1; gap: 3px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 25px; background: rgba(37,39,72,.7); box-shadow: 0 14px 34px rgba(35,34,75,.18); backdrop-filter: blur(17px); }
.gift-tray button { display: grid; min-width: 74px; flex: 1; place-items: center; border: 0; border-radius: 18px; background: transparent; color: white; }
.gift-tray button:hover,.gift-tray button:focus-visible { background: rgba(152,85,226,.24); }
.gift-tray span { font-size: 33px; line-height: 1; filter: drop-shadow(0 5px 8px rgba(16,13,48,.2)); }.gift-tray b { font-size: 12px; }.gift-tray small { color: #ffd766; font-size: 10px; }
.gift-tray.attention { animation: gift-attention .8s ease both; }
.world-meter { position: relative; display: grid; width: 240px; flex: 0 0 240px; grid-template-columns: 1fr 58px; grid-template-rows: 1fr 9px 16px; padding: 15px 14px 8px; overflow: hidden; border: 1px solid rgba(205,142,255,.45); border-radius: 24px; background: linear-gradient(145deg,rgba(111,65,205,.9),rgba(76,37,149,.9)); color: white; box-shadow: 0 15px 38px rgba(67,40,142,.28); }
.world-meter > span { display: flex; flex-direction: column; }.world-meter > span b { font-size: 14px; }.world-meter > span small { margin-top: 4px; color: rgba(255,255,255,.52); font-size: 9px; }.world-meter > strong { grid-row: 1/3; grid-column: 2; font-size: 39px; text-align: center; }
.world-meter > i { grid-column: 1/3; display: block; height: 8px; overflow: hidden; border-radius: 8px; background: rgba(35,20,83,.45); }.world-meter > i em { display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffd23f,#ffef9b);transition:width .35s ease;}
.world-meter > small { grid-column: 1/3; color: rgba(255,255,255,.62); font-size: 9px; text-align: right; }
.gift-effect { position: fixed; z-index: 40; left: 50%; top: 45%; display: grid; justify-items: center; color: white; pointer-events: none; opacity: 0; transform: translate(-50%,-50%) scale(.6); text-shadow: 0 4px 18px rgba(37,20,82,.55); }
.gift-effect.show { animation: gift-burst 1.7s cubic-bezier(.16,.85,.28,1); }.gift-effect span { font-size: clamp(70px,12vw,130px); filter: drop-shadow(0 0 28px rgba(226,154,255,.7)); }.gift-effect b { font-size: 18px; }
@keyframes gift-burst { 0%{opacity:0;transform:translate(-50%,-40%) scale(.35) rotate(-12deg)} 20%,72%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)} 100%{opacity:0;transform:translate(-50%,-68%) scale(1.22)} }
@keyframes gift-attention { 35%{box-shadow:0 0 0 5px rgba(198,109,255,.25),0 16px 42px rgba(35,34,75,.25);transform:translateY(-5px)} }

.score-card,.mini-ranking,.chat-layer,.interaction-bar { opacity: 0; transform: translateY(8px); }
#app.social-active .score-card,#app.social-active .mini-ranking,#app.social-active .chat-layer,#app.social-active .interaction-bar { opacity: 1; transform: translateY(0); }
#app.social-active .score-card,#app.social-active .mini-ranking { pointer-events: auto; }

@media (max-width: 430px) {
  .screen { padding-left: 18px; padding-right: 18px; }
  .panel { width: 100%; max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 30px); padding: 28px 20px; border-radius: 25px; }
  .hud { inset: max(12px, calc(env(safe-area-inset-top) + 6px)) 10px auto; gap: 8px; }
  .game-brand strong { font-size: 29px; -webkit-text-stroke-width: 1px; text-shadow: 0 3px 0 #2c1553,0 7px 18px rgba(40,27,89,.23); }
  .game-brand strong i { right: -7px; top: -5px; font-size: 10px; }
  .game-brand small { max-width: 125px; margin-top: 6px; font-size: 8px; white-space: nowrap; }
  .room-dock { width: min(57vw,220px); border-radius: 16px; }
  .room-dock-title { min-height: 32px; padding: 0 10px; }.room-dock-title strong{font-size:12px}.room-dock-title>span{font-size:10px}
  .room-dock-body { min-height: 42px; padding: 4px 5px 4px 8px; }
  .room-avatars .avatar { width: 27px; height: 27px; font-size: 8px; }.room-avatars .avatar:nth-child(n+4){display:none}
  .hud-actions { gap:3px }.hud-actions .icon-button{width:28px;height:28px;font-size:12px}.hud-actions .icon-button:nth-child(n+3){display:none}
  .room-status { top: 82px; font-size: 10px; }
  .score-card { left: 10px; top: max(96px,calc(env(safe-area-inset-top) + 88px)); width: 116px; padding: 10px 12px; border-radius: 17px; }
  .score-card > span:first-child { font-size: 10px; }.score-card #score{margin:4px 0 7px;font-size:38px}.score-card .combo{padding:7px 0 5px;font-size:11px}.score-card>small{font-size:9px}.score-card .best-line{margin-top:5px;font-size:9px}.score-card .crown-icon{font-size:12px}
  .mini-ranking { display: none; }
  .combo-burst { right: 14px; top: 122px; }.combo-burst>span{font-size:18px}.combo-burst>strong{font-size:34px}.combo-burst>b{margin-top:4px;padding:5px 10px;font-size:11px}
  .chat-layer { left: 10px; bottom: max(112px,calc(env(safe-area-inset-bottom) + 102px)); width: min(255px,70vw); }.chat-list{gap:4px;margin-bottom:6px}.chat-list p{padding:5px 10px;font-size:10px}.chat-form{height:36px;grid-template-columns:1fr 34px}.chat-form input{padding-left:11px;font-size:11px}.chat-form button{font-size:18px}
  .interaction-bar { right: 7px; bottom: max(7px,env(safe-area-inset-bottom)); left: 7px; gap: 5px; height: 92px; overflow-x: auto; scrollbar-width: none; }.interaction-bar::-webkit-scrollbar{display:none}
  .social-action { width: 65px; flex-basis: 65px; padding: 7px 5px; border-radius: 18px; }.social-action>span{font-size:25px}.social-action>b{font-size:10px}.social-action>small{right:4px;top:4px;font-size:8px}
  .gift-tray { min-width: 286px; flex: 0 0 286px; padding: 6px; border-radius: 19px; }.gift-tray button{min-width:66px}.gift-tray span{font-size:25px}.gift-tray b{font-size:9px}.gift-tray small{font-size:8px}
  .world-meter { width: 170px; flex-basis: 170px; grid-template-columns:1fr 38px;padding:10px 10px 6px;border-radius:18px}.world-meter>span b{font-size:11px}.world-meter>strong{font-size:28px}.world-meter>span small,.world-meter>small{font-size:7px}
  .brand-mark { height: 49px; margin-bottom: 14px; }
  .brand-mark i { width: 20px; }
  .brand-mark i:nth-child(1) { height: 24px; }
  .brand-mark i:nth-child(2) { height: 36px; }
  .brand-mark i:nth-child(3) { height: 48px; }
  h1 { font-size: 62px; }
  #start-screen { padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px)); }
  .subtitle { margin: 0 0 13px; font-size: 12px; }
  .main-actions { max-width: 310px; }
  .final-score { font-size: 74px; }
  .result-stats span { font-size: 10px; }
  .result-stats b { font-size: 18px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  #start-screen { justify-content: center; padding: 14px 24px; }
  .brand-mark { display: none; }
  #start-screen .eyebrow { display: none; }
  h1 { font-size: 44px; }
  .subtitle { margin: 8px 0 14px; }
  .main-actions { grid-template-columns: 1fr 1fr; width: min(78vw, 580px); }
  .primary, .secondary { min-height: 46px; border-radius: 14px; }
  .tip { display: none; }
  .game-brand > span { display: none; }
  .game-brand strong { font-size: 28px; }
  #score { font-size: 42px; }
  .best-line { font-size: 14px; }
  .icon-button { width: 42px; height: 42px; border-radius: 14px; }
  .panel { max-height: calc(100dvh - 20px); padding-top: 24px; padding-bottom: 24px; }
  .result-panel { width: min(88vw, 620px); }
  .result-panel .main-actions { grid-template-columns: 1fr 1fr; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}