@font-face {
  font-family: "Pixelify Sans";
  src: url("./fonts/pixelify-sans.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
/* Números em outra fonte pixel (Silkscreen): esta família só cobre 0-9 e vem
   antes da Pixelify em toda pilha de fonte do espaço, então as letras seguem
   na Pixelify e só os dígitos trocam. */
@font-face {
  font-family: "Shimo Digits";
  src: url("./fonts/silkscreen-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 599;
  font-display: swap;
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: "Shimo Digits";
  src: url("./fonts/silkscreen-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  unicode-range: U+0030-0039;
}

/* Espaço do servidor (public/space/space.js): o mapa entra no lugar da grade
   de cards da call; cabeçalho e controles da call continuam os de sempre. */
.call-viewer.is-space > .call-viewer-grid { display: none; }
.space-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border: 2px solid #070b12;
  box-shadow: inset 0 0 0 2px #1a2433;
  background: #0d1420;
  font-family: "Shimo Digits", "Pixelify Sans", "Courier New", monospace;
}
.space-canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; cursor: pointer; }
.space-canvas:focus-visible { box-shadow: inset 0 0 0 2px #f0b030; }
.space-plate { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; max-width: calc(100% - 20px); }
.space-room { display: flex; flex-direction: column; background: #1b2635; color: #e7edf5; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66; padding: 5px 10px 6px; }
.space-room b { font-size: 18px; font-weight: 700; line-height: 1.1; }
.space-room span { font-size: 12px; color: #93a3b8; }
.space-hear { background: rgba(13, 20, 32, .86); color: #93a3b8; border: 2px solid #070b12; padding: 3px 9px; font-size: 12px; }
.space-hint { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); pointer-events: none; background: rgba(13, 20, 32, .82); color: #93a3b8; border: 2px solid #070b12; padding: 3px 9px; font-size: 12px; line-height: 1.6; }
.space-hint kbd { font: 500 11px "Shimo Digits", "Pixelify Sans", monospace; background: #233246; border: 2px solid #070b12; padding: 0 4px; color: #e7edf5; }

.space-edit-look { font-family: "Shimo Digits", "Pixelify Sans", "Courier New", monospace; position: absolute; right: 12px; top: 12px; z-index: 1; padding: 8px 12px; border: 2px solid #070b12; background: #263c53; color: #fff; cursor: pointer; }

.space-editor { box-sizing: border-box; width: min(850px, calc(100vw - 32px)); max-height: 92vh; padding: 0; overflow: auto; color: #303d3e; background: #f7f5ec; border: 2px solid #263c40; border-radius: 4px; box-shadow: 0 24px 100px #0007; font-family: "Shimo Digits", "Pixelify Sans", "Courier New", monospace; }
.space-editor *, .space-editor *::before { box-sizing: border-box; font-family: inherit; }
.space-editor::backdrop { background: #0b1629bd; backdrop-filter: blur(5px); }
.space-editor form { margin: 0; }
.space-editor-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px 20px; background: #223d43; color: #faf6e7; }
.space-editor-eyebrow { font: 700 12px/1.5 "Shimo Digits", "Pixelify Sans", "Courier New", monospace; letter-spacing: 2px; color: #8b9d94; }
.space-editor-header .space-editor-eyebrow { color: #c2d3c1; }
.space-editor h2 { margin: 5px 0 0; font-size: 29px; line-height: 1.15; letter-spacing: -1px; }
.space-editor h2 span { color: #edc56d; }
.space-editor button { font: inherit; cursor: pointer; border: 1px solid #c5cabd; border-radius: 2px; background: #fffdf5; color: #344648; padding: 9px 13px; }
.space-editor button:hover { background: #ede8d6; }
.space-editor button:focus-visible, .space-editor input:focus-visible { outline: 3px solid #357e90; outline-offset: 3px; }
.space-editor button:disabled { opacity: .5; cursor: wait; }
.space-editor .space-editor-close { color: #e2e8db; border-color: #6a7f7b; background: transparent; font-size: 24px; padding: 0; width: 34px; height: 34px; }
.space-editor-body { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 0; }
.space-editor-wardrobe { padding: 22px 0 20px 24px; }
.space-editor-tabs { display: flex; gap: 4px; margin-right: 20px; }
.space-editor-tabs button { flex: 1; min-width: 0; padding: 8px 3px; border-radius: 2px 2px 0 0; border-bottom: 0; background: #e5e6db; font-size: 12px; display: flex; align-items: center; flex-direction: column; gap: 4px; }
.space-editor-tabs canvas { width: 36px; height: 30px; image-rendering: pixelated; }
.space-editor-tabs button[aria-pressed=true] { background: #f1cb70; border-color: #c7a958; color: #253e41; box-shadow: inset 0 3px #ffe4a2; }
.space-editor-catalog { min-height: 340px; border: 1px solid #cdd0c0; border-radius: 0 0 2px 2px; background: #fffdf6; margin-right: 20px; padding: 12px; }
.space-editor-parts { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid #e5e5d8; padding-bottom: 12px; }
.space-editor-parts button { border: 0; background: transparent; font-size: 12px; padding: 6px 10px; }
.space-editor-parts button[aria-pressed=true] { background: #dfe9e1; color: #254e48; font-weight: 700; }
.space-editor-catalog-heading, .space-editor-color-heading { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 10px; }
.space-editor h3 { font-size: 12px; margin: 0; font-weight: 700; }
.space-editor [data-count] { color: #7d877d; font-size: 12px; }
.space-editor-items { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; max-height: 240px; overflow: auto; padding: 3px; }
.space-editor .space-editor-item { position: relative; padding: 3px 1px 7px; display: flex; align-items: center; flex-direction: column; background: #f4f3e9; border: 1px solid transparent; min-width: 0; }
.space-editor-item canvas { width: 64px; height: 60px; image-rendering: pixelated; }
.space-editor-item span { font-size: 12px; line-height: 1.3; }
.space-editor .space-editor-item[aria-pressed=true] { background: #f9edc8; border: 1px solid #b69a49; box-shadow: inset 0 0 0 1px #f4ce71; }
.space-editor-item[aria-pressed=true]::after { content: '✓'; position: absolute; right: 3px; top: 3px; background: #315d54; color: white; width: 14px; height: 14px; border-radius: 50%; font-size: 12px; }
.space-editor-colors { border-top: 1px solid #e5e5d8; margin-top: 14px; }
.space-editor-colors[hidden] { display: none; }
.space-custom-color { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.space-custom-color input { border: 0; background: none; width: 27px; height: 25px; padding: 0; cursor: pointer; }
.space-editor-swatches { display: flex; gap: 6px; flex-wrap: wrap; padding: 3px; }
.space-editor .space-editor-swatch { width: 25px; height: 25px; border-radius: 5px; padding: 0; background: var(--swatch); border: 1px solid #0002; }
.space-editor .space-editor-swatch[aria-pressed=true] { outline: 2px solid #345d55; outline-offset: 2px; box-shadow: inset 0 0 0 2px #fff8; }
/* balão sem cor própria: volta pra cor do estilo */
.space-editor .space-editor-swatch.space-editor-swatch-auto { width: auto; padding: 0 8px; font: inherit; font-size: 12px; background: repeating-linear-gradient(135deg, #f3f0e6 0 4px, #e2ddd0 4px 8px); color: #2b2f3a; }
.space-editor-preview { display: flex; flex-direction: column; align-items: center; padding: 26px 10px 20px; background: radial-gradient(ellipse at 50% 35%, #e5eade, transparent 65%); }
.space-editor-preview canvas { width: 240px; height: 280px; image-rendering: pixelated; }
.space-editor-rotation { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 0 0 12px; }
.space-editor-rotation button { width: 32px; height: 30px; padding: 0; }
.space-editor [data-direction] { text-align: center; min-width: 60px; font-size: 13px; color: #738474; }
.space-editor [data-walk] { font-size: 13px; border-color: #b7c6b4; background: #e3eadc; }
.space-editor-preview p { text-align: center; font-size: 13px; line-height: 1.7; color: #859080; margin: 18px 0 0; }
.space-editor-footer { position: sticky; bottom: 0; padding: 8px 24px 14px; background: #f7f5ec; z-index: 2; }
.space-editor-footer [role=status] { font-size: 12px; color: #815637; margin: 0; min-height: 22px; }
.space-editor-actions { display: flex; align-items: center; gap: 8px; border-top: 1px solid #daddcd; padding-top: 16px; }
.space-editor-actions > span { flex: 1; }
.space-editor-actions button { font-size: 12px; }
.space-editor .space-editor-actions [data-save] { background: #315c51; color: #fffaf0; border-color: #254b43; }
.space-editor-actions [data-save] span { padding-left: 10px; color: #eed189; }
@media(max-width:700px) { .space-editor-body { grid-template-columns: minmax(0,1fr) 190px; } .space-editor-preview canvas { width: 185px; height: 216px; } .space-editor-wardrobe { padding-left: 14px; } .space-editor-items { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:480px) { .space-editor-body { grid-template-columns: minmax(0,1fr); } .space-editor-preview { grid-row: 1; padding: 12px; } .space-editor-preview canvas { width: 145px; height: 169px; } .space-editor-preview p, .space-editor-preview > .space-editor-eyebrow { display: none; } .space-editor-wardrobe { padding-top: 0; } .space-editor-items { grid-template-columns: repeat(4,minmax(0,1fr)); } .space-editor-actions { flex-wrap: wrap; } .space-editor-header { padding: 18px; } }

/* Zoom e câmera solta, canto inferior direito do mapa */
.space-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 1; display: flex; gap: 4px; align-items: stretch; background: #1b2635; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66; padding: 4px; }
.space-zoom button { font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; color: #e7edf5; background: #233246; border: 2px solid #070b12; box-shadow: inset 2px 2px 0 #3a4d66, inset -2px -2px 0 #141d29; min-width: 30px; padding: 4px 8px; cursor: pointer; }
.space-zoom button:hover:not(:disabled) { background: #2b3d55; }
.space-zoom button:disabled { opacity: .45; cursor: default; }
.space-zoom button:focus-visible { outline: 2px solid #f0b030; outline-offset: 1px; }
.space-zoom .space-zoom-reset { min-width: 54px; font-variant-numeric: tabular-nums; }
.space-zoom .space-cam[aria-pressed="true"] { background: #f0b030; color: #2a1c03; box-shadow: inset 2px 2px 0 #ffd77a, inset -2px -2px 0 #b07c12; }
.space-canvas.is-free { cursor: grab; }
.space-canvas.is-dragging { cursor: grabbing; }
.space-hint { max-width: calc(100% - 330px); }

/* Dança: acima do zoom, no canto inferior direito */
.space-dance { position: absolute; right: 10px; bottom: 58px; z-index: 1; display: flex; gap: 4px; background: #1b2635; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66; padding: 4px; }
.space-dance button { font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; color: #e7edf5; background: #233246; border: 2px solid #070b12; box-shadow: inset 2px 2px 0 #3a4d66, inset -2px -2px 0 #141d29; padding: 4px 10px; cursor: pointer; }
.space-dance button:hover { background: #2b3d55; }
.space-dance button:focus-visible { outline: 2px solid #f0b030; outline-offset: 1px; }
.space-dance .space-dance-toggle[aria-pressed="true"] { background: #ff8aa6; color: #2a0b14; box-shadow: inset 2px 2px 0 #ffc2d0, inset -2px -2px 0 #c45a74; }
.space-dance .space-dance-style { min-width: 74px; }

/* PC: botão de reivindicar no topo, aviso rápido logo abaixo */
.space-desk { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 1; display: flex; gap: 8px; align-items: center; background: #1b2635; color: #e7edf5; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66; padding: 4px 4px 4px 10px; font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; white-space: nowrap; }
.space-desk[hidden] { display: none; }
.space-desk button { font: inherit; color: #2a1c03; background: #f0b030; border: 2px solid #070b12; box-shadow: inset 2px 2px 0 #ffd77a, inset -2px -2px 0 #b07c12; padding: 4px 10px; cursor: pointer; }
.space-desk button:disabled { opacity: .5; cursor: wait; }
.space-desk button:focus-visible { outline: 2px solid #f0b030; outline-offset: 1px; }
.space-note { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); z-index: 1; background: rgba(13, 20, 32, .92); color: #ffd0db; border: 2px solid #070b12; padding: 4px 10px; font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; pointer-events: none; }
.space-note[hidden] { display: none; }

/* Fliperama (public/space/arcade.js): janela por cima do mapa */
.space-arcade { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(1240px, calc(100% - 24px)); max-height: calc(100% - 24px); display: flex; flex-direction: column; background: #1b2635; color: #e7edf5; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66, 6px 6px 0 rgba(0, 0, 0, .45); font-family: "Shimo Digits", "Pixelify Sans", "Courier New", monospace; }
.space-arcade > header { display: flex; justify-content: space-between; align-items: center; background: #2cc6d0; color: #062022; padding: 4px 6px 4px 12px; border-bottom: 2px solid #070b12; }
.space-arcade > header h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.space-arcade-x { width: 24px; height: 24px; border: 2px solid #070b12; background: #b6f1f4; color: #062022; font: 700 15px "Shimo Digits", "Pixelify Sans", monospace; line-height: 1; cursor: pointer; padding: 0; }
.space-arcade-body { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; padding: 12px; min-height: 0; overflow: auto; }
.space-arcade-screen { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* a tela cresce até caber na altura da janela (o canvas tem 3x a resolução do jogo) */
.space-arcade-screen { align-items: center; }
.space-arcade-screen canvas { width: min(100%, calc((100vh - 320px) * 4 / 3)); aspect-ratio: 4 / 3; border: 2px solid #070b12; background: #0d1420; outline: none; cursor: pointer; }
.space-arcade-screen canvas:focus-visible { box-shadow: 0 0 0 2px #f0b030; }
.space-arcade-msg { align-self: stretch; margin: 0; min-height: 1.4em; font-size: 13px; color: #93a3b8; }
.space-arcade-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.space-arcade-modes, .space-arcade-pick { display: flex; flex-direction: column; gap: 6px; }
.space-arcade button { font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; color: #e7edf5; background: #233246; border: 2px solid #070b12; box-shadow: inset 2px 2px 0 #3a4d66, inset -2px -2px 0 #141d29; padding: 6px 10px; cursor: pointer; text-align: left; }
.space-arcade button:hover { background: #2b3d55; }
.space-arcade button:focus-visible { outline: 2px solid #f0b030; outline-offset: 1px; }
.space-arcade-pick button { background: #2a2550; }
.space-arcade-board { display: flex; flex-direction: column; gap: 6px; border-top: 2px dashed #2a3a50; padding-top: 10px; }
.space-arcade-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.space-arcade-tabs button { text-align: center; }
.space-arcade-tabs button[aria-pressed="true"] { background: #f0b030; color: #2a1c03; box-shadow: inset 2px 2px 0 #ffd77a, inset -2px -2px 0 #b07c12; }
.space-arcade-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; max-height: 260px; overflow-y: auto; }
.space-arcade-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px; padding: 3px 6px; background: #14202d; }
.space-arcade-list li.is-me { background: #3a2f12; color: #ffd166; }
.space-arcade-list li.empty { display: block; color: #93a3b8; background: none; }
.space-arcade-list .r { color: #93a3b8; font-variant-numeric: tabular-nums; }
.space-arcade-list .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-arcade-list .s { font-variant-numeric: tabular-nums; }
.space-arcade-me { margin: 0; font-size: 12px; color: #93a3b8; }
.space-arcade-invite { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); z-index: 4; display: flex; gap: 8px; align-items: center; background: #2a2550; color: #e7edf5; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #2cc6d0; padding: 6px 6px 6px 12px; font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; white-space: nowrap; }
.space-arcade-invite button { font: inherit; border: 2px solid #070b12; padding: 4px 10px; cursor: pointer; background: #233246; color: #e7edf5; }
.space-arcade-invite [data-ok] { background: #5fd6a4; color: #062217; }

.space-editor-presets { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin-top:12px; max-width:230px; }
.space-editor-presets > span { width:100%; text-align:center; color:#738474; font-size:12px; margin-bottom:3px; }
.space-editor-presets button { font-size:12px; padding:5px 8px; }

/* Barra de baixo: junta visual, dança, emotes, mensagem, zoom/câmera e a call */
.space-bar { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; /* acima dos painéis: o menu de dança/emote não fica atrás da pesca */ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; pointer-events: none; }
.space-bar > * { pointer-events: auto; }
.space-bar-group, .space-say { display: flex; gap: 4px; align-items: stretch; background: #1b2635; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66; padding: 4px; }
.space-bar button, .space-say input { font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; color: #e7edf5; background: #233246; border: 2px solid #070b12; box-shadow: inset 2px 2px 0 #3a4d66, inset -2px -2px 0 #141d29; padding: 4px 9px; min-height: 30px; cursor: pointer; }
.space-bar button:hover:not(:disabled) { background: #2b3d55; }
.space-bar button:disabled { opacity: .45; cursor: default; }
.space-bar button:focus-visible, .space-say input:focus-visible { outline: 2px solid #f0b030; outline-offset: 1px; }
.space-bar .space-edit-look { position: static; padding: 4px 9px; background: #233246; }
.space-bar .space-zoom-reset { min-width: 54px; font-variant-numeric: tabular-nums; }
.space-bar .space-cam[aria-pressed="true"] { background: #f0b030; color: #2a1c03; box-shadow: inset 2px 2px 0 #ffd77a, inset -2px -2px 0 #b07c12; }
.space-bar .space-dance-toggle[aria-pressed="true"] { background: #ff8aa6; color: #2a0b14; box-shadow: inset 2px 2px 0 #ffc2d0, inset -2px -2px 0 #c45a74; }
.space-say { flex: 1 1 220px; max-width: 380px; }
.space-say input { flex: 1; min-width: 0; cursor: text; background: #0f1826; }
.space-say button { background: #5fd6a4; color: #062217; box-shadow: inset 2px 2px 0 #a6f0cf, inset -2px -2px 0 #2f9f72; }
.space-call-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; }
.space-call-btn svg { width: 16px; height: 16px; }
.space-call-btn[aria-pressed="true"], .space-call-btn.is-active { background: #e0453a; box-shadow: inset 2px 2px 0 #f08a82, inset -2px -2px 0 #9c2a22; }
.space-call-btn[hidden] { display: none; }
.space-emote-wrap { position: relative; display: flex; }
.space-emote-pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 40px); gap: 4px; background: #1b2635; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66, 4px 4px 0 rgba(0, 0, 0, .4); padding: 6px; }
.space-emote-pop[hidden] { display: none; }
.space-emote-pop button { position: relative; padding: 2px; min-height: 0; height: 40px; }
.space-emote-pop canvas { width: 27px; height: 24px; image-rendering: pixelated; display: block; margin: auto; }
.space-emote-pop span { position: absolute; right: 2px; bottom: 0; font-size: 10px; color: #93a3b8; }
/* o mapa precisa de respiro pra barra não cobrir o boneco */
.space-hint { display: none; }

/* Sala de reunião: a grade de cards do Shimo flutua por cima do mapa, só com quem está na sala */
.call-viewer.is-space.space-meeting > .call-viewer-grid { display: flex; flex-direction: column; gap: 8px; position: absolute; right: 26px; width: min(460px, 46%); height: auto; max-height: min(62%, 560px); z-index: 4; padding: 8px; background: rgba(13, 20, 32, .94); border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66, 5px 5px 0 rgba(0, 0, 0, .4); overflow: auto; }
/* Dentro do painel: grade simples com proporção fixa por card. A área de
   destaque do Shimo usa container-type: size e esticava os cards pra encher a
   altura toda do painel (cards distorcidos e um vão enorme embaixo). */
.call-viewer.is-space.space-meeting .call-viewer-featured,
.call-viewer.is-space.space-meeting .call-viewer-filmstrip { flex: none; height: auto; min-height: 0; container-type: normal; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; overflow: visible; padding: 0; }
.call-viewer.is-space.space-meeting .call-viewer-featured:empty,
.call-viewer.is-space.space-meeting .call-viewer-filmstrip:empty { display: none; }
.call-viewer.is-space.space-meeting .call-viewer-featured .call-viewer-tile:only-child { grid-column: 1 / -1; }
/* largura = coluna, altura sai da proporção (com width:auto a grade esticava a
   altura pra linha toda e a largura era derivada dela: card de 416px numa coluna de 216px) */
.call-viewer.is-space.space-meeting .call-viewer-tile { width: 100% !important; height: auto !important; align-self: start; justify-self: stretch; max-width: none !important; max-height: none !important; aspect-ratio: 16 / 10; flex: none !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden;
  /* o card vira o contêiner das unidades cqw/cqh de dentro dele (avatar e
     nome usam essas unidades pra se centralizar) */
  container-type: size; container-name: call-viewer-stage; }
.call-viewer.is-space.space-meeting.space-meeting-min > .call-viewer-grid { display: none; }
.call-viewer-tile.space-tile-out { display: none !important; }
.space-meet-head { position: absolute; right: 16px; top: 10px; z-index: 5; width: min(460px, 46%); box-sizing: border-box; display: flex; gap: 8px; align-items: center; background: #5466aa; color: #fff; border: 2px solid #070b12; padding: 4px 4px 4px 10px; font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; }
.space-meet-head[hidden] { display: none; }
.space-meet-head b { font-weight: 700; }
.space-meet-head span { flex: 1; color: #dfe5ff; }
.space-meet-head button { font: inherit; color: #1b2635; background: #e7edf5; border: 2px solid #070b12; padding: 3px 9px; cursor: pointer; }
.space-meet-head button:focus-visible { outline: 2px solid #f0b030; outline-offset: 1px; }

/* No espaço, os controles da call ficam na barra do mapa: o rodapé da grade do
   Shimo (que aparece quando chega vídeo) só duplicaria e encolheria o mapa. */
.call-viewer.is-space .call-viewer-footer { display: none !important; }

.space-editor-wardrobe > .space-editor-presets { justify-content:flex-start; max-width:none; margin:0 20px 14px 0; align-items:center; }
.space-editor-wardrobe > .space-editor-presets > span { width:auto; margin:0 6px 0 0; }

/* "Montar meu PC" (public/space/desk-editor.js) */
.space-desk .space-desk-edit { background: #2cc6d0; color: #062022; box-shadow: inset 2px 2px 0 #b6f1f4, inset -2px -2px 0 #1a8c94; }
.space-desk .space-desk-edit[hidden] { display: none; }
.space-desk-editor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; width: min(820px, calc(100% - 24px)); max-height: calc(100% - 24px); display: flex; flex-direction: column; background: #1b2635; color: #e7edf5; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66, 6px 6px 0 rgba(0, 0, 0, .45); font-family: "Shimo Digits", "Pixelify Sans", "Courier New", monospace; }
.space-desk-editor > header { display: flex; justify-content: space-between; align-items: center; background: #f0b030; color: #2a1c03; padding: 4px 6px 4px 12px; border-bottom: 2px solid #070b12; }
.space-desk-editor > header h2 { margin: 0; font-size: 16px; font-weight: 700; }
.space-desk-editor-x { width: 24px; height: 24px; border: 2px solid #070b12; background: #ffd77a; color: #2a1c03; font: 700 15px "Shimo Digits", "Pixelify Sans", monospace; line-height: 1; cursor: pointer; padding: 0; }
.space-desk-editor-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 12px; overflow: auto; min-height: 0; }
.space-desk-editor-body canvas { width: 100%; aspect-ratio: 440 / 320; image-rendering: pixelated; background: repeating-linear-gradient(45deg, #142033 0 10px, #17253a 10px 20px); border: 2px solid #070b12; }
.space-desk-editor-opts { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.space-desk-editor-group h3 { margin: 0 0 6px; font-size: 12px; font-weight: 500; color: #93a3b8; text-transform: uppercase; letter-spacing: .08em; }
.space-desk-editor .chips, .space-desk-editor .swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.space-desk-editor .swatches { margin-top: 6px; }
.space-desk-editor button { font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; color: #e7edf5; background: #233246; border: 2px solid #070b12; box-shadow: inset 2px 2px 0 #3a4d66, inset -2px -2px 0 #141d29; padding: 4px 9px; cursor: pointer; }
.space-desk-editor button[aria-pressed="true"] { background: #f0b030; color: #2a1c03; box-shadow: inset 2px 2px 0 #ffd77a, inset -2px -2px 0 #b07c12; }
.space-desk-editor button:focus-visible { outline: 2px solid #f0b030; outline-offset: 1px; }
.space-desk-editor .sw { width: 24px; height: 24px; padding: 0; }
.space-desk-editor .sw[aria-pressed="true"] { outline: 2px solid #f0b030; outline-offset: 1px; box-shadow: none; }
.space-desk-editor > footer { display: flex; gap: 8px; align-items: center; padding: 8px 12px 12px; }
.space-desk-editor > footer p { flex: 1; margin: 0; font-size: 13px; color: #93a3b8; }
.space-desk-editor [data-save] { background: #5fd6a4; color: #062217; box-shadow: inset 2px 2px 0 #a6f0cf, inset -2px -2px 0 #2f9f72; }
/* o painel acaba onde os cards acabam (a grade original herdava altura mínima) */
.call-viewer.is-space.space-meeting > .call-viewer-grid { min-height: 0 !important; }
.call-viewer.is-space.space-meeting .call-viewer-featured,
.call-viewer.is-space.space-meeting .call-viewer-filmstrip { height: auto !important; min-height: 0 !important; max-height: none !important; align-content: start; }

/* Dança: um botão só, a lista de passos sobe de cima dele */
.space-dance-wrap { position: relative; display: flex; }
.space-dance-pop { position: absolute; bottom: calc(100% + 8px); left: 0; display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 4px; background: #1b2635; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66, 4px 4px 0 rgba(0, 0, 0, .4); padding: 6px; z-index: 3; }
.space-dance-pop[hidden] { display: none; }
.space-dance-pop button { text-align: left; }
.space-dance-pop button[aria-pressed="true"] { outline: 2px solid #ff8aa6; outline-offset: -2px; }

/* Cinema: vídeo de apoio do telão (quase invisível, mas dentro do viewport) e o telão grande */
/* do tamanho do telão: o LiveKit escolhe a qualidade pelo tamanho do elemento
   (com 2px ele mandava 320x180). Transparente e atrás do mapa. */
.space-cinema-video { position: absolute; left: 0; top: 0; width: 960px; max-width: 100%; aspect-ratio: 16 / 9; opacity: .01; pointer-events: none; z-index: -1; }
.space-cinema-tip { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 1; background: #6e1a26; color: #ffe7c2; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #c9a24a; padding: 5px 12px; font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; pointer-events: none; white-space: nowrap; }
.space-cinema-tip[hidden] { display: none; }
.space-cinema-tip { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.space-cinema-tip button, .space-cinema-offer button, .space-cinema-back button { font: 600 12px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; color: #1b1205; background: #c9a24a; border: 2px solid #070b12; padding: 3px 10px; cursor: pointer; }
.space-cinema-tip button[hidden] { display: none; }
.space-cinema-offer button[data-stay] { background: #e7edf5; color: #1b2635; }
.space-cinema-tip button:focus-visible, .space-cinema-offer button:focus-visible, .space-cinema-back button:focus-visible { outline: 2px solid #f0b030; outline-offset: 1px; }
/* Convite pra assistir do jeito normal (aparece quando alguém começa a passar) */
.space-cinema-offer { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); z-index: 6; width: min(380px, calc(100% - 32px)); box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; background: #6e1a26; color: #ffe7c2; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #c9a24a, 5px 5px 0 rgba(0, 0, 0, .45); padding: 12px 14px; font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; }
.space-cinema-offer[hidden] { display: none; }
.space-cinema-offer b { font-size: 15px; }
.space-cinema-offer div { display: flex; gap: 8px; flex-wrap: wrap; }
/* Assistindo: o mapa sai e a grade normal do Shimo volta, só com a tela de quem passa */
.call-viewer.is-space.space-cinema-watch > .space-stage { display: none; }
.call-viewer.is-space.space-cinema-watch > .call-viewer-grid { display: flex; }
.space-cinema-back { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: #6e1a26; color: #ffe7c2; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #c9a24a; padding: 5px 6px 5px 12px; font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; }
.space-cinema-back[hidden] { display: none; }
.space-cinema-big { position: absolute; inset: 24px; z-index: 7; background: #05060a; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #c9a24a, 6px 6px 0 rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; }
.space-cinema-big video { width: 100%; height: 100%; object-fit: contain; }
.space-cinema-big { flex-direction: column; }
.space-cinema-big video { min-height: 0; flex: 1; }
.space-cinema-big-bar { align-self: stretch; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: #6e1a26; color: #ffe7c2; border-bottom: 2px solid #070b12; font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; }
.space-cinema-big-bar span { margin-right: auto; }
.space-cinema-big-bar button { height: 28px; padding: 0 10px; border: 2px solid #070b12; background: #c9a24a; color: #1b1205; font: 700 13px "Shimo Digits", "Pixelify Sans", monospace; cursor: pointer; box-shadow: inset 2px 2px 0 #f0d58a, inset -2px -2px 0 #8a6a24; }
.space-cinema-big-bar button[data-x] { width: 28px; padding: 0; font-size: 17px; }
.space-cinema-big.is-fullscreen { position: fixed; inset: 0; z-index: 9999; }
.space-cinema-big:fullscreen { inset: 0; border: 0; box-shadow: none; }
/* Assistindo no player do Shimo: o rodapé dele volta (botão de tela cheia, mic, sair) */
.call-viewer.is-space.space-cinema-watch .call-viewer-footer:not([hidden]) { display: flex !important; }
.space-desk-editor-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.space-desk-editor-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.space-desk-editor-tabs button { text-align: center; }
.space-desk-wall { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.space-desk-wall img { width: 96px; height: 60px; object-fit: cover; image-rendering: pixelated; border: 2px solid #070b12; }

/* Sinuca (pool.js): mesma janela dos fliperamas, mesa 16:10 e regras ao lado */
.space-pool .space-arcade-screen canvas { width: min(100%, calc((100vh - 320px) * 1.6)); aspect-ratio: 320 / 200; cursor: crosshair; }
.space-pool-rules { font-size: 12px; line-height: 1.35; color: #c3cfdc; background: #141d2a; border: 2px solid #070b12; padding: 8px 10px; }
.space-pool-rules b { color: #ffd166; }
.space-pool-rules ul { margin: 6px 0 0; padding-left: 16px; }
.space-pool-rules li + li { margin-top: 4px; }

/* Pesca (fishing.js): painel embaixo, sem esconder o mapa (a boia aparece lá) */
.space-fish { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); z-index: 3; width: min(900px, calc(100% - 24px)); max-height: calc(100% - 80px); display: flex; flex-direction: column; background: #1b2635; color: #e7edf5; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66, 6px 6px 0 rgba(0, 0, 0, .45); font-family: "Shimo Digits", "Pixelify Sans", "Courier New", monospace; }
.space-fish > header { display: flex; align-items: center; gap: 10px; background: #3f9adf; color: #04182a; padding: 4px 6px 4px 12px; border-bottom: 2px solid #070b12; }
.space-fish > header h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.space-fish-tabs { display: flex; gap: 4px; margin-right: auto; }
.space-fish button { font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; color: #e7edf5; background: #233246; border: 2px solid #070b12; box-shadow: inset 2px 2px 0 #3a4d66, inset -2px -2px 0 #141d29; padding: 3px 9px; cursor: pointer; }
.space-fish button:hover { background: #2b3d55; }
.space-fish button:focus-visible, .space-fish canvas:focus-visible { outline: 2px solid #f0b030; outline-offset: 1px; }
.space-fish button[aria-pressed="true"] { background: #f0b030; color: #2a1c03; box-shadow: inset 2px 2px 0 #ffd77a, inset -2px -2px 0 #b07c12; }
.space-fish .space-fish-x { width: 24px; height: 24px; padding: 0; background: #cfe8fb; color: #04182a; font-weight: 700; font-size: 15px; line-height: 1; }
.space-fish-play, .space-fish-album, .space-fish-rank { padding: 10px; min-height: 0; overflow: auto; }
.space-fish-play canvas { display: block; width: min(100%, calc((100vh - 280px) * 320 / 180)); margin: 0 auto; aspect-ratio: 320 / 180; border: 2px solid #070b12; outline: none; cursor: pointer; touch-action: none; }
.space-fish-msg { margin: 6px 0 0; min-height: 1.4em; font-size: 13px; color: #c3cfdc; }
.space-fish-sum { margin: 0 0 8px; font-size: 13px; color: #93a3b8; }
.space-fish-album ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; max-height: min(460px, calc(100vh - 300px)); overflow-y: auto; }
.space-fish-album li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; background: #14202d; border: 2px solid #070b12; text-align: center; font-size: 12px; }
.space-fish-album li .space-fish-tier { position: absolute; top: 4px; left: 4px; }
.space-fish-album li.is-missing .space-fish-tier { opacity: .45; }
.space-fish-album li canvas { width: 80px; height: 40px; }
.space-fish-album li span { color: #93a3b8; font-size: 11px; }
.space-fish-album li.is-missing b { color: #5a6b80; }
.space-fish-rank ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; max-height: min(420px, calc(100vh - 340px)); overflow-y: auto; }
.space-fish-rank li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 44px minmax(0, 1.2fr) auto; gap: 8px; align-items: center; padding: 3px 8px; background: #14202d; }
.space-fish-rank .f { display: flex; align-items: center; gap: 6px; min-width: 0; }
.space-fish-rank .f canvas { width: 48px; height: 24px; flex: none; }
.space-fish-rank .s { font-variant-numeric: tabular-nums; color: #c3cfdc; }
.space-fish-rank-how { margin: 8px 0 0; font-size: 12px; color: #93a3b8; }
.space-fish-rank li.is-me { background: #3a2f12; color: #ffd166; }
.space-fish-rank li.empty { display: block; color: #93a3b8; background: none; }
.space-fish-rank .r { color: #93a3b8; font-variant-numeric: tabular-nums; }
.space-fish-rank .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-fish-me { margin: 8px 0 0; font-size: 12px; color: #93a3b8; }

/* Menu de truques do pet (clique no próprio pet) */
.space-pet-menu { position: absolute; z-index: 4; transform: translate(-50%, -100%); display: flex; flex-direction: column; gap: 3px; padding: 6px; background: #1b2635; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66, 4px 4px 0 rgba(0, 0, 0, .45); font-family: "Shimo Digits", "Pixelify Sans", "Courier New", monospace; }
.space-pet-menu b { color: #ffd166; font-size: 13px; padding: 0 4px 2px; }
.space-pet-menu button { font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; color: #e7edf5; background: #233246; border: 2px solid #070b12; box-shadow: inset 2px 2px 0 #3a4d66, inset -2px -2px 0 #141d29; padding: 3px 12px; cursor: pointer; text-align: left; }
.space-pet-menu button:hover, .space-pet-menu button:focus-visible { background: #2b3d55; outline: 2px solid #f0b030; outline-offset: 1px; }

/* Aba Pets do guarda-roupa */
.space-editor-pets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.space-editor-pets .space-editor-item canvas { image-rendering: pixelated; }
.space-editor-pet-cfg { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.space-editor-pet-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border: 1px solid #0001; border-radius: 6px; background: #fffdf6; }
.space-editor-pet-row b { font-size: 13px; }
.space-editor-pet-row .space-editor-swatches { padding: 0; }
.space-editor-pet-row > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* específico de propósito: o estilo global de input do app (fundo escuro) vencia */
.space-editor .space-editor-pet-row input.space-editor-pet-name { font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; color: #2b2f3a; background: #ffffff; padding: 5px 8px; border: 1px solid #c9c4b4; border-radius: 5px; width: 100%; max-width: 240px; min-height: 0; height: auto; box-shadow: none; outline: none; }
.space-editor .space-editor-pet-row input.space-editor-pet-name:focus { border-color: #345d55; box-shadow: 0 0 0 2px #345d5533; }
.space-editor .space-editor-pet-row input.space-editor-pet-name::placeholder { color: #9a9b91; }
.space-editor-pet-hint { font-size: 12px; color: #6a6f63; margin: 6px 0 0; }

/* ===== Guarda-roupa no mesmo visual da barra do espaço =====
   (sobrescreve o tema claro antigo: painéis #1b2635 com borda preta e chanfro,
   botões com relevo, selecionado em ouro, fonte Pixelify, cantos retos) */
.space-editor { color: #e7edf5; background: #1b2635; border: 2px solid #070b12; border-radius: 0; box-shadow: inset 0 0 0 2px #3a4d66, 8px 8px 0 rgba(0, 0, 0, .5); font-family: "Shimo Digits", "Pixelify Sans", "Courier New", monospace; }
.space-editor::backdrop { background: rgba(5, 8, 18, .72); backdrop-filter: blur(3px); }
.space-editor-header { background: #2cc6d0; color: #062022; border-bottom: 2px solid #070b12; padding: 14px 20px 12px; }
.space-editor-header .space-editor-eyebrow { color: #0e4a4f; }
.space-editor h2 { font-size: 24px; letter-spacing: 0; color: #062022; }
.space-editor h2 span { color: #fff3c4; }
.space-editor-eyebrow { color: #93a3b8; }
.space-editor button { font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; color: #e7edf5; background: #233246; border: 2px solid #070b12; border-radius: 0; box-shadow: inset 2px 2px 0 #3a4d66, inset -2px -2px 0 #141d29; padding: 6px 10px; }
.space-editor button:hover { background: #2b3d55; }
.space-editor button:focus-visible, .space-editor input:focus-visible { outline: 2px solid #f0b030; outline-offset: 1px; }
.space-editor .space-editor-close { color: #062022; background: #b6f1f4; border: 2px solid #070b12; box-shadow: none; font-size: 18px; font-weight: 700; width: 30px; height: 30px; }
.space-editor .space-editor-close:hover { background: #d6fbfd; }
.space-editor-tabs button { background: #233246; color: #c3cfdc; border-bottom: 0; padding: 6px 2px; font-size: 12px; }
.space-editor-tabs button[aria-pressed=true], .space-editor-parts button[aria-pressed=true], .space-editor button[aria-pressed=true] { background: #f0b030; color: #2a1c03; border-color: #070b12; box-shadow: inset 2px 2px 0 #ffd77a, inset -2px -2px 0 #b07c12; }
.space-editor-catalog { background: #141d2a; border: 2px solid #070b12; border-radius: 0; box-shadow: inset 0 0 0 2px #26364c; }
.space-editor-parts { border-bottom: 2px dashed #2a3a50; }
.space-editor-parts button { background: #233246; font-size: 12px; padding: 4px 9px; }
.space-editor h3 { color: #ffd166; font-size: 13px; }
.space-editor [data-count] { color: #93a3b8; }
.space-editor .space-editor-item { background: #2a3a50; border: 2px solid #070b12; box-shadow: inset 2px 2px 0 #3a4d66, inset -2px -2px 0 #1d2a3b; color: #e7edf5; padding: 4px 2px 6px; }
.space-editor .space-editor-item:hover { background: #33465f; }
.space-editor .space-editor-item[aria-pressed=true] { background: #4a3a14; border: 2px solid #f0b030; box-shadow: inset 0 0 0 2px #7a5a1a; color: #ffd166; }
.space-editor-item[aria-pressed=true]::after { background: #f0b030; color: #2a1c03; border-radius: 0; line-height: 14px; text-align: center; }
.space-editor-colors { border-top: 2px dashed #2a3a50; }
.space-editor .space-editor-swatch { border: 2px solid #070b12; border-radius: 0; box-shadow: none; }
.space-editor .space-editor-swatch:hover { filter: brightness(1.1); background: var(--swatch); }
.space-editor .space-editor-swatch[aria-pressed=true] { outline: 2px solid #f0b030; outline-offset: 2px; box-shadow: inset 0 0 0 2px #ffffff88; background: var(--swatch); }
.space-editor .space-editor-swatch.space-editor-swatch-auto { color: #e7edf5; background: repeating-linear-gradient(135deg, #233246 0 4px, #2b3d55 4px 8px); }
.space-custom-color { color: #c3cfdc; }
.space-editor-preview { background: radial-gradient(ellipse at 50% 40%, #26364c, transparent 70%); border-left: 2px solid #070b12; }
.space-editor [data-direction] { color: #c3cfdc; }
.space-editor [data-walk] { background: #233246; border-color: #070b12; }
.space-editor-preview p { color: #93a3b8; }
.space-editor-presets > span { color: #93a3b8; }
.space-editor-footer { background: #1b2635; border-top: 2px solid #070b12; }
.space-editor-footer [role=status] { color: #ffd166; }
.space-editor-actions { border-top: 0; padding-top: 8px; }
.space-editor .space-editor-actions [data-save] { background: #3fa36b; color: #06210f; border-color: #070b12; box-shadow: inset 2px 2px 0 #6fd59a, inset -2px -2px 0 #2a7a4c; }
.space-editor .space-editor-actions [data-save]:hover { background: #4bb57a; }
.space-editor-actions [data-save] span { color: #06210f; }
/* aba Pets */
.space-editor-pet-row { background: #1f2c3d; border: 2px solid #070b12; border-radius: 0; box-shadow: inset 0 0 0 2px #2a3a50; }
.space-editor-pet-row b { color: #ffd166; }
.space-editor .space-editor-pet-row input.space-editor-pet-name { color: #e7edf5; background: #0f1722; border: 2px solid #070b12; border-radius: 0; box-shadow: inset 2px 2px 0 #070b12; }
.space-editor .space-editor-pet-row input.space-editor-pet-name:focus { border-color: #f0b030; box-shadow: inset 2px 2px 0 #070b12; }
.space-editor .space-editor-pet-row input.space-editor-pet-name::placeholder { color: #5a6b80; }
.space-editor-pet-hint { color: #93a3b8; }

/* Selo de grau da pesca (F … SSS) */
.space-fish-tier { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 4px; border: 2px solid #070b12; font: 700 12px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; color: #ffffff; background: #8a93a0; }
.space-fish-tier[data-tier="F"] { background: #8a93a0; color: #14141c; }
.space-fish-tier[data-tier="E"] { background: #e7edf5; color: #14141c; }
.space-fish-tier[data-tier="D"] { background: #3fa36b; }
.space-fish-tier[data-tier="C"] { background: #2a9aa1; }
.space-fish-tier[data-tier="B"] { background: #3f6fd6; }
.space-fish-tier[data-tier="A"] { background: #8a52d6; }
.space-fish-tier[data-tier="S"] { background: #ff9f1c; color: #14141c; }
.space-fish-tier[data-tier="SS"] { background: #e8334f; }
.space-fish-tier[data-tier="SSS"] { color: #14141c; background: linear-gradient(90deg, #ff4d6d, #ffd166, #5fd6a4, #4f8fd6, #b07cf0, #ff4d6d); background-size: 200% 100%; animation: space-fish-sss 2.4s linear infinite; }
@keyframes space-fish-sss { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .space-fish-tier[data-tier="SSS"] { animation: none; } }

/* Ranking da pesca maior: linhas mais altas, fonte maior, peixe e selo grandes */
.space-fish-rank ol { gap: 4px; font-size: 15px; max-height: min(560px, calc(100vh - 300px)); }
.space-fish-rank li { grid-template-columns: 48px minmax(0, 1fr) 54px minmax(0, 1.3fr) auto; gap: 12px; padding: 8px 12px; border: 2px solid #070b12; box-shadow: inset 2px 2px 0 #26364c; }
.space-fish-rank li:nth-child(1) .r { color: #ffd166; } .space-fish-rank li:nth-child(2) .r { color: #dfe6ee; } .space-fish-rank li:nth-child(3) .r { color: #e0995a; }
.space-fish-rank .r { font-size: 17px; font-weight: 700; }
.space-fish-rank .f canvas { width: 72px; height: 36px; }
.space-fish-rank .space-fish-tier { min-width: 34px; height: 26px; font-size: 16px; }
.space-fish-rank .s { font-size: 14px; }
.space-fish-me { font-size: 14px; }

/* ===== Cantos em degrau de pixel (no lugar dos cantos retos) =====
   PX1: um degrau de 2px — com a borda preta de 2px o contorno continua
   fechado na diagonal (botões, selos, campos). PX2: dois degraus pra janelas
   e painéis; o pixel do meio da escada cairia fora do contorno, então ele é
   repintado de preto por 4 quadradinhos de 2×2 (background-image, nos cantos
   da caixa de padding). O clip-path também corta o outline de foco: nos
   recortados o foco vira um anel amarelo por dentro. */
.space-stage button, .space-arcade button, .space-fish button, .space-editor button:not(.space-editor-swatch), .space-pet-menu button,
.space-say input, .space-fish-tier, .space-hear, .space-note, .space-editor .space-editor-swatch, .space-editor .space-editor-pet-row input.space-editor-pet-name,
.space-cinema-back button, .space-cinema-big-bar button, .space-arcade-x, .space-fish-x, .space-arcade-screen canvas, .space-fish-play canvas {
  clip-path: polygon(0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));
}
.space-bar-group, .space-say, .space-room, .space-desk, .space-cinema-tip, .space-cinema-offer,
.space-meet-head, .space-arcade-invite, .space-pet-menu, .space-cinema-back, .space-pool-rules, .space-editor-catalog,
.space-editor-item, .space-editor-pet-row, .space-fish-album li, .space-fish-rank li, .space-arcade-list li {
  clip-path: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px));
  background-image: linear-gradient(#070b12 0 0), linear-gradient(#070b12 0 0), linear-gradient(#070b12 0 0), linear-gradient(#070b12 0 0) !important;
  background-size: 2px 2px !important; background-repeat: no-repeat !important;
  background-position: 0 0, 100% 0, 0 100%, 100% 100% !important; background-origin: padding-box !important;
}
/* foco dentro do recorte */
.space-stage button:focus-visible, .space-arcade button:focus-visible, .space-fish button:focus-visible, .space-editor button:focus-visible, .space-pet-menu button:focus-visible,
.space-say input:focus-visible, .space-cinema-back button:focus-visible, .space-cinema-big-bar button:focus-visible,
.space-arcade-screen canvas:focus-visible, .space-fish-play canvas:focus-visible, .space-editor .space-editor-pet-row input.space-editor-pet-name:focus {
  outline: none !important; box-shadow: inset 0 0 0 2px #f0b030 !important;
}
.space-editor .space-editor-swatch[aria-pressed=true] { outline: none; box-shadow: inset 0 0 0 2px #f0b030, inset 0 0 0 4px #070b12; }
/* sem a sombra deslocada (o recorte cortaria), as janelas ganham um "chão" escuro por dentro */
.space-arcade, .space-fish, .space-editor { box-shadow: inset 0 0 0 2px #3a4d66, inset 0 -4px 0 2px #0d1420; }

/* ===== Truco (truco.js) ===== */
.space-truco { width: min(980px, calc(100% - 24px)); }
.space-truco-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-height: 0; overflow: auto; }
.space-truco-head { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.space-truco-score { display: flex; gap: 10px; align-items: center; font-size: 20px; font-weight: 700; }
.space-truco-score .is-a { color: #7cc0ff; } .space-truco-score .is-b { color: #ff8a8a; }
.space-truco-value { font-size: 14px; color: #ffd166; background: #141d2a; border: 2px solid #070b12; padding: 4px 10px; }
.space-truco-rounds { display: flex; gap: 6px; }
.space-truco-rounds .dot { width: 14px; height: 14px; background: #2b3d55; border: 2px solid #070b12; }
.space-truco-rounds .dot.is-a { background: #4f8fd6; } .space-truco-rounds .dot.is-b { background: #e2473a; } .space-truco-rounds .dot.is-e { background: #93a3b8; }
.space-truco-felt { position: relative; height: min(380px, calc(100vh - 420px)); min-height: 260px; background: radial-gradient(ellipse at 50% 45%, #33a067, #1f6e45 70%); border: 6px solid #5a3820; box-shadow: inset 0 0 0 2px #070b12, inset 0 0 0 6px #6e4630, inset 0 8px 24px rgba(0, 0, 0, .35); border-radius: 50% / 46%; outline: 2px solid #070b12; }
.space-truco-seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 8px; background: rgba(13, 20, 32, .88); border: 2px solid #070b12; font-size: 13px; white-space: nowrap; }
.space-truco-seat.is-a { box-shadow: inset 0 -3px 0 #4f8fd6; } .space-truco-seat.is-b { box-shadow: inset 0 -3px 0 #e2473a; }
.space-truco-seat.is-turn { outline: 2px solid #ffd166; outline-offset: 1px; animation: space-truco-pulse 1s ease-in-out infinite; }
@keyframes space-truco-pulse { 50% { outline-color: #fff3c4; } }
@media (prefers-reduced-motion: reduce) { .space-truco-seat.is-turn { animation: none; } }
.space-truco-backs { display: flex; gap: 2px; }
.space-truco-backs span { width: 10px; height: 14px; background: repeating-linear-gradient(45deg, #b83a3a 0 2px, #8a2424 2px 4px); border: 1px solid #070b12; }
.space-truco .space-truco-card { position: relative; width: 54px; height: 76px; background: #f6f1e6; color: #1b1a22; border: 2px solid #070b12; box-shadow: inset -3px -3px 0 #d8d0bd; display: inline-flex; align-items: center; justify-content: center; font: 700 15px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; padding: 0; flex: none;
  clip-path: polygon(0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)); }
.space-truco .space-truco-card.is-red { color: #c62f2f; }
.space-truco .space-truco-card .r { position: absolute; left: 5px; top: 3px; font-size: 14px; }
.space-truco .space-truco-card .r2 { position: absolute; right: 5px; bottom: 3px; font-size: 14px; transform: rotate(180deg); }
.space-truco .space-truco-card .s { font-size: 28px; line-height: 1; }
.space-truco .space-truco-card.is-man { box-shadow: inset 0 0 0 2px #ffd166, inset -3px -3px 0 #e8c76a; }
.space-truco .space-truco-card.is-back { background: repeating-linear-gradient(45deg, #b83a3a 0 4px, #8a2424 4px 8px); box-shadow: inset 0 0 0 3px #f6f1e6; }
.space-truco .space-truco-card.is-played { position: absolute; transform: translate(-50%, -50%); width: 46px; height: 64px; }
.space-truco .space-truco-card.is-played .s { font-size: 24px; }
.space-truco .space-truco-card.is-win { outline: 3px solid #ffd166; }
.space-truco-vira { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: #fff3c4; text-shadow: 1px 1px 0 #070b12; }
.space-truco .space-truco-vira .space-truco-card { transform: rotate(-8deg); }
.space-truco-msg { margin: 0; min-height: 1.4em; font-size: 14px; color: #ffd166; text-align: center; }
.space-truco-hand { display: flex; gap: 10px; justify-content: center; min-height: 80px; }

.space-truco button.space-truco-card { cursor: pointer; transition: transform .08s; }
.space-truco button.space-truco-card:hover:not(:disabled) { transform: translateY(-6px); background: #fffaf0; }
.space-truco button.space-truco-card:disabled { cursor: default; filter: saturate(.7) brightness(.92); }
.space-truco-acts { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; min-height: 36px; }
.space-truco-acts button { font-size: 15px !important; padding: 7px 16px !important; text-align: center !important; }
.space-arcade .space-truco-acts .is-truco { background: #e2473a; color: #fff; box-shadow: inset 2px 2px 0 #ff8a7a, inset -2px -2px 0 #9a2a20; }
.space-arcade .space-truco-acts .is-ok { background: #3fa36b; color: #06210f; box-shadow: inset 2px 2px 0 #6fd59a, inset -2px -2px 0 #2a7a4c; }
.space-arcade .space-truco-acts .is-run { background: #5a6b80; color: #fff; }
.space-truco-ask { font-size: 13px; color: #c3cfdc; }
.space-truco-hide { font-size: 13px; color: #c3cfdc; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.space-truco-lobby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.space-truco-lseat { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: #14202d; border: 2px solid #070b12; }
.space-truco-lseat.is-a { box-shadow: inset 4px 0 0 #4f8fd6; } .space-truco-lseat.is-b { box-shadow: inset 4px 0 0 #e2473a; }
.space-truco-lseat .n { font-size: 11px; color: #93a3b8; }
.space-truco-lseat.is-free b { color: #5a6b80; }

/* Janelas grandes (jogos, pesca, guarda-roupa, telão): escada de 4 degraus
   de 2px (8px). O recorte pega o cabeçalho e o conteúdo; o contorno preto da
   escada (3 quadradinhos por canto, os que não caem na borda) vai num
   pseudo-elemento POR CIMA — no fundo, o cabeçalho cobriria. */
.space-arcade, .space-fish, .space-editor, .space-cinema-big {
  clip-path: polygon(0 8px, 2px 8px, 2px 6px, 4px 6px, 4px 4px, 6px 4px, 6px 2px, 8px 2px, 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 6px), calc(100% - 4px) calc(100% - 6px), calc(100% - 4px) calc(100% - 4px), calc(100% - 6px) calc(100% - 4px), calc(100% - 6px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 8px), 0 calc(100% - 8px));
}
.space-arcade::after, .space-fish::after, .space-editor::after, .space-cinema-big::after {
  /* Coordenadas a partir de dentro da borda, sem expandir a área rolável. */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 20;
  --k: linear-gradient(#070b12 0 0);
  background-image: var(--k), var(--k), var(--k), var(--k), var(--k), var(--k), var(--k), var(--k), var(--k), var(--k), var(--k), var(--k);
  background-size: 2px 2px; background-repeat: no-repeat;
  background-position:
    0 4px, 2px 2px, 4px 0,
    100% 4px, calc(100% - 2px) 2px, calc(100% - 4px) 0,
    0 calc(100% - 4px), 2px calc(100% - 2px), 4px 100%,
    100% calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) 100%;
}

/* ---- assistir (sinuca, fliperama, truco, poker) ---- */
.space-arcade.is-watching > header { box-shadow: inset 0 -3px 0 #ffd166; }
.space-watch-note { text-align: center; }

/* ---- poker (poker.js): reaproveita a mesa e as cartas do truco ---- */
.space-poker-felt { background: radial-gradient(ellipse at 50% 45%, #2a8a5f, #145238 70%); border-color: #1c1a20; box-shadow: inset 0 0 0 2px #070b12, inset 0 0 0 6px #2b2833, inset 0 8px 24px rgba(0, 0, 0, .35); }
.space-poker-pot { font-size: 20px; font-weight: 700; color: #ffd166; }
.space-poker-street { font-size: 14px; color: #c3cfdc; }
.space-poker-seat { gap: 2px; min-width: 96px; }
.space-poker-seat.is-out { opacity: .55; }
.space-poker-seat.is-win { outline: 2px solid #5fd6a4; outline-offset: 1px; }
.space-poker-name { display: flex; gap: 5px; align-items: center; }
.space-poker-btn { display: inline-grid; place-items: center; width: 16px; height: 16px; background: #f6f1e6; color: #1b1a22; border: 2px solid #070b12; font-size: 10px; font-weight: 700; }
.space-poker-stack { font-size: 12px; color: #ffd166; }
.space-poker-hole { display: flex; gap: 3px; }
.space-poker-back { width: 14px; height: 20px; background: repeating-linear-gradient(45deg, #2f5fb8 0 2px, #1f3f80 2px 4px); border: 1px solid #070b12; }
.space-poker-last { font-size: 11px; color: #c3cfdc; max-width: 160px; white-space: normal; text-align: center; }
.space-poker-clock { font-size: 11px; color: #93a3b8; }
.space-poker-clock.is-low { color: #ff6b5c; }
.space-truco .space-truco-card.is-small { width: 34px; height: 48px; font-size: 11px; }
.space-truco .space-truco-card.is-small .r, .space-truco .space-truco-card.is-small .r2 { font-size: 10px; left: 3px; top: 1px; }
.space-truco .space-truco-card.is-small .r2 { left: auto; top: auto; right: 3px; bottom: 1px; }
.space-truco .space-truco-card.is-small .s { font-size: 18px; }
.space-poker-bet { position: absolute; transform: translate(-50%, -50%); padding: 1px 7px; background: #f2c14e; color: #1b1a22; border: 2px solid #070b12; box-shadow: inset -2px -2px 0 #c99a2e; font-size: 12px; font-weight: 700; }
.space-poker-board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 6px; }
.space-poker .space-poker-board .space-truco-card { width: 46px; height: 64px; }
.space-poker .space-poker-board .space-truco-card .s { font-size: 24px; }
.space-poker-slot { width: 46px; height: 64px; border: 2px dashed rgba(255, 255, 255, .18); }
.space-poker-mine { align-items: center; }
.space-poker-mine.is-folded { opacity: .45; }
.space-poker-best { font-size: 14px; color: #5fd6a4; margin-left: 6px; }
.space-poker-raise { display: flex; flex-direction: column; gap: 4px; min-width: 210px; }
.space-poker-raise input[type="range"] { accent-color: #ffd166; width: 100%; }
.space-poker-quick { display: flex; gap: 4px; }
.space-arcade .space-poker-quick button { flex: 1; font-size: 12px !important; padding: 3px 6px !important; }
@media (max-width: 640px) {
  .space-poker-board { gap: 3px; }
  .space-poker .space-poker-board .space-truco-card, .space-poker-slot { width: 32px; height: 46px; }
  .space-poker-seat { min-width: 0; font-size: 11px; }
}

/* A barra de ações (Visual/Dançar/Emotes) não pode ter clip-path: os menus de
   dança e de emotes abrem PRA FORA dela (acima) e o recorte dos cantos em
   degrau os deixava invisíveis e sem clique. Os cantos continuam pelos
   quadradinhos do background (regra dos cantos acima). */
.space-bar-group { clip-path: none !important; }

/* "Montando o Space…" (primeira abertura, enquanto o mundo é desenhado) */
.space-loading { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; background: #0d1420; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #1a2433; font-family: "Shimo Digits", "Pixelify Sans", "Courier New", monospace; color: #e7edf5; }
.space-loading-box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 26px; background: #1b2635; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66, 6px 6px 0 rgba(0, 0, 0, .45); }
.space-loading-box b { font-size: 18px; }
.space-loading-box > span:last-child { font-size: 12px; color: #93a3b8; }
.space-loading-dots { display: flex; gap: 6px; }
.space-loading-dots i { width: 8px; height: 8px; background: #ffd166; animation: space-loading-blink 1s steps(2, end) infinite; }
.space-loading-dots i:nth-child(2) { animation-delay: .33s; }
.space-loading-dots i:nth-child(3) { animation-delay: .66s; }
@keyframes space-loading-blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .space-loading-dots i { animation: none; } }

/* ---- pista de corrida (race.js) ---- */
.space-race-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; image-rendering: pixelated; outline: none; background: #0d1420; }
.space-race-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; font-family: "Shimo Digits", "Pixelify Sans", "Courier New", monospace; color: #e7edf5; }
.space-race-hud > * { pointer-events: auto; }
.space-race-top { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: #1b2635; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66; }
.space-race-top b { font-size: 15px; } .space-race-top span { font-size: 12px; color: #ffd166; }
.space-race-panel { position: absolute; right: 12px; top: 12px; width: 240px; display: flex; flex-direction: column; gap: 6px; padding: 10px; background: #1b2635; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66, 4px 4px 0 rgba(0, 0, 0, .4); font-size: 13px; }
.space-race-panel button, .space-race-panel select, .space-race-actions button { font: 500 13px "Shimo Digits", "Pixelify Sans", "Courier New", monospace; color: #e7edf5; background: #233246; border: 2px solid #070b12; box-shadow: inset 2px 2px 0 #3a4d66, inset -2px -2px 0 #141d29; padding: 5px 9px; cursor: pointer; }
.space-race-panel button.is-ok { background: #3fa36b; color: #06210f; box-shadow: inset 2px 2px 0 #6fd59a, inset -2px -2px 0 #2a7a4c; }
.space-race-panel button:focus-visible, .space-race-actions button:focus-visible, .space-race-panel select:focus-visible { outline: 2px solid #f0b030; outline-offset: 1px; }
.space-race-car { color: #93a3b8; font-size: 12px; }
.space-race-new { display: flex; flex-wrap: wrap; gap: 6px; }
.space-race-new select { flex: 1 1 100px; }
.space-race-results { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 2px; }
.space-race-results li { display: flex; justify-content: space-between; gap: 8px; }
.space-race-results li.is-me { color: #ffd166; }
.space-race-results li span { color: #93a3b8; }
.space-race-hint { font-size: 11px; color: #93a3b8; }
.space-race-big { position: absolute; left: 50%; top: 28%; transform: translate(-50%, -50%) scale(.8); padding: 10px 26px; background: rgba(13, 20, 32, .85); border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #ffd166; color: #ffd166; font-size: 34px; font-weight: 700; opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none !important; white-space: nowrap; }
.space-race-big.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) { .space-race-big { transition: none; } }
.space-race-actions { position: absolute; left: 12px; bottom: 64px; display: flex; gap: 6px; }
/* na pista: o mapa e os controles do boneco somem; ficam a call e as janelas */
.space-stage.is-track .space-plate, .space-stage.is-track .space-desk, .space-stage.is-track .space-cinema-tip, .space-stage.is-track .space-meet-head,
.space-stage.is-track .space-bar > .space-bar-group:first-child, .space-stage.is-track .space-say, .space-stage.is-track .space-bar > .space-bar-group[aria-label="Zoom e câmera"] { display: none !important; }
.space-stage.is-track .space-bar, .space-stage.is-track .space-note { z-index: 6; }
.space-stage.is-track .space-arcade { z-index: 7; }

/* ---- garagem (garage.js) ---- */
.space-bar .space-coins { color: #ffd166; margin-left: 4px; }
.space-garage { width: min(1080px, calc(100% - 24px)); z-index: 8; }
.space-garage > header { display: flex; align-items: center; gap: 12px; }
.space-garage-coins { margin-left: auto; color: #ffd166; font-size: 16px; font-weight: 700; }
.space-garage-tabs { display: flex; gap: 4px; padding: 8px 12px 0; flex-wrap: wrap; }
.space-garage-tabs button { font: 500 13px "Shimo Digits", "Pixelify Sans", monospace; color: #c3cfdc; background: #141d2a; border: 2px solid #070b12; padding: 5px 12px; cursor: pointer; }
.space-garage-tabs button[aria-selected="true"] { background: #2b3d55; color: #ffd166; box-shadow: inset 0 -3px 0 #ffd166; }
.space-garage-note { margin: 6px 12px 0; min-height: 1.2em; font-size: 13px; color: #93a3b8; }
.space-garage-note[data-kind="ok"] { color: #5fd6a4; } .space-garage-note[data-kind="err"] { color: #ff8a8a; }
.space-garage-body { padding: 10px 12px 14px; overflow: auto; min-height: 0; }
.space-garage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.space-garage-grid.is-gallery { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.space-garage-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; background: #141d2a; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #26364b; text-align: center; }
.space-garage-card.is-selected { box-shadow: inset 0 0 0 2px #ffd166; }
.space-garage-card.is-empty { justify-content: center; color: #93a3b8; min-height: 200px; }
.space-garage-car { image-rendering: pixelated; background: radial-gradient(ellipse at 50% 70%, #24344a, #141d2a 70%); max-width: 100%; }
.space-garage-stats { width: 100%; display: flex; flex-direction: column; gap: 3px; }
.space-garage-stat { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 6px; font-size: 11px; color: #93a3b8; text-align: left; }
.space-garage-stat .bar { position: relative; height: 8px; background: #0d1420; border: 1px solid #070b12; }
.space-garage-stat .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #5fd6a4; }
.space-garage-stat .bar i.up { background: #ffd166; }
.space-garage-price { color: #ffd166; font-size: 13px; }
.space-garage-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.space-garage button, .space-garage select, .space-garage input[type="number"] { font: 500 13px "Shimo Digits", "Pixelify Sans", monospace; color: #e7edf5; background: #233246; border: 2px solid #070b12; box-shadow: inset 2px 2px 0 #3a4d66, inset -2px -2px 0 #141d29; padding: 5px 10px; cursor: pointer; }
.space-garage button:disabled { opacity: .45; cursor: default; }
.space-garage button.is-ok { background: #3fa36b; color: #06210f; box-shadow: inset 2px 2px 0 #6fd59a, inset -2px -2px 0 #2a7a4c; }
.space-garage button.is-run { background: #5a6b80; }
.space-garage button.is-on { box-shadow: inset 0 0 0 2px #ffd166; color: #ffd166; }
.space-garage button.is-locked { color: #c3cfdc; border-style: dashed; }
.space-garage-custom { display: grid; grid-template-columns: 320px 1fr; gap: 14px; }
.space-garage-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.space-garage-options { display: flex; flex-direction: column; gap: 10px; }
.space-garage-row { display: flex; flex-direction: column; gap: 4px; }
.space-garage-row .n { font-size: 12px; color: #93a3b8; }
.space-garage-swatches, .space-garage-items { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.space-garage-swatches button { width: 24px; height: 24px; padding: 0 !important; }
.space-garage-swatches button.is-on { outline: 2px solid #ffd166; outline-offset: 1px; }
.space-garage-swatches input[type="color"] { width: 32px; height: 26px; padding: 0; border: 2px solid #070b12; background: none; cursor: pointer; }
.space-garage-up { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.space-garage-up .n { flex: 1 1 200px; font-size: 13px; color: #e7edf5; }
.space-garage-dots { display: flex; gap: 4px; }
.space-garage-dots i { width: 12px; height: 12px; background: #0d1420; border: 2px solid #070b12; }
.space-garage-dots i.on { background: #ffd166; }
.space-garage-hint { font-size: 12px; color: #93a3b8; margin: 8px 0 0; }
.space-garage-empty { color: #93a3b8; }
.space-garage-earn ul { margin: 8px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.4; }
@media (max-width: 760px) { .space-garage-grid { grid-template-columns: 1fr; } .space-garage-custom { grid-template-columns: 1fr; } }

/* ---- treino de mira (aim.js) ---- */
.space-aim .space-arcade-screen canvas { width: min(100%, calc((100vh - 320px) * 1.6)); aspect-ratio: 320 / 200; cursor: none; }
.space-aim-modes { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px; }
.space-aim-modes button[aria-selected="true"] { background: #2b3d55 !important; color: #5dff8a !important; box-shadow: inset 0 -3px 0 #5dff8a !important; }
.space-aim-desc { margin: 6px 0; font-size: 12px; color: #93a3b8; line-height: 1.4; }
.space-aim-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 8px; }
.space-aim-stats div { display: flex; flex-direction: column; gap: 2px; padding: 6px; background: #141d2a; border: 2px solid #070b12; text-align: center; }
.space-aim-stats span { font-size: 10px; color: #93a3b8; }
.space-aim-stats b { font-size: 16px; color: #5dff8a; }
.space-aim-sens { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: 12px; color: #c3cfdc; margin-bottom: 8px; }
.space-aim-sens input { accent-color: #5dff8a; }
.space-aim-sens b { color: #5dff8a; min-width: 2.4em; text-align: right; }

/* escolha da pista (plataforma do terraço) */
.space-track-pick { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; width: min(640px, calc(100% - 24px)); background: #1b2635; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66, 6px 6px 0 rgba(0, 0, 0, .45); font-family: "Shimo Digits", "Pixelify Sans", "Courier New", monospace; color: #e7edf5; }
.space-track-pick > header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #2a2550; }
.space-track-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.space-track-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px; font: inherit; color: inherit; background: #141d2a; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #26364b; cursor: pointer; }
.space-track-card:hover, .space-track-card:focus-visible { box-shadow: inset 0 0 0 2px #39e8ff; outline: none; }
.space-track-card b { font-size: 16px; color: #39e8ff; }
.space-track-card span { font-size: 12px; color: #c3cfdc; line-height: 1.4; }
.space-track-card i { font-style: normal; font-size: 11px; color: #ffd166; }
@media (max-width: 560px) { .space-track-cards { grid-template-columns: 1fr; } }
.space-garage-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
.space-garage-tracks div { display: flex; flex-direction: column; padding: 4px; background: #0d1420; border: 1px solid #070b12; }
.space-garage-tracks span { font-size: 10px; color: #93a3b8; }
.space-garage-tracks b { font-size: 15px; color: #ffd166; }
.space-garage-spec { font-size: 11px; color: #5fd6a4; }
/* nitro: medidor embaixo do placar */
.space-race-nitro { position: absolute; left: 12px; top: 74px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #1b2635; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66; font-size: 12px; color: #9fe3ff; }
.space-race-nitro[hidden] { display: none; }
.space-race-nitro i { display: block; width: 90px; height: 8px; background: #0d1420; box-shadow: inset 0 0 0 1px #3a4d66; }
.space-race-nitro em { display: block; height: 100%; background: linear-gradient(90deg, #3c5aff, #39e8ff); }
.space-race-nitro small { font-size: 11px; color: #c9d3e0; min-width: 72px; }
.space-race-nitro.is-on { box-shadow: inset 0 0 0 2px #39e8ff, 0 0 12px #39e8ff88; }
.space-race-nitro.is-on small { color: #fff; }
.space-race-nitro.is-empty { opacity: .55; }
/* loja: vara de pesca */
.space-rod-stats { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; width: 100%; font-size: 12px; }
.space-rod-stats li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 8px; background: #141d2a; box-shadow: inset 0 0 0 1px #2a3a50; }
.space-rod-stats span { color: #93a3b8; } .space-rod-stats b { color: #ffd166; white-space: nowrap; }
.space-fish-tabs [data-shop] { margin-left: 8px; color: #ffd166; }
/* loja: modal próprio (compras, upgrades, venda) */
.space-modal-back { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px; background: rgba(7, 11, 18, .72); }
.space-modal { width: min(400px, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #1b2635; color: #e7edf5; border: 2px solid #070b12; box-shadow: inset 0 0 0 2px #3a4d66, 6px 6px 0 rgba(0, 0, 0, .5); animation: space-modal-in .14s steps(3) both; }
@keyframes space-modal-in { from { transform: translateY(8px) scale(.97); opacity: 0; } }
.space-modal h3 { margin: 0; font-size: 16px; color: #ffd166; }
.space-modal p { margin: 0; font-size: 13px; line-height: 1.4; color: #c3cfdc; }
.space-modal-art { display: grid; place-items: center; padding: 8px; background: #0f1824; box-shadow: inset 0 0 0 2px #2a3a50; }
.space-modal-art canvas { width: 240px; max-width: 100%; height: auto; image-rendering: pixelated; }
.space-modal-price { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.space-modal-price > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: #141d2a; box-shadow: inset 0 0 0 1px #2a3a50; }
.space-modal-price span { font-size: 11px; color: #93a3b8; }
.space-modal-price b { font-size: 15px; color: #ffd166; }
.space-modal-price .is-short b { color: #ff6b5c; }
.space-modal-warn { color: #ff6b5c !important; }
.space-modal-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.space-modal-acts button { min-width: 110px; }
.space-modal button.is-run { background: #d9473d; color: #fff; box-shadow: inset 2px 2px 0 #f08a82, inset -2px -2px 0 #9c2a22; }
/* a Pixelify junta "fi" num glifo que parece "A" ("fichas" virava "Achas") */
.space-stage, .space-stage * { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; }
/* grau Z (peixes secretos) */
.space-fish-tier[data-tier="Z"] { font: 900 14px "Courier New", monospace; background: #ff2bd6; color: #14141c; animation: space-tier-z 1s steps(4) infinite; }
@keyframes space-tier-z { 50% { background: #2a1440; color: #ff2bd6; } }
.space-fish-tier[data-tier="?"] { background: #2a1440; color: #ff2bd6; }
.space-fish-album li.is-secret { box-shadow: inset 0 0 0 2px #5a2a6a; }