* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
background: #3f6214;
font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
-webkit-user-select: none; user-select: none;
}
canvas#view { position: fixed; left: 0; top: 0; display: block; cursor: default; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
.box {
background: rgba(220, 222, 214, 0.72);
border-radius: 7px;
color: #000;
}
.panel {
background: rgba(255, 255, 255, 0.72);
border-radius: 7px;
}
.btn { border: 0; padding: 4px 10px; font-size: 13px; }
.btn:hover { background: rgba(240, 242, 236, 0.9); }
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud button, #hud input, #hud .tab, #hud #quickbar .q { pointer-events: auto; }
/* arriba a la izquierda: marcador y tiempo */
#topleft { position: absolute; left: 6px; top: 6px; }
#topleft .row { display: flex; gap: 14px; align-items: stretch; }
#scorecontainer { display: flex; align-items: stretch; overflow: hidden; height: 30px; }
#scorecontainer .leftcolor, #scorecontainer .rightcolor { width: 13px; }
#score { padding: 0 22px; font-size: 21px; line-height: 30px; }
#timer { padding: 0 18px; font-size: 21px; line-height: 30px; height: 30px; }
#roomtag { margin-top: 6px; display: inline-block; font-size: 10px; padding: 1px 8px; background: rgba(220,222,214,0.72); border-radius: 6px; }
/* estado del campo, arriba en el centro */
#statuscontainer {
position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#status { font-size: 19px; padding: 2px 12px; white-space: nowrap; }
#statustimer { font-size: 18px; padding: 1px 10px; min-width: 28px; text-align: center; white-space: nowrap; }
#newrank { position: absolute; top: 92px; left: 50%; transform: translateX(-50%); font-size: 14px; padding: 3px 10px; display: none; white-space: nowrap; }
#notice { position: absolute; top: 130px; left: 50%; transform: translateX(-50%); font-size: 13px; padding: 4px 12px; display: none; white-space: nowrap; }
/* arriba a la derecha */
#topright { position: absolute; right: 8px; top: 6px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#coinrow { display: flex; align-items: center; gap: 26px; }
/* monedas (con + para comprar monedas) y botón de la tienda, arriba a la derecha */
#coinwrap { display: flex; align-items: center; gap: 6px; }
#coins {
display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 7px; border-radius: 10px;
background: rgba(16, 28, 24, 0.86); border: 1px solid rgba(255, 255, 255, 0.08); color: #f4f1e8;
font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; font-size: 21px; font-variant-numeric: tabular-nums;
}
#coinplus {
width: 28px; height: 28px; border: 0; border-radius: 7px; padding: 0; background: #C8F23A; color: #10200a;
font-family: Barlow, Arial, sans-serif; font-weight: 800; font-size: 20px; line-height: 28px;
transition: transform 80ms ease-out, background-color 120ms;
}
#coinplus:hover { background: #d8ff5a; }
#coinplus:active { transform: scale(0.92); }
#shopbtn3 {
display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px; border-radius: 10px;
background: rgba(16, 28, 24, 0.86); border: 1px solid rgba(255, 255, 255, 0.08); color: #f4f1e8;
font-family: Barlow, Arial, sans-serif; font-weight: 600; font-size: 14px; transition: background-color 120ms, transform 80ms ease-out;
}
#shopbtn3 svg { width: 18px; height: 18px; color: #C8F23A; }
#shopbtn3:hover { background: rgba(28, 46, 40, 0.95); }
#shopbtn3:active { transform: scale(0.97); }
/* fps y ping, arriba a la izquierda */
#perf {
display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0 6px; height: 22px; padding: 0 9px; border-radius: 6px;
background: rgba(16, 28, 24, 0.78); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(244, 241, 232, 0.88);
font-family: Barlow, Arial, sans-serif; font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
#perf .dot { width: 7px; height: 7px; border-radius: 2px; background: #7d8a80; }
#perf.good .dot { background: #C8F23A; }
#perf.ok .dot { background: #f5c518; }
#perf.bad .dot { background: #ff6b5a; }
.coinicon {
display: inline-block; width: 24px; height: 24px; flex: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15.5' fill='%23b8780a'/%3E%3Ccircle cx='16' cy='16' r='13.5' fill='%23f2b31f'/%3E%3Ccircle cx='16' cy='16' r='10.5' fill='none' stroke='%23ffe07a' stroke-width='1.6'/%3E%3Cpolygon points='16,10.2 21.5,14.2 19.4,20.6 12.6,20.6 10.5,14.2' fill='%23c98a0c'/%3E%3C/svg%3E") center / contain no-repeat;
}
.coinicon.big { width: 44px; height: 44px; }
#leaderboard { width: 245px; padding-bottom: 6px; }
.tabs { display: flex; }
.tab {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
font-size: 14px; padding: 6px 0; color: #111; cursor: pointer;
background: rgba(190, 196, 184, 0.55); border-radius: 7px 7px 0 0;
}
.tab.active { background: transparent; }
#lblist { list-style: none; margin: 2px 0 0; padding: 0 10px; font-size: 13px; }
#lblist li { display: flex; align-items: center; height: 19.5px; color: #111; }
#lblist li .n { width: 26px; text-align: right; margin-right: 6px; }
#lblist li canvas { width: 17px; height: 11px; margin-right: 6px; flex: none; }
#lblist li .nm { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#lblist li .sc { margin-left: 6px; }
#lblist li.me { color: #0a1fff; }
#frlist { font-family: Arial, sans-serif; font-size: 12px; padding: 12px; color: #444; text-align: center; }
#minimapbox { background: rgba(255, 255, 255, 0.35); border-radius: 6px; padding: 4px; }
#minimap { display: block; width: 210px; }
.ico { display: inline-block; width: 16px; height: 14px; background-repeat: no-repeat; background-size: contain; }
.ico.podium { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M1 17V10h7v7M8 17V4h8v13M16 17V8h7v9' fill='none' stroke='%23222' stroke-width='1.6'/%3E%3C/svg%3E"); width: 22px; }
.ico.people { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Ccircle cx='9' cy='6' r='4' fill='none' stroke='%23222' stroke-width='1.6'/%3E%3Cpath d='M2 19c0-5 3-7 7-7s7 2 7 7' fill='none' stroke='%23222' stroke-width='1.6'/%3E%3Ccircle cx='17' cy='5' r='3' fill='none' stroke='%23222' stroke-width='1.4'/%3E%3Cpath d='M17 10c3 0 6 2 6 6' fill='none' stroke='%23222' stroke-width='1.4'/%3E%3C/svg%3E"); width: 20px; }
.ico.shirtico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 28'%3E%3Cpath d='M10 3q5 4 10 0l6 3 3 7-4.5 1.5-1-2.5v15H6.5V12l-1 2.5L1 13l3-7z' fill='%23b01c22' stroke='%23222' stroke-width='1.2'/%3E%3C/svg%3E"); }
.ico.bubble { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M2 2h16v10H8l-4 4v-4H2z' fill='none' stroke='%23222' stroke-width='1.6'/%3E%3C/svg%3E"); width: 14px; height: 12px; vertical-align: -1px; }
/* panel de gol / final */
#goal {
position: absolute; left: 50%; bottom: 68px; transform: translateX(-50%);
display: none; flex-direction: column;
background: rgba(220, 222, 214, 0.62); border-radius: 7px; overflow: hidden; min-width: 240px;
}
#goaltop { font-size: 13px; padding: 4px 8px 2px; color: #111; white-space: nowrap; }
#goalrow { display: flex; align-items: stretch; height: 66px; }
#goalrow .leftcolor, #goalrow .rightcolor { width: 44px; }
#goalscore { flex: 1; text-align: center; font-size: 56px; line-height: 66px; padding: 0 20px; color: #000; white-space: nowrap; }
/* botón de ver el partido */
#spectatebtn { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); font-size: 13px; padding: 5px 14px; pointer-events: auto; }
/* mensajes rápidos */
#quickbar {
position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
display: grid; grid-template-columns: repeat(5, auto); gap: 3px 20px;
}
#quickbar .q { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #fff; cursor: pointer; text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 1px #000; white-space: nowrap; }
#quickbar .q .k { display: inline-block; min-width: 14px; height: 15px; line-height: 15px; text-align: center; border-radius: 4px; background: rgba(210, 212, 204, 0.85); color: #222; font-size: 10px; text-shadow: none; padding: 0 2px; }
/* chat */
#chat { position: absolute; left: 6px; bottom: 6px; width: 380px; }
#chatlog {
font-family: Arial, sans-serif; font-size: 12px; line-height: 15px; color: #fff;
text-shadow: 0 0 2px #000, 0 0 2px #000; max-height: 260px; overflow: hidden;
display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 4px;
}
#chatlog .nm { color: #3a5cff; font-weight: bold; }
#chatlog .me { color: #ff3030; }
#chatlog .sys { color: #ffea00; }
#chatlog .sys2 { color: #ffb000; }
#chatinput {
display: none; width: 100%; margin-bottom: 4px; font-family: Arial, sans-serif; font-size: 13px;
border: 0; border-radius: 6px; padding: 5px 8px; background: rgba(255, 255, 255, 0.85); outline: none;
}
#chatbtns { display: flex; gap: 8px; }
#chatbtns .btn { font-size: 13px; padding: 3px 12px; }
/* botones con su tecla, abajo a la derecha ("Focus · F") */
#hudbtns { position: absolute; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 300px; }
.pill {
height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px;
background: rgba(16, 28, 24, 0.82); color: #f4f1e8; white-space: nowrap;
font-family: Barlow, Arial, sans-serif; font-weight: 600; font-size: 13px;
transition: background-color 120ms, border-color 120ms, transform 80ms ease-out;
}
.pill .k { color: rgba(244, 241, 232, 0.6); }
.pill:hover { background: rgba(28, 46, 40, 0.92); }
.pill:active { transform: scale(0.97); }
.pill.on { color: #C8F23A; border-color: rgba(200, 242, 58, 0.55); }
.pill.on .k { color: rgba(200, 242, 58, 0.7); }
.pill.off { color: rgba(244, 241, 232, 0.45); }
/* modo Focus: fuera chat y mensajes rápidos */
#hud.focus #chat, #hud.focus #quickbar { display: none !important; }
/* ventanas (teclas, tienda, perfil, ajustes): mismo estilo oscuro que el inicio */
#keys, #shop, #profile, #settingsmodal, #coinshop, #modmodal {
position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
background: rgba(4, 10, 8, 0.5); font-family: Barlow, Arial, sans-serif; color: #f4f1e8;
}
#profile { z-index: 10; }
#shop { z-index: 11; }
#settingsmodal { z-index: 12; }
#coinshop { z-index: 11; }
#modmodal { z-index: 12; }
#keys { z-index: 13; }
#keyspanel, #shoppanel, #profilepanel, #setpanel, #coinpanel, #modpanel {
max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 24px;
background: rgba(16, 28, 24, 0.97); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; color: #f4f1e8;
animation: popin 200ms ease-out;
}
@keyframes popin { from { opacity: 0; transform: translateY(8px); } }
#keyspanel { width: 560px; }
#keyshead, #shophead > span:first-child, .modalhead > span { font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; font-size: 28px; line-height: 1; }
#keyshelp, #keysmouserow { font-size: 13px; color: #a9b3a6; }
#keysmouserow { display: flex; align-items: center; gap: 8px; cursor: pointer; }
#keyslist { overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; }
.kgroup { font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #C8F23A; margin: 12px 0 4px; }
.krow { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.klabel { flex: 1; font-size: 14px; color: #f4f1e8; }
.kslot { width: 108px; height: 28px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px; background: #17261b; font-family: Barlow, Arial, sans-serif; font-weight: 600; font-size: 13px; color: #f4f1e8; }
.kslot:hover { border-color: #C8F23A; }
.kslot.empty { color: rgba(244, 241, 232, 0.35); }
.kslot.wait { background: rgba(200, 242, 58, 0.18); border-color: #C8F23A; }
#keysmsg { font-size: 13px; color: #ff8a7a; min-height: 16px; }
#keysbtns { display: flex; justify-content: space-between; gap: 8px; }
#keysbtns .btn, #shopclose, #closeprofile {
height: 36px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; background: transparent;
color: #f4f1e8; font-family: Barlow, Arial, sans-serif; font-weight: 600; font-size: 14px;
}
#keysbtns .btn:hover, #shopclose:hover, #closeprofile:hover { border-color: #f4f1e8; background: transparent; }
#keysclose { background: #C8F23A !important; color: #10200a !important; border-color: #C8F23A !important; }
#shoppanel { width: 680px; }
#shophead { display: flex; justify-content: space-between; align-items: center; }
#shopcoins { display: flex; align-items: center; gap: 6px; font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; font-size: 20px; padding: 4px 12px; background: #17261b; color: #f5c518; border-radius: 8px; }
#shophelp { font-size: 13px; color: #a9b3a6; }
#shopmsg { font-size: 13px; color: #C8F23A; min-height: 16px; }
#shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; overflow-y: auto; min-height: 0; padding-right: 4px; }
.shopitem { background: #17261b; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.shopitem.equipped { border-color: #C8F23A; }
.shopitem canvas { width: 72px; height: 72px; }
.shopitem .sn { font-size: 12px; font-weight: 600; color: #f4f1e8; text-align: center; }
.shopitem .btn { width: 100%; height: 28px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.1); color: #f4f1e8; font-family: Barlow, Arial, sans-serif; font-weight: 600; font-size: 12px; }
.shopitem .btn:hover { background: rgba(255, 255, 255, 0.18); }
.shopitem .btn:disabled { opacity: 0.5; cursor: default; }
.shopitem.equipped .btn { background: transparent; color: #C8F23A; opacity: 1; }
#shopclose { align-self: flex-end; }
#profilepanel { width: 360px; align-items: stretch; }
#profilehead { display: flex; align-items: center; gap: 10px; font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; font-size: 26px; }
#profilebody { font-size: 14px; line-height: 2; }
#profilebody .r { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
#profilebody .r span { color: #a9b3a6; }
#profilebody .r b { font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; font-size: 17px; }
#closeprofile { align-self: flex-end; }
@media (max-width: 700px) {
#leaderboard, #minimapbox { display: none; }
#chat { width: 60vw; }
#quickbar { display: none; }
}
/* pantalla de inicio (como TeamBall 3, sin tutorial): el mundo en vivo detrás, oscurecido desde la izquierda */
:root {
--ink: #0f1a12; --panel: rgba(16, 28, 24, 0.86); --panel-solid: #101c18; --ink-2: #17261b;
--line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.18);
--chalk: #f4f1e8; --muted: #a9b3a6; --lime: #C8F23A; --lime-hi: #d8ff5a; --lime-ink: #10200a;
--gold: #f5c518; --ranked: #3d8bfd; --danger: #ff8a7a; --discord: #5865f2; --discord-hi: #4752c4;
--display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; --text: Barlow, Arial, sans-serif;
}
#start {
position: fixed; inset: 0; overflow-y: auto; font-family: var(--text); color: var(--chalk);
display: grid; grid-template-columns: minmax(0, 520px) 1fr minmax(0, 420px); grid-template-rows: 1fr auto;
gap: 24px 32px; padding: 48px 32px 24px 64px;
}
#startshade {
position: fixed; inset: 0; pointer-events: none;
background: linear-gradient(90deg, rgba(6, 14, 11, 0.94) 0%, rgba(6, 14, 11, 0.8) 34%, rgba(6, 14, 11, 0.25) 62%, rgba(6, 14, 11, 0.45) 100%);
}
#startleft { position: relative; grid-column: 1; align-self: center; display: flex; flex-direction: column; gap: 16px; animation: slidein 240ms ease-out; }
#startright { position: relative; grid-column: 3; align-self: center; display: flex; flex-direction: column; gap: 16px; animation: slidein 240ms ease-out 60ms both; }
@keyframes slidein { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { #startleft, #startright, #keyspanel, #shoppanel, #profilepanel, #setpanel, #menupanel { animation: none !important; } }
#startlogo {
margin: 0; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 104px; line-height: 0.86;
letter-spacing: -0.01em; color: var(--chalk);
-webkit-text-stroke: 3px #0b1410; paint-order: stroke fill; text-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
}
#startlogo span { color: var(--lime); }
#beta {
align-self: flex-start; margin-top: -4px; padding: 2px 10px; border: 1px solid var(--line-2); border-radius: 6px;
font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
#startsub { margin: 0; max-width: 440px; font-size: 16px; line-height: 1.5; color: rgba(244, 241, 232, 0.82); }
.startrow { display: flex; gap: 8px; margin-top: 8px; }
#nameinput, #countryselect, #numinput {
font-family: var(--text); font-size: 16px; color: var(--chalk); background: rgba(16, 28, 24, 0.9);
border: 1px solid var(--line-2); border-radius: 10px; outline: none; height: 48px;
}
#nameinput { flex: 1; min-width: 0; padding: 0 16px; font-weight: 600; }
#nameinput::placeholder { color: rgba(169, 179, 166, 0.6); font-weight: 400; }
#countryselect { width: 148px; padding: 0 10px; }
#countryselect option { background: var(--panel-solid); color: var(--chalk); }
#nameinput:focus, #countryselect:focus, #numinput:focus { border-color: var(--lime); }
#playbtn {
height: 88px; width: 100%; border: 0; border-radius: 12px; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 16px;
background: var(--lime); color: var(--lime-ink); box-shadow: 0 6px 0 #6f8f12;
font-family: var(--display); font-weight: 800; font-style: italic; font-size: 56px; letter-spacing: 0.02em;
transition: transform 80ms ease-out, box-shadow 80ms ease-out, background-color 120ms;
}
#playbtn:hover { background: var(--lime-hi); }
#playbtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #6f8f12; }
#playbtn .ballico { width: 44px; height: 44px; }
#signedout { display: flex; flex-direction: column; gap: 8px; }
.authrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#googlebtn { min-height: 44px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.authbtn {
height: 44px; width: 100%; border: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--text); font-weight: 600; font-size: 15px; transition: transform 80ms ease-out, background-color 120ms;
}
.authbtn:active { transform: scale(0.97); }
.authbtn svg { width: 20px; height: 20px; flex: none; }
.authbtn.google { background: #fff; color: #1f1f1f; }
.authbtn.google:hover { background: #eceee9; }
.authbtn.discord { background: var(--discord); color: #fff; }
.authbtn.discord:hover { background: var(--discord-hi); }
.fine { margin: 0; font-size: 13px; color: var(--muted); }
#authmsg { font-size: 13px; color: var(--danger); }
#authmsg.info { color: var(--muted); }
#authmsg:empty { display: none; }
#netline { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
#netline i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
#netline.on { color: var(--chalk); }
#netline.on i { background: var(--lime); box-shadow: 0 0 0 4px rgba(200, 242, 58, 0.16); }
.spanel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
#startcard { display: flex; flex-direction: column; gap: 16px; }
.cardhead { display: flex; align-items: center; gap: 12px; }
#accavatar { width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; background: #e9eae4; border: 3px solid var(--lime); }
#accavatar img, #accavatar canvas { width: 100%; height: 100%; display: block; }
#accinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#accname { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#accvia { font-size: 13px; color: var(--muted); }
#cardscore { display: flex; flex-direction: column; align-items: flex-end; }
#scoreval { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
#rankname { font-size: 12px; font-weight: 600; color: var(--muted); }
.drow { display: flex; align-items: center; justify-content: space-between; }
.shirtwrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#shirtpreview { width: 120px; height: 120px; }
#shirtname { font-weight: 600; font-size: 14px; }
.arrow {
width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent;
color: var(--chalk); font-size: 12px; transition: border-color 120ms, transform 80ms ease-out;
}
.arrow:hover { border-color: var(--chalk); }
.arrow:active { transform: scale(0.94); }
.cardrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.numlabel { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
#numinput { width: 64px; height: 36px; padding: 0 4px 0 12px; font-family: var(--display); font-weight: 700; font-size: 18px; text-align: center; border-radius: 8px; }
#stats { display: flex; gap: 16px; }
.stat span { display: block; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.stat b { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat.coins b { color: var(--gold); }
.sbtn2 {
height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: transparent; color: var(--chalk);
font-family: var(--text); font-weight: 600; font-size: 14px; transition: border-color 120ms, transform 80ms ease-out;
}
.sbtn2:hover { border-color: var(--chalk); }
.sbtn2:active { transform: scale(0.97); }
.sbtn2.small { height: 34px; padding: 0 14px; font-size: 13px; }
#signedin { display: flex; justify-content: center; gap: 16px; margin-top: -8px; }
.linkbtn { background: none; border: 0; padding: 4px; font-family: var(--text); font-size: 12px; color: var(--muted); text-decoration: underline; }
.linkbtn:hover { color: var(--chalk); }
.linkbtn.danger:hover { color: var(--danger); }
#topcard { padding: 20px 20px 12px; }
.toptitle { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1; }
.toptitle svg { width: 22px; height: 22px; color: var(--muted); }
.tophead, #toplist li { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; }
.tophead { padding: 0 8px 6px; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
#toplist { list-style: none; margin: 0; padding: 0; }
#toplist li { height: 32px; padding: 0 8px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }
#toplist li .n { color: var(--muted); font-variant-numeric: tabular-nums; }
#toplist li.p1 .n { color: var(--gold); }
#toplist li.p2 .n { color: #d3d7de; }
#toplist li.p3 .n { color: #d39a62; }
#toplist li .who { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#toplist li .who canvas { width: 20px; height: 13px; flex: none; border-radius: 2px; }
#toplist li b { font-family: var(--display); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
#toplist li.empty { display: block; height: auto; padding: 12px 8px; font-weight: 400; color: var(--muted); line-height: 1.5; }
#startbottom { position: relative; grid-column: 1 / -1; grid-row: 2; display: flex; align-items: flex-end; justify-content: space-between; }
.pillbig {
height: 48px; padding: 0 20px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-2); border-radius: 10px;
background: var(--panel); color: var(--chalk); font-family: var(--text); font-weight: 600; font-size: 16px;
transition: border-color 120ms, transform 80ms ease-out;
}
.pillbig:hover { border-color: var(--chalk); }
.pillbig:active { transform: scale(0.97); }
.pillbig svg { width: 22px; height: 22px; }
#legal { display: flex; gap: 16px; font-size: 13px; }
#legal a { color: rgba(244, 241, 232, 0.72); text-decoration: none; }
#legal a:hover { color: var(--chalk); text-decoration: underline; }
/* menú Esc: entra por la izquierda; el mundo sigue jugando detrás */
#menu { position: fixed; inset: 0; z-index: 9; background: rgba(4, 10, 8, 0.25); font-family: var(--text); color: var(--chalk); }
#menupanel {
position: absolute; left: 16px; top: 16px; bottom: 16px; width: 340px; max-width: calc(100vw - 32px); overflow-y: auto;
display: flex; flex-direction: column; gap: 6px; padding: 20px;
background: rgba(16, 28, 24, 0.96); border: 1px solid var(--line); border-radius: 12px;
animation: menuin 200ms ease-out;
}
@keyframes menuin { from { opacity: 0; transform: translateX(-16px); } }
.menuhead { display: flex; align-items: center; justify-content: space-between; }
.menulogo, .modalhead > span { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 30px; line-height: 1; }
.menulogo span { color: var(--lime); }
.xbtn { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--chalk); font-size: 26px; line-height: 1; }
.xbtn:hover { background: rgba(255, 255, 255, 0.08); }
.menunote { margin: 4px 0 10px; font-size: 13px; color: var(--muted); }
.mitem {
height: 48px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--chalk); text-align: left;
font-family: var(--text); font-weight: 600; font-size: 17px; transition: background-color 120ms, transform 80ms ease-out;
}
.mitem:hover { background: rgba(255, 255, 255, 0.07); }
.mitem:active { transform: scale(0.98); }
.mitem.primary { background: var(--lime); color: var(--lime-ink); }
.mitem.primary:hover { background: var(--lime-hi); }
#menukeys { margin-top: 8px; }
#menukeys summary { cursor: pointer; padding: 8px 4px; font-weight: 600; font-size: 14px; color: var(--muted); }
#menukeys summary:hover { color: var(--chalk); }
/* ajustes */
#setpanel { width: 440px; }
.modalhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.modalhead > span { font-style: normal; font-weight: 700; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; cursor: pointer; }
.settitle { margin-top: 8px; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.switch {
appearance: none; -webkit-appearance: none; width: 44px; height: 24px; border-radius: 12px; margin: 0; cursor: pointer;
background: rgba(255, 255, 255, 0.16); position: relative; transition: background-color 150ms;
}
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--chalk); transition: transform 150ms ease-out; }
.switch:checked { background: var(--lime); }
.switch:checked::after { transform: translateX(20px); background: var(--lime-ink); }
.ctlbox { display: flex; flex-direction: column; font-size: 13px; }
.ctl { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.ctl b { font-weight: 600; color: var(--chalk); }
.ctl span { color: var(--muted); text-align: right; }
.ctlnote { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.ctlnote .ranked { color: var(--ranked); }
/* modo foto: fuera el HUD */
body.photo #hud { display: none !important; }
#photohint {
position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 9; padding: 8px 14px; border-radius: 10px;
background: rgba(16, 28, 24, 0.86); color: #f4f1e8; font-family: Barlow, Arial, sans-serif; font-weight: 600; font-size: 13px;
}
@media (max-width: 1100px) {
#start { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); padding: 32px 24px 20px; }
#startright { grid-column: 2; }
#startlogo { font-size: 84px; }
}
@media (max-width: 760px) {
#start { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; padding: 24px 16px; gap: 24px; }
#startleft, #startright { grid-column: 1; align-self: start; }
#startbottom { grid-row: auto; }
#startshade { background: rgba(6, 14, 11, 0.82); }
#startlogo { font-size: 64px; -webkit-text-stroke-width: 2px; }
#playbtn { height: 72px; font-size: 44px; }
.authrow { grid-template-columns: 1fr; }
}
/* comprar monedas */
#coinpanel { width: 560px; }
.cnote { margin: 0; font-size: 14px; color: #a9b3a6; line-height: 1.5; }
.cnote.soon { color: #f4f1e8; font-weight: 600; }
#packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pack {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px 10px;
background: #17261b; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px;
}
.pack.best { border-color: rgba(200, 242, 58, 0.55); }
.pack b { font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 800; font-size: 26px; line-height: 1; color: #f5c518; }
.pack .bonus { min-height: 16px; font-size: 12px; font-weight: 700; color: #C8F23A; }
.pack button {
width: 100%; height: 32px; border: 0; border-radius: 7px; background: #C8F23A; color: #10200a;
font-family: Barlow, Arial, sans-serif; font-weight: 700; font-size: 14px;
}
.pack button:disabled { background: rgba(255, 255, 255, 0.1); color: rgba(244, 241, 232, 0.55); cursor: default; }
@media (max-width: 560px) { #packs { grid-template-columns: repeat(2, 1fr); } }
/* tienda con pestañas */
#shoppanel { width: 720px; height: min(760px, 100%); }
#shoptabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); overflow-x: auto; }
.stab {
height: 36px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; white-space: nowrap;
color: #a9b3a6; font-family: Barlow, Arial, sans-serif; font-weight: 600; font-size: 14px;
}
.stab:hover { color: #f4f1e8; }
.stab.active { color: #f4f1e8; border-bottom-color: #C8F23A; }
#shopgrid, .shoptab { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.shoptab { display: flex; flex-direction: column; gap: 12px; }
.shoptab.hidden { display: none; }
.tabhelp { margin: 0; font-size: 13px; color: #a9b3a6; line-height: 1.5; }
.shoptab .empty { margin: 24px 0; text-align: center; color: #a9b3a6; font-size: 14px; }
.emogrid, .shopgrid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }
.shopitem .by { font-size: 11px; color: #a9b3a6; text-align: center; }
.shopitem .linkbtn { padding: 0; font-size: 11px; }
.minerow { display: flex; align-items: center; gap: 12px; padding: 8px; background: #17261b; border-radius: 10px; }
.minerow canvas { width: 64px; height: 64px; }
.minebox { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, 0.05); font-size: 12px; color: #a9b3a6; flex: none; }
.mineinfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mineinfo b { font-size: 15px; }
.reason { font-size: 12px; color: #a9b3a6; }
.chip { align-self: flex-start; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.chip.pending { background: rgba(245, 197, 24, 0.16); color: #f5c518; }
.chip.approved { background: rgba(200, 242, 58, 0.16); color: #C8F23A; }
.chip.rejected, .chip.removed { background: rgba(255, 107, 90, 0.16); color: #ff8a7a; }
/* estudio de creación */
.studio { display: flex; flex-direction: column; gap: 12px; }
.stbar { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { display: inline-flex; padding: 3px; gap: 3px; background: #17261b; border-radius: 9px; }
.seg button { height: 30px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: #a9b3a6; font-family: Barlow, Arial, sans-serif; font-weight: 600; font-size: 13px; }
.seg button.on { background: rgba(255, 255, 255, 0.1); color: #f4f1e8; }
.seg button.hidden { display: none; }
.strow { display: flex; gap: 16px; align-items: flex-start; }
.stleft { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
#stcanvas { width: 256px; height: 256px; border-radius: 10px; background: #e9eae4; cursor: crosshair; }
.stmini { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #a9b3a6; }
#sttoken { width: 64px; height: 64px; }
.stright { flex: 1; min-width: 0; }
.stpanel { display: flex; flex-direction: column; gap: 10px; }
.stpanel.hidden { display: none; }
.stlabel { font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #a9b3a6; }
.stpatterns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stpat { padding: 4px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; background: #17261b; }
.stpat canvas { width: 100%; display: block; }
.stpat.on { border-color: #C8F23A; }
.stcolors, .sttools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 13px; color: #a9b3a6; }
.stcolors label, .stcustom { display: flex; align-items: center; gap: 8px; }
input[type="color"] { width: 40px; height: 30px; padding: 2px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; background: #17261b; cursor: pointer; }
.stpalette { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.stsw { aspect-ratio: 1; border: 2px solid rgba(255, 255, 255, 0.12); border-radius: 7px; }
.stsw.on { border-color: #C8F23A; box-shadow: 0 0 0 2px rgba(200, 242, 58, 0.35); }
.sbtn2.on { border-color: #C8F23A; color: #C8F23A; }
.sbtn2.danger:hover { border-color: #ff8a7a; color: #ff8a7a; }
#stfile { font-family: Barlow, Arial, sans-serif; font-size: 13px; color: #a9b3a6; }
#stname, #modname {
height: 40px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; background: #17261b; color: #f4f1e8;
font-family: Barlow, Arial, sans-serif; font-weight: 600; font-size: 15px; outline: none;
}
#stname:focus, #modname:focus { border-color: #C8F23A; }
.strules { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: #a9b3a6; cursor: pointer; }
.primarybtn {
height: 42px; padding: 0 20px; border: 0; border-radius: 10px; background: #C8F23A; color: #10200a;
font-family: Barlow, Arial, sans-serif; font-weight: 700; font-size: 15px; transition: background-color 120ms, transform 80ms ease-out;
}
.primarybtn:hover { background: #d8ff5a; }
.primarybtn:active { transform: scale(0.97); }
.primarybtn.small { height: 34px; padding: 0 14px; font-size: 13px; }
#stmsg, #modmsg { margin: 0; min-height: 18px; font-size: 13px; color: #ff8a7a; }
#stmsg.ok { color: #C8F23A; }
@media (max-width: 640px) { .strow { flex-direction: column; align-items: stretch; } .stleft { align-self: center; } }
/* barra de emotes (tecla E) */
#emotebar {
position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px;
background: rgba(16, 28, 24, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; pointer-events: auto;
}
#emotebar.hidden { display: none; }
.emo { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 9px; background: rgba(255, 255, 255, 0.06); }
.emo:hover { background: rgba(255, 255, 255, 0.14); }
.emo:active { transform: scale(0.94); }
/* moderación */
#modpanel { width: 720px; height: min(760px, 100%); }
#modpanel .modalhead { gap: 12px; }
#modcount { flex: 1; font-size: 13px; color: #a9b3a6; }
#modlist { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
#modlist .empty { margin: 24px 0; text-align: center; color: #a9b3a6; }
.modrow { display: flex; gap: 16px; padding: 12px; background: #17261b; border-radius: 10px; }
.modpv { display: flex; align-items: flex-end; gap: 8px; flex: none; }
.modpv > canvas { width: 128px; height: 128px; border-radius: 8px; background: #e9eae4; image-rendering: pixelated; }
.modmini { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: #a9b3a6; }
.modmini canvas { width: 48px; height: 48px; }
.modinfo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.modinfo b { font-size: 17px; }
.modinfo > span { font-size: 13px; color: #a9b3a6; }
.modbtns { display: flex; gap: 8px; margin-top: 4px; }
#modadmin { display: flex; flex-direction: column; gap: 8px; }
#modadmin.hidden { display: none; }
.modmod { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 14px; }
.modadd { display: flex; gap: 8px; }
.modadd input { flex: 1; }
#setaccid { font-family: Consolas, monospace; font-size: 13px; color: #a9b3a6; user-select: all; }