:root {
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: #fff;
  background: #06030f;
  --pink: #ff59c8;
  --purple: #7d4dff;
  --blue: #3da4ff;
  --orange: #ff842a;
  --panel: rgba(13, 8, 41, 0.78);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #05020d; }
body { touch-action: none; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }

#app {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#app.menu-mode { background-image: linear-gradient(rgba(7,3,30,.08),rgba(7,3,30,.12)), url("assets/images/splash-background.webp"); }
#app.game-mode { background-image: linear-gradient(rgba(2,2,10,.08),rgba(2,2,10,.14)), url("assets/images/gameplay-background.webp"); }

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}
.overlay { position: absolute; inset: 0; z-index: 5; }
.hidden { display: none !important; }

.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  background: rgba(2, 1, 12, .76);
  backdrop-filter: blur(7px);
}
.loading-logo { width: min(84vw, 560px); filter: drop-shadow(0 0 22px rgba(255,76,223,.42)); }
.loading-card {
  width: min(88vw, 420px);
  padding: 1.3rem 1.5rem;
  text-align: center;
  border: 1px solid rgba(175,126,255,.56);
  border-radius: 24px;
  background: rgba(15,8,46,.86);
  box-shadow: 0 0 30px rgba(92,49,255,.28);
}
.spinner { width: 34px; height: 34px; margin: 0 auto .7rem; border-radius: 50%; border: 4px solid rgba(255,255,255,.2); border-top-color: var(--pink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-track { height: 10px; margin: .8rem 0 .45rem; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.12); }
.progress-bar { width: 3%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #62b8ff, #a564ff, #ff61ca); transition: width .2s ease; }
.loading-card small { color: #d7caff; }

.menu-ui { pointer-events: none; padding: max(10px, env(safe-area-inset-top)) 4vw max(10px, env(safe-area-inset-bottom)); }
.menu-header { position: absolute; top: 1.2%; left: 4%; width: 92%; text-align: center; pointer-events: none; }
.logo { width: min(90vw, 620px); max-height: 18dvh; object-fit: contain; filter: drop-shadow(0 7px 16px rgba(5,0,30,.55)); }
.menu-header p { margin: .5rem 0 0; font-weight: 800; font-size: clamp(.72rem, 2.2vw, 1.02rem); text-shadow: 0 2px 8px #2d0a68; }

.kitty-select { position: absolute; top: 22%; left: 3%; width: 94%; text-align: center; }
.kitty-select h1, .difficulty-select h2 {
  display: inline-block;
  margin: 0;
  padding: .32rem 1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(63,25,116,.9), rgba(30,12,74,.86));
  border: 2px solid rgba(255,154,242,.72);
  box-shadow: 0 0 18px rgba(204,87,255,.34);
  font-size: clamp(1rem, 4.6vw, 1.55rem);
  text-shadow: 0 2px 6px #2b0f53;
}
.kitty-select h1 { position: relative; top: 1.45rem; }
.kitty-name-row {
  pointer-events: auto;
  position: absolute;
  left: 0;
  width: 100%;
  top: 35dvh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
  padding: 0 .2rem;
}
.kitty-name {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  padding: .36rem .2rem;
  background: rgba(24,12,69,.78);
  box-shadow: 0 4px 15px rgba(0,0,0,.24);
  font-weight: 900;
  font-size: clamp(.7rem, 2.8vw, 1rem);
}
.kitty-name.selected { border-color: #fff; background: linear-gradient(180deg,#ff68d5,#a24eff); box-shadow: 0 0 16px rgba(255,75,218,.9); transform: translateY(-2px); }

.difficulty-select { position: absolute; top: 63%; left: 3%; width: 94%; text-align: center; pointer-events: auto; }
.difficulty-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .65rem; margin-top: .45rem; align-items: end; }
.difficulty-card {
  position: relative;
  min-width: 0;
  padding: .15rem .2rem .4rem;
  border: 2px solid transparent;
  border-radius: 22px;
  background: rgba(15,7,46,.58);
  box-shadow: 0 7px 19px rgba(0,0,0,.28);
}
.difficulty-card img { width: 100%; max-height: 15dvh; object-fit: contain; mix-blend-mode: screen; border-radius: 16px; }
.difficulty-card span { display: block; margin-top: -.15rem; font-weight: 1000; font-size: clamp(.8rem, 3.2vw, 1.1rem); text-shadow: 0 2px 8px #000; }
.difficulty-card[data-difficulty="easy"].selected { border-color: #7ac8ff; box-shadow: 0 0 24px rgba(48,157,255,.85); }
.difficulty-card[data-difficulty="medium"].selected { border-color: #ffad5a; box-shadow: 0 0 24px rgba(255,126,34,.88); }
.difficulty-card[data-difficulty="insanity"].selected { border-color: #ff85da; box-shadow: 0 0 26px rgba(255,60,193,.95); }

.menu-footer { position: absolute; left: 6%; width: 88%; bottom: max(2%, env(safe-area-inset-bottom)); text-align: center; pointer-events: auto; }
.menu-footer p { margin: 0 0 .35rem; font-size: clamp(.7rem,2.7vw,.95rem); font-weight: 800; text-shadow: 0 2px 6px #17052f; }
.start-button, .modal-card button {
  width: min(76vw, 410px);
  border: 2px solid #ffc2f0;
  border-radius: 999px;
  padding: .72rem 1.15rem;
  background: linear-gradient(180deg, #ff6fd7, #a83eff 56%, #6420ba);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 0 24px rgba(255,73,213,.5);
  font-weight: 1000;
  font-size: clamp(1.05rem, 4.5vw, 1.45rem);
  text-shadow: 0 2px 4px rgba(74,0,93,.7);
}
.start-button:disabled { opacity: .48; filter: grayscale(.45); cursor: not-allowed; box-shadow: none; }

.game-ui { pointer-events: none; padding: max(10px, env(safe-area-inset-top)) 3vw 0; }
.hud-top { display: grid; grid-template-columns: 1fr auto 1fr; gap: .25rem; align-items: start; position: relative; }
.score-card, .match-card {
  min-width: 0;
  border-radius: 14px;
  padding: .26rem .5rem;
  background: rgba(5,7,25,.78);
  backdrop-filter: blur(6px);
  text-align: center;
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
}
.score-card { margin-top: 54px; width: min(18vw, 190px); }
.player-card { justify-self:start; border: 2px solid #3aa7ff; box-shadow: 0 0 16px rgba(50,151,255,.5); }
.ai-card { justify-self:end; border: 2px solid #ff8735; box-shadow: 0 0 16px rgba(255,119,30,.5); }
.score-name { display: block; font-weight: 900; font-size: clamp(.64rem,2.4vw,.9rem); overflow: hidden; text-overflow: ellipsis; }
.score-card strong { display: block; font-size: clamp(1.25rem,5.7vw,2.05rem); line-height: .96; }
.hud-logo { width:min(55vw,520px); min-width:155px; max-height:16dvh; object-fit:contain; filter:drop-shadow(0 4px 12px rgba(10,0,35,.7)); }
.match-card { border: 1px solid rgba(177,148,255,.68); }
.match-card small { display:block; font-size: clamp(.48rem,1.8vw,.68rem); color:#cbbfff; font-weight:900; }
.match-card strong { display:block; font-size: clamp(1.05rem,4vw,1.55rem); line-height:1; color:#fff; }
.match-card-corner { position:absolute; right:3vw; bottom:max(2.4%, env(safe-area-inset-bottom)); width:88px; padding:.3rem .45rem; }
.pause-button { pointer-events:auto; position:absolute; right:-.2rem; top: calc(100% + .45rem); width: 42px; height:42px; border-radius:14px; border:1px solid #77baff; background:rgba(14,12,55,.82); box-shadow:0 0 14px rgba(52,133,255,.5); font-weight:1000; }
.hud-meta { display:flex; justify-content:space-between; gap:.5rem; margin-top:.3rem; padding-right:48px; font-size:clamp(.62rem,2.5vw,.84rem); font-weight:900; text-shadow:0 2px 6px #000; }
.control-hint { position:absolute; left:50%; transform:translateX(-50%); bottom:max(1.1%, env(safe-area-inset-bottom)); width:max-content; max-width:94vw; padding:.35rem .7rem; border-radius:999px; background:rgba(5,5,22,.62); border:1px solid rgba(151,131,255,.4); font-size:clamp(.58rem,2.4vw,.8rem); opacity:.82; }

.countdown { position:absolute; z-index:30; left:50%; top:48%; transform:translate(-50%,-50%); font-size:clamp(5rem,28vw,11rem); font-weight:1000; color:#fff; text-shadow:0 0 10px #fff,0 0 28px #9d5aff,0 0 55px #ff5ed4; pointer-events:none; animation:pulse .45s ease-out; }
@keyframes pulse { from { transform:translate(-50%,-50%) scale(1.5); opacity:.2; } to { transform:translate(-50%,-50%) scale(1); opacity:1; } }
.power-flash { position:absolute; z-index:8; left:50%; top:58%; transform:translate(-50%,-50%) rotate(-4deg); font-size:clamp(1.3rem,7vw,2.6rem); font-weight:1000; color:#ff83dd; text-shadow:0 0 8px #fff,0 0 18px #ff38c0; pointer-events:none; }
.power-flash.on-fire { color:#ffb55c; text-shadow:0 0 10px #fff,0 0 20px #ff8e21,0 0 38px #ff3d00; }

.modal-screen { display:flex; align-items:center; justify-content:center; background:rgba(3,2,17,.72); backdrop-filter:blur(6px); pointer-events:auto; }

#end-screen {
  align-items: center;
  justify-content: center;
  background: rgba(3,2,17,.16);
  backdrop-filter: none;
}
#end-screen .end-card {
  transform: translateY(-13dvh);
  background: linear-gradient(180deg,rgba(44,15,98,.92),rgba(15,7,50,.92));
}
.modal-card { width:min(86vw,420px); padding:1.5rem; border-radius:28px; text-align:center; background:linear-gradient(180deg,rgba(44,15,98,.96),rgba(15,7,50,.96)); border:2px solid rgba(255,137,236,.72); box-shadow:0 0 40px rgba(113,55,255,.45); }
.end-logo { width:100%; max-height:92px; object-fit:contain; margin:-.35rem 0 .55rem; filter:drop-shadow(0 5px 12px rgba(0,0,0,.4)); }
.modal-card h2 { margin:.1rem 0 .75rem; font-size:clamp(1.6rem,8vw,2.6rem); }
.modal-card p { font-size:clamp(1.4rem,7vw,2.2rem); font-weight:1000; margin:.4rem 0 1rem; }
.modal-card button { width:100%; margin:.35rem 0; }
.modal-card button.secondary { background:rgba(49,28,96,.88); border-color:rgba(188,162,255,.66); box-shadow:none; font-size:1rem; }

.toast { position:absolute; z-index:12; left:50%; bottom:9%; transform:translateX(-50%); padding:.55rem 1rem; border-radius:999px; background:rgba(20,9,54,.94); border:1px solid rgba(255,255,255,.3); box-shadow:0 0 18px rgba(157,88,255,.35); font-size:.84rem; }

@media (min-aspect-ratio: 4/5) {
  .menu-header { top: .5%; }
  .logo { max-height: 15vh; width:min(72vw,620px); }
  .kitty-select { top: 18%; }
  .kitty-name-row { top: 39vh; width:80%; left:10%; }
  .difficulty-select { top: 64%; width:70%; left:15%; }
  .difficulty-card img { max-height: 14vh; }
  .menu-footer { width:70%; left:15%; }
}