@font-face { font-family: "Press Start 2P"; src: url(../fonts/press-start-2p.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pirata One"; src: url(../fonts/pirata-one.woff2) format("woff2"); font-display: swap; }
:root {
  --ink: #0d0618; --night: #1a0d33; --violet: #6a2fb0; --gold: #f2c94c; --red: #e8343a;
  --teal: #1fa3c4; --orange: #ff8a1f; --green: #3fbf5f; --txt: #f4ecff; --mute: #b7a6d9;
  --px: "Press Start 2P", monospace; --goth: "Pirata One", "Press Start 2P", serif;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--txt); overflow: hidden; font-family: var(--px); }
body { position: fixed; inset: 0; user-select: none; -webkit-user-select: none; touch-action: none; }

#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #1d0d36 0%, #07030f 75%); }
body.touchdev #stage { align-items: flex-start; padding-top: env(safe-area-inset-top); }
@media (orientation: landscape) { body.touchdev #stage { align-items: center; padding-top: 0; } }
canvas#game { image-rendering: pixelated; image-rendering: crisp-edges; display: block; background: #000; box-shadow: 0 0 40px rgba(120, 60, 200, .35); }

#topbtns { position: fixed; top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); display: flex; gap: 6px; z-index: 30; opacity: .75; }
.ico { width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(10,4,24,.6); color: #fff; font-size: 15px; cursor: pointer; padding: 0; }
#btnPauseTop { display: none; }
body.playing #btnPauseTop { display: block; }
body.playing #topbtns { top: auto; bottom: max(6px, env(safe-area-inset-bottom)); left: 50%; right: auto; transform: translateX(-50%); }
body:not(.touchdev).playing #topbtns { top: auto; bottom: 6px; right: 6px; left: auto; transform: none; opacity: .5; }

/* ---------- overlays ---------- */
.overlay { touch-action: pan-y; position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; padding: 14px; overflow: auto;
  background: linear-gradient(180deg, rgba(10,3,24,.55), rgba(10,3,24,.85)); }
.overlay.show { display: flex; flex-direction: column; }
#title { background: linear-gradient(180deg, rgba(10,3,24,.25) 0%, rgba(10,3,24,.55) 60%, rgba(10,3,24,.8) 100%); }

.title-grid { display: grid; grid-template-columns: auto auto; gap: clamp(14px, 4vw, 48px); align-items: center; }
.school { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 230px; }
.logo-card { width: clamp(96px, 22vmin, 170px); aspect-ratio: 1; border-radius: 22px; background: #fff; padding: 8px;
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px #2a1245, 0 0 35px rgba(255, 200, 90, .45); cursor: pointer; transform: rotate(-3deg); animation: bob 4s ease-in-out infinite; }
.logo-card img { width: 100%; height: 100%; object-fit: contain; display: block; }
@keyframes bob { 50% { transform: rotate(2deg) translateY(-4px); } }
.credit { font-size: clamp(6px, 1.4vmin, 9px); line-height: 1.7; color: var(--mute); margin: 14px 0 6px; }
.credit b { color: #fff; font-size: 1.25em; }
.made { font-size: clamp(6px, 1.4vmin, 9px); line-height: 1.7; margin: 0; padding: 6px 10px; border-radius: 8px; background: rgba(31,163,196,.18); border: 1px solid rgba(31,163,196,.6); color: #bdf2ff; }
.made b { color: #fff; }

.main { display: flex; flex-direction: column; align-items: center; }
.game-title { margin: 0; font-family: var(--goth); font-weight: 400; line-height: .9; text-align: center; display: flex; align-items: baseline; gap: .15em; }
.game-title .t1 { font-size: clamp(42px, 12vmin, 96px); background: linear-gradient(180deg, #fff3b0 0%, var(--gold) 40%, var(--orange) 70%, var(--red) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(3px 3px 0 #2a0a14) drop-shadow(0 0 18px rgba(255,90,40,.45)); }
.game-title .t2 { font-family: var(--px); font-size: clamp(16px, 4.5vmin, 34px); color: var(--teal); text-shadow: 3px 3px 0 #08263a, 0 0 14px rgba(31,163,196,.8); }
.subtitle { font-size: clamp(7px, 1.8vmin, 11px); color: #ffd0da; letter-spacing: 2px; margin: 6px 0 14px; text-shadow: 2px 2px 0 #000; }
.menu { display: flex; flex-direction: column; gap: 8px; width: min(260px, 70vw); }
.btn { font-family: var(--px); font-size: clamp(8px, 1.9vmin, 11px); color: #fff; padding: 11px 14px; border-radius: 10px; border: 2px solid #4b2a7a;
  background: linear-gradient(180deg, #3a1d66, #24113f); box-shadow: 0 4px 0 #120826; cursor: pointer; transition: transform .08s, filter .15s; }
.btn:hover { filter: brightness(1.2); } .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #120826; }
.btn.primary { border-color: #ffd36b; background: linear-gradient(180deg, #ff8a1f, #e8343a); box-shadow: 0 4px 0 #6e0f1a, 0 0 18px rgba(255,120,40,.5); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 4px 0 #6e0f1a, 0 0 30px rgba(255,170,60,.85); } }
.btn.google { background: #fff; color: #222; border-color: #ddd; box-shadow: 0 4px 0 #888; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.link { background: none; border: 0; color: var(--mute); font-family: var(--px); font-size: 8px; text-decoration: underline; cursor: pointer; margin-top: 8px; }
#userBox { margin-top: 12px; min-height: 36px; display: flex; align-items: center; }
#userInfo { display: flex; align-items: center; gap: 8px; font-size: 9px; background: rgba(0,0,0,.35); padding: 6px 10px; border-radius: 20px; }
#userInfo[hidden] { display: none; }
#userInfo img { width: 24px; height: 24px; border-radius: 50%; }
#userInfo .link { margin: 0; }
.best { font-size: 7px; color: var(--gold); margin: 8px 0 0; min-height: 8px; }
.tribute { font-family: system-ui, sans-serif; font-size: 10px; color: rgba(220,200,255,.65); text-align: center; max-width: 640px; margin: 14px auto 0; line-height: 1.4; }
#title.konami .logo-card { box-shadow: 0 0 0 3px #5dff8a, 0 0 0 6px #2a1245, 0 0 40px rgba(93,255,138,.7); }

@media (orientation: portrait) {
  .title-grid { grid-template-columns: 1fr; gap: 14px; }
  .school { order: 2; max-width: 300px; }
}
@media (max-height: 420px) and (orientation: landscape) {
  .overlay { padding: 8px; }
  .btn { padding: 8px 12px; }
  .menu { gap: 6px; }
  .subtitle { margin: 4px 0 8px; }
  .tribute { margin-top: 6px; font-size: 8px; }
  #userBox { margin-top: 6px; }
}

.panel { width: min(760px, 96vw); background: linear-gradient(180deg, rgba(36,17,63,.96), rgba(16,7,32,.96)); border: 2px solid #5b3a8f; border-radius: 16px; padding: 18px;
  box-shadow: 0 0 0 4px rgba(242,201,76,.2), 0 20px 60px rgba(0,0,0,.6); display: flex; flex-direction: column; align-items: center; gap: 12px; margin: auto; }
.panel.small { width: min(340px, 92vw); }
.panel h2 { margin: 0; font-size: clamp(12px, 3vmin, 18px); color: var(--gold); text-shadow: 2px 2px 0 #000; text-align: center; }
.panel h3 { font-size: 9px; color: #7fe6f8; margin: 6px 0; }
.panel p { font-family: system-ui, sans-serif; font-size: 13px; line-height: 1.5; margin: 4px 0; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; }
@media (max-width: 700px) { .cols { grid-template-columns: 1fr; } }
kbd { font-family: var(--px); font-size: 8px; background: #2a1245; border: 1px solid #6a4aa0; border-bottom-width: 3px; border-radius: 4px; padding: 2px 5px; margin: 0 1px; }
.msg { color: var(--mute); text-align: center; }

#rankList { list-style: none; padding: 0; margin: 0; width: 100%; max-height: 52vh; overflow: auto; }
#rankList li { display: grid; grid-template-columns: 42px 30px 1fr auto auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 10px; margin-bottom: 5px;
  background: rgba(255,255,255,.05); font-size: 9px; }
#rankList li:nth-child(1) { background: linear-gradient(90deg, rgba(242,201,76,.35), rgba(242,201,76,.05)); }
#rankList li:nth-child(2) { background: linear-gradient(90deg, rgba(200,210,230,.3), rgba(200,210,230,.04)); }
#rankList li:nth-child(3) { background: linear-gradient(90deg, rgba(205,127,50,.32), rgba(205,127,50,.04)); }
#rankList li.me { outline: 2px solid var(--teal); }
#rankList img, #rankList .nofoto { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: #2a1245; }
#rankList .pos { font-size: 11px; text-align: center; }
#rankList .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: system-ui, sans-serif; font-size: 14px; font-weight: 600; }
#rankList .nome em { font-style: normal; }
#rankList .det { color: var(--mute); font-size: 7px; }
#rankList b { color: var(--gold); font-size: 11px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.stats div { background: rgba(255,255,255,.06); border-radius: 10px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.stats span { font-size: 7px; color: var(--mute); } .stats b { font-size: 12px; color: #fff; }
.eggs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.eggs span { font-family: system-ui, sans-serif; font-size: 11px; padding: 4px 8px; border-radius: 12px; background: rgba(255,255,255,.06); color: #776a99; border: 1px dashed #5b3a8f; }
.eggs span.got { color: #1a0d33; background: var(--gold); border-style: solid; border-color: #fff3b0; }
.rank { font-family: system-ui, sans-serif; font-size: 14px; text-align: center; min-height: 20px; margin: 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.credits { display: flex; gap: 12px; align-items: center; background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px; }
.credits[hidden] { display: none; }
.credits img { width: 54px; height: 54px; background: #fff; border-radius: 10px; padding: 3px; }
.credits p { font-size: 12px !important; }

/* ---------- controle virtual ---------- */
#touch { display: none; position: fixed; inset: auto 0 0 0; height: 0; z-index: 15; pointer-events: none; }
body.touchdev.playing #touch { display: block; }
#dpad { position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); width: clamp(120px, 34vmin, 170px); aspect-ratio: 1; pointer-events: auto; touch-action: none;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.08) 0 30%, rgba(255,255,255,.14) 31% 100%); border: 2px solid rgba(255,255,255,.22); }
.dp { position: absolute; width: 34%; height: 34%; display: grid; place-items: center; color: rgba(255,255,255,.7); font-size: 14px; border-radius: 10px; background: rgba(10,4,24,.35); font-family: system-ui; }
.dp.up { left: 33%; top: 2%; } .dp.down { left: 33%; bottom: 2%; } .dp.left { left: 2%; top: 33%; } .dp.right { right: 2%; top: 33%; }
#dpad[data-dir*="u"] .up, #dpad[data-dir*="d"] .down, #dpad[data-dir*="l"] .left, #dpad[data-dir*="r"] .right { background: rgba(31,163,196,.75); color: #fff; }
#abtns { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: clamp(150px, 42vmin, 210px); aspect-ratio: 1.15; pointer-events: auto; }
.tb { position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); color: #fff; font-family: var(--px); font-size: clamp(12px, 3.4vmin, 18px); touch-action: none; padding: 0;
  box-shadow: 0 4px 0 rgba(0,0,0,.4); opacity: .85; }
.tb.on { transform: translateY(3px) scale(.95); box-shadow: 0 1px 0 rgba(0,0,0,.4); opacity: 1; filter: brightness(1.3); }
.tb.a { width: 42%; aspect-ratio: 1; right: 0; bottom: 0; background: radial-gradient(circle at 35% 30%, #7dff9a, #1f9e4a); }
.tb.b { width: 42%; aspect-ratio: 1; left: 4%; bottom: 14%; background: radial-gradient(circle at 35% 30%, #ff8a8a, #c4123a); }
.tb.c { width: 30%; aspect-ratio: 1; right: 8%; top: 0; background: radial-gradient(circle at 35% 30%, #ffe98a, #c99a10); font-size: clamp(10px, 3vmin, 15px); }

/* ---------- aviso flutuante ---------- */
#toast { position: fixed; left: 50%; top: 12%; transform: translate(-50%, -20px); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
  background: linear-gradient(180deg, rgba(42,18,69,.97), rgba(20,8,36,.97)); border: 2px solid var(--gold); border-radius: 12px; padding: 10px 16px; max-width: min(92vw, 520px); text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 24px rgba(242,201,76,.35); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast b { display: block; font-size: 10px; color: var(--gold); line-height: 1.5; }
#toast span { display: block; font-family: system-ui, sans-serif; font-size: 13px; margin-top: 4px; color: #fff; }