/* ===================== Mathkin spike UI ===================== */ :root { --purple: #9C27B0; --purple-light: #CE93D8; --ink: #2a1733; --paper: #fffdf7; --good: #2e9e5b; --bad: #d8413a; --shadow: 0 8px 30px rgba(40, 10, 60, 0.28); --pixel-font: 'Handjet', 'VT323', monospace; --logo-font: 'Press Start 2P', 'Handjet', monospace; } /* NOTE: base resets, .hidden and .overlay (centering) come from style.css — this file only adds the Mathkin layer on top, scoped to its own elements so it never clobbers the engine UI. */ /* Mathkin overlays: dim the game + sit above the HUD, give them the rounded font */ #challenge-modal, #challenge-debug-modal, #dialogue, #profile-menu { background: rgba(20, 8, 30, 0.55); backdrop-filter: blur(3px); z-index: 60; padding: 16px; } #challenge-debug-modal { z-index: 70; } #challenge-modal, #challenge-debug-modal, #dialogue, #profile-menu, #top-hud, #interact-prompt, #touch, .world-label, #toast { font-family: 'Baloo 2', system-ui, sans-serif; color: var(--ink); } /* ---------- HUD (Mathkin pieces only; #hud + #crosshair come from style.css) ---------- */ #top-hud { pointer-events: none; position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); display: flex; gap: 10px; align-items: flex-start; } /* left column: profile chip, then keys + life on one row, then the daily streak + mission strip */ #hud-counters { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } /* keys 🔑 + life ♥ share one row at the top of the column */ #counter-row { display: flex; align-items: center; gap: 8px; } /* daily streak 🔥 + mission 🎯 sit together in a strip, under the life hearts */ #daily-row { display: flex; flex-flow: row wrap; align-items: flex-start; gap: 8px; } /* top HUD info badges — voxel pixel panels, matching the compass chrome */ #profile-hud-btn, #keys-badge, #fps-badge, #streak-badge, #mission-badge, #life-badge { border-radius: 0; padding: 5px 12px; border: 2px solid #000; background: rgba(18,20,34,0.86); color: #f3f7ff; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.22), inset -1px -1px 0 rgba(0,0,0,0.5); font-family: var(--pixel-font, 'VT323', monospace); font-size: 19px; line-height: 1.1; text-shadow: 1px 1px 0 rgba(0,0,0,0.7); image-rendering: pixelated; } /* active-profile chip — identity at the top of the left HUD column; opens the profile menu (also P) */ #profile-hud-btn { pointer-events: auto; cursor: pointer; margin: 0; text-align: left; display: inline-flex; align-items: center; gap: 7px; max-width: min(46vw, 280px); white-space: nowrap; overflow: hidden; } #profile-hud-btn:hover { background: rgba(30,34,54,0.92); } #profile-hud-btn:focus-visible { outline: 3px solid #f2c94c; outline-offset: 2px; } /* daily streak 🔥 — compact, warm accent; hidden until ≥2 days */ #streak-badge { color: #ffb347; align-items: center; gap: 6px; } /* Misión del Día 🎯 — wider chip; turns green-tinted when completed today */ #mission-badge { color: #eaf0ff; max-width: min(46vw, 360px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 5px solid #ffcf3f; } /* once completed the chip carries the "Siguiente: 🧭 …" pointer, so let it wrap to a second line instead of clipping the actionable part. */ #mission-badge.done { color: #b9f5cf; border-left-color: #2e9e5b; white-space: normal; max-width: min(60vw, 420px); } #keys-badge { color: #ffe08a; display: inline-flex; align-items: center; gap: 7px; } #keys-badge .key-icon { width: 13px; height: 26px; display: block; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.55)); } /* life counter — a row of pixel hearts; lost hearts dim out in place */ #life-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; } .life-heart { width: 19px; height: 16px; display: block; image-rendering: pixelated; fill: #ff5670; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.55)); transition: fill .15s ease, opacity .15s ease; } .life-heart.empty { fill: #46303a; opacity: 0.9; } /* FPS readout — pinned to the bottom-right corner, toggled from Options */ #fps-badge { pointer-events: none; position: fixed; z-index: 5; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); color: #b9f5cf; min-width: 64px; text-align: center; } /* Creator aim readout — block identity + coordinate frames of whatever the crosshair is on. Pinned top-right (the creator panel lives top-left, fps bottom-right). Click to copy the address; mono so coordinates line up. */ #creator-aim { pointer-events: auto; cursor: pointer; user-select: none; position: fixed; z-index: 39; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); min-width: 176px; max-width: 300px; padding: 8px 11px; border: 1px solid rgba(148, 163, 184, 0.32); border-radius: 8px; background: rgba(12, 17, 23, 0.92); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42); color: #e5edf6; text-shadow: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; } #creator-aim:hover { background: rgba(20, 27, 36, 0.96); border-color: rgba(148, 163, 184, 0.5); } #creator-aim .creator-aim-name { display: block; margin-bottom: 4px; color: #38b0ff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #creator-aim .creator-aim-id { color: #6f7c92; font-weight: 400; } #creator-aim .creator-aim-row { display: flex; justify-content: space-between; gap: 12px; } #creator-aim .creator-aim-k { color: #93a4bd; } #creator-aim .creator-aim-v { color: #e9f0fa; } #creator-aim .creator-aim-delta .creator-aim-k, #creator-aim .creator-aim-delta .creator-aim-v { color: #ffce3d; } #creator-aim .creator-aim-empty { color: #7e8aa0; } #creator-aim .creator-aim-hint { display: block; margin-top: 6px; color: #6f7c92; font-size: 10px; } #interact-prompt { position: fixed; left: 50%; bottom: 22%; transform: translateX(-50%); background: rgba(18,20,34,0.86); color: #f3f7ff; padding: 8px 16px; border-radius: 0; border: 2px solid #000; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.22), inset -1px -1px 0 rgba(0,0,0,0.5); font-family: var(--pixel-font, 'VT323', monospace); font-size: 20px; line-height: 1.1; text-shadow: 1px 1px 0 rgba(0,0,0,0.7); animation: bob 1.4s ease-in-out infinite; } @keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } } /* toast is provided by the engine UI (ui.js / style.css) */ /* ---------- Cubito companion HUD (non-modal) ---------- */ #cubito-hud { --cubito-accent: #38b0ff; position: fixed; z-index: 22; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: min(320px, 60vw); pointer-events: none; font-family: 'Baloo 2', system-ui, sans-serif; /* desktop: height is content-driven — the bubble grows down to show the full line, no cap. Small screens get a size limit in the media query. */ max-height: none; } #cubito-hud.cubito-pop { animation: cubito-pop .24s cubic-bezier(.2,1.3,.5,1); } @keyframes cubito-pop { from { transform: translateY(8px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } } /* JS pauses the actual reveal/portrait clocks; this freezes the remaining CSS reactions too while a game or title menu owns the screen. */ body.simulation-paused #cubito-hud, body.simulation-paused #cubito-hud * { animation-play-state: paused !important; } .cubito-face { flex: 0 0 auto; width: 104px; height: 96px; /* 200% */ display: grid; place-items: center; filter: drop-shadow(0 3px 4px rgba(20,10,30,0.5)); animation: cubito-bob 2.4s ease-in-out infinite; } @keyframes cubito-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* pixel/voxel Cubito avatar */ .cubito-svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; } .cubito-svg .cu-eyes { fill: #bdf0ff; filter: drop-shadow(0 0 2px #7fdcff); } .cubito-svg .eyes-happy, .cubito-svg .eyes-dots { display: none; } .cubito-face[data-mood="thinking"] .eyes-default { display: none; } .cubito-face[data-mood="thinking"] .eyes-dots { display: block; } .cubito-face[data-mood="celebrate"] .eyes-default { display: none; } .cubito-face[data-mood="celebrate"] .eyes-happy { display: block; } .cubito-face[data-mood="celebrate"] .cu-eyes { fill: #eafff0; filter: drop-shadow(0 0 2.6px #8ef0b3); } /* gentle blink on the resting bars */ .cubito-svg .eyes-default { transform-box: fill-box; transform-origin: center; animation: cubito-blink 4.8s ease-in-out infinite; } @keyframes cubito-blink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } } /* pixel/voxel speech panel — same idiom as #interact-prompt (hard corners, black outline, inset bevel, hard drop shadow, pixel fonts) */ .cubito-bubble { background: rgba(20,22,36,0.93); color: #f3f7ff; min-width: 0; border-radius: 0; border: 2px solid #000; border-top: 5px solid var(--cubito-accent); /* mood-coloured top bar */ box-shadow: inset 2px 2px 0 rgba(255,255,255,0.14), inset -2px -2px 0 rgba(0,0,0,0.55), 5px 5px 0 rgba(10,6,18,0.45); padding: 9px 15px 12px; max-height: none; overflow: visible; /* desktop: grow to fit, never clip */ } .cubito-name { font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--cubito-accent); letter-spacing: .5px; margin-bottom: 8px; text-shadow: 1px 1px 0 rgba(0,0,0,0.7); } .cubito-text { font-family: var(--pixel-font, 'VT323', monospace); font-size: 24px; line-height: 1.08; text-shadow: 1px 1px 0 rgba(0,0,0,0.6); /* on desktop the bubble grows down to fit the whole line — long words wrap instead of overflowing the box (see #cubito-hud height note) */ overflow-wrap: anywhere; white-space: normal; } /* Blinking caret while Cubito "talks" a line out in the HUD (shares the modal's cubito-caret keyframes). Only present mid-reveal; never under reduced-motion. */ .cubito-text.is-typing::after { content: '▌'; margin-left: 1px; color: var(--cubito-accent, #38b0ff); animation: cubito-caret 0.7s steps(1, end) infinite; } /* older-but-still-active lines, stacked as smaller/quieter cards below the main bubble so competing messages don't stomp each other */ .cubito-secondary { opacity: 0.78; border-top-width: 3px; padding: 7px 14px 9px; animation: cubito-pop .2s ease-out; } .cubito-secondary .cubito-text { font-size: 19px; } /* resting state sits a touch quieter so active messages stand out */ #cubito-hud.cubito-idle { opacity: 0.9; } #cubito-hud.cubito-idle .cubito-face { animation-duration: 3.4s; } @media (max-width: 560px) { #cubito-hud { top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); max-width: min(240px, 62vw); gap: 6px; } #cubito-hud .cubito-face { width: 76px; height: 70px; } /* cap the bubble so a long line can't run off a short phone screen */ #cubito-hud .cubito-bubble { max-height: 42vh; overflow-y: auto; } /* Reto mode on a phone: shrink the portrait + narrow the bubble so the corner narrator stays clear of the near-fullscreen modal card's close button. */ #cubito-hud .cubito-portrait-face { width: 76px; height: 70px; } #cubito-hud.cubito-reto { max-width: min(208px, 66vw); } #cubito-hud.cubito-reto .cubito-portrait-face { width: 58px; height: 54px; } } /* ---------- Touch ---------- */ #touch { position: fixed; inset: 0; z-index: 25; pointer-events: none; } /* Keep the on-screen touch controls out of menus/title/loading. #touch is shown once (layer.js) and never re-hidden, and at z-index 25 it leaks over the transparent title screen and the z-20–30 menus. Gate it on what's open instead of threading state through every transition. (#touch only exists on touch.) Degrades gracefully where :has() is unsupported — same as before the fix. */ body:has(#title-screen:not(.hidden)) #touch, body:has(#loading-screen:not(.hidden)) #touch, body:has(#pause-menu:not(.hidden)) #touch, body:has(#options-menu:not(.hidden)) #touch, body:has(#controls-menu:not(.hidden)) #touch, body:has(#profile-menu:not(.hidden)) #touch { display: none !important; } #joystick { position: fixed; left: calc(26px + env(safe-area-inset-left, 0px)); bottom: calc(26px + env(safe-area-inset-bottom, 0px)); width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,0.14); border: 2px solid rgba(255,255,255,0.3); pointer-events: auto; } #joystick-knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(255,253,247,0.9); box-shadow: var(--shadow); } /* let the on-screen hotbar receive taps on touch devices (desktop drives the hotbar by number keys / wheel under pointer lock, so the cursor never reaches it there). Tap → onHotbarSelect → selectSlot. */ @media (pointer: coarse) { #hotbar { pointer-events: auto; } } /* ---------- Portrait nudge (touch) ---------- */ #rotate-hint { display: none; } @media (orientation: portrait) and (pointer: coarse) { #hud:not(.hidden) ~ #rotate-hint { display: flex; position: fixed; inset: 0; z-index: 80; align-items: center; justify-content: center; text-align: center; background: rgba(8, 10, 20, 0.92); color: #eaf0ff; padding: 24px; font-family: 'Baloo 2', system-ui, sans-serif; } #rotate-hint .rotate-hint-icon { font-size: 64px; line-height: 1; color: #ffd23f; animation: rotate-hint-rock 2.4s ease-in-out infinite; } #rotate-hint .rotate-hint-text { font-size: 24px; font-weight: 800; margin-top: 12px; color: #ffd23f; } #rotate-hint .rotate-hint-sub { font-size: 16px; color: #9fb0d0; margin-top: 6px; } } @keyframes rotate-hint-rock { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } } @media (prefers-reduced-motion: reduce) { #rotate-hint .rotate-hint-icon { animation: none; } } #touch-actions { position: fixed; right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(30px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; align-items: flex-end; gap: 14px; max-width: 232px; pointer-events: auto; } .touch-btn { width: 72px; height: 72px; border-radius: 50%; border: 0; font-size: 28px; color: var(--ink); background: rgba(255,253,247,0.9); box-shadow: var(--shadow); cursor: pointer; display: grid; place-items: center; line-height: 1; -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; } .touch-btn:active { transform: translateY(2px); filter: brightness(0.92); } .touch-btn.primary { width: 88px; height: 88px; background: var(--purple); color: #fff; font-size: 34px; } /* mine/place read as "tool" actions — tinted so they don't blend with jump */ .touch-btn.mine { background: rgba(214, 173, 122, 0.95); } .touch-btn.place { background: rgba(140, 196, 150, 0.95); } /* Touch devices fire a transient :hover on tap that then "sticks" until the next tap elsewhere — neutralise it for the utility buttons so they don't look stuck-on. (Answer buttons carry .selected/.correct/.wrong which win anyway.) */ @media (hover: none) { #profile-hud-btn:hover { background: rgba(18,20,34,0.86); } #map-hud-btn:hover { background: rgba(18,20,34,0.86); } .ghost-btn:hover, #challenge-modal .big-btn:hover { background: linear-gradient(#828282, #6a6a6a 45%, #5a5a5a); border-color: #000; } } /* ---------- Title ---------- */ .title-card { background: var(--paper); border-radius: 24px; padding: 32px 28px; max-width: 460px; text-align: center; box-shadow: var(--shadow); border-top: 8px solid var(--purple); } .logo { font-size: 52px; font-weight: 800; color: var(--purple); letter-spacing: 2px; } .subtitle { color: var(--purple-light); font-weight: 700; margin-top: -4px; } .blurb { font-size: 16px; line-height: 1.5; margin: 18px 0; color: #4a3555; } .big-btn { background: var(--purple); color: #fff; border: 0; border-radius: 16px; padding: 14px 32px; font-size: 20px; font-weight: 800; font-family: inherit; cursor: pointer; box-shadow: var(--shadow); } .big-btn:active { transform: translateY(2px); } .big-btn.small { padding: 10px 22px; font-size: 17px; } .hint-row { margin-top: 16px; font-size: 13px; color: #8a7796; } .status { margin-top: 12px; font-size: 13px; min-height: 18px; color: #8a7796; } .status.err { color: var(--bad); } .status.ok { color: var(--good); } /* ---------- Profile / pairing ---------- */ .profile-card { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 0; border: 3px solid #000; padding: 16px; background: rgba(18,20,34,0.96); color: #f3f7ff; box-shadow: inset 2px 2px 0 rgba(255,255,255,0.18), inset -3px -3px 0 rgba(0,0,0,0.55), 8px 8px 0 rgba(0,0,0,0.42); font-family: var(--pixel-font, 'VT323', monospace); text-shadow: 2px 2px 0 rgba(0,0,0,0.75); } #profile-menu { background: rgba(16,16,16,0.62); backdrop-filter: blur(1px); } #profile-menu, #profile-menu * { image-rendering: pixelated; } .profile-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid rgba(0,0,0,0.75); box-shadow: 0 2px 0 rgba(255,255,255,0.12); } .profile-title { font-family: 'Press Start 2P', var(--pixel-font, monospace); font-size: clamp(13px, 2.4vw, 18px); line-height: 1.35; color: #ffce3d; letter-spacing: 0; } .profile-status, .profile-pair-status { color: #cbd5e1; font-size: 18px; line-height: 1.15; overflow-wrap: anywhere; } .profile-status.ok, .profile-pair-status.ok { color: #9ef0b6; } .profile-pair-status.err { color: #ff9b9b; } .profile-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; } .profile-preview { display: grid; justify-items: center; gap: 10px; max-width: 280px; border: 2px solid #000; background: rgba(5,7,12,0.45); padding: 12px; box-shadow: inset 2px 2px 0 rgba(255,255,255,0.12), inset -2px -2px 0 rgba(0,0,0,0.45); } .profile-skin-stage { position: relative; overflow: hidden; width: 168px; height: 208px; border: 2px solid #000; background: linear-gradient(#20283b, #111827); box-shadow: inset 2px 2px 0 rgba(255,255,255,0.12), inset -2px -2px 0 rgba(0,0,0,0.52); } .profile-skin-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; } .profile-skin-canvas:active { cursor: grabbing; } .profile-skin-row { display: flex; align-items: center; justify-content: center; gap: 8px; } .profile-skin-actions { display: flex; gap: 10px; justify-content: center; margin-top: 4px; } /* Índigo's wardrobe (skin-only view): one centred, larger portrait. */ .pm-view-skin .profile-body { grid-template-columns: 1fr; justify-items: center; } .pm-view-skin .profile-preview { max-width: 460px; } .pm-view-skin .profile-skin-stage { width: 300px; height: 380px; } .skin-arrow { flex: 0 0 auto; width: 32px; height: 56px; padding: 0; border: 2px solid #000; border-radius: 0; cursor: pointer; background: linear-gradient(#5c6470, #444b55); color: #fff; font-family: var(--pixel-font, 'VT323', monospace); font-size: 30px; line-height: 1; text-shadow: 2px 2px 0 rgba(0,0,0,0.72); box-shadow: inset 2px 2px 0 rgba(255,255,255,0.28), inset -2px -2px 0 rgba(0,0,0,0.55); } .skin-arrow:hover { background: linear-gradient(#6c7480, #545b65); } .skin-arrow:active { transform: translateY(1px); box-shadow: inset 2px 2px 0 rgba(0,0,0,0.5); } .skin-arrow:disabled { opacity: 0.4; cursor: default; box-shadow: none; } .profile-skin-name { width: 100%; color: #ffce3d; font-size: 18px; line-height: 1; text-align: center; text-shadow: 2px 2px 0 rgba(0,0,0,0.6); overflow-wrap: anywhere; } .profile-active-name { width: 100%; color: #fff; font-size: 24px; line-height: 1; text-align: center; overflow-wrap: anywhere; } .profile-active-meta { width: 100%; color: #a8d08f; font-size: 17px; line-height: 1; text-align: center; } .profile-main { min-width: 0; } .profile-list-title { color: #ffce3d; font-size: 20px; line-height: 1; margin-bottom: 8px; } .profile-list { display: grid; gap: 6px; max-height: 150px; overflow-y: auto; margin-bottom: 12px; padding-right: 4px; } .profile-slot { width: 100%; min-width: 0; border: 2px solid #000; border-radius: 0; padding: 7px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; background: linear-gradient(#5c6470, #444b55); color: #fff; font-family: var(--pixel-font, 'VT323', monospace); font-size: 19px; text-align: left; text-shadow: 2px 2px 0 rgba(0,0,0,0.72); cursor: pointer; box-shadow: inset 2px 2px 0 rgba(255,255,255,0.28), inset -2px -2px 0 rgba(0,0,0,0.55); } .profile-slot:hover, .profile-slot.active { border-color: #fff; background: linear-gradient(#7784be, #5a66a3); } .profile-slot:focus, #profile-menu .mc-button:focus, #profile-menu .x-btn:focus { outline: 3px solid #f2c94c; outline-offset: 2px; } .profile-slot-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-slot-meta { color: #dbeafe; font-size: 16px; white-space: nowrap; } /* Quiet "add player" reveal: a dashed ghost slot, not a tempting CTA. */ .profile-slot-add { display: block; text-align: center; grid-template-columns: none; background: transparent; border-style: dashed; border-color: rgba(255,255,255,0.32); color: #c2cbdc; box-shadow: none; opacity: 0.85; } .profile-slot-add:hover, .profile-slot-add.active { background: rgba(255,255,255,0.06); border-color: #fff; opacity: 1; } .profile-grid { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px 10px; align-items: center; margin: 10px 0 12px; } .profile-grid label { color: #a8d08f; font-size: 20px; line-height: 1; } .profile-input { width: 100%; min-width: 0; border: 2px solid #000; border-radius: 0; padding: 7px 10px; font-family: var(--pixel-font, 'VT323', monospace); font-size: 22px; line-height: 1; outline: none; background: #05070c; color: #f3f7ff; text-shadow: none; box-shadow: inset 2px 2px 0 rgba(0,0,0,0.6), inset -1px -1px 0 rgba(255,255,255,0.16); } .profile-input:focus { border-color: #fff; } .profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; } /* Guardar (and the "Añadir jugador" CTA when shown) each take their own full-width line; Emparejar + Vincular dispositivo then pair up on the row directly below them. When "Añadir jugador" is hidden (lone paired child) its row collapses, so Guardar sits alone above the Emparejar/Vincular pair. */ #btn-profile-save, #btn-profile-create { grid-column: 1 / -1; } #profile-menu .mc-button.small { width: 100%; min-width: 0; font-size: 18px; line-height: 1; padding: 7px 8px; white-space: nowrap; } #profile-menu .mc-button.danger { color: #ffd8d8; background: linear-gradient(#8b4b4b, #633636 45%, #4e2b2b); } /* Desvincular + Borrar share one full-width row, side by side. */ .profile-actions-danger { grid-column: 1 / -1; display: flex; gap: 8px; } .profile-actions-danger .mc-button { flex: 1 1 0; } #profile-menu .mc-button:disabled { opacity: 0.48; cursor: default; filter: grayscale(0.35); } #profile-menu .x-btn { width: 32px; height: 32px; flex: 0 0 auto; border: 2px solid #000; border-radius: 0; background: linear-gradient(#828282, #5a5a5a); color: #fff; font-family: var(--pixel-font, 'VT323', monospace); font-size: 22px; line-height: 1; text-shadow: 2px 2px 0 #3f3f3f; box-shadow: inset 2px 2px 0 rgba(255,255,255,0.35), inset -2px -2px 0 rgba(0,0,0,0.5); } #profile-menu .x-btn:hover { border-color: #fff; } .profile-pair-box { margin-top: 12px; padding: 12px; border-radius: 0; background: rgba(5,7,12,0.5); text-align: center; border: 2px solid #000; box-shadow: inset 2px 2px 0 rgba(255,255,255,0.1), inset -2px -2px 0 rgba(0,0,0,0.45); } .profile-pair-label { color: #a8d08f; font-size: 19px; } .profile-pair-code { font-family: 'Press Start 2P', monospace; color: #ffce3d; font-size: clamp(24px, 5vw, 34px); letter-spacing: 6px; margin-top: 10px; text-shadow: 3px 3px 0 #3e2e00; } .profile-pair-status { min-height: 22px; margin-top: 10px; } @media (max-width: 640px) { .profile-body { grid-template-columns: 1fr; } .profile-preview { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; max-width: none; } .profile-skin-row { grid-row: 1 / span 2; gap: 4px; } .profile-skin-stage { width: 116px; height: 150px; } .skin-arrow { width: 26px; height: 44px; font-size: 24px; } .profile-skin-name, .profile-active-name, .profile-active-meta { text-align: left; } .profile-actions { grid-template-columns: 1fr; } .profile-slot { grid-template-columns: 1fr; gap: 2px; } .profile-slot-meta { white-space: normal; } } /* ---------- Challenge modal ---------- */ #challenge-modal { background: rgba(16,16,16,0.62); backdrop-filter: blur(1px); } #challenge-modal, #challenge-modal * { image-rendering: pixelated; } .modal-card { width: min(640px, calc(100vw - 32px)); height: min(700px, calc(100dvh - 32px)); max-height: none; overflow: hidden; display: flex; flex-direction: column; border-radius: 0; border: 3px solid #000; padding: 0; background: rgba(18,20,34,0.96); color: #f3f7ff; box-shadow: inset 2px 2px 0 rgba(255,255,255,0.16), inset -3px -3px 0 rgba(0,0,0,0.58), 8px 8px 0 rgba(0,0,0,0.44); font-family: var(--pixel-font, 'VT323', monospace); text-shadow: 2px 2px 0 rgba(0,0,0,0.75); } @supports not (height: 100dvh) { .modal-card { height: min(700px, calc(100vh - 32px)); } } #challenge-modal .modal-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-bottom: 3px solid #000; background: rgba(5,7,12,0.5); box-shadow: inset 0 -2px 0 rgba(255,255,255,0.1); } .modal-head { display: flex; align-items: center; margin-bottom: 8px; } .chip { background: var(--purple-light); color: #3a1147; font-weight: 700; padding: 4px 12px; border-radius: 999px; font-size: 13px; } .x-btn { margin-left: auto; border: 0; background: none; font-size: 22px; cursor: pointer; color: #8a7796; } #challenge-modal .chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: transparent; color: #9aa6c4; font-family: var(--pixel-font, 'VT323', monospace); font-size: 18px; line-height: 1; font-weight: 400; padding: 0; border-radius: 0; border: 0; text-shadow: 1px 1px 0 rgba(0,0,0,0.75); box-shadow: none; } #challenge-modal .x-btn { width: 32px; height: 32px; flex: 0 0 auto; margin-left: auto; border: 2px solid #000; border-radius: 0; background: linear-gradient(#828282, #5a5a5a); color: #fff; font-family: var(--pixel-font, 'VT323', monospace); font-size: 22px; line-height: 1; cursor: pointer; text-shadow: 2px 2px 0 #3f3f3f; box-shadow: inset 2px 2px 0 rgba(255,255,255,0.35), inset -2px -2px 0 rgba(0,0,0,0.5); } #challenge-modal .x-btn:hover { border-color: #fff; } .modal-view { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px; } .modal-view.hidden { display: none; } .modal-view-lesson { display: flex; flex-direction: column; gap: 12px; } #challenge-modal .modal-card[data-view="intro"] .question, #challenge-modal .modal-card[data-view="intro"] .challenge-visual, #challenge-modal .modal-card[data-view="intro"] #modal-answer-area, #challenge-modal .modal-card[data-view="intro"] .feedback, #challenge-modal .modal-card[data-view="intro"] .hint-box, #challenge-modal .modal-card[data-view="intro"] .modal-foot, #challenge-modal .modal-card[data-view="intro"] .source, #challenge-modal .modal-card[data-view="intro"] .voice-status { display: none; } .question { font-size: clamp(19px, 4.8vw, 26px); line-height: 1.16; margin: 10px 0 16px; font-weight: 400; color: #fff; overflow-wrap: anywhere; } /* Authored "unknown" placeholder (□) rendered as a fill-in slot — the pixel font has no glyph for U+25A1, so we draw it instead of showing tofu. Scales with the surrounding text via em units (used in the question, hints and lesson). */ .unknown-box { display: inline-block; box-sizing: border-box; width: 0.82em; height: 0.82em; margin: 0 0.08em; vertical-align: -0.06em; border: 2px solid var(--cubito-accent, #38b0ff); border-radius: 2px; background: rgba(109, 213, 200, 0.16); } /* procedural reto visual — the exact "content layer" (counts/measures) on a canvas over the question. Scoped under #challenge-modal so it beats the modal's `* { image-rendering: pixelated }` and stays crisp; centred + spaced. */ #challenge-modal .challenge-visual { display: block; margin: 4px auto 16px; width: 100%; max-width: 300px; height: auto; image-rendering: auto; } /* generative background prop ("scene") behind the procedural visual — the support layer (scenes.js / scene-catalog.js). The transparent procedural canvas composites ON TOP, so the prop shows through; it's dimmed + dark-veiled so the math/labels stay legible against the dark modal. No baked prop → no .visual-stage at all (the canvas renders bare, exactly as before). */ #challenge-modal .visual-stage { position: relative; display: block; margin: 4px auto 16px; width: 100%; max-width: 300px; border-radius: 10px; overflow: hidden; } #challenge-modal .visual-stage .challenge-visual { position: relative; z-index: 1; margin: 0; max-width: 100%; } #challenge-modal .scene-backdrop { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; image-rendering: auto; opacity: 0.45; } #challenge-modal .scene-backdrop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(125% 110% at 50% 38%, rgba(18, 20, 34, 0.30), rgba(18, 20, 34, 0.82)); } #modal-answer-area { display: flex; flex-direction: column; gap: 10px; min-height: 0; } .num-input { font-size: 28px; line-height: 1; padding: 10px 12px; border-radius: 0; border: 2px solid #000; font-family: var(--pixel-font, 'VT323', monospace); text-align: center; width: 100%; outline: none; background: #05070c; color: #ffce3d; text-shadow: none; box-shadow: inset 2px 2px 0 rgba(0,0,0,0.65), inset -1px -1px 0 rgba(255,255,255,0.16); } .num-input:focus { border-color: #fff; } .opt-btn { font-size: 22px; line-height: 1.08; padding: 10px 12px; border-radius: 0; border: 2px solid #000; background: linear-gradient(#5c6470, #444b55); color: #fff; cursor: pointer; font-family: var(--pixel-font, 'VT323', monospace); font-weight: 400; transition: none; text-shadow: 2px 2px 0 rgba(0,0,0,0.72); box-shadow: inset 2px 2px 0 rgba(255,255,255,0.28), inset -2px -2px 0 rgba(0,0,0,0.55); } .opt-btn:hover { border-color: #fff; background: linear-gradient(#7784be, #5a66a3); } .opt-btn:focus, .ghost-btn:focus, .big-btn:focus, .x-btn:focus { outline: 3px solid #f2c94c; outline-offset: 2px; } .opt-btn.selected { background: linear-gradient(#2f80ed, #245bb0); color: #fff; border-color: #fff; } .opt-btn.correct { background: linear-gradient(#33b96d, #237845); color: #fff; border-color: #b9f5cf; } .opt-btn.wrong { background: linear-gradient(#e25a50, #9d332d); color: #fff; border-color: #ffc7c3; } .modal-foot { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 0; padding: 10px 14px; border-top: 3px solid #000; background: rgba(5,7,12,0.5); box-shadow: inset 0 2px 0 rgba(255,255,255,0.1); } .ghost-btn, #challenge-modal .big-btn { border: 2px solid #000; border-radius: 0; padding: 7px 12px; min-height: 36px; font-family: var(--pixel-font, 'VT323', monospace); font-size: 20px; line-height: 1; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; cursor: pointer; background: linear-gradient(#828282, #6a6a6a 45%, #5a5a5a); box-shadow: inset 2px 2px 0 rgba(255,255,255,0.42), inset -2px -2px 0 rgba(0,0,0,0.45); } .ghost-btn:hover, #challenge-modal .big-btn:hover { border-color: #fff; background: linear-gradient(#8f9ad1, #707bb4 45%, #5e69a3); } .ghost-btn:disabled, #challenge-modal .big-btn:disabled { opacity: .5; cursor: default; } #modal-submit { margin-left: auto; } .voice-btn, .followup-voice { min-width: 74px; } .voice-btn.recording, .followup-voice.recording { background: linear-gradient(#e25a50, #9d332d 45%, #7f2824); border-color: #ffc7c3; } .voice-status { flex: 0 0 auto; margin: 0 14px 10px; padding: 8px 10px; min-height: 34px; border: 2px solid #000; background: rgba(18,33,45,0.72); color: #d9ecff; font-size: 18px; line-height: 1.05; overflow-wrap: anywhere; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.16), inset -1px -1px 0 rgba(0,0,0,0.45); } .voice-status.bad { background: #5e2528; color: #ffe3e0; } .feedback { font-size: 21px; line-height: 1.08; padding: 9px 11px; border-radius: 0; margin-top: 12px; text-align: center; border: 2px solid #000; font-weight: 400; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.22), inset -1px -1px 0 rgba(0,0,0,0.45); } .feedback.good { background: #237845; color: #eafff0; } .feedback.bad { background: #9d332d; color: #ffe3e0; } .hint-box, .lesson { background: rgba(5,7,12,0.48); border-radius: 0; border: 2px solid #000; padding: 12px; margin-top: 12px; font-size: 21px; line-height: 1.14; white-space: pre-wrap; color: #eaf0ff; box-shadow: inset 2px 2px 0 rgba(255,255,255,0.1), inset -2px -2px 0 rgba(0,0,0,0.48); } .lesson { margin-top: 0; border-left: 5px solid #ffce3d; } /* long display-math must scroll, not blow out the modal width on narrow screens (mirrors .fu-msg .katex-display in the follow-up thread) */ .question .katex-display, .hint-box .katex-display, .lesson .katex-display, .concept-text .katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; } .source { flex: 0 0 auto; min-height: 20px; padding: 4px 12px 8px; font-size: 15px; line-height: 1; color: #9aa6c4; text-align: right; overflow-wrap: anywhere; } /* ---------- Challenge modal: intro loading strip ---------- */ /* While the backend prepares the reto, Cubito reads the scroll preface aloud from the corner HUD; the modal body shows this calm strip (with the concept card, if any, below it). Shown ONLY in the intro view. */ #modal-loading { display: none; flex: 0 0 auto; align-items: center; justify-content: center; gap: 10px; padding: 14px 16px; border-bottom: 2px solid #000; background: rgba(18,33,45,0.40); color: #cfe0ff; text-align: center; text-shadow: 1px 1px 0 rgba(0,0,0,0.6); } .modal-card[data-view="intro"] #modal-loading { display: flex; } .modal-loading-scroll { font-size: 30px; filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.5)); animation: modal-loading-bob 2.4s ease-in-out infinite; } @keyframes modal-loading-bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } } .modal-loading-text { font-size: 20px; line-height: 1.15; } .modal-loading-dots { display: inline-flex; gap: 6px; } .modal-loading-dots i { width: 7px; height: 7px; display: block; background: #38b0ff; box-shadow: 1px 1px 0 rgba(0,0,0,0.5); animation: modal-loading-dot 1s ease-in-out infinite; } .modal-loading-dots i:nth-child(2) { animation-delay: 0.16s; } .modal-loading-dots i:nth-child(3) { animation-delay: 0.32s; } @keyframes modal-loading-dot { 0%,100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } } /* ---------- Cubito narrates retos from the corner ---------- */ /* The 3-D portrait mount in #cubito-hud — empty/unlaid-out until a reto opens, when .cubito-reto swaps it in for the flat SVG face. Sized like .cubito-face. */ .cubito-portrait-face { display: none; flex: 0 0 auto; width: 104px; height: 96px; } /* Reto mode: the corner widget floats ABOVE the challenge backdrop (the overlay is z-index 60), shows the live portrait, and the bubble is lifted off the dimmed scrim with an accent ring + ambient shadow so it doesn't read as a lone island. Lines are sticky (no auto-revert) while a reto is open — handled in companion.js. */ #cubito-hud.cubito-reto { z-index: 64; } #cubito-hud.cubito-reto .cubito-face { display: none; } #cubito-hud.cubito-reto .cubito-portrait-face { display: block; } #cubito-hud.cubito-reto .cubito-bubble { box-shadow: inset 2px 2px 0 rgba(255,255,255,0.16), inset -2px -2px 0 rgba(0,0,0,0.55), 0 0 0 2px rgba(56,176,255,0.32), 6px 6px 0 rgba(8,6,16,0.55), 0 10px 28px rgba(0,0,0,0.55); } @keyframes cubito-caret { 0%, 49% { opacity: 0.9; } 50%, 100% { opacity: 0; } } /* The Oracle's temptation — the "Muéstrame cómo" shortcut (the easy answer) glows a cold gold, the antagonist's colour, in deliberate contrast to Cubito's blue. See docs/lore.md (El Oráculo). */ #modal-giveup { color: #e0a83a; border-color: #e0a83a; } /* Pinned, age-banded concept reference — Cubito's "base content" */ .concept-card { background: rgba(18,33,45,0.72); border-left: 5px solid #38b0ff; border-radius: 0; border-top: 2px solid #000; border-right: 2px solid #000; border-bottom: 2px solid #000; padding: 10px 12px; margin: 2px 0 14px; box-shadow: inset 2px 2px 0 rgba(255,255,255,0.1), inset -2px -2px 0 rgba(0,0,0,0.45); } .concept-title { font-family: 'Press Start 2P', var(--pixel-font, monospace); font-weight: 400; color: #38b0ff; font-size: 10px; line-height: 1.35; letter-spacing: 0; text-transform: uppercase; margin-bottom: 6px; } .concept-text { font-size: 20px; line-height: 1.12; color: #d9ecff; white-space: pre-wrap; } /* Follow-up Q&A with Cubito (post-solve, max 3) */ .followup { margin-top: 0; background: rgba(18,33,45,0.72); border-radius: 0; border: 2px solid #000; padding: 12px; box-shadow: inset 2px 2px 0 rgba(255,255,255,0.1), inset -2px -2px 0 rgba(0,0,0,0.45); } .followup-title { font-family: 'Press Start 2P', var(--pixel-font, monospace); font-weight: 400; color: #38b0ff; font-size: 10px; line-height: 1.35; margin-bottom: 10px; } .followup-log { display: flex; flex-direction: column; gap: 8px; max-height: 190px; overflow-y: auto; } .followup-log:not(:empty) { margin-bottom: 10px; } .fu-msg { font-size: 19px; line-height: 1.12; padding: 8px 10px; border-radius: 0; border: 2px solid #000; white-space: pre-wrap; max-width: 86%; min-width: 0; overflow-wrap: anywhere; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.16), inset -1px -1px 0 rgba(0,0,0,0.4); } .fu-who { color: #ffce3d; } .fu-body { overflow-wrap: anywhere; word-break: normal; } .fu-msg .katex { white-space: normal; } .fu-msg .katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; } .fu-you { background: #245bb0; color: #fff; align-self: flex-end; } .fu-cubito { background: #2c3440; color: #eaf0ff; align-self: flex-start; } .followup-row { display: flex; gap: 8px; } .followup-input { flex: 1; min-width: 0; font-size: 20px; line-height: 1; padding: 9px 10px; border-radius: 0; border: 2px solid #000; font-family: var(--pixel-font, 'VT323', monospace); outline: none; background: #05070c; color: #f3f7ff; text-shadow: none; box-shadow: inset 2px 2px 0 rgba(0,0,0,0.65), inset -1px -1px 0 rgba(255,255,255,0.16); } .followup-input:focus { border-color: #fff; } .followup-input:disabled { background: #202630; color: #9aa6c4; } .followup-send { white-space: nowrap; } .followup-send:disabled { opacity: .5; cursor: default; } .followup-voice { white-space: nowrap; } .followup-voice:disabled { opacity: .5; cursor: default; } .followup-status { margin-top: 8px; font-size: 17px; line-height: 1; color: #38b0ff; min-height: 17px; } .challenge-debug-card { background: var(--paper); border-radius: 20px; padding: 20px 22px; max-width: 760px; width: min(760px, 100%); box-shadow: var(--shadow); border-top: 8px solid #4e7ac7; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; gap: 12px; } .challenge-debug-summary { display: grid; grid-template-columns: minmax(120px, 0.32fr) 1fr; gap: 6px 12px; color: #4a3555; font-size: 14px; line-height: 1.3; } .challenge-debug-summary .label { font-weight: 800; color: #6e5878; } .challenge-debug-summary .value { min-width: 0; overflow-wrap: anywhere; } .challenge-debug-json { margin: 0; padding: 12px; border-radius: 12px; background: #21152a; color: #e9f6ff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; overflow: auto; white-space: pre-wrap; max-height: 46vh; } .challenge-debug-note { width: 100%; box-sizing: border-box; resize: vertical; min-height: 42px; border-radius: 12px; border: 2px solid #d8c7e0; padding: 8px 12px; font: inherit; font-size: 13px; color: #3a2747; background: #fff; } .challenge-debug-actions { display: flex; gap: 12px; align-items: center; } .challenge-debug-copy-status { color: var(--good); font-size: 13px; font-weight: 800; min-height: 18px; } /* report + copy grouped at the right; the first auto-margin eats the free space, the second collapses to 0 so the two buttons sit together. */ #challenge-debug-report { margin-left: auto; } #challenge-debug-copy { margin-left: auto; } /* ---------- NPC dialogue — centered pixel modal ---------- Shared channel for every NPC (guías mathkin y cualquier otro NPC). Same voxel idiom as #interact-prompt / .cubito-bubble: hard corners, black outline, inset bevel, hard drop shadow, pixel fonts. The name bar is tinted by the NPC's zone palette via --npc-accent (set in layer.js). Centered by .overlay — no more bottom anchor. Keyboard handled in layer.js. */ .dialogue-card { --npc-accent: var(--purple-light); width: min(560px, 92vw); padding: 0; color: #f3f7ff; background: rgba(20,22,36,0.95); border-radius: 0; border: 3px solid #000; box-shadow: inset 2px 2px 0 rgba(255,255,255,0.14), inset -2px -2px 0 rgba(0,0,0,0.55), 7px 7px 0 rgba(10,6,18,0.5); image-rendering: pixelated; animation: dialogue-pop .18s cubic-bezier(.2,1.3,.5,1); } @keyframes dialogue-pop { from { transform: translateY(10px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } } .dialogue-name { font-family: 'Press Start 2P', monospace; font-size: 13px; line-height: 1.3; color: #1b1430; background: var(--npc-accent); letter-spacing: .5px; padding: 12px 16px; border-bottom: 3px solid #000; text-shadow: 1px 1px 0 rgba(255,255,255,0.35); } .dialogue-text { font-family: var(--pixel-font, 'VT323', monospace); font-size: clamp(19px, 5vw, 26px); line-height: 1.18; min-height: 72px; padding: 18px 18px 8px; text-shadow: 1px 1px 0 rgba(0,0,0,0.6); overflow-wrap: anywhere; } .dialogue-foot { display: flex; gap: 12px; align-items: center; padding: 6px 16px 16px; } .dialogue-hint { font-family: var(--pixel-font, 'VT323', monospace); font-size: 18px; color: #9aa6c4; text-shadow: 1px 1px 0 rgba(0,0,0,0.6); } .dialogue-btn { margin-left: auto; cursor: pointer; image-rendering: pixelated; font-family: var(--pixel-font, 'VT323', monospace); font-size: 20px; letter-spacing: .5px; color: #fff; text-shadow: 1px 1px 0 #3f3f3f; background: linear-gradient(#828282, #6a6a6a 45%, #5a5a5a); border: 2px solid #000; border-radius: 0; padding: 8px 22px; box-shadow: inset 2px 2px 0 rgba(255,255,255,0.42), inset -2px -2px 0 rgba(0,0,0,0.45); } .dialogue-btn:active { transform: translateY(2px); } .dialogue-btn:focus { outline: 3px solid var(--npc-accent); outline-offset: 3px; } /* NPC / scroll world labels */ .world-label { position: fixed; transform: translate(-50%, -100%); background: rgba(42,23,51,0.9); color: #fff; padding: 3px 9px; border-radius: 0; border: 2px solid #000; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.18), inset -1px -1px 0 rgba(0,0,0,0.5); font-family: var(--pixel-font, 'VT323', monospace); font-size: 16px; line-height: 1.1; text-shadow: 1px 1px 0 rgba(0,0,0,0.6); pointer-events: none; z-index: 15; white-space: nowrap; } .world-label.scroll { background: rgba(128,76,35,0.92); } .world-label.done { background: rgba(46,158,91,0.9); } .world-label.portal { background: rgba(28,84,140,0.92); } /* pixel compass rose — voxel-styled objective tracker, top centre */ .mk-compass { position: fixed; top: 22px; left: 50%; margin-left: -85px; width: 170px; height: 170px; pointer-events: none; z-index: 19; image-rendering: pixelated; --mk-compass-scale: 0.75; transform: scale(var(--mk-compass-scale)); transform-origin: top center; } .mk-compass .dial { position: absolute; inset: 0; width: 100%; height: 100%; shape-rendering: crispEdges; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.5)); } /* fixed marker at the top = the direction you're facing. Lifted clear of the rose's outer ring so the gap reads as intentional and the arrow stays legible against the dial. */ .mk-compass .heading { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); line-height: 0; } .mk-compass .heading svg { display: block; width: 30px; height: 18px; shape-rendering: crispEdges; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.55)); } /* cardinal letters — bare brass-gold glyphs out in the periphery, no frame. A hard 1px black pixel outline keeps them legible over any terrain. */ .mk-compass .card { position: absolute; transform: translate(-50%, -50%); font-family: var(--logo-font, 'Press Start 2P', monospace); font-size: 11px; line-height: 1; color: #ffcf3f; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 1.5px 1.5px 0 rgba(0,0,0,0.65); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } /* objective beacons — bare pixel labels in the level's own colour, no pill. A hard 1px black outline keeps the coloured text legible over any terrain. */ .mk-compass .mk-beacon { position: absolute; /* counter-scale by 1/compass-scale so the place labels keep their original size even though the rose is shrunk (positions still ride the smaller ring) */ transform: translate(-50%, -50%) scale(calc(1 / var(--mk-compass-scale))); display: flex; align-items: center; justify-content: center; max-width: 124px; color: var(--c, #3a86d8); font-family: var(--pixel-font, 'VT323', monospace); font-size: 16px; line-height: 0.98; white-space: normal; text-align: center; letter-spacing: 0; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 1.5px 1.5px 0 rgba(0,0,0,0.65); image-rendering: pixelated; } /* locked-realm beacons: greyed, shrunk and pushed behind so the open path reads first. Still visible (a hint of what's coming) but never competing. */ .mk-compass .mk-beacon.locked { opacity: 0.45; filter: grayscale(0.85); z-index: 0; transform: translate(-50%, -50%) scale(calc(0.82 / var(--mk-compass-scale))); font-size: 14px; } /* recommended beacon: bigger + a pulsing gold glow marks the target now that there's no pill to wear the old gold ring. */ .mk-compass .mk-beacon.rec { transform: translate(-50%, -50%) scale(calc(1.2 / var(--mk-compass-scale))); z-index: 2; animation: mk-rec-pulse 1.3s ease-in-out infinite; } /* gold "go this way" arrow — JS sets left/top + rotation toward the next book */ .mk-compass .aim { position: absolute; left: 85px; top: 85px; z-index: 1; line-height: 0; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.55)); animation: mk-aim-pulse 1.3s ease-in-out infinite; } .mk-compass .aim svg { display: block; shape-rendering: crispEdges; image-rendering: pixelated; } @keyframes mk-rec-pulse { 0%, 100% { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 4px rgba(255,207,63,0.85); } 50% { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 9px rgba(255,226,122,1); } } @keyframes mk-aim-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mk-compass .mk-beacon.rec, .mk-compass .aim { animation: none; } } /* Destination objective — a dark voxel chip in the top-left HUD column, styled like the daily-mission badge (#mission-badge) rather than riding under the rose. JS sets the text ("🧭 Tierras de … · 118 m") + .active. */ .mk-objective { max-width: min(46vw, 360px); border-radius: 0; padding: 5px 12px; border: 2px solid #000; border-left: 5px solid #ffcf3f; background: rgba(18,20,34,0.86); color: #eaf0ff; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.22), inset -1px -1px 0 rgba(0,0,0,0.5); font-family: var(--pixel-font, 'VT323', monospace); font-size: 19px; line-height: 1.1; text-shadow: 1px 1px 0 rgba(0,0,0,0.7); image-rendering: pixelated; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* brighter accent when naming a tower you can head to right now */ .mk-objective.active { border-left-color: #ffe27a; color: #fff4cf; } @media (max-width: 560px) { .mk-compass { --mk-compass-scale: 0.62; } } @media (max-width: 560px) { .logo { font-size: 42px; } .challenge-debug-summary { grid-template-columns: 1fr; gap: 2px 0; } .challenge-debug-summary .label { margin-top: 6px; } } /* ---------- Interactive wildcard challenge types ---------- */ /* matching: two columns of pairable buttons */ .matching-area { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0; } .matching-col { display: flex; flex-direction: column; gap: 10px; } .match-left, .match-right { font-size: 20px; line-height: 1.08; padding: 10px 12px; border-radius: 0; border: 2px solid #000; background: linear-gradient(#5c6470, #444b55); color: #fff; cursor: pointer; font-family: var(--pixel-font, 'VT323', monospace); font-weight: 400; text-align: center; transition: none; text-shadow: 2px 2px 0 rgba(0,0,0,0.72); box-shadow: inset 2px 2px 0 rgba(255,255,255,0.28), inset -2px -2px 0 rgba(0,0,0,0.55); } .match-left:hover, .match-right:hover { border-color: #fff; background: linear-gradient(#7784be, #5a66a3); } .match-left.selected { background: linear-gradient(#2f80ed, #245bb0); border-color: #fff; box-shadow: 0 0 0 3px #f2c94c; } .match-right.paired, .match-left.paired { opacity: 0.45; cursor: default; } .match-left.correct, .match-right.correct { background: linear-gradient(#33b96d, #237845); color: #fff; border-color: #b9f5cf; } .match-left.wrong, .match-right.wrong { background: linear-gradient(#e25a50, #9d332d); color: #fff; border-color: #ffc7c3; } /* sequence fill: terms in a row */ .sequence-area { display: flex; flex-direction: column; gap: 16px; align-items: center; } .sequence-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; font-size: 24px; font-weight: 400; } .sequence-cell { min-width: 44px; padding: 9px 12px; border-radius: 0; background: #2c3440; border: 2px solid #000; color: #eaf0ff; text-align: center; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.16), inset -1px -1px 0 rgba(0,0,0,0.4); } .sequence-cell.gap { background: #4d3f1f; border-color: #ffce3d; color: #ffce3d; min-width: 64px; } .sequence-cell.correct { background: #237845; color: #eafff0; border-color: #b9f5cf; } .sequence-cell.wrong { background: #9d332d; color: #ffe3e0; border-color: #ffc7c3; } /* sorting: reorderable list */ .sorting-area { width: 100%; } .sorting-list { display: flex; flex-direction: column; gap: 8px; } .sorting-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 0; background: #2c3440; border: 2px solid #000; color: #eaf0ff; font-size: 20px; line-height: 1.08; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.16), inset -1px -1px 0 rgba(0,0,0,0.4); } .sorting-row.correct { background: #237845; border-color: #b9f5cf; color: #eafff0; } .sorting-row.wrong { background: #9d332d; border-color: #ffc7c3; color: #ffe3e0; } .sorting-controls { display: flex; gap: 6px; } .sorting-btn { width: 34px; height: 34px; border-radius: 0; border: 2px solid #000; background: linear-gradient(#828282, #5a5a5a); color: #fff; cursor: pointer; font-size: 16px; line-height: 1; text-shadow: 1px 1px 0 #3f3f3f; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.35), inset -1px -1px 0 rgba(0,0,0,0.5); } .sorting-btn:disabled { opacity: 0.35; cursor: default; } /* wildcard scroll world label accent */ .world-label.scroll.wildcard { background: rgba(45, 204, 186, 0.92); color: #0a1a2e; } /* ---------- World map screen (ArchipelagoMap successor) ---------- A paused overlay. Dark voxel chrome to read as a "map" and match the compass/HUD; zone names use the rounded font for legibility. */ #map-hud { pointer-events: none; position: fixed; z-index: 19; left: calc(12px + env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); /* Desktop: replaced by the #controls-hint legend (which carries the same map hint + a clickable icon). Re-shown on touch below, where the legend hides. */ display: none; align-items: center; gap: 8px; } #map-hud-btn { pointer-events: auto; cursor: pointer; flex: none; width: 42px; height: 38px; padding: 0; border-radius: 0; border: 2px solid #000; background: rgba(18,20,34,0.86); color: #f3f7ff; font-size: 20px; line-height: 1; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.22), inset -1px -1px 0 rgba(0,0,0,0.5); image-rendering: pixelated; } #map-hud-btn:hover { background: rgba(30,34,54,0.92); } #map-hud-btn:focus { outline: 3px solid #f2c94c; outline-offset: 2px; } #map-hud-label { pointer-events: none; user-select: none; white-space: nowrap; font-family: 'Baloo 2', system-ui, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; color: #eaf0ff; padding: 5px 8px; border: 2px solid #000; background: rgba(18,20,34,0.86); box-shadow: inset 1px 1px 0 rgba(255,255,255,0.18), inset -1px -1px 0 rgba(0,0,0,0.5); } /* Touch: the virtual joystick owns the bottom-left and there's no M key or controller, so drop the hint text and lift the icon clear of the stick. */ @media (pointer: coarse) { #map-hud { display: flex; bottom: calc(168px + env(safe-area-inset-bottom, 0px)); } #map-hud-label { display: none; } } /* ---------- Help legend ---------- Always-on legend in the bottom-left corner (replaces #map-hud on desktop): two voxel pills stacked vertically — map + controls — each pairing the keyboard key with its gamepad button. The pills are