/*
  CORE-PREVIEW-V1 -- HUD for THE CORE // PUBLIC PREVIEW (+ imagination engine).
  Monochrome, hairlines, opacity and spacing only. No cards, no shadows.
  HUD text is white in difference blend: near-black on the void, white when a
  black cube sits behind it. Always legible, still one ink.
*/
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #f2f2f0; }
body { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: #141414; -webkit-user-select: none; user-select: none; }
#cp-canvas { touch-action: none; }
[hidden] { display: none !important; }

.cp-ui { position: fixed; z-index: 10; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #141414; text-shadow: 0 0 2px #f2f2f0, 0 0 6px #f2f2f0; }
#cp-exit { top: calc(env(safe-area-inset-top, 0px) + 22px); left: calc(env(safe-area-inset-left, 0px) + 24px); color: rgba(20,20,20,.62); text-decoration: none; }
#cp-exit:hover, #cp-exit:focus-visible { color: #141414; }
#cp-mark { top: calc(env(safe-area-inset-top, 0px) + 22px); right: calc(env(safe-area-inset-right, 0px) + 24px); margin: 0; color: rgba(20,20,20,.48); font-size: 10px; letter-spacing: .16em; }
.cp-mark-short { display: none; }
@media (max-width: 640px) { .cp-mark-long { display: none; } .cp-mark-short { display: inline; } }
#cp-menu { top: calc(env(safe-area-inset-top, 0px) + 46px); right: calc(env(safe-area-inset-right, 0px) + 24px); font: inherit; font-size: 10px; letter-spacing: .18em; color: rgba(20,20,20,.62); background: transparent; border: 0; padding: 6px 0; cursor: pointer; }
#cp-menu:hover, #cp-menu:focus-visible { color: #141414; outline: none; }

#cp-hud { left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 112px); transform: translateX(-50%); text-align: center; pointer-events: none; width: min(92vw, 640px); }
#cp-hud p { margin: 0; }
#cp-title { font-size: 14px; letter-spacing: .22em; color: #141414; min-height: 18px; }
#cp-note { margin-top: 6px !important; font-size: 10px; color: rgba(20,20,20,.62); min-height: 14px; }
#cp-prompt { margin-top: 10px !important; color: rgba(20,20,20,.76); min-height: 14px; }
#cp-meter { margin: 8px auto 0; width: min(60vw, 260px); }
#cp-meter-label { display: block; font-size: 9px; letter-spacing: .18em; color: rgba(20,20,20,.55); margin-bottom: 5px; }
#cp-meter-bar { display: block; height: 1px; background: rgba(20,20,20,.28); position: relative; }
#cp-meter-bar b { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: #141414; transition: width .12s linear; }
#cp-whisper { left: 50%; top: 38%; transform: translateX(-50%); margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: none; color: rgba(20,20,20,.8); pointer-events: none; white-space: nowrap; }

#cp-controls { left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 44px); transform: translateX(-50%); display: flex; gap: 14px; }
#cp-controls button { font: inherit; letter-spacing: .18em; text-transform: uppercase; color: #141414; background: rgba(242,242,240,.72); border: 1px solid rgba(20,20,20,.55); padding: 11px 20px; cursor: pointer; border-radius: 0; }
#cp-controls button:hover, #cp-controls button:focus-visible { border-color: #141414; outline: none; }
html.cp-touch #cp-hud { bottom: calc(env(safe-area-inset-bottom, 0px) + 206px); }
#cp-controls.touch { left: auto; right: calc(env(safe-area-inset-right, 0px) + 22px); bottom: calc(env(safe-area-inset-bottom, 0px) + 30px); transform: none; flex-direction: column-reverse; align-items: flex-end; }
#cp-controls.touch button { padding: 16px 22px; min-width: 96px; }
#cp-controls.touch #cp-jump { border-radius: 50%; width: 72px; height: 72px; min-width: 0; padding: 0; }

#cp-stick { position: fixed; z-index: 10; width: 92px; height: 92px; margin: -46px 0 0 -46px; border: 1px solid rgba(20,20,20,.4); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .18s; }
#cp-stick.live { opacity: 1; }
#cp-stick-knob { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(20,20,20,.5); }

.cp-overlay { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(242,242,240,.94); text-align: center; padding: 24px; box-sizing: border-box; }
.cp-overlay p { margin: 0; }
.cp-eyebrow { font-size: 10px; letter-spacing: .2em; color: rgba(20,20,20,.5); text-transform: uppercase; }
.cp-h { font-size: clamp(22px, 5vw, 34px); letter-spacing: .14em; font-weight: 600; text-transform: uppercase; }
.cp-body { font-size: 12px; letter-spacing: .06em; color: rgba(20,20,20,.72); max-width: 420px; line-height: 1.7; }
.cp-hint { font-size: 10px; letter-spacing: .14em; color: rgba(20,20,20,.5); margin-top: 6px; white-space: pre; }
.cp-fine { font-size: 9px; letter-spacing: .2em; color: rgba(20,20,20,.38); margin-top: 18px !important; text-transform: uppercase; }
#cp-enter { margin-top: 18px; font: inherit; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #f2f2f0; background: #141414; border: 1px solid #141414; padding: 14px 30px; cursor: pointer; border-radius: 0; }
.cp-overlay a { font-size: 11px; letter-spacing: .14em; color: rgba(20,20,20,.58); text-decoration: none; text-transform: uppercase; }
.cp-list { display: flex; flex-direction: column; margin: 20px auto 0; width: min(78vw, 300px); border-top: 1px solid rgba(20,20,20,.22); }
.cp-list button, .cp-list a { display: block; padding: 15px 0; border: 0; border-bottom: 1px solid rgba(20,20,20,.22); background: transparent; font: inherit; font-size: 12px; letter-spacing: .2em; color: #141414; text-decoration: none; text-transform: uppercase; cursor: pointer; text-align: center; }
.cp-list button:hover, .cp-list button:focus-visible, .cp-list a:hover, .cp-list a:focus-visible { color: rgba(20,20,20,.55); outline: none; }

/* Creator mode: a side panel, never over gameplay HUD; plain fields, hairlines. */
.cp-overlay-side { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(92vw, 360px); overflow: auto; background: rgba(242,242,240,.97); border-left: 1px solid rgba(20,20,20,.22); padding: 18px 18px 40px; box-sizing: border-box; font-size: 10px; letter-spacing: .1em; color: #141414; }
.cp-overlay-side h2 { margin: 0 0 12px; font-size: 11px; letter-spacing: .24em; font-weight: 600; text-transform: uppercase; }
.cp-overlay-side h3 { margin: 18px 0 8px; font-size: 9px; letter-spacing: .2em; font-weight: 400; color: rgba(20,20,20,.55); text-transform: uppercase; border-bottom: 1px solid rgba(20,20,20,.18); padding-bottom: 6px; }
.cp-overlay-side .row { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.cp-overlay-side label { flex: 1 1 110px; text-transform: uppercase; }
.cp-overlay-side input, .cp-overlay-side select, .cp-overlay-side textarea, .cp-overlay-side button { font: inherit; font-size: 10px; letter-spacing: .1em; color: #141414; background: transparent; border: 1px solid rgba(20,20,20,.4); padding: 6px 8px; border-radius: 0; }
.cp-overlay-side input[type=range] { padding: 0; border: 0; flex: 1 1 120px; accent-color: #141414; }
.cp-overlay-side input[type=number], .cp-overlay-side input[type=text] { width: 110px; }
.cp-overlay-side select { max-width: 180px; }
.cp-overlay-side button { cursor: pointer; text-transform: uppercase; }
.cp-overlay-side button:hover, .cp-overlay-side button:focus-visible { border-color: #141414; outline: none; }
.cp-overlay-side textarea { width: 100%; height: 72px; box-sizing: border-box; resize: vertical; }
.cp-overlay-side pre { margin: 0; font: inherit; font-size: 9px; line-height: 1.6; white-space: pre-wrap; color: rgba(20,20,20,.75); max-height: 160px; overflow: auto; }
.cp-overlay-side .kv { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.cp-overlay-side .kv span:nth-child(odd) { color: rgba(20,20,20,.5); text-transform: uppercase; }
.cp-overlay-side .fav { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(20,20,20,.12); }
#cp-creator-close { position: absolute; top: 14px; right: 16px; border: 0 !important; }

#cp-diag { position: fixed; z-index: 15; left: calc(env(safe-area-inset-left, 0px) + 24px); top: calc(env(safe-area-inset-top, 0px) + 52px); margin: 0; font-size: 10px; line-height: 1.6; letter-spacing: .04em; color: rgba(20,20,20,.75); text-shadow: 0 0 2px #f2f2f0; pointer-events: none; white-space: pre; }
#cp-video { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: -10px; top: -10px; }

@media (prefers-reduced-motion: reduce) { #cp-stick { transition: none; } #cp-meter-bar b { transition: none; } }