/* Fonts self-hosted from Google Fonts (SIL OFL): Archivo Black, Arimo, Barlow Condensed, Cinzel Decorative, Oswald */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ArchivoBlack-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Arimo';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/Arimo.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/BarlowCondensed-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cinzel Decorative';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/CinzelDecorative-900.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url(/fonts/Oswald.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0d0a12;color:#f3ecff;font-family:Oswald,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
body{height:100vh;height:100dvh}
a{color:#ffb347}
#root{position:absolute;inset:0;display:flex;flex-direction:column;padding:clamp(8px,1.4vw,14px);gap:6px;background:radial-gradient(120% 80% at 50% 0%,#2a1340 0%,#0d0a12 60%)}
#hd{flex:none;display:flex;align-items:center;gap:8px;min-height:32px}
#hd .ttl{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
#hd b{font-size:clamp(15px,2.6vw,26px);font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#ff8a1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hd .sub{font-size:clamp(11px,1.5vw,15px);color:#c9b8e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{flex:none;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;border:1px solid #ff8a1f;color:#ffb347;text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap}
#openfull{display:none}
.embed #openfull,.isplayer #openfull{display:inline-flex}
#main{flex:1;min-height:0;display:flex;flex-direction:row;gap:10px;align-items:stretch;justify-content:center}
#stagewrap{flex:none;position:relative;align-self:center;width:0;height:0}
#cv{display:block;width:100%;height:100%;border-radius:10px;touch-action:none;cursor:grab;background:#000;box-shadow:0 6px 24px rgba(0,0,0,.5)}
#cv.drag{cursor:grabbing}
#draghint{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:10.5px;background:rgba(0,0,0,.65);color:#fff;padding:2px 8px;border-radius:999px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s}
.hasphoto #draghint{opacity:1}
.moved #draghint{opacity:0}
#ctl{flex:1;min-width:0;max-width:420px;display:flex;flex-direction:column;gap:5px;overflow-y:auto;overflow-x:hidden;padding:2px 2px 4px;-webkit-overflow-scrolling:touch}
.lab{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#d9c7f2;margin-top:2px}
.lab i{color:#ff8a1f;font-style:normal}.lab .opt{font-weight:500;text-transform:none;color:#a593bd}
.lab2{font-size:12px;font-weight:700;text-transform:uppercase;color:#d9c7f2}
.row{display:flex;align-items:center;gap:6px}
.at{font-size:16px;color:#a593bd;margin-right:-2px}
input[type=text],input:not([type]),#handle,#name,#tag{width:100%;min-width:0;height:34px;border-radius:8px;border:1px solid #4b3766;background:#1a1226;color:#fff;font:500 16px Oswald,system-ui,sans-serif;padding:0 10px;outline:none}
input:focus{border-color:#ff8a1f}
#handle{flex:1}
.btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 14px;border-radius:8px;border:1px solid transparent;font:700 14px Oswald,system-ui,sans-serif;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;color:#fff;background:#3a2852;white-space:nowrap;position:relative;overflow:hidden}
.btn.sm{padding:0 10px;font-size:13px}
.btn.ghost{background:transparent;border-color:#6b5290;color:#e6d6ff}
.btn.pri{background:#ff6a00;color:#120a00;flex:1}
.btn.x{background:#000;border-color:#555;flex:1}
.btn:disabled{opacity:.5;cursor:default}
.or{font-size:12px;color:#a593bd}
.or .btn{flex:1}
#file{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0;width:100%}
.zoomrow input[type=range]{flex:1;min-width:0;accent-color:#ff6a00;height:28px}
.acts{margin-top:4px}
.note{font-size:11px;line-height:1.3;color:#b8a7d1}
.note.sm{font-size:10.5px}
.note.err{color:#ff8f8f}
.note.warn{display:none;color:#ffcf8a}
.embed .note.warn{display:block}
#ft{flex:none;display:flex;align-items:center;gap:8px;min-height:28px}
#ft .src{flex:1;min-width:0;font-size:clamp(10.5px,1.3vw,13px);color:#a593bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#habibi-more{flex:none}
#toast{position:fixed;left:50%;bottom:44px;transform:translateX(-50%);background:#ff6a00;color:#120a00;font:700 13px Oswald,sans-serif;padding:6px 12px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:50;max-width:90%;text-align:center}
#toast.on{opacity:1}
#sheet{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:40;display:flex;align-items:center;justify-content:center;padding:10px}
#sheet[hidden]{display:none}
.sheetin{background:#1a1226;border-radius:12px;padding:10px;max-width:min(520px,100%);max-height:100%;display:flex;flex-direction:column;gap:6px}
.sheethd{display:flex;align-items:center;justify-content:space-between}
.sheethd button{width:34px;height:34px;border:0;background:#3a2852;color:#fff;font-size:20px;border-radius:8px;cursor:pointer}
#sheetimg{max-width:100%;max-height:calc(100dvh - 120px);object-fit:contain;border-radius:8px;min-height:0}
/* compact sub-tuning */
.compact #ctl{gap:4px}
.compact .lab{font-size:11px;margin-top:1px}
.short #pmsg,.short #xhint{display:none}
.tall #main{flex-direction:column;align-items:stretch}
.tall #stagewrap{align-self:center}
.tall #ctl{max-width:none}
.wide #ctl{gap:8px;max-width:400px;align-self:center;max-height:100%}
.wide #name,.wide #tag,.wide #handle{height:40px}
.wide .btn{min-height:40px}
@media (pointer:coarse),(hover:none){.btn{min-height:38px}#handle,#name,#tag{height:38px}}
.compact .acts .btn{padding:0 6px;font-size:13px;letter-spacing:0}

#contents{width:100%;min-width:0;height:52px;resize:vertical;border-radius:8px;border:1px solid #4b3766;background:#1a1226;color:#fff;font:500 14px/1.3 Oswald,system-ui,sans-serif;padding:5px 10px;outline:none;flex:none}
#contents:focus{border-color:#ff8a1f}
.short #contents{height:40px}
#ctl input::placeholder,#ctl textarea::placeholder{color:#6f6480;opacity:1;font-style:italic;font-weight:400}
#ctl input::-webkit-input-placeholder,#ctl textarea::-webkit-input-placeholder{color:#6f6480;opacity:1;font-style:italic}

.postbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;line-height:1.3;color:#ffe2b8;background:#2a1a10;border:1px solid #ff8a1f;border-radius:8px;padding:6px 8px}
.postbar[hidden]{display:none}
.postbar a{font-weight:700;color:#ffb347}
.postbar button{margin-left:auto;border:0;background:transparent;color:#ffb347;font-size:16px;cursor:pointer;padding:0 4px}
.sheetacts{display:flex;gap:6px}
.sheetacts .btn{flex:1;text-decoration:none}
#sheetfull{display:none}
.embed #sheetfull{display:inline-flex}