:root { --bg: rgba(20, 10, 14, .78); --acc: #ff5a6a; --gold: #ffd36a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0d18; color: #fff; font: 15px/1.4 system-ui, "Segoe UI", sans-serif; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }
#top { position: fixed; left: 16px; top: 14px; background: var(--bg); border-radius: 10px; padding: 8px 14px; display: flex; gap: 12px; align-items: baseline; max-width: calc(100vw - 32px); }
#clock { font-size: 22px; color: var(--gold); font-variant-numeric: tabular-nums; }
#tasks { position: fixed; left: 16px; top: 62px; background: var(--bg); border-radius: 10px; padding: 8px 14px; font-size: 13px; min-width: 220px; }
.warn { color: #ff7a7a; }
#radio { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; width: min(560px, 90vw); }
#radio div { background: rgba(30, 60, 30, .85); border: 1px solid #5fbf6a; padding: 6px 12px; border-radius: 8px; animation: fade 9s forwards; }
#toasts { position: fixed; right: 16px; top: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; max-width: 40vw; }
#toasts div { background: var(--bg); padding: 7px 12px; border-radius: 8px; animation: fade 7s forwards; }
@keyframes fade { 0%, 85% { opacity: 1 } 100% { opacity: 0 } }
#chatlog { position: fixed; left: 16px; bottom: 90px; font-size: 14px; display: flex; flex-direction: column; gap: 2px; max-width: 40vw; }
#chatlog div { background: rgba(0,0,0,.45); padding: 3px 8px; border-radius: 6px; transition: opacity 2s; }
#chatlog div.old { opacity: 0; }
#chatin { position: fixed; left: 16px; bottom: 54px; width: min(420px, 80vw); padding: 8px 10px; border-radius: 8px; border: 1px solid #555; background: #111; color: #fff; font: inherit; }
#cross { position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 3px #000; }
#prompt { position: fixed; left: 50%; top: 56%; transform: translateX(-50%); background: var(--bg); padding: 6px 14px; border-radius: 8px; font-weight: 600; }
#prompt:empty { display: none; }
#bar { position: fixed; left: 50%; top: calc(56% + 40px); width: 200px; margin-left: -100px; height: 8px; background: rgba(0,0,0,.5); border-radius: 4px; display: none; }
#bar i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 4px; }
#help { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: 12px; opacity: .7; background: var(--bg); padding: 5px 10px; border-radius: 8px; white-space: nowrap; }
#clickme { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); background: var(--bg); padding: 12px 20px; border-radius: 10px; font-weight: 700; font-size: 18px; pointer-events: none; }

#lobby, #overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(8, 6, 14, .55); padding: 16px; overflow: auto; }
.card { background: rgba(26, 14, 20, .95); border: 1px solid #4a2430; border-radius: 16px; padding: 20px 22px; width: min(560px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.card.wide { width: min(760px, 100%); }
.card h1 { margin: 0; font: italic bold 44px Georgia, serif; color: var(--acc); }
.card h2 { margin: 0 0 8px; color: var(--gold); }
.sub { margin: 2px 0 6px; opacity: .85; }
.mut { opacity: .7; font-size: 13px; }
.tiny { font-size: 12px; opacity: .55; margin: 8px 0 0; }
.lbl { opacity: .7; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; }
.row, .orow, .idrow { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.orow > div:last-child { flex: 1; min-width: 200px; }
#preview { background: radial-gradient(#6b2a36, #1c0c12); border-radius: 12px; }
.opts { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.opts label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
#name { background: #0e0a0c; border: 1px solid #5a3440; color: #fff; padding: 8px 10px; border-radius: 8px; font: inherit; }
.sw { display: flex; gap: 6px; flex-wrap: wrap; }
.sw button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.sw button.on { border-color: #fff; box-shadow: 0 0 0 2px var(--gold); }
#roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 6px 0; }
.role { background: #2a1820; border: 1px solid #5a3440; color: #fff; border-radius: 12px; padding: 10px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; }
.role span { font-size: 26px; }
.role small { font-size: 11px; opacity: .7; min-height: 14px; }
.role.on { background: var(--acc); border-color: var(--acc); }
.role.locked { opacity: .45; cursor: default; }
.chk { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 6px 0; }
#play { margin-top: 10px; width: 100%; padding: 13px; border: 0; border-radius: 10px; background: var(--acc); color: #fff; font: 700 18px system-ui; cursor: pointer; }
#panelbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#panelbtns button, .drinks button, #pourbtn { background: #3a2230; color: #fff; border: 1px solid #6a3a4a; border-radius: 10px; padding: 9px 12px; cursor: pointer; font: inherit; }
#panelbtns button.go { background: #2f8f4a; border-color: #2f8f4a; }
#panelbtns button.red { background: #8f2f3a; border-color: #8f2f3a; }
.drinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin: 10px 0; }
.drinks button small { display: block; opacity: .65; font-size: 11px; }
#result { min-height: 22px; font-weight: 600; color: var(--gold); }
.idrow canvas { border-radius: 10px; display: block; max-width: 100%; }
.glass { position: relative; width: 70px; height: 120px; border: 3px solid #cfe6ef; border-top: 0; border-radius: 0 0 10px 10px; margin: 8px 0; overflow: hidden; }
.glass i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #e9b543; }
.glass .line { position: absolute; left: -4px; right: -4px; top: 10%; border-top: 2px dashed #ff5a6a; }
#pourbtn { user-select: none; }
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; margin: 8px 0; }
.notes div { background: #2a1820; border-radius: 8px; padding: 6px 10px; }
#cashn { background: #0e0a0c; border: 1px solid #5a3440; color: #fff; padding: 8px; border-radius: 8px; font: inherit; width: 160px; margin-left: 6px; }
.stars { font-size: 34px; color: var(--gold); }
.stars .off { color: rgba(255,255,255,.2); }
.promo { font-size: 17px; font-weight: 700; color: var(--gold); }
.log { max-height: 220px; overflow: auto; padding-left: 18px; font-size: 13px; }
.log .neg { color: #ff8a8a; } .log .pos { color: #9fe0a6; }
@media (max-width: 700px) { #help { display: none; } #tasks { top: 98px; } }
#editor { position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%); width: min(900px, 94vw); background: rgba(30, 24, 8, .9); border: 1px solid var(--gold); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
#editor div { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 2px; }
#editor span { background: rgba(255,255,255,.08); padding: 2px 8px; border-radius: 6px; }
.txt { background: #0e0a0c; border: 1px solid #5a3440; color: #fff; padding: 8px; border-radius: 8px; font: inherit; width: 100%; }

/* touch controls */
#touch { display: none; }
body.touch #touch { display: block; }
body.touch #help, body.touch #clickme { display: none !important; }
body.touch #c { touch-action: none; }
#joy { position: fixed; left: 30px; bottom: 40px; width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); pointer-events: none; opacity: .55; }
#joy.on { opacity: 1; }
#joy i { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.55); }
#tbtns { position: fixed; right: 14px; bottom: 24px; display: grid; grid-template-columns: repeat(3, 58px); gap: 10px; }
#tbtns button { width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); background: rgba(20,10,14,.6); color: #fff; font: 700 20px system-ui; touch-action: none; user-select: none; -webkit-user-select: none; }
#tbtns button.on, #tbtns button.lock { background: var(--acc); }
#tE { grid-column: 3; grid-row: 1 / span 2; height: 126px !important; border-radius: 30px !important; font-size: 26px !important; background: rgba(255,90,106,.55) !important; }
body.touch #tasks { font-size: 11px; min-width: 0; max-width: 46vw; padding: 6px 10px; }
body.touch #top { font-size: 12px; }
body.touch #chatlog { bottom: 180px; }
body.touch #prompt { top: 45%; }
body.touch #panel { max-height: 92vh; overflow: auto; }

/* map editor: top-down view */
#tEdit { position: fixed; right: 14px; top: 38%; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); background: rgba(20,10,14,.6); color: #fff; font-size: 20px; }
body.topview #top, body.topview #tasks, body.topview #cross, body.topview #prompt, body.topview #bar, body.topview #help,
body.topview #clickme, body.topview #chatlog, body.topview #touch { display: none !important; }
body.topview #c { touch-action: none; cursor: grab; }
#editor.side { left: 12px; top: 12px; bottom: 12px; transform: none; width: 310px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
#editor.side .ehead, #editor.side .ebtns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
#editor.side .ehead b { flex: 1 0 100%; font-size: 15px; }
#editor.side .esel { display: block; background: rgba(255,211,106,.12); border-radius: 8px; padding: 8px; margin: 0; }
#editor.side .esel .ebtns { margin-top: 6px; }
#editor.side button { background: #3a2230; color: #fff; border: 1px solid #6a3a4a; border-radius: 8px; padding: 6px 10px; cursor: pointer; font: inherit; }
#editor.side button.go { background: #2f8f4a; border-color: #2f8f4a; }
#editor.side button.red { background: #8f2f3a; border-color: #8f2f3a; }
#editor .pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; margin: 0; }
#editor .pal button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: 20px; }
#editor .pal small { font-size: 10.5px; opacity: .8; }
#editor.side p { margin: 0; }
@media (max-width: 700px) {
  #editor.side { top: auto; left: 6px; right: 6px; width: auto; max-height: 44vh; }
  #editor.side .keys { display: none; }
  #editor .pal { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}
#toasts, #radio, #chatlog { pointer-events: none; }

.seg { display: flex; gap: 6px; }
.seg button { background: #2a1820; border: 1px solid #5a3440; color: #fff; border-radius: 8px; padding: 4px 12px; cursor: pointer; font: inherit; font-size: 13px; }
.seg button.on { background: var(--acc); border-color: var(--acc); }
.flirt { background: rgba(255,90,200,.12); border-left: 3px solid #ff5ac8; padding: 6px 10px; border-radius: 6px; }
#alert { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); width: min(620px, 92vw); background: rgba(120, 20, 30, .92); border: 2px solid #ffd36a; border-radius: 14px; padding: 14px 18px; text-align: center; display: flex; flex-direction: column; gap: 4px; pointer-events: none; animation: pop .35s ease-out; z-index: 5; }
#alert.boss { background: rgba(40, 55, 25, .94); border-color: #c8e06a; }
#alert b { font-size: 21px; } #alert span { opacity: .9; }
@keyframes pop { from { transform: translateX(-50%) scale(.7); opacity: 0 } to { transform: translateX(-50%) scale(1); opacity: 1 } }
/* skins shop */
.shopbtn { display: block; width: 100%; margin: 10px 0 4px; padding: 10px; border: 0; border-radius: 12px; font: 700 16px system-ui; color: #1a1206; background: linear-gradient(90deg, #ffd76a, #ffb020); cursor: pointer; }
.cred { float: right; font-size: 16px; color: #ffd76a; }
.shoprow { display: flex; gap: 12px; align-items: flex-start; }
#shopprev { flex: 0 0 180px; }
.shopmain { flex: 1; min-width: 0; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button { border: 0; border-radius: 10px; padding: 6px 10px; background: rgba(255,255,255,.1); color: #fff; font: 600 14px system-ui; }
.tabs button.on { background: #ffb020; color: #1a1206; }
.skgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; }
.sk { border: 2px solid var(--rc); border-radius: 12px; padding: 8px; background: rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 3px; box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 35%, transparent); }
.sk.on { background: color-mix(in srgb, var(--rc) 25%, rgba(0,0,0,.3)); }
.sk .ic { font-size: 30px; }
.sk b { font-size: 13px; }
.sk small { font-size: 11px; }
.sk button { margin-top: auto; border: 0; border-radius: 8px; padding: 6px; font: 700 13px system-ui; background: #2e9e3a; color: #fff; }
.sk button.dim { background: #555; }
@media (max-width: 600px) { .shoprow { flex-direction: column; } #shopprev { align-self: center; } }
#overlay { z-index: 40; }
.sk.try { outline: 3px solid #fff; }
.sk .tryb { background: rgba(255,255,255,.14); }
.admrow { display: flex; gap: 6px; margin-top: 10px; }
.admrow input { flex: 1; min-width: 0; }
.admrow button { border: 0; border-radius: 8px; padding: 6px 14px; font: 700 14px system-ui; background: #ffb020; color: #1a1206; }

/* game buttons: clean translucent circles with line icons */
#tbtns { gap: 12px; grid-template-columns: repeat(3, 54px); align-items: center; right: 16px; bottom: 26px; }
#tbtns button, #tEdit, .gbtn { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.22) !important; background: rgba(12,12,18,.42) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; padding: 0; box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .08s, background .15s; }
#tbtns button:active, #tEdit:active, .gbtn:active { transform: scale(.92); background: rgba(255,255,255,.25) !important; }
#tbtns button.on, #tbtns button.lock { background: rgba(255,255,255,.92) !important; color: #111; }
#tE { width: 76px !important; height: 76px !important; border-radius: 50% !important; grid-row: 1 / span 2; background: rgba(255,255,255,.16) !important; border: 2px solid rgba(255,255,255,.55) !important; }
#tE b { font: 800 28px system-ui, sans-serif; letter-spacing: .5px; }
.gbtn.live { background: rgba(40,170,90,.75) !important; }
.gbtn.off { background: rgba(200,40,50,.75) !important; }
#joy { border: 1.5px solid rgba(255,255,255,.25); background: rgba(12,12,18,.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#joy i { background: rgba(255,255,255,.85); box-shadow: 0 2px 10px rgba(0,0,0,.4); }
#tbtns { grid-template-columns: 54px 54px 76px; }
.dragui { position: fixed; left: 50%; bottom: 200px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px;
  border-radius: 999px; background: rgba(12,12,18,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1.5px solid rgba(255,255,255,.2); color: #fff; font: 700 14px system-ui; white-space: nowrap; }
.dragui button { border: 0; border-radius: 999px; padding: 8px 14px; font: 800 14px system-ui; background: #e8323e; color: #fff; }
.pickrow { position: fixed; bottom: 230px; left: 50%; transform: translateX(-50%); z-index: 25; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 94vw; }
.pickrow button { font: 700 15px system-ui; padding: 10px 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.22); background: rgba(12,12,18,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; }
#tbtns { grid-template-columns: 58px 58px 80px; }
#tbtns button, #tEdit, .gbtn { width: 58px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
#tbtns button svg, #tEdit svg, .gbtn svg { width: 22px; height: 22px; }
#tbtns button span, #tEdit span, .gbtn span { font: 700 10px system-ui, sans-serif; letter-spacing: .2px; opacity: .92; line-height: 1; }
#tE { width: 80px !important; height: 80px !important; }
#tE span { font-size: 11px; }
.banui { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 21; padding: 8px 16px; border-radius: 999px; background: rgba(12,12,18,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1.5px solid rgba(255,90,90,.6); color: #fff; font: 700 14px system-ui; white-space: nowrap; pointer-events: none; }
.banui b { color: #ff8a8a; font-variant-numeric: tabular-nums; }
.authbox { margin: 10px 0; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.authbox input { display: block; width: 100%; margin: 6px 0; box-sizing: border-box; }
.aurow { display: flex; gap: 8px; margin-top: 6px; }
.aurow button { flex: 1; padding: 10px; border-radius: 10px; border: 0; font: 700 15px system-ui; background: rgba(255,255,255,.14); color: #fff; }
.aurow button.go { background: var(--acc); }
#play:disabled, #shopbtn:disabled { opacity: .45; }
.topbtn { background: linear-gradient(90deg, #8fb4ff, #5a7dff); color: #0b1430; }
.toplist { width: 100%; border-collapse: collapse; font: 15px system-ui; }
.toplist td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
#shopprev #preview { width: 220px; height: 269px; border-radius: 14px; }
@media (max-width: 600px) { #shopprev #preview { width: 260px; height: 318px; } }
#shopprev { flex: 0 0 220px; }
.prevtag { text-align: center; margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.prevtag b { font: 800 16px system-ui; color: #fff; }
.prevtag i { font: italic 700 13px system-ui; }
.meter { display: inline-block; width: 90px; height: 9px; border-radius: 5px; background: rgba(255,255,255,.15); vertical-align: middle; overflow: hidden; }
.meter i { display: block; height: 100%; }

.worlds { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.worlds button { flex: 1; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: #fff; font: 700 15px system-ui; cursor: pointer; }
.worlds button.on { background: var(--acc); border-color: transparent; }
.worlds button small { opacity: .75; font-weight: 600; margin-left: 4px; }
.worlds button:disabled { opacity: .4; }