@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Nunito:wght@700;800&display=swap');
* { box-sizing: border-box; }
:root { --ink: #15204a; --gold: #ffc61a; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b6fd6; font-family: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff; user-select: none; -webkit-user-select: none; touch-action: none; }
canvas { display: block; width: 100%; height: 100%; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
.big { font-family: "Lilita One", Impact, sans-serif; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 rgba(21,32,74,.55); }
.pill { background: rgba(255,255,255,.92); border: 3px solid var(--ink); border-radius: 16px; padding: 2px 12px 2px 6px; font-family: "Lilita One", Impact, sans-serif; color: #fff; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }

#coins-box { position: absolute; top: 12px; right: 12px; font-size: 28px; display: flex; align-items: center; gap: 6px; color: var(--gold); }
#coins-box .coin { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe97a, #f5a300 70%); border: 3px solid var(--ink); box-shadow: inset 0 0 0 3px #f59e0b; }

#hp-box { position: absolute; left: 14px; top: 14px; width: 220px; }
#hp-bar { height: 20px; background: rgba(21,32,74,.75); border-radius: 10px; overflow: hidden; border: 3px solid var(--ink); }
#hp-fill { height: 100%; width: 100%; background: #4cff4c; transition: width .15s; }
#hp-text { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-size: 14px; font-family: "Lilita One", Impact, sans-serif; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
#info { font-size: 12px; opacity: .8; margin-top: 4px; }
#score-box { position: absolute; left: 14px; top: 96px; min-width: 150px; max-width: 230px; background: rgba(21,32,74,.55); border: 2px solid var(--ink); border-radius: 10px; padding: 4px 8px; font-size: 13px; line-height: 1.3; display: none; }
#score-box.show { display: block; }
#score-head { font-family: "Lilita One", Impact, sans-serif; font-size: 16px; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
#score-head .t1 { color: #ff6b6b; } #score-head .t2 { color: #6fa8ff; }
#score-rows div { display: flex; justify-content: space-between; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#score-rows .me { color: var(--gold); } #score-rows .t1 { color: #ff8a8a; } #score-rows .t2 { color: #8fbaff; }
#score-rows .t1 span::before, #score-rows .t2 span::before, #end-table .t1 span::before, #end-table .t2 span::before { content: ''; display: inline-block; width: .7em; height: .7em; margin-right: 6px; border: 2px solid var(--ink); vertical-align: -1px; background: #e03030; }
#score-rows .t2 span::before, #end-table .t2 span::before { background: #2f6fe0; }
#match-end { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; background: rgba(21,32,74,.55); pointer-events: none; }
#match-end.show { display: flex; }
#match-end h2 { font-size: 44px; margin: 0 0 10px; text-shadow: 0 3px 6px #000; }
#match-end.t1 h2 { color: #ff6b6b; } #match-end.t2 h2 { color: #6fa8ff; }
#end-table { background: rgba(0,0,0,.45); border-radius: 12px; padding: 10px 24px; font-size: 20px; min-width: 240px; }
#end-table div { display: flex; justify-content: space-between; gap: 24px; }
#end-table .t1 { color: #ff8a8a; } #end-table .t2 { color: #8fbaff; }
#match-end p { font-size: 16px; opacity: .85; }

#hotbar { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.slot { width: 64px; height: 64px; border-radius: 12px; background: rgba(21,32,74,.78); border: 3px solid rgba(255,255,255,.25); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.slot.sel { border-color: #fff; box-shadow: 0 0 0 3px var(--c), 0 0 16px var(--c); }
.slot .num { position: absolute; top: 2px; left: 6px; font-size: 11px; opacity: .7; }
.slot .ico { font-size: 26px; line-height: 1; }
.slot .nm { font-size: 9px; text-align: center; line-height: 1; margin-top: 4px; opacity: .9; }
.slot .ammo { position: absolute; top: 2px; right: 5px; font-size: 12px; font-weight: 800; color: #ffd23c; text-shadow: 0 1px 2px #000; }
.slot .ammo.low { color: #ff5a4a; }
#item-hint { position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%); font-size: 13px; background: rgba(0,0,0,.45); padding: 4px 10px; border-radius: 8px; white-space: nowrap; }
#item-hint:empty { display: none; }

#toast { position: absolute; top: 70px; left: 50%; transform: translateX(-50%) translateY(-20px); color: var(--gold); font-family: "Lilita One", Impact, sans-serif; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 rgba(21,32,74,.55); opacity: 0; transition: all .25s; font-size: 28px; white-space: nowrap; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

#crosshair { position: absolute; left: 50%; top: 36%; width: 18px; height: 18px; margin: -9px; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 0 4px rgba(0,0,0,.8); pointer-events: none; }
#crosshair::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: #fff; border-radius: 50%; }

#hit-flash { position: absolute; inset: 0; background: radial-gradient(circle, transparent 40%, rgba(255,0,0,.55)); opacity: 0; pointer-events: none; }
#hit-flash.show { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }

#death { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; background: rgba(120,0,0,.35); pointer-events: none; }
#death.show { display: flex; }
#death h2 { font-size: 44px; margin: 0; text-shadow: 0 3px 6px #000; }
#death p { font-size: 18px; }

/* táctil */
#joystick { position: absolute; left: 110px; bottom: 120px; width: 130px; height: 130px; border-radius: 50%; background: rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.35); display: none; }
#joystick-knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: rgba(255,255,255,.8); }
.btn { position: absolute; width: 90px; height: 90px; border-radius: 50%; background: rgba(30,90,200,.4); border: 4px solid rgba(255,255,255,.8); display: none; align-items: center; justify-content: center; font-family: "Lilita One", Impact, sans-serif; font-size: 17px; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
#btn-jump { right: 110px; bottom: 150px; }
#btn-action { right: 220px; bottom: 160px; background: rgba(229,57,53,.55); }
body.touch #joystick, body.touch .btn { display: flex; }
#btn-voz { display: flex; right: 12px; top: 118px; left: auto; bottom: auto; width: 58px; height: 58px; font-size: 26px; background: rgba(40,40,60,.45); touch-action: none; user-select: none; }   /* debajo de Salir, lejos de los botones de juego */
#btn-voz.rec { background: rgba(229,57,53,.75); box-shadow: 0 0 0 6px rgba(229,57,53,.3); }
#rec { position: absolute; top: 110px; left: 50%; transform: translateX(-50%); background: rgba(229,57,53,.85); color: #fff; font: 800 15px Nunito, system-ui, sans-serif; padding: 6px 14px; border-radius: 12px; display: none; }
#rec.show { display: block; }
#voz-log { position: absolute; left: 14px; bottom: 120px; max-width: 46vw; font-size: 14px; line-height: 1.35; pointer-events: none; }
#voz-log div { background: rgba(21,32,74,.6); border-radius: 10px; padding: 4px 10px; margin-top: 4px; transition: opacity .8s; }
#voz-log div.fade { opacity: 0; }
#score-rows div[data-name] { cursor: pointer; }
/* en táctil la barra de objetos va bajo Saltar/Acción, a la derecha, para el mismo pulgar */
body.touch #hotbar { left: auto; right: 40px; bottom: 36px; transform: none; justify-content: flex-end; flex-wrap: wrap-reverse; max-width: 320px; gap: 8px; }
body.touch .slot { width: 56px; height: 56px; }
body.touch .slot .nm { display: none; }
body.touch #item-hint { bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 12px; }
body.touch #crosshair { opacity: .5; }

/* pantalla de entrada */
#login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(#3fb4ff, #1b6fd6); z-index: 10; }
#login .card { background: #fff; color: var(--ink); padding: 24px 26px; border-radius: 22px; border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--ink); text-align: center; width: min(92vw, 380px); }
#login h1 { margin: 0 0 6px; font-size: 38px; font-family: "Lilita One", Impact, sans-serif; font-weight: 400; color: #ff4fd8; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
#login p { margin: 0 0 18px; opacity: .85; }
#login input { width: 100%; font-size: 20px; padding: 10px 14px; border-radius: 12px; border: 3px solid var(--ink); background: #fff; color: var(--ink); text-align: center; font-weight: 800; }
#login button { margin-top: 14px; width: 100%; font-size: 24px; padding: 12px; border: 3px solid var(--ink); border-radius: 14px; background: #2ec26b; color: #fff; font-family: "Lilita One", Impact, sans-serif; box-shadow: 0 4px 0 var(--ink); cursor: pointer; }
#login button:active { transform: scale(.98); }
#login .err { color: #e53935; margin-top: 10px; min-height: 20px; font-weight: 800; }
#login .help { font-size: 12px; color: #5a6690; margin-top: 12px; line-height: 1.5; }
#login a { color: #1f86e0; }

/* cuentas y lobby */
#login, #lobby { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(#8fd3ff, #1b6fd6); z-index: 10; padding: 12px; }
#lobby { display: none; }
#lobby.show { display: flex; } #login.hidden { display: none; }
#lobby .card { background: #fff; color: var(--ink); padding: 20px 22px; border-radius: 22px; border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--ink); width: min(96vw, 560px); max-height: 94vh; overflow: auto; text-align: left; }
#lobby h1 { margin: 0; font-size: 34px; font-family: "Lilita One", Impact, sans-serif; font-weight: 400; color: #ff4fd8; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.lobby-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.who { font-weight: 800; color: #5a6690; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
#lobby button, #login button, .cz-actions button { font: 800 15px Nunito, system-ui, sans-serif; border: 3px solid var(--ink); border-radius: 12px; padding: 9px 14px; cursor: pointer; background: #2ec26b; color: #fff; box-shadow: 0 3px 0 var(--ink); }
#lobby button.sec, .cz-actions button.sec { background: #5a6690; }
#lobby button:disabled { background: #9aa3bf; cursor: not-allowed; }
#lobby button:active, #login button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tabs button { flex: 1; background: #e8ecf7 !important; color: var(--ink) !important; box-shadow: none !important; margin: 0 !important; font-size: 15px !important; padding: 8px !important; }
.tabs button.on { background: #1f86e0 !important; color: #fff !important; }
#login input { margin-bottom: 8px; }
#rooms { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.room { display: flex; align-items: center; gap: 10px; border: 3px solid #dfe5f5; border-radius: 14px; padding: 8px 12px; background: #f6f8ff; }
.room .info { flex: 1; min-width: 0; }
.room b { font-size: 17px; }
.room .meta { font-size: 13px; color: #5a6690; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room button.close { background: #e53935 !important; }
.room .cnt { font-family: "Lilita One", Impact, sans-serif; font-size: 20px; color: #1f86e0; }
.room.full .cnt { color: #e53935; }
.create { display: flex; gap: 6px; flex-wrap: wrap; }
.mode-tabs { margin-top: 14px; }
.mode-help { font-size: 13px; opacity: .8; margin: 6px 0 2px; }
#lobby:not([data-mode="equipos"]) .only-equipos, #lobby[data-mode="libre"] .not-libre { display: none; }
.create input, .create select { flex: 1; min-width: 120px; font: 800 15px Nunito, system-ui, sans-serif; padding: 9px 12px; border-radius: 12px; border: 3px solid var(--ink); color: var(--ink); background: #fff; }
.create button { background: #1f86e0 !important; }
#lobby .err { color: #e53935; margin-top: 8px; min-height: 20px; font-weight: 800; }
#lobby .help { font-size: 12px; color: #5a6690; margin-top: 8px; line-height: 1.5; }
#top-btns { position: absolute; top: 64px; right: 12px; display: flex; gap: 6px; }
.mini { font: 800 13px Nunito, system-ui, sans-serif; border: 3px solid var(--ink); border-radius: 10px; padding: 6px 10px; background: rgba(255,255,255,.9); color: var(--ink); cursor: pointer; }

/* editor de personaje */
#customize { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(10,30,80,.55); z-index: 20; padding: 12px; }
#customize.show { display: flex; }
.cz-card { background: #fff; color: var(--ink); border-radius: 22px; border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--ink); padding: 18px 20px; width: min(96vw, 640px); max-height: 94vh; overflow: auto; }
.cz-card h2 { margin: 0 0 10px; font-family: "Lilita One", Impact, sans-serif; font-weight: 400; font-size: 30px; color: #1f86e0; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.cz-body { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.cz-preview { width: 260px; height: 295px; border-radius: 16px; background: linear-gradient(#8fd3ff, #d9f0ff); border: 3px solid #dfe5f5; flex: none; }
/* columnas que pueden encoger (minmax(0, …)): con 1fr un desplegable de texto largo empujaba la tarjeta y salía barra horizontal */
.cz-controls { flex: 1; min-width: 220px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; align-content: start; }
.cz-controls label { display: flex; flex-direction: column; gap: 3px; font-weight: 800; font-size: 13px; color: #5a6690; min-width: 0; }
.cz-controls input[type=color] { width: 100%; height: 34px; border: 3px solid var(--ink); border-radius: 10px; padding: 0; background: #fff; }
.cz-controls select, .cz-controls input[type=text] { font: 800 14px Nunito, system-ui, sans-serif; padding: 7px 8px; border-radius: 10px; border: 3px solid var(--ink); color: var(--ink); background: #fff; width: 100%; min-width: 0; }
.cz-swatches { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.cz-swatches button { width: 30px; height: 30px; border-radius: 9px; border: 3px solid var(--ink); cursor: pointer; padding: 0; }
.cz-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.cz-msg { color: #e53935; font-weight: 800; min-height: 18px; }
@media (max-width: 560px) { .cz-preview { width: 100%; height: 240px; } }

.opt { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: #5a6690; margin-top: 10px; cursor: pointer; }
.opt input { width: 18px; height: 18px; accent-color: #1f86e0; }
.mini.off { opacity: .6; }

/* móvil apaisado (poca altura): todo más pequeño y sin solaparse */
@media (max-height: 540px) {
  #hp-box { width: 150px; top: 8px; left: 10px; }
  #hp-bar { height: 16px; } #hp-text { font-size: 12px; }
  #info { font-size: 10px; margin-top: 2px; white-space: nowrap; }
  #coins-box { top: 8px; right: 10px; font-size: 20px; padding: 1px 10px 1px 5px; }
  #coins-box .coin { width: 24px; height: 24px; }
  #top-btns { top: 48px; right: 10px; gap: 4px; }
  .mini { font-size: 11px; padding: 4px 7px; border-width: 2px; }
  body.touch #joystick { left: 56px; bottom: 28px; width: 104px; height: 104px; }
  body.touch #joystick-knob { width: 46px; height: 46px; margin: -23px; }
  body.touch .btn { width: 66px; height: 66px; font-size: 13px; border-width: 3px; }
  body.touch #btn-jump { right: 56px; bottom: 70px; }
  #btn-voz { top: 96px; right: 10px; width: 48px; height: 48px; font-size: 20px; }
  body.touch #btn-action { right: 136px; bottom: 80px; background: rgba(229,57,53,.55); }
  body.touch #hotbar { right: 12px; bottom: 8px; max-width: 290px; gap: 5px; }
  body.touch .slot { width: 44px; height: 44px; border-width: 2px; border-radius: 9px; }
  body.touch .slot .ico { font-size: 20px; } body.touch .slot .num { font-size: 9px; top: 1px; left: 4px; }
  #item-hint { display: none; }
  #crosshair { width: 14px; height: 14px; margin: -7px; }
}

#shield-box { position: absolute; left: 14px; top: 64px; display: none; background: rgba(63,169,255,.9); font-size: 13px; padding: 2px 10px; border-width: 2px; }
#shield-box.show { display: block; }
@media (max-height: 540px) { #shield-box { top: 44px; left: 10px; font-size: 11px; padding: 1px 8px; } #score-box { top: 66px; left: 10px; font-size: 11px; padding: 2px 6px; min-width: 110px; } #score-head { font-size: 13px; } #match-end h2 { font-size: 30px; } #end-table { font-size: 14px; padding: 6px 14px; } } #voz-log { bottom: 150px; left: 10px; font-size: 12px; max-width: 40vw; }