/* =====================================================================
   SHAMANZ — design system
   Technical poster language (hazard stripes, crosshairs, mono labels,
   big outlined numerals) + psychedelic accents and kaleidoscope motion.
   ===================================================================== */
@font-face{font-family:"Chakra";src:url(fonts/chakra-petch-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Chakra";src:url(fonts/chakra-petch-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Chakra";src:url(fonts/chakra-petch-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"SMono";src:url(fonts/space-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"SMono";src:url(fonts/space-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Synco";src:url(fonts/syncopate-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --acid:#C6FF00; --mag:#FF2DA0; --uv:#7A3CFF; --cyan:#00F0FF; --haz:#E8322B; --orange:#FF5A1F; --yel:#FFC400;
  --bg:#0B0B0D; --bg2:#101013; --panel:#141417; --panel2:#1B1B20; --line:#2A2A31; --line2:#3a3a44;
  --text:#ECECE4; --muted:#8C8C86; --dim:#5d5d63; --ink:#0B0B0D;
  --accent:var(--acid);
  --r:4px; --r2:10px;
  --f:"Chakra",system-ui,sans-serif; --mono:"SMono",ui-monospace,monospace; --wide:"Synco","Chakra",sans-serif;
  --shadow:0 20px 60px -20px rgba(0,0,0,.7);
  --hz:repeating-linear-gradient(135deg,var(--haz) 0 8px,transparent 8px 16px);
  --grid:linear-gradient(var(--line) 1px,transparent 1px) 0 0/48px 48px, linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/48px 48px;
  --player-h:0px; --nav-w:248px;
  color-scheme:dark;
}
:root[data-theme="day"]{
  --bg:#D8D8D2; --bg2:#E2E2DC; --panel:#EDEDE8; --panel2:#F5F5F1; --line:#c2c2ba; --line2:#a9a9a1;
  --text:#121214; --muted:#55554f; --dim:#8a8a83; --ink:#121214; --acid:#5E8A00; --cyan:#007f88;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f);background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;touch-action:manipulation}
::selection{background:var(--mag);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter;vertical-align:middle}
.ico.sm{width:16px;height:16px}.ico.lg{width:28px;height:28px}.ico.xl{width:44px;height:44px}
.ico.fill{fill:currentColor;stroke:none}

/* ---------- type ---------- */
.mono{font-family:var(--mono);letter-spacing:.04em}
.label{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.wide{font-family:var(--wide);letter-spacing:.04em;text-transform:uppercase}
h1,h2,h3{font-weight:700;line-height:1.05;letter-spacing:-.01em}
.outline-num{font-family:var(--wide);font-size:clamp(64px,10vw,140px);line-height:.8;color:transparent;-webkit-text-stroke:2px currentColor}
.acid{color:var(--acid)}.mag{color:var(--mag)}.haz{color:var(--haz)}.uvc{color:var(--uv)}.cyan{color:var(--cyan)}.muted{color:var(--muted)}

/* ---------- decorative primitives ---------- */
.hazard{background:var(--hz)}
.hazard-strip{height:10px;background:var(--hz);opacity:.9}
.grid-bg{background:var(--grid)}
.crosshair{position:relative}
.crosshair::before,.crosshair::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;border-color:var(--muted);border-style:solid;opacity:.7}
.crosshair::before{top:-1px;left:-1px;border-width:1.5px 0 0 1.5px}
.crosshair::after{bottom:-1px;right:-1px;border-width:0 1.5px 1.5px 0}
.xmark{display:inline-block;width:18px;height:18px;position:relative}
.xmark::before,.xmark::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:var(--haz);transform:rotate(45deg)}
.xmark::after{transform:rotate(-45deg)}
.plus-field{background-image:radial-gradient(circle,transparent 0 0),linear-gradient(transparent 0 0);position:relative}
.ticks{display:flex;gap:4px}.ticks i{width:6px;height:6px;background:var(--text);opacity:.85}.ticks i:nth-child(2n){background:transparent;outline:1.5px solid var(--text);outline-offset:-1.5px}
.barcode{height:28px;background:repeating-linear-gradient(90deg,var(--text) 0 2px,transparent 2px 4px,var(--text) 4px 5px,transparent 5px 9px,var(--text) 9px 12px,transparent 12px 14px);opacity:.8}
.coord{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--muted);writing-mode:vertical-rl}
.psy-border{position:relative;isolation:isolate}
.psy-border::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--ang,0deg),var(--acid),var(--cyan),var(--uv),var(--mag),var(--orange),var(--acid));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin-ang 6s linear infinite}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spin-ang{to{--ang:360deg}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.35}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes glitch{0%,100%{transform:none}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,-1px)}}
.hue-cycle{animation:hue 14s linear infinite}

/* ---------- mandala canvases ---------- */
.mandala{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mandala-fixed{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:.22;mix-blend-mode:screen}
:root[data-theme="day"] .mandala-fixed{mix-blend-mode:multiply;opacity:.12}

/* ---------- buttons & inputs ---------- */
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;border-radius:var(--r);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border:1.5px solid var(--line2);background:var(--panel2);transition:transform .12s,background .2s,border-color .2s,color .2s;position:relative;white-space:nowrap;user-select:none}
.btn:hover{border-color:var(--text)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.primary{background:var(--accent);color:#0B0B0D;border-color:var(--accent)}
.btn.primary:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent),0 0 30px -4px var(--accent)}
.btn.mag{background:var(--mag);border-color:var(--mag);color:#fff}
.btn.danger{border-color:var(--haz);color:var(--haz)}
.btn.danger:hover{background:var(--haz);color:#fff}
.btn.ghost{background:transparent;border-color:transparent}.btn.ghost:hover{border-color:var(--line2)}
.btn.sm{height:34px;padding:0 12px;font-size:10.5px;gap:7px}
.btn.xs{height:28px;padding:0 10px;font-size:10px;gap:6px}
.btn.big{height:58px;padding:0 34px;font-size:13px}
.btn.icon{width:40px;padding:0}.btn.icon.sm{width:34px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn .ico{width:17px;height:17px}
.btn.loading{color:transparent!important}
.btn.loading::after{content:"";position:absolute;width:18px;height:18px;border:2px solid currentColor;border-color:var(--text) transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn.primary.loading::after{border-color:#0B0B0D transparent}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>label{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.input,textarea.input,select.input{width:100%;min-height:46px;padding:11px 14px;background:var(--bg2);border:1.5px solid var(--line);border-radius:var(--r);transition:border-color .2s,box-shadow .2s;font-size:15px}
textarea.input{resize:vertical;min-height:96px;line-height:1.5}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.input.err{border-color:var(--haz)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);cursor:pointer;line-height:1.4}
.check input{appearance:none;width:20px;height:20px;flex:none;border:1.5px solid var(--line2);border-radius:3px;display:grid;place-items:center;margin-top:1px;background:var(--bg2);cursor:pointer}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:"";width:9px;height:5px;border:2px solid #0B0B0D;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.check a{color:var(--text)}
.switch{position:relative;width:46px;height:26px;flex:none}
.switch input{appearance:none;position:absolute;inset:0;border:1.5px solid var(--line2);border-radius:20px;background:var(--bg2);cursor:pointer;transition:.2s}
.switch input::after{content:"";position:absolute;width:16px;height:16px;left:4px;top:3.5px;background:var(--muted);border-radius:50%;transition:.25s cubic-bezier(.6,-0.4,.3,1.4)}
.switch input:checked{background:var(--accent);border-color:var(--accent)}
.switch input:checked::after{left:22px;background:#0B0B0D}
.chip{text-decoration:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border:1.5px solid var(--line2);border-radius:30px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.15s;user-select:none;white-space:nowrap}
.chip:hover{border-color:var(--text)}
.chip.on{background:var(--accent);color:#0B0B0D;border-color:var(--accent)}
.chip .ico{width:14px;height:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:3px 7px;border:1px solid currentColor;border-radius:2px}
.badge-dot{position:absolute;top:4px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:10px;background:var(--mag);color:#fff;font:700 10px/17px var(--mono);text-align:center}

/* ---------- panels & cards ---------- */
.panel{background:var(--panel);border:1.5px solid var(--line);border-radius:var(--r2);position:relative}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1.5px solid var(--line)}
.panel-b{padding:16px}
.card{background:var(--panel);border:1.5px solid var(--line);border-radius:var(--r2);overflow:hidden;position:relative;animation:rise .45s both}
.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;background:var(--panel2);border:1.5px solid var(--line2);position:relative;display:grid;place-items:center;place-content:center;overflow:hidden;font-family:var(--wide);font-size:13px}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.sm{width:32px;height:32px;font-size:10px}.avatar.xs{width:24px;height:24px;font-size:8px}.avatar.lg{width:64px;height:64px;font-size:18px}.avatar.xl{width:128px;height:128px;font-size:34px;border-width:3px}
.av-wrap{position:relative;flex:none;display:inline-block;align-self:flex-start;line-height:0}
.av-wrap .online{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--acid);border:2px solid var(--panel)}
.lvl{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:2px 6px;border-radius:2px;background:var(--panel2);border:1px solid var(--line2);color:var(--muted)}
.role-admin{color:var(--haz);border-color:var(--haz)} .role-mod{color:var(--cyan);border-color:var(--cyan)}

/* ---------- toast / modal ---------- */
#toasts{position:fixed;z-index:9000;left:50%;top:16px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;width:min(420px,calc(100vw - 24px));pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:12px;align-items:center;padding:12px 14px;background:var(--panel2);border:1.5px solid var(--line2);border-left:4px solid var(--accent);border-radius:var(--r);box-shadow:var(--shadow);animation:rise .3s both;font-size:14px}
.toast.err{border-left-color:var(--haz)} .toast.xp{border-left-color:var(--mag)}
.toast .ico{color:var(--accent)} .toast.err .ico{color:var(--haz)} .toast.xp .ico{color:var(--mag)}
.toast b{font-family:var(--mono);font-size:12px;letter-spacing:.1em}
.modal-bg{position:fixed;inset:0;z-index:8000;background:rgba(5,5,8,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px;animation:rise .2s both}
.modal{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--panel);border:1.5px solid var(--line2);border-radius:var(--r2);box-shadow:var(--shadow);position:relative}
.modal.wide{width:min(860px,100%)}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1.5px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.modal-h h3{font-family:var(--wide);font-size:14px;letter-spacing:.08em}
.modal-b{padding:18px}
.modal-f{display:flex;gap:10px;justify-content:flex-end;padding:14px 18px;border-top:1.5px solid var(--line)}

/* ---------- level up overlay ---------- */
.levelup{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;background:rgba(0,0,0,.82);animation:rise .3s both;cursor:pointer}
.levelup .inner{text-align:center;position:relative;width:min(520px,92vw);aspect-ratio:1;display:grid;place-items:center}
.levelup canvas{position:absolute;inset:0;width:100%;height:100%}
.levelup .txt{position:relative;z-index:2}
.levelup .txt .outline-num{color:var(--acid);-webkit-text-stroke-color:var(--acid)}

/* ---------- cookie / consent ---------- */
.consent{position:fixed;z-index:8500;left:16px;right:16px;bottom:16px;max-width:560px;margin-left:auto;background:var(--panel);border:1.5px solid var(--line2);border-radius:var(--r2);box-shadow:var(--shadow);overflow:hidden;animation:rise .4s both}
.consent .in{padding:16px 18px}
.consent p{font-size:13.5px;color:var(--muted);margin:8px 0 14px}
.consent .row{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- player bar ---------- */
.player{position:fixed;z-index:700;left:0;right:0;bottom:0;height:76px;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(14px);border-top:1.5px solid var(--line);display:none;align-items:center;gap:14px;padding:0 16px}
.player.on{display:flex}
.player .cover{width:54px;height:54px;border-radius:50%;position:relative;flex:none;overflow:hidden;border:1.5px solid var(--line2)}
.player .cover img{width:100%;height:100%;object-fit:cover;animation:spin 8s linear infinite;animation-play-state:paused}
.player.playing .cover img{animation-play-state:running}
.player .cover::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line2)}
.player .meta{min-width:0;flex:1}
.player .meta .t{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.player .meta .a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .prog{position:absolute;left:0;right:0;top:-2px;height:3px;background:var(--line);cursor:pointer}
.player .prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acid),var(--cyan),var(--mag));box-shadow:0 0 12px var(--mag)}
.player .ctrls{display:flex;align-items:center;gap:4px}
.player .pp{width:46px;height:46px;border-radius:50%;background:var(--accent);color:#0B0B0D;display:grid;place-items:center}
.player .viz{width:120px;height:46px;flex:none}
.player .src{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;text-decoration:none}
.player .src:hover{color:var(--text)}
.player-open-btn{position:fixed;z-index:690;right:18px;bottom:18px;width:64px;height:64px;border-radius:50%;background:var(--panel2);border:1.5px solid var(--line2);display:grid;place-items:center;box-shadow:var(--shadow)}
.player-open-btn canvas{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);border-radius:50%}
.player-open-btn .ico{position:relative;z-index:2;color:var(--accent);width:26px;height:26px}
.player-open-btn:hover{transform:scale(1.06)}
body.has-player{--player-h:76px}
body.has-player .player-open-btn{display:none}

/* ---------- empty / loaders ---------- */
.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty .ico{width:54px;height:54px;color:var(--line2);margin:0 auto 12px}
.empty h4{font-family:var(--wide);font-size:13px;color:var(--text);margin-bottom:6px;letter-spacing:.06em}
.loader{display:flex;justify-content:center;padding:30px}
.loader i{width:34px;height:34px;border:2px solid var(--line2);border-top-color:var(--acid);border-right-color:var(--mag);border-radius:50%;animation:spin .8s linear infinite}
.skel{background:linear-gradient(90deg,var(--panel2),var(--line),var(--panel2));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:4px}
@keyframes sk{to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
@media (max-width:640px){
  .player{height:66px;gap:10px;padding:0 10px}.player .viz,.player .hide-m{display:none}
  body.has-player{--player-h:66px}
  .player .cover{width:44px;height:44px}
  .btn.big{height:52px;padding:0 22px}
}
.share-url{display:flex;gap:8px;margin-bottom:12px}
.share-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.share-card{margin:0 auto}

/* ---------- forms & modals: mobile ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.form-grid>*,.field{min-width:0}
.input{min-width:0;max-width:100%}
input[type=datetime-local].input,input[type=date].input{-webkit-appearance:none;appearance:none;min-height:46px}
@media (max-width:860px){
  .player-open-btn{display:none}
  .input,textarea.input,select.input{font-size:16px} /* prevents iOS zoom-on-focus */
}
@media (max-width:640px){
  .modal-bg{align-items:flex-end;padding:0}
  .modal,.modal.wide{width:100%;max-height:calc(100svh - 24px);border-radius:16px 16px 0 0;border-bottom:0;animation:sheet .28s cubic-bezier(.2,.8,.2,1) both}
  .modal-f{position:sticky;bottom:0;background:var(--panel);z-index:2;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .modal-f .btn{flex:1}
  .modal-b{padding:16px}
  .form-grid{grid-template-columns:1fr}
  #toasts{top:auto;bottom:calc(84px + var(--player-h));transform:translateX(-50%)}
  .share-grid{grid-template-columns:1fr 1fr}
  .share-url .input{font-size:13px}
}
@keyframes sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}