:root { --bg: #081842; --blue: #5fc9ff; --pink: #ff5b9e; --cell: clamp(35px, 10vw, 61px); }
* { box-sizing: border-box; }
body {
  min-height: 100dvh; margin: 0; display: grid; place-items: center; overflow-x: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) max(12px, env(safe-area-inset-bottom)) env(safe-area-inset-left);
  color: #fff; font-family: "Trebuchet MS", system-ui, sans-serif;
  background: radial-gradient(circle at 50% 42%, #233c91 0, #121f61 27%, #080f34 70%, #03081d 100%);
}
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .35; will-change: opacity; }
body::before { background: radial-gradient(circle at 7% 28%, #fff 0 1px, transparent 2px), radial-gradient(circle at 82% 18%, #c8e9ff 0 1px, transparent 2px); background-size: 260px 230px, 240px 210px; }
body::after { background: radial-gradient(circle at 50% 52%, rgba(91, 221, 255, .18), transparent 18%); filter: blur(12px); }
.game { position: relative; z-index: 1; width: min(96vw, 600px); min-height: 100svh; padding: 20px 16px 15px; contain: layout paint; }
.world-rank { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.rank-card { min-width: 0; padding: 7px 8px; border: 1px solid #536db9; border-radius: 10px; background: #101d58cc; }
.rank-card small, .rank-card b, .rank-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-card small { color: #9cb7f5; font-size: 8px; font-weight: 900; }
.rank-card b { margin-top: 2px; color: #fff; font-size: 11px; }
.rank-card span { margin-top: 2px; color: #6fe4ff; font-size: 10px; }
.player-rank-card { border-color: #ffd45b; background: #503d8499; }
.player-rank-card b { color: #ffd45b; font-size: 14px; }
.hud { display: flex; align-items: center; gap: 7px; }
.hud-pill { min-width: 100px; height: 39px; display: flex; align-items: center; justify-content: space-around; border: 1px solid #617cca; border-radius: 12px; background: linear-gradient(#354d99, #172867); transform: skew(-5deg); }
.hud-pill span { font-size: 8px; font-weight: 900; font-style: italic; color: #e1ecff; }
.hud-pill strong { color: #fff; font-size: 17px; text-shadow: 0 2px #28316c; }
.moves-pill { min-width: 76px; flex-direction: column; line-height: 13px; }
.stars { height: 32px; flex: 1; display: flex; justify-content: center; align-items: center; gap: 5px; border: 1px solid #5564b2; border-radius: 12px; background: linear-gradient(#2b2f78, #151b53); }
.stars i { color: #ffd44d; font-size: 18px; font-style: normal; }
.stars i:last-child { color: #30376d; }
.round-btn, .restart { border: 2px solid #738ce0; color: #fff; background: #283886; border-radius: 13px; cursor: pointer; }
.round-btn { width: 39px; height: 39px; font-size: 21px; }
.profile-btn { color: #8ee8ff; }
.level-line { display: flex; align-items: end; justify-content: space-between; margin: 14px 8px 10px; text-shadow: 0 2px #10194c; }
.task-progress { margin: 0 8px 10px; padding: 8px 10px; border: 1px solid #6b80cf; border-radius: 10px; background: #17266399; }
.task-progress-head { display: flex; justify-content: space-between; gap: 10px; color: #d9e5ff; font-size: 10px; font-weight: 800; }
.task-progress-head b { color: #ffe06a; }
.task-track { height: 6px; margin-top: 6px; overflow: hidden; border-radius: 8px; background: #080f35; }
.task-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #54dfff, #ffd45b); transition: width .35s ease; }
.level-line b { display: block; font-size: 17px; }
.level-line span { color: #b7c8ff; font-size: 12px; }
.resources { display: flex; gap: 12px; color: #fff; font-size: 14px; }
.resources span:first-child { color: #ff668e; }
.resources span:last-child { color: #5ee2ff; }
.play-area { display: flex; align-items: center; justify-content: center; gap: 9px; }
.power-rail { display: flex; flex-direction: column; gap: 8px; }
.power { position: relative; width: 46px; height: 51px; border: 2px solid #78dfff; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #293999, #281b69); cursor: pointer; font-size: 21px; }
.power.power-active { border-color: #ffe06a; background: linear-gradient(145deg, #80652a, #49316d); transform: scale(1.06); }
.power small { position: absolute; right: 4px; top: 2px; color: #ffe26b; font-size: 10px; }
.power span { display: block; margin-top: 3px; color: #b9d7ff; font-size: 7px; }
.ad-power { border-color: #ffcf62; color: #ffe367; }
.board-frame { position: relative; padding: 9px; border: 2px solid #687dda; border-radius: 20px; background: linear-gradient(145deg, #1b2670dd, #0c194bfa); contain: layout paint; transform: translateZ(0); }
.board { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(8, var(--cell)); grid-template-rows: repeat(8, var(--cell)); gap: 4px; touch-action: none; overscroll-behavior: contain; transform: translateZ(0); }
.board-glow { display: none; }
.tile { position: relative; width: var(--cell); height: var(--cell); border: 0; border-radius: 15px; cursor: grab; touch-action: none; will-change: auto; transform: translateZ(0); transition: transform .12s; box-shadow: inset 0 2px 3px #fff6, inset 0 -5px 6px #0003, 0 1px 3px #0006; }
.tile:hover, .tile.selected { transform: translateZ(0) scale(1.05); filter: brightness(1.12); z-index: 3; }
.tile.dragging { transform: translateZ(0) scale(1.12) translateY(-4px); filter: brightness(1.25); z-index: 8; cursor: grabbing; box-shadow: 0 0 0 2px #fff, 0 0 14px #75eaff; }
.tile.drop-target { transform: translateZ(0) scale(1.06); outline: 3px dashed #ffe16a; outline-offset: 2px; z-index: 7; }
.tile.drop-target::before { content: "↔"; top: 50%; left: 50%; width: auto; height: auto; background: none; color: #fff; font-size: 18px; font-weight: 900; transform: translate(-50%, -50%); }
.tile::before { content: ""; position: absolute; top: 9%; left: 15%; width: 31%; height: 18%; border-radius: 50%; background: #fff7; }
.tile.red { background: linear-gradient(145deg, #fa9ba8, #e73f77 53%, #a51e65); }
.tile.orange { background: linear-gradient(145deg, #ffc27e, #f47755 53%, #ad3d68); }
.tile.yellow { background: linear-gradient(145deg, #fff49d, #eacb48 53%, #b17833); }
.tile.green { background: linear-gradient(145deg, #92edc3, #41bbad 53%, #287c9e); }
.tile.blue { background: linear-gradient(145deg, #6ac8ff, #2e6fc7 53%, #0f2a5e); }
.tile.purple { background: linear-gradient(145deg, #d5a6ff, #9d60d4 53%, #5b348f); }
.fruit-icon {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: clamp(1.7rem, 7vw, 3.1rem);
  line-height: 1;
  transform: translateY(-1px) translateZ(0);
  user-select: none;
}
.tile.red .fruit-icon,
.tile.green .fruit-icon { text-shadow: 0 0 6px #fff4; }
.tile.orange .fruit-icon { transform: translateY(-1px) scale(1.04) translateZ(0); }
.tile.yellow .fruit-icon { transform: translateY(-1px) scale(1.08) translateZ(0); }
.tile.blue .fruit-icon { transform: translateY(-1px) scale(1.08) translateZ(0); }
.tile.purple .fruit-icon { transform: translateY(-1px) scale(1.06) translateZ(0); }
.tile.special-line-h::after, .tile.special-line-v::after { content: "☆"; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border-radius: 13px; background: transparent; color: rgba(255,255,255,.9); font-family: Arial,sans-serif; font-size: clamp(25px,7vw,35px); font-weight: 400; line-height: 1; text-shadow: 0 0 3px #fff, 0 0 9px #fff, 0 0 17px #82faff; filter: drop-shadow(0 1px 2px #122b47); }
.tile.special-line-h, .tile.special-line-v { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 10px, transparent 10px 20px), linear-gradient(145deg, var(--stripe-a, #fff), var(--stripe-b, #888)) !important; }
.tile.special-line-h .fruit-icon, .tile.special-line-v .fruit-icon { z-index: 1; opacity: .72; filter: saturate(.9) brightness(.9); }
.tile.red.special-line-h, .tile.red.special-line-v { --stripe-a: #ff8fa3; --stripe-b: #a51e65; }
.tile.orange.special-line-h, .tile.orange.special-line-v { --stripe-a: #ffd2a6; --stripe-b: #ad3d68; }
.tile.yellow.special-line-h, .tile.yellow.special-line-v { --stripe-a: #fff9b0; --stripe-b: #b17833; }
.tile.green.special-line-h, .tile.green.special-line-v { --stripe-a: #b6f5d8; --stripe-b: #287c9e; }
.tile.blue.special-line-h, .tile.blue.special-line-v { --stripe-a: #bfe8ff; --stripe-b: #3150a7; }
.tile.purple.special-line-h, .tile.purple.special-line-v { --stripe-a: #e6c8ff; --stripe-b: #5b348f; }
.tile.special-bomb { border-radius: 13px; }
.tile.special-bomb::after { content: "💣"; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: #fff; font-size: 18px; text-shadow: 0 0 4px #000, 0 0 6px #fff; opacity: .78; animation: bomb-pulse 1.4s ease-in-out infinite; }
.tile.special-line-h, .tile.special-line-v, .tile.special-bomb, .tile.special-color { outline: 2px dotted #000; outline-offset: 1px; box-shadow: inset 0 2px 3px #fff6, inset 0 -5px 6px #0003, 0 1px 3px #0006, 0 0 10px #fff8; }
.tile.special-line-h.orange, .tile.special-line-v.orange, .tile.special-bomb.orange { outline-color: #111; }
.tile.special-line-h.yellow, .tile.special-line-v.yellow, .tile.special-bomb.yellow { outline-color: #111; }
.tile.special-bomb .fruit-icon { opacity: .52; filter: saturate(.9) brightness(.95); }
.laser-h, .laser-v { position: absolute; z-index: 4; pointer-events: none; background: linear-gradient(90deg, transparent, #fff 50%, transparent); opacity: .85; }
.laser-h { height: 4px; left: 0; right: 0; top: 50%; transform: translateY(-50%); animation: laser-h .22s ease-out forwards; }
.laser-v { width: 4px; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, transparent, #fff 50%, transparent); animation: laser-v .22s ease-out forwards; }
@keyframes laser-h { from { opacity: .9; transform: translateY(-50%) scaleX(.2); } to { opacity: 0; transform: translateY(-50%) scaleX(1); } }
@keyframes laser-v { from { opacity: .9; transform: translateX(-50%) scaleY(.2); } to { opacity: 0; transform: translateX(-50%) scaleY(1); } }
.tile.special-color { border-radius: 50% !important; background: radial-gradient(circle at 32% 28%, #fff 0 6px, rgba(255,255,255,0) 7px), radial-gradient(circle at 70% 70%, #0a0a0a 0 55%, #000 56% 100%) !important; border: 2px solid #fff; box-shadow: 0 0 18px #fff, 0 0 28px #ffd45b88, inset 0 0 12px #fff; overflow: hidden; }
.tile.special-color::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 20% 30%, #ff3b30 0 5px, transparent 6px), radial-gradient(circle at 75% 25%, #4cd964 0 5px, transparent 6px), radial-gradient(circle at 40% 75%, #5ac8fa 0 5px, transparent 6px), radial-gradient(circle at 85% 70%, #ffcc00 0 5px, transparent 6px), radial-gradient(circle at 55% 45%, #af52de 0 4px, transparent 5px); opacity: .95; }
.tile.special-color .fruit-icon { opacity: 0; }
.tile.locked { border: 2px solid #a8d8ff; background: linear-gradient(145deg, #eef6ff, #a8c4ff 55%, #6b8fbf) !important; box-shadow: inset 0 0 10px #ffffffcc, 0 0 8px #6bb8ff; }
.tile.walled { border: 2px solid #c9a86a; background: linear-gradient(145deg, #8b5a2b, #5a3410) !important; box-shadow: inset 0 0 8px #0008, 0 0 6px #8b5a2b; }
.tile.roped { border: 2px solid #ffd45b; background: linear-gradient(145deg, #fff6cc, #ffb84d) !important; box-shadow: 0 0 8px #ffd45b88; }
.tile.ingredient { border: 2px solid #ff5b9e; background: radial-gradient(circle at 50% 30%, #fff, #ff5b9e 60%, #8b1a3a) !important; }
.tile.locked .fruit-icon, .tile.walled .fruit-icon, .tile.roped .fruit-icon { filter: grayscale(.4) brightness(.95); }
.tile.locked::after, .tile.walled::after, .tile.roped::after, .tile.ingredient::after { content: none !important; }
.tile.locked-1 { border-color: #ffd45b; }
.tile.locked-2 { border-color: #ff8a5b; }
.tile.locked-3 { border-color: #ff4d6a; box-shadow: inset 0 0 12px #fff, 0 0 10px #ff4d6a; }
.tile.special-color .fruit-icon { opacity: .8; filter: grayscale(.35) brightness(1.15); }
.tile.special-color::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 22px; }
.tile.popping { animation: pop .24s forwards; }
.tile.falling { animation: fall .32s cubic-bezier(.15,.9,.3,1) both; animation-delay: var(--fall-delay); }
.tile.swapping { animation: swap-tile .2s cubic-bezier(.2,.8,.3,1) both; }
.fx-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; contain: layout paint; }
.disco-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.cross-flash { position:absolute; inset:0; pointer-events:none; animation:cross-flash .32s ease-out forwards; }
.cross-flash::before,.cross-flash::after { content:""; position:absolute; background:#cbfff5; }
.cross-flash::before { left:0; right:0; top:var(--cross-y); height:4px; transform:translateY(-50%); }
.cross-flash::after { top:0; bottom:0; left:var(--cross-x); width:4px; transform:translateX(-50%); }
@keyframes cross-flash { from { opacity:1; } to { opacity:0; } }
.particle { position: absolute; z-index: 5; width: 5px; height: 5px; border-radius: 50%; contain: strict; will-change: transform, opacity; animation: burst .34s cubic-bezier(.2,.8,.3,1) forwards; }
.disco-wave { position: absolute; z-index: 6; top: -54%; left: -72%; width: 58%; height: 208%; pointer-events: none; background: linear-gradient(90deg, transparent 42%, #fff 48%, #9af5ff 50%, #668dff 52%, transparent 59%); transform: rotate(15deg) translate3d(0,0,0); will-change: transform, opacity; animation: disco-wave .3s ease-out forwards; }
.combo-confetti { position: absolute; z-index: 6; top: var(--confetti-y); left: var(--confetti-x); width: 6px; height: 8px; border-radius: 2px; background: #fff4a8; box-shadow: -25px -13px 0 -1px #67e7ff, -15px 17px 0 -1px #ff76ad, 1px -26px 0 -1px #fff, 20px -16px 0 -1px #ab8cff, 27px 12px 0 -1px #ffe16a, 8px 25px 0 -1px #76e6a0; pointer-events: none; will-change: transform, opacity; animation: combo-confetti .32s cubic-bezier(.14,.78,.3,1) forwards; }
.bottom-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-left: 8px; }
.bottom-bar p { margin: 0; color: #c2d4ff; font-size: 12px; }
.restart { width: 38px; height: 34px; font-size: 22px; }
.modal { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; background: #05091deF; }
.hidden { display: none !important; }
.ad-card { width: min(88vw, 360px); padding: 34px 25px 25px; text-align: center; border: 2px solid #54d7ff; border-radius: 22px; background: linear-gradient(145deg, #273b9b, #15164d); }
.ad-label { color: #8bdfff; font-size: 10px; letter-spacing: .14em; }
.ad-card h2 { margin: 22px 0 5px; font-size: 28px; }
.ad-card p { margin: 0 0 24px; color: #cedbff; }
.ad-timer { height: 8px; overflow: hidden; border-radius: 8px; background: #10163e; }
.ad-timer i { display: block; width: 100%; height: 100%; background: #ffcf4c; transition: width 1s linear; }
.ad-media { margin: 12px 0; min-height: 0; }
.ad-media img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px; }
.ad-media iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 12px; }
.ad-card > strong { display: block; margin: 12px; font-size: 24px; }
.ad-card button { padding: 10px 22px; border: 0; border-radius: 10px; color: #fff; background: #6574ad; font-weight: 900; }
.ad-card button:not(:disabled) { background: #ff5b91; cursor: pointer; }
.level-toast { position: fixed; top: 12px; left: 50%; transform: translateX(-50%) translateZ(0); z-index: 9; width: min(92vw, 360px); padding: 12px 14px; text-align: center; border: 1px solid #ffd45b; border-radius: 14px; background: #101e5ecc; backdrop-filter: blur(6px); box-shadow: 0 8px 20px #0006; }
.level-toast b { display: block; color: #ffd45b; font-size: 13px; }
.level-toast span { display: block; margin-top: 2px; color: #fff; font-size: 12px; font-weight: 800; }
.level-toast small { display: block; margin-top: 4px; color: #b9d0ff; font-size: 10px; }
.task-hint { display: block; margin-top: 6px; color: #ffe06a; font-size: 10px; font-weight: 700; }
.btn-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.profile-btn { overflow: hidden; display: grid; place-items: center; }
.avatar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.avatar-img, .lobby-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid #ffd45b; background: #0d1a4a; }
.lobby-avatar { width: 56px; height: 56px; }
.avatar-actions { display: flex; gap: 8px; }
.avatar-upload { padding: 8px 10px; border-radius: 8px; background: #ffd45b; color: #1a2a6b; font-size: 11px; font-weight: 900; cursor: pointer; }
#removeAvatarBtn { padding: 8px 10px; border: 1px solid #ff8bb0; border-radius: 8px; background: transparent; color: #ffd8e5; cursor: pointer; font-size: 11px; font-weight: 800; }
.lobby-card { position: relative; width: min(92vw, 420px); max-height: 92vh; overflow-y: auto; padding: 22px 18px 18px; text-align: center; border: 2px solid #6edbff; border-radius: 24px; background: linear-gradient(145deg, #293d9b, #15164d); box-shadow: 0 0 38px #4adfff66; }
.lobby-card h2 { margin: 6px 0 10px; font-size: 26px; }
.lobby-avatar-row { display: flex; align-items: center; gap: 12px; text-align: left; margin: 10px 0 12px; padding: 10px; border: 1px solid #ffffff20; border-radius: 12px; background: #ffffff0c; }
.lobby-welcome b { display: block; font-size: 14px; }
.lobby-welcome span { display: block; color: #b9d0ff; font-size: 11px; }
.lobby-rank { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lobby-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 12px 0; }
.lobby-stats span { padding: 8px 4px; border: 1px solid #ffffff26; border-radius: 10px; background: #ffffff0e; }
.lobby-stats small { display: block; color: #b6caff; font-size: 9px; }
.lobby-stats b { display: block; margin-top: 2px; font-size: 13px; }
.lobby-task-box { margin: 12px 0; padding: 10px; border: 1px solid #ffd45b66; border-radius: 12px; background: #ffd45b12; text-align: left; }
.lobby-task-box b { display: block; color: #ffd45b; font-size: 11px; }
.lobby-task-box p { margin: 4px 0 8px; font-size: 12px; }
.lobby-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.lobby-actions button { padding: 10px; border: 1px solid #7597df; border-radius: 10px; background: #1a2a6b; color: #fff; cursor: pointer; font-weight: 800; font-size: 12px; }
.profile-card { position: relative; width: min(92vw, 410px); max-height: 90vh; overflow-y: auto; padding: 27px 23px 22px; border: 2px solid #6edbff; border-radius: 24px; background: linear-gradient(145deg, #293d9b, #15164d); }
.modal-close { position: absolute; top: 10px; right: 13px; border: 0; color: #c7ddff; background: transparent; cursor: pointer; font-size: 28px; }
.profile-card h2 { margin: 7px 0 18px; font-size: 27px; }
.profile-card label { display: block; margin-bottom: 6px; color: #bfd2ff; font-size: 12px; }
.profile-card label small { color: #8295d6; font-weight: normal; }
.name-row { display: flex; gap: 7px; }
.name-row input { min-width: 0; flex: 1; padding: 11px; border: 1px solid #7597df; border-radius: 10px; outline: none; color: #fff; background: #111b51; }
.optional-profile-fields { display: grid; gap: 6px; margin-top: 14px; }
.optional-profile-fields input, .welcome-card form input { width: 100%; padding: 10px; border: 1px solid #7597df; border-radius: 10px; outline: none; color: #fff; background: #111b51; }
.optional-profile-fields label:not(:first-child) { margin-top: 4px; }
.name-row button { padding: 0 13px; border: 0; border-radius: 10px; color: #24316c; background: #ffd45b; cursor: pointer; font-weight: 900; }
.name-row button:disabled { opacity: .6; cursor: wait; }
.profile-status { display: block; min-height: 18px; margin-top: 7px; color: #ffe06a; font-size: 11px; }
.logout-btn { width: 100%; margin-top: 16px; padding: 10px; border: 1px solid #ff8bb0; border-radius: 10px; color: #ffd8e5; background: #7c2854; cursor: pointer; font-weight: 800; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 17px 0; }
.profile-stats span { padding: 10px 5px; text-align: center; border: 1px solid #ffffff26; border-radius: 10px; background: #ffffff0e; }
.profile-stats small, .profile-stats b { display: block; }
.profile-stats small { color: #b6caff; font-size: 10px; }
.profile-stats b { margin-top: 4px; color: #fff; font-size: 17px; }
.profile-card h3 { margin: 14px 0 8px; color: #ffd45b; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.leaderboard { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: ranking; }
.leaderboard li { display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid #ffffff20; border-radius: 9px; color: #dce7ff; background: #ffffff0b; font-size: 12px; counter-increment: ranking; }
.leaderboard li::before { content: counter(ranking); color: #ffd45b; font-weight: 900; }
.leaderboard li.current { border-color: #ffd45b; background: #ffd45b18; }
.leaderboard b { color: #fff; }
.complete-card { position: relative; width: min(90vw, 390px); padding: 30px 24px 24px; overflow: hidden; text-align: center; border: 2px solid #ffd45c; border-radius: 25px; background: linear-gradient(145deg, #3148ad, #17154f); }
.complete-badge { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 12px; border: 4px solid #fff; border-radius: 50%; color: #263b8b; background: #ffd451; font-size: 34px; font-weight: 900; }
.complete-kicker { margin: 0; color: #ffdc60; font-size: 11px; letter-spacing: .18em; font-weight: 900; }
.complete-card h2 { margin: 8px 0 4px; color: #fff; font-size: 34px; }
.complete-card > p:not(.complete-kicker) { margin: 0; color: #c6d6ff; font-size: 13px; }
.reward-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 20px 0; color: #ffd653; font-size: 15px; }
.reward-row span { padding: 8px 10px; border: 1px solid #ffffff2b; border-radius: 10px; background: #ffffff12; }
.reward-row span:nth-child(2) { color: #63e1ff; }
.reward-row span:nth-child(3) { color: #ff7299; }
.next-level { position: relative; z-index: 2; width: 100%; padding: 13px 18px; border: 0; border-radius: 12px; color: #283478; background: linear-gradient(90deg, #ffe377, #ffbc4e); cursor: pointer; font-weight: 900; font-size: 14px; }
.next-level b { margin-left: 8px; font-size: 18px; }
.welcome-card > p:not(.ad-label) { margin: -8px 0 18px; color: #c6d6ff; font-size: 13px; line-height: 1.45; }
.welcome-card form > input { margin: 0 0 14px; }
.welcome-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.welcome-actions button { padding: 10px 7px; border: 0; border-radius: 10px; color: #eef4ff; background: #4b5fa8; cursor: pointer; font-weight: 800; }
.welcome-actions .next-level { grid-column: 1 / -1; }
.auth-status { display: block; min-height: 18px; margin-top: 9px; color: #ffe06a; font-size: 11px; }
.moves-over-card .welcome-actions { margin-top: 14px; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -18px; width: 8px; height: 18px; background: var(--color); transform: rotate(var(--rotate)); animation: confetti-fall 1.8s linear var(--delay) forwards; }
@keyframes confetti-fall { to { transform: translate(var(--drift), 105vh) rotate(620deg); } }
@keyframes bomb-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes pop { 40% { transform: scale(1.2); } 100% { opacity: 0; transform: scale(.05); } }
@keyframes fall { from { transform: translateY(var(--fall-distance)) translateZ(0); opacity: .2; } to { transform: translateY(0) translateZ(0); opacity: 1; } }
@keyframes burst { 0% { opacity: .95; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.15); } }
@keyframes disco-wave { 0% { opacity: 0; transform: rotate(15deg) translate3d(0,0,0); } 18% { opacity: .95; } 100% { opacity: 0; transform: rotate(15deg) translate3d(350%,0,0); } }
@keyframes combo-confetti { 0% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(.35) rotate(-20deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(1.25) rotate(45deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes swap-tile { 0% { transform: translate(0, 0) scale(1); } 45% { transform: translate(var(--swap-x), var(--swap-y)) scale(1.06); } 100% { transform: translate(var(--swap-x), var(--swap-y)) scale(1); } }
@media (max-width: 800px) {
  :root { --cell: min(calc((100vw - 28px) / 8), 54px); }
  body { display: block; background: #081842; }
  body::before, body::after { opacity: .2; }
  .game { width: 100%; max-width: 100%; min-height: 100svh; padding: max(8px, env(safe-area-inset-top)) 4px max(18px, env(safe-area-inset-bottom)); overflow: hidden; }
  .world-rank { gap: 4px; margin-bottom: 6px; }
  .rank-card { padding: 6px 6px; }
  .level-line { margin: 8px 4px 6px; }
  .level-line b { font-size: 14px; }
  .level-line span { font-size: 11px; }
  .task-progress { margin: 0 4px 6px; padding: 7px 8px; }
  .hud { gap: 4px; }
  .hud-pill { min-width: 0; flex: 1; height: 35px; }
  .score-pill { min-width: 0; }
  .moves-pill { min-width: 52px; }
  .stars { height: 30px; }
  .play-area { flex-direction: column; gap: 10px; width: 100%; }
  .board-frame { width: max-content; max-width: 100%; padding: 3px; border-radius: 12px; }
  .board { gap: 2px; }
  .power-rail { flex-direction: row; width: 100%; justify-content: center; gap: 6px; order: 2; }
  .power { width: 58px; height: 43px; border-width: 1px; border-radius: 10px; font-size: 18px; }
  .power span { font-size: 7px; }
  .power small { font-size: 9px; }
  .tile { border-radius: 9px; box-shadow: inset 0 1px 2px #fff6, inset 0 -2px 3px #0004, 0 1px 2px #0005; }
  .fruit-icon { font-size: clamp(1.35rem, 7vw, 2.2rem); }
  .tile:hover { transform: none; filter: none; }
  .tile.selected { transform: translateZ(0) scale(1.05); filter: brightness(1.12); }
  .tile.dragging { transform: translateZ(0) scale(1.1); }
  .tile.drop-target { transform: translateZ(0) scale(1.04); outline-width: 2px; outline-offset: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}