:root {
  --ink: #111b4c;
  --blue: #536ed0;
  --cyan: #53dfff;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  width: 100%; height: 100%; margin: 0; overflow: hidden;
  overscroll-behavior: none; touch-action: none; user-select: none;
  background: #101943; color: #fff;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }

.loading-screen {
  position: fixed; inset: 0; z-index: 999; display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(114, 206, 255, .17), transparent 34%),
    linear-gradient(180deg, #fff 0%, #fff 72%, #f4f8ff 100%);
  opacity: 1; visibility: visible; transition: opacity .55s ease, visibility .55s ease;
}
.loading-screen.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-content { width: min(91vw, 580px); text-align: center; }
.color-bloks-logo {
  display: block; width: min(89vw, 560px); max-height: min(34vh, 250px); margin: 0 auto;
  object-fit: contain; filter: drop-shadow(0 10px 18px rgba(33, 90, 190, .16));
  animation: logoIn .9s cubic-bezier(.2,.8,.2,1) both;
}
.loading-content > p { margin: 4px 0 14px; color: #8190bc; font-size: 9px; font-weight: 900; letter-spacing: .28em; }
.loading-track { width: min(76vw, 380px); height: 12px; margin: 0 auto; padding: 3px; border: 1px solid #ccd7ee; border-radius: 20px; background: #edf2fa; box-shadow: inset 0 2px 5px rgba(42,66,118,.13); }
.loading-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2f8cff,#4ee1ff 58%,#966cff); box-shadow: 0 0 12px rgba(52,190,255,.48); transition: width .15s ease; }
.loading-percent { display: block; margin-top: 8px; color: #7383b0; font-size: 9px; font-variant-numeric: tabular-nums; }
.publisher-logo { display: block; width: min(76vw, 440px); max-height: 100px; margin: 48px auto 0; object-fit: contain; }
@keyframes logoIn { from { opacity:0; transform:translateY(12px) scale(.94); } to { opacity:1; transform:none; } }

.game-shell { width: 100vw; height: 100svh; min-height: 100%; display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: #111a45; }

.video-bar {
  min-height: 42px; padding: calc(4px + var(--safe-top)) clamp(6px,2vw,18px) 4px;
  display: grid; grid-template-columns: auto minmax(54px,92px) 42px minmax(78px,126px) auto;
  justify-content: center; align-items: center; gap: clamp(6px,1.8vw,17px); z-index: 20;
  background: linear-gradient(180deg,#718bea 0%,#526dce 42%,#4059b5 100%);
  border-bottom: 2px solid #34499d; box-shadow: inset 0 1px rgba(255,255,255,.4), 0 3px 9px rgba(0,0,0,.28);
  color: #f7f9ff; text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.bar-label { font-size: clamp(14px,2.6vw,22px); line-height: 1; }
.bar-screen {
  min-height: 25px; display: grid; place-items: center; padding: 2px 8px; line-height: 1;
  background: linear-gradient(180deg,#182348,#0c1432); border: 1px solid rgba(170,194,255,.28);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55); font-size: clamp(14px,2.5vw,21px); font-weight: 500; font-variant-numeric: tabular-nums;
}
.home-button { width: 40px; height: 32px; padding: 4px; border: 0; display: grid; place-items: center; color: #bdf2ff; background: transparent; cursor: pointer; filter: drop-shadow(0 2px 2px rgba(0,0,0,.28)); }
.home-button:active { transform: scale(.9); }
.home-button svg { width: 26px; height: 26px; fill: currentColor; }

.game-stage { position: relative; min-height: 0; overflow: hidden; isolation: isolate; background: #111a43; }
#gameCanvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#gameCanvas.dragging { cursor: grabbing; }

.drag-guide {
  position: absolute; left: 50%; top: 28%; z-index: 8; display: grid; place-items: center; gap: 8px;
  transform: translate(-50%,-50%); color: rgba(222,236,255,.88); text-shadow: 0 2px 5px #000;
  opacity: 0; pointer-events: none;
}
.drag-guide.show { animation: guide 2.5s ease both; }
.drag-hand { font-size: 38px; animation: handMove 1s ease-in-out infinite alternate; filter: drop-shadow(0 5px 6px rgba(0,0,0,.45)); }
.drag-guide strong { padding: 7px 12px; border-radius: 4px; font-size: 9px; letter-spacing: .13em; background: rgba(7,12,40,.7); }
@keyframes guide { 0%,100%{opacity:0} 15%,78%{opacity:1} }
@keyframes handMove { to { transform:translateX(42px); } }

.overlay {
  position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px;
  background: rgba(5,9,30,.68); backdrop-filter: blur(7px); opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.overlay.visible { opacity: 1; visibility: visible; }
.panel {
  width: min(91vw,430px); padding: clamp(24px,5vh,42px); text-align: center; border-radius: 18px;
  border: 1px solid rgba(151,177,255,.36); background: linear-gradient(160deg,rgba(35,51,117,.97),rgba(9,15,47,.98));
  box-shadow: 0 26px 70px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.1);
  transform: translateY(12px) scale(.98); transition: transform .25s ease;
}
.visible .panel { transform:none; }
.menu-logo { display:block; width:min(78vw,360px); max-height:170px; margin:0 auto 14px; object-fit:contain; }
.start-panel { position:relative; }
.start-panel > p { margin:0 auto 22px; max-width:350px; color:#bdc8ea; font-size:13px; line-height:1.5; }
.settings-button { position:absolute; top:13px; left:13px; width:43px; height:43px; padding:10px; border:1px solid rgba(151,177,255,.3); border-radius:50%; color:#bfefff; background:rgba(7,14,47,.7); cursor:pointer; box-shadow:inset 0 1px rgba(255,255,255,.08),0 5px 13px rgba(0,0,0,.25); transition:transform .18s,background .18s; }
.settings-button:active { transform:rotate(25deg) scale(.93); background:rgba(55,82,164,.75); }
.settings-button svg { width:100%; height:100%; fill:currentColor; }
.primary-button { width:min(100%,280px); min-height:54px; border:0; border-radius:9px; color:#071235; font-weight:950; letter-spacing:.08em; cursor:pointer; background:linear-gradient(180deg,#79efff,#3ec1f2); box-shadow:inset 0 1px #fff,0 9px 24px rgba(51,190,255,.24); }
.primary-button:active { transform:translateY(2px); filter:brightness(1.08); }
.primary-button:disabled { opacity:.72; cursor:wait; filter:saturate(.65); }
.start-note { display:block; margin-top:15px; color:#8193c9; font-size:9px; letter-spacing:.08em; }
.compact-panel h2 { margin:7px 0 23px; font-size:32px; }
.panel-kicker { color:#8fa4e8; font-size:9px; font-weight:900; letter-spacing:.2em; }
.menu-actions { display:flex; justify-content:center; gap:8px; margin:12px 0 3px; }
.menu-actions button { min-width:126px; height:42px; border:1px solid rgba(145,172,255,.27); border-radius:8px; color:#cbd6f6; background:rgba(8,14,44,.55); cursor:pointer; }
.text-button { margin-top:8px; padding:10px; border:0; color:#91a2d5; background:transparent; cursor:pointer; }
.result-score { margin:-4px 0 15px; }
.result-score span { display:block; color:#899bd1; font-size:9px; font-weight:900; letter-spacing:.2em; }
.result-score strong { display:block; color:#6eeaff; font-size:46px; font-variant-numeric:tabular-nums; }
.result-row { display:flex; justify-content:center; gap:30px; margin-bottom:13px; color:#9eadde; font-size:12px; }
.result-row b { color:#fff; margin-left:4px; }
.new-record { display:none; color:#ffd85e; font-size:11px; font-weight:900; letter-spacing:.15em; }
.new-record.show { display:block; }

.confirm-overlay { z-index:44; }
.confirm-panel { width:min(90vw,390px); }
.confirm-panel h2 { margin-bottom:10px; }
.confirm-panel > p { max-width:310px; margin:0 auto 22px; color:#aebbe1; font-size:13px; line-height:1.5; }
.danger-button { color:#fff; background:linear-gradient(180deg,#ff7d91,#df3c5a); box-shadow:inset 0 1px rgba(255,255,255,.7),0 9px 24px rgba(224,54,87,.25); }
.continue-button { display:block; margin:7px auto 0; color:#b9c8f3; }

.level-complete-overlay { z-index:43; background:radial-gradient(circle at 50% 35%,rgba(73,139,255,.28),rgba(5,9,30,.82) 58%); }
.level-complete-panel { width:min(92vw,420px); overflow:hidden; }
.level-complete-panel h2 { margin:7px 0 8px; font-size:32px; }
.level-complete-panel > p { max-width:330px; margin:9px auto 20px; color:#b5c3e8; font-size:13px; line-height:1.5; }
.level-stars { display:flex; justify-content:center; gap:5px; color:#ffd65c; font-size:25px; text-shadow:0 0 13px rgba(255,209,68,.55); }
.level-stars i { font-style:normal; animation:starPop .5s cubic-bezier(.2,.8,.2,1) both; }
.level-stars i:nth-child(2) { animation-delay:.1s; }
.level-stars i:nth-child(3) { animation-delay:.2s; }
.level-features { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:0 0 20px; }
.level-features span { min-height:59px; display:grid; place-items:center; align-content:center; gap:4px; border:1px solid rgba(132,166,255,.24); border-radius:10px; background:rgba(6,13,46,.53); }
.level-features small { color:#8296d2; font-size:8px; font-weight:900; letter-spacing:.14em; }
.level-features b { color:#70eaff; font-size:15px; }
@keyframes starPop { from{opacity:0;transform:scale(.2) rotate(-30deg)} to{opacity:1;transform:none} }

.settings-overlay { z-index:45; }
.settings-panel { position:relative; width:min(92vw,430px); max-height:calc(100% - 12px); overflow-y:auto; padding:30px 25px 26px; }
.settings-panel h2 { margin:6px 0 20px; font-size:29px; }
.settings-close { position:absolute; top:10px; right:12px; width:38px; height:38px; border:0; border-radius:50%; color:#cbd6f7; background:rgba(5,10,35,.48); font-size:29px; line-height:1; cursor:pointer; }
.sound-setting { padding:14px 14px 12px; border:1px solid rgba(140,166,244,.18); border-radius:12px; background:rgba(7,13,43,.48); text-align:left; }
.sound-setting + .sound-setting { margin-top:10px; }
.sound-setting-head { display:grid; grid-template-columns:37px 1fr auto; align-items:center; gap:10px; }
.sound-setting-icon { width:37px; height:37px; display:grid; place-items:center; border-radius:10px; color:#75e9ff; background:linear-gradient(145deg,rgba(80,112,212,.55),rgba(24,40,96,.68)); font-size:17px; font-weight:900; }
.sound-setting-head > label:not(.switch) { cursor:pointer; }
.sound-setting-head b { display:block; color:#f5f8ff; font-size:14px; }
.sound-setting-head small { display:block; margin-top:2px; color:#8697ca; font-size:9px; }
.switch { position:relative; width:48px; height:27px; cursor:pointer; }
.switch input { position:absolute; opacity:0; pointer-events:none; }
.switch i { position:absolute; inset:0; border-radius:20px; background:#303b68; box-shadow:inset 0 2px 5px rgba(0,0,0,.35); transition:background .2s; }
.switch i::after { content:""; position:absolute; width:21px; height:21px; left:3px; top:3px; border-radius:50%; background:#d7def3; box-shadow:0 2px 5px rgba(0,0,0,.35); transition:transform .2s,background .2s; }
.switch input:checked + i { background:linear-gradient(90deg,#258dcf,#43d4ed); }
.switch input:checked + i::after { transform:translateX(21px); background:#fff; }
.volume-slider { width:100%; height:20px; margin:10px 0 0; accent-color:#52dff4; cursor:pointer; }
.volume-slider:disabled { opacity:.28; cursor:not-allowed; }
.progress-reset-area { margin-top:15px; padding-top:15px; border-top:1px solid rgba(140,166,244,.17); }
.progress-reset-area > small { display:block; margin-bottom:8px; color:#778bc7; font-size:8px; font-weight:900; letter-spacing:.18em; }
.reset-progress-button { width:100%; min-height:43px; border:1px solid rgba(255,111,137,.32); border-radius:9px; color:#ff9caf; background:rgba(96,19,49,.28); font-size:11px; font-weight:900; letter-spacing:.07em; cursor:pointer; }
.reset-progress-button:active { transform:translateY(1px); background:rgba(130,25,58,.4); }
.reset-confirm-overlay { z-index:55; }

.level-badge { position:absolute; left:50%; top:37%; z-index:18; display:grid; place-items:center; transform:translate(-50%,-50%) scale(.6); opacity:0; pointer-events:none; text-shadow:0 4px 7px rgba(0,0,0,.48); }
.level-badge small { color:#a3b6f2; font-size:11px; font-weight:900; letter-spacing:.32em; }
.level-badge strong { font-size:74px; line-height:.95; color:#fff; text-shadow:0 0 18px #3edfff,0 6px 0 #3856b8; }
.level-badge span { color:#63e8ff; font-size:11px; font-weight:900; letter-spacing:.2em; }
.level-badge.show { animation:levelPop 1.2s ease both; }
@keyframes levelPop { 0%{opacity:0;transform:translate(-50%,-50%) scale(.45)} 25%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-75%) scale(.9)} }
.level-badge.combo { isolation:isolate; }
.level-badge.combo::before { content:""; position:absolute; z-index:-1; width:150px; height:150px; border:3px solid rgba(97,231,255,.8); border-radius:50%; box-shadow:0 0 26px rgba(87,211,255,.65),inset 0 0 28px rgba(135,94,255,.34); }
.level-badge.combo::after { content:""; position:absolute; z-index:-1; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:-76px -37px 0 #6ff4ff,69px -48px 0 #ffe464,-91px 21px 0 #bc7cff,88px 30px 0 #ff739d,-48px 72px 0 #70ff9c,45px 79px 0 #61cfff,-6px -91px 0 #fff; filter:drop-shadow(0 0 7px currentColor); }
.level-badge.combo small { color:#ffe26f; font-size:15px; letter-spacing:.24em; text-shadow:0 0 12px rgba(255,207,62,.75); }
.level-badge.combo strong { font-size:82px; color:#fff; text-shadow:0 0 11px #fff,0 0 27px #37dbff,0 7px 0 #5747bf; }
.level-badge.combo span { padding:4px 9px; border-radius:20px; color:#fff; background:rgba(41,54,142,.72); }
.level-badge.combo.show { animation:comboPop 1.55s cubic-bezier(.18,.78,.25,1) both; }
.level-badge.combo.show::before { animation:comboRing 1.15s ease-out both; }
.level-badge.combo.show::after { animation:comboMagic 1.35s ease-out both; }
.level-badge.combo.show strong { animation:comboShimmer 1.55s ease both; }
@keyframes comboPop {
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(-10deg) skewX(-10deg)}
  17%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(5deg) skewX(7deg)}
  30%{opacity:1;transform:translate(-55%,-50%) scale(.98,1.08) rotate(-5deg) skewX(-8deg)}
  43%{opacity:1;transform:translate(-45%,-50%) scale(1.06,.96) rotate(4deg) skewX(6deg)}
  56%{opacity:1;transform:translate(-53%,-50%) scale(.99,1.03) rotate(-2deg) skewX(-4deg)}
  70%{opacity:1;transform:translate(-48%,-50%) scale(1.02,.99) rotate(1deg) skewX(2deg)}
  80%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-74%) scale(.86) rotate(-2deg)}
}
@keyframes comboRing { from{opacity:1;transform:scale(.35)} to{opacity:0;transform:scale(1.45)} }
@keyframes comboMagic { 0%{opacity:0;transform:scale(.1) rotate(0)} 20%{opacity:1} 100%{opacity:0;transform:scale(1.55) rotate(125deg)} }
@keyframes comboShimmer { 0%,100%{filter:brightness(1)} 18%{filter:brightness(1.8) saturate(1.4)} 38%{filter:hue-rotate(35deg) brightness(1.25)} 60%{filter:hue-rotate(-25deg) brightness(1.4)} }

@media (max-width:560px) {
  .video-bar { min-height:38px; grid-template-columns:auto 54px 34px minmax(68px,92px) auto; gap:5px; padding-left:5px; padding-right:5px; }
  .bar-label { font-size:14px; }
  .bar-screen { min-height:23px; font-size:14px; padding:2px 5px; }
  .home-button { width:34px; height:28px; }
  .home-button svg { width:22px; height:22px; }
  .publisher-logo { width:min(88vw,430px); max-height:84px; margin-top:44px; }
  .color-bloks-logo { width:min(94vw,500px); max-height:215px; }
  .panel { padding:26px 20px; }
}

@media (max-height:620px) {
  .publisher-logo { margin-top:28px; max-height:65px; }
  .color-bloks-logo { max-height:180px; }
  .panel { padding-top:18px; padding-bottom:18px; }
  .menu-logo { max-height:120px; }
}

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