:root{
  --cur-default:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cdefs%3E%3Cfilter%20id='g'%20x='-40%25'%20y='-40%25'%20width='180%25'%20height='180%25'%3E%3CfeGaussianBlur%20stdDeviation='1.3'/%3E%3C/filter%3E%3ClinearGradient%20id='f'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23ff5fd8'/%3E%3Cstop%20offset='1'%20stop-color='%237a5cff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M4%203%20L4%2024.5%20L9.4%2019.4%20L13.6%2028.4%20L18.2%2026.3%20L14%2017.4%20L21.8%2017.4%20Z'%20fill='none'%20stroke='%2335e0ff'%20stroke-width='3'%20stroke-linejoin='round'%20filter='url(%23g)'%20opacity='.9'/%3E%3Cpath%20d='M4%203%20L4%2024.5%20L9.4%2019.4%20L13.6%2028.4%20L18.2%2026.3%20L14%2017.4%20L21.8%2017.4%20Z'%20fill='%23120a1f'%20stroke='%23120a1f'%20stroke-width='4.4'%20stroke-linejoin='round'/%3E%3Cpath%20d='M4%203%20L4%2024.5%20L9.4%2019.4%20L13.6%2028.4%20L18.2%2026.3%20L14%2017.4%20L21.8%2017.4%20Z'%20fill='url(%23f)'%20stroke='%2335e0ff'%20stroke-width='1.5'%20stroke-linejoin='round'/%3E%3Cpath%20d='M6.6%208.5%20L6.6%2017.2'%20stroke='%23fff'%20stroke-opacity='.65'%20stroke-width='1.3'%20stroke-linecap='round'/%3E%3Cpath%20d='M26%204%20l1%202.6%20l2.6%201%20l-2.6%201%20l-1%202.6%20l-1%20-2.6%20l-2.6%20-1%20l2.6%20-1%20z'%20fill='%23ffd34d'%20stroke='%23120a1f'%20stroke-width='.8'%20stroke-linejoin='round'/%3E%3C/svg%3E") 4 3,default;
  --cur-pointer:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cdefs%3E%3Cfilter%20id='g'%20x='-40%25'%20y='-40%25'%20width='180%25'%20height='180%25'%3E%3CfeGaussianBlur%20stdDeviation='1.3'/%3E%3C/filter%3E%3ClinearGradient%20id='f'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23ff5fd8'/%3E%3Cstop%20offset='1'%20stop-color='%237a5cff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M10.5%204%20C10.5%202.6%2011.5%201.7%2012.6%201.7%20C13.7%201.7%2014.7%202.6%2014.7%204%20L14.7%2012%20C15.1%2011.2%2016.4%2011.1%2017.1%2011.8%20C17.5%2011.2%2018.8%2011.2%2019.5%2011.9%20C20%2011.5%2021.2%2011.6%2021.8%2012.4%20L22.2%2013.2%20L22.2%2020%20C22.2%2024.6%2019.6%2028%2016%2028%20L13.6%2028%20C11.5%2028%2010.3%2027%209.2%2025.4%20L5.2%2019%20C4.6%2018%205%2016.9%205.9%2016.6%20C6.8%2016.3%207.6%2016.6%208.1%2017.2%20L10.5%2020.2%20Z'%20fill='none'%20stroke='%2335e0ff'%20stroke-width='3'%20stroke-linejoin='round'%20filter='url(%23g)'%20opacity='.9'/%3E%3Cpath%20d='M10.5%204%20C10.5%202.6%2011.5%201.7%2012.6%201.7%20C13.7%201.7%2014.7%202.6%2014.7%204%20L14.7%2012%20C15.1%2011.2%2016.4%2011.1%2017.1%2011.8%20C17.5%2011.2%2018.8%2011.2%2019.5%2011.9%20C20%2011.5%2021.2%2011.6%2021.8%2012.4%20L22.2%2013.2%20L22.2%2020%20C22.2%2024.6%2019.6%2028%2016%2028%20L13.6%2028%20C11.5%2028%2010.3%2027%209.2%2025.4%20L5.2%2019%20C4.6%2018%205%2016.9%205.9%2016.6%20C6.8%2016.3%207.6%2016.6%208.1%2017.2%20L10.5%2020.2%20Z'%20fill='%23120a1f'%20stroke='%23120a1f'%20stroke-width='4.4'%20stroke-linejoin='round'/%3E%3Cpath%20d='M10.5%204%20C10.5%202.6%2011.5%201.7%2012.6%201.7%20C13.7%201.7%2014.7%202.6%2014.7%204%20L14.7%2012%20C15.1%2011.2%2016.4%2011.1%2017.1%2011.8%20C17.5%2011.2%2018.8%2011.2%2019.5%2011.9%20C20%2011.5%2021.2%2011.6%2021.8%2012.4%20L22.2%2013.2%20L22.2%2020%20C22.2%2024.6%2019.6%2028%2016%2028%20L13.6%2028%20C11.5%2028%2010.3%2027%209.2%2025.4%20L5.2%2019%20C4.6%2018%205%2016.9%205.9%2016.6%20C6.8%2016.3%207.6%2016.6%208.1%2017.2%20L10.5%2020.2%20Z'%20fill='url(%23f)'%20stroke='%2335e0ff'%20stroke-width='1.5'%20stroke-linejoin='round'/%3E%3Cpath%20d='M17.1%2015%20V19.5%20M19.6%2015%20V19.5'%20stroke='%2335e0ff'%20stroke-opacity='.75'%20stroke-width='1'%20stroke-linecap='round'/%3E%3Cpath%20d='M12.6%204.2%20V10'%20stroke='%23fff'%20stroke-opacity='.6'%20stroke-width='1.2'%20stroke-linecap='round'/%3E%3Cpath%20d='M26%203%20l.9%202.3%20l2.3%20.9%20l-2.3%20.9%20l-.9%202.3%20l-.9%20-2.3%20l-2.3%20-.9%20l2.3%20-.9%20z'%20fill='%23ffd34d'%20stroke='%23120a1f'%20stroke-width='.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 13 2,pointer;
  --cur-kick:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cdefs%3E%3Cfilter%20id='g'%20x='-40%25'%20y='-40%25'%20width='180%25'%20height='180%25'%3E%3CfeGaussianBlur%20stdDeviation='1.3'/%3E%3C/filter%3E%3ClinearGradient%20id='r'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23ff7a93'/%3E%3Cstop%20offset='1'%20stop-color='%23c2185b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M16%203%20L27%207.2%20V15%20C27%2021.6%2022.4%2026.4%2016%2029%20C9.6%2026.4%205%2021.6%205%2015%20V7.2%20Z'%20fill='none'%20stroke='%23ff5b7a'%20stroke-width='3'%20stroke-linejoin='round'%20filter='url(%23g)'%20opacity='.9'/%3E%3Cpath%20d='M16%203%20L27%207.2%20V15%20C27%2021.6%2022.4%2026.4%2016%2029%20C9.6%2026.4%205%2021.6%205%2015%20V7.2%20Z'%20fill='%23120a1f'%20stroke='%23120a1f'%20stroke-width='4.4'%20stroke-linejoin='round'/%3E%3Cpath%20d='M16%203%20L27%207.2%20V15%20C27%2021.6%2022.4%2026.4%2016%2029%20C9.6%2026.4%205%2021.6%205%2015%20V7.2%20Z'%20fill='url(%23r)'%20stroke='%23fff'%20stroke-width='1.5'%20stroke-linejoin='round'/%3E%3Crect%20x='14.8'%20y='8.6'%20width='2.4'%20height='9.6'%20rx='1.2'%20fill='%23fff'/%3E%3Ccircle%20cx='16'%20cy='22'%20r='1.7'%20fill='%23fff'/%3E%3C/svg%3E") 16 16,pointer;
  --cur-no:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cdefs%3E%3Cfilter%20id='g'%20x='-40%25'%20y='-40%25'%20width='180%25'%20height='180%25'%3E%3CfeGaussianBlur%20stdDeviation='1.3'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle%20cx='16'%20cy='16'%20r='10'%20fill='none'%20stroke='%23ff5b7a'%20stroke-width='5'%20filter='url(%23g)'%20opacity='.8'/%3E%3Ccircle%20cx='16'%20cy='16'%20r='10'%20fill='none'%20stroke='%23120a1f'%20stroke-width='6'/%3E%3Cpath%20d='M9%2023%20L23%209'%20stroke='%23120a1f'%20stroke-width='6'%20stroke-linecap='round'/%3E%3Ccircle%20cx='16'%20cy='16'%20r='10'%20fill='none'%20stroke='%23ff5b7a'%20stroke-width='3'/%3E%3Cpath%20d='M9%2023%20L23%209'%20stroke='%23ff5b7a'%20stroke-width='3'%20stroke-linecap='round'/%3E%3C/svg%3E") 16 16,not-allowed;
}
:root{
  --bg:#120a1f;--bg2:#1c1030;--panel:#241540;--panel2:#2d1a50;--line:#4a2d78;
  --text:#f4eaff;--muted:#b9a5d9;--pink:#ff3cc8;--violet:#7a5cff;--cyan:#35e0ff;--gold:#ffd34d;--green:#6dff9a;--red:#ff5b7a;
  --radius:14px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* neon mouse cursors (arrow, hand, shield for troublemakers, not-allowed) */
html,body,canvas{cursor:var(--cur-default)}
a[href],button,select,summary,label[for],input[type=checkbox],input[type=radio],input[type=range],input[type=file]{cursor:var(--cur-pointer)}
button:disabled,select:disabled,input:disabled{cursor:var(--cur-no)}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;overflow:hidden}
button,input,select{font:inherit;color:inherit}
a{color:var(--cyan)}
.hidden{display:none!important}
#app{height:100dvh;display:flex;flex-direction:column}
.center-screen{flex:1;display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto;background:radial-gradient(circle at 50% -10%,#47186e,#120a1f 62%)}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--pink);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.card{width:100%;max-width:430px;background:rgba(36,21,64,.94);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 0 50px rgba(255,60,200,.18)}
.card h1{margin:0 0 4px;font-size:26px;letter-spacing:.5px}
.brand{background:linear-gradient(90deg,var(--pink),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.sub{color:var(--muted);margin:0 0 18px;line-height:1.45}
.tabs{display:flex;gap:6px;margin:0 0 16px;background:var(--bg);padding:4px;border-radius:12px}
.tabs button{flex:1;border:0;background:transparent;padding:9px;border-radius:9px;cursor:var(--cur-pointer);color:var(--muted);font-weight:600}
.tabs button.on{background:var(--panel2);color:var(--text)}
label{display:block;font-size:13px;color:var(--muted);margin:12px 0 5px}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],select{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);outline:none}
input:focus,select:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,60,200,.18)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:11px;border:1px solid var(--line);background:var(--panel2);cursor:var(--cur-pointer);font-weight:600;transition:transform .08s,filter .15s}
.btn:hover{filter:brightness(1.15)}.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:var(--cur-no);filter:none}
.btn.primary{background:linear-gradient(90deg,var(--pink),var(--violet));border-color:transparent;color:#fff}
.btn.danger{background:#5a1630;border-color:#8a2450}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:9px}
.btn.block{width:100%;margin-top:16px}
.msg{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:14px;line-height:1.4}
.msg.err{background:rgba(255,91,122,.14);border:1px solid rgba(255,91,122,.5);color:#ffc2cd}
.msg.ok{background:rgba(109,255,154,.12);border:1px solid rgba(109,255,154,.45);color:#c7ffd9}
.msg.info{background:rgba(53,224,255,.1);border:1px solid rgba(53,224,255,.4);color:#c9f6ff}
.link{background:none;border:0;color:var(--cyan);cursor:var(--cur-pointer);padding:0;text-decoration:underline;font-size:13px}
.row{display:flex;gap:10px;align-items:center}.row>*{flex:1}.row.nofill>*{flex:none}
.spacer{flex:1}

/* ---- Spiel ---- */
#game{display:flex;flex-direction:column;height:100dvh}
.topbar{display:flex;align-items:center;gap:10px;padding:8px 12px;padding-top:calc(8px + var(--safe-t));background:linear-gradient(180deg,#2a1650,#1a0e30);border-bottom:1px solid var(--line);z-index:5}
.logo{font-weight:800;font-size:18px;white-space:nowrap}
.lvl{display:flex;align-items:center;gap:8px;min-width:0;flex:1;max-width:260px}
.lvl .badge{flex:none;background:linear-gradient(135deg,var(--gold),#ff9d3c);color:#2a1500;font-weight:800;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(255,211,77,.5)}
.xpbar{flex:1;height:10px;border-radius:6px;background:var(--bg);overflow:hidden;border:1px solid var(--line)}
.xpbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet));width:0;transition:width .4s}
.chip{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-weight:700;white-space:nowrap}
.iconbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--bg);cursor:var(--cur-pointer);font-size:17px;display:flex;align-items:center;justify-content:center}
.iconbtn:hover{border-color:var(--pink)}
.stage{position:relative;flex:1;min-height:0;background:#0b0614}
#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
.hud{position:absolute;z-index:3}
.cashcard{left:10px;top:10px;width:210px;background:rgba(24,12,44,.88);border:1px solid var(--line);border-radius:14px;padding:10px 12px;backdrop-filter:blur(4px)}
.cashcard .big{font-size:20px;font-weight:800;color:var(--gold)}
.cashcard small{color:var(--muted)}
.bar{height:8px;border-radius:5px;background:var(--bg);overflow:hidden;margin:6px 0 8px;border:1px solid var(--line)}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#ff9d3c);width:0}
.cashcard .btn{width:100%;margin-top:4px}
.hudr{right:10px;top:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.pill{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(24,12,44,.88);cursor:var(--cur-pointer);font-weight:700;display:flex;gap:6px;align-items:center}
.pill.pulse{animation:pulse 1.2s infinite;border-color:var(--gold)}
@keyframes pulse{50%{box-shadow:0 0 18px rgba(255,211,77,.8)}}
.actionbar{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;display:flex;gap:8px;z-index:4;background:rgba(24,12,44,.94);border:1px solid var(--line);border-radius:16px;padding:8px;max-width:calc(100% - 20px);flex-wrap:wrap;justify-content:center}
.banner{position:absolute;left:50%;transform:translateX(-50%);top:10px;z-index:4;background:rgba(24,12,44,.94);border:1px solid var(--line);border-radius:14px;padding:8px 12px;display:flex;gap:10px;align-items:center;max-width:calc(100% - 20px)}
.dock{display:flex;gap:6px;padding:8px 10px;padding-bottom:calc(8px + var(--safe-b));background:#1a0e30;border-top:1px solid var(--line);overflow-x:auto;z-index:5;scrollbar-width:none}
.dock::-webkit-scrollbar{display:none}
.dock button{flex:1 0 auto;min-width:68px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;border-radius:12px;border:1px solid transparent;background:transparent;cursor:var(--cur-pointer);font-size:12px;color:var(--muted)}
.dock button span{font-size:21px;line-height:1}
.dock button:hover,.dock button.on{background:var(--panel2);color:var(--text);border-color:var(--line)}
.dock button .dot{position:absolute}
.dock button{position:relative}
.dock .notif::after{content:"";position:absolute;top:4px;right:14px;width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink)}
.floaty{position:fixed;pointer-events:none;font-weight:800;font-size:22px;z-index:50;text-shadow:0 2px 8px #000;animation:floatup 1.4s ease-out forwards}
@keyframes floatup{from{transform:translateY(0);opacity:1}to{transform:translateY(-60px);opacity:0}}

/* ---- Fenster ---- */
.modal-bg{position:fixed;inset:0;background:rgba(6,2,14,.72);display:flex;align-items:center;justify-content:center;z-index:30;padding:14px}
.modal{width:100%;max-width:560px;max-height:calc(100dvh - 28px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:0 0 60px rgba(122,92,255,.3)}
.modal.wide{max-width:900px}
.modal header{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal header h2{margin:0;font-size:19px;flex:1}
.modal .body{padding:16px 18px;overflow:auto}
.modal .tabs{margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.item{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:6px;cursor:var(--cur-pointer);position:relative}
.item:hover{border-color:var(--pink)}
.item.locked{opacity:.55;cursor:var(--cur-no)}
.item canvas{width:100%;height:84px;display:block}
.item b{font-size:14px}.item small{color:var(--muted);line-height:1.3}
.price{font-weight:800;color:var(--gold);font-size:13px}
.price.gem{color:var(--cyan)}
.lock{position:absolute;top:8px;right:8px;background:#000a;border-radius:8px;padding:2px 7px;font-size:12px}
.list{display:flex;flex-direction:column;gap:8px}
.li{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.li .grow{flex:1;min-width:0}.li small{color:var(--muted);display:block}
.li.on{border-color:var(--pink);box-shadow:0 0 12px rgba(255,60,200,.3)}
.sw{width:30px;height:30px;border-radius:8px;border:2px solid #0006;flex:none}
.pips{display:flex;gap:4px}.pips i{width:12px;height:12px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}.pips i.on{background:var(--gold);border-color:var(--gold)}
.volrow{display:flex;align-items:center;gap:10px;margin:8px 0}.volrow input{flex:1}
input[type=range]{accent-color:var(--pink)}
h3{margin:18px 0 8px;font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
.toast{position:fixed;left:50%;bottom:calc(86px + var(--safe-b));transform:translateX(-50%);background:#2b1a4d;border:1px solid var(--line);padding:10px 16px;border-radius:12px;z-index:60;max-width:calc(100% - 24px);box-shadow:0 6px 24px #0008;animation:tin .25s}
.toast.err{border-color:var(--red);background:#4a1327}.toast.ok{border-color:var(--green)}
@keyframes tin{from{opacity:0;transform:translate(-50%,10px)}}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;background:var(--bg);border:1px solid var(--line)}
.tag.ok{color:var(--green);border-color:#2d7a4a}.tag.bad{color:var(--red);border-color:#8a2450}.tag.adm{color:var(--gold);border-color:#8a7020}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px}.stat b{display:block;font-size:22px}.stat small{color:var(--muted)}
.cheats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.dropdown{position:absolute;right:8px;top:calc(100% + 6px);min-width:210px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;z-index:40;box-shadow:0 10px 30px #000a}
.dropdown button{display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:transparent;border-radius:9px;cursor:var(--cur-pointer)}
.dropdown button:hover{background:var(--panel2)}
.dropdown .who{padding:8px 12px;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line);margin-bottom:4px;word-break:break-all}
.relwrap{position:relative}
.check{display:flex;align-items:center;gap:8px;margin:12px 0 4px}.check input{width:auto}

@media (max-width:640px){
  .logo{display:none}.spacer{display:none}.lvl{flex:1 1 90px;min-width:90px}.cashcard #h-club{display:none}.cashcard{width:172px;padding:8px 10px}.cashcard .big{font-size:17px}
  .chip{padding:5px 9px;font-size:13px}
  .modal-bg{align-items:flex-end;padding:0}
  .modal{max-width:none;border-radius:20px 20px 0 0;max-height:88dvh}
  .grid{grid-template-columns:repeat(2,1fr)}
  .card{padding:20px}
}

/* ---- chat ---- */
textarea{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);outline:none;resize:vertical;font:inherit;color:inherit}
textarea:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,60,200,.18)}
code{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:12px;color:var(--cyan)}
.iconbtn.sm{width:28px;height:28px;font-size:13px}
.chat{position:absolute;left:10px;bottom:10px;width:320px;max-width:calc(100% - 20px);height:260px;z-index:6;display:flex;flex-direction:column;background:rgba(24,12,44,.94);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(4px);box-shadow:0 8px 30px #000a}
.chat-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line)}
.chat-head b{flex:1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head span{font-size:11px;color:var(--muted)}
.chat-who{padding:4px 10px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-log{flex:1;overflow-y:auto;padding:4px 10px;font-size:13px;line-height:1.4;overscroll-behavior:contain}
.cm{padding:2px 0;word-break:break-word}.cm small{color:var(--muted);font-size:10px}.cm b{color:var(--cyan)}.cm b.adm{color:var(--gold)}.cm.me b{color:var(--pink)}
.cm.sys{color:var(--muted);font-style:italic;font-size:12px}
.chat-form{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
.chat-form input{flex:1;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:inherit;outline:none;min-width:0}
.chat-form input:focus{border-color:var(--pink)}
@media (max-width:640px){.chat{left:0;right:0;bottom:0;width:auto;max-width:none;height:46%;border-radius:14px 14px 0 0}}
input[type=date]{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color-scheme:dark;outline:none}

/* ---- icons ---- */
.ic{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.22em;flex:none}
.btn .ic,.pill .ic,.chip .ic,.tag .ic,.price .ic{margin-right:.15em}
.btn .ic:only-child,.iconbtn .ic{margin-right:0}
.iconbtn .ic{width:19px;height:19px}
.iconbtn.sm .ic{width:15px;height:15px}
.dock button span{display:flex;align-items:center;justify-content:center;height:24px}
.dock button span .ic{width:24px;height:24px;vertical-align:0}
.modal header h2 .ic{width:22px;height:22px;margin-right:6px;vertical-align:-.28em}
.item canvas{margin-bottom:2px}
.lock .ic{width:13px;height:13px;vertical-align:-.2em}
.cashcard .big .ic{width:22px;height:22px;vertical-align:-.28em}
.stats-line .ic,.item small .ic{width:13px;height:13px;vertical-align:-.2em}
.camctl{position:absolute;right:10px;bottom:10px;z-index:4;display:flex;flex-direction:column;gap:6px}
.camctl .iconbtn{background:rgba(24,12,44,.9);backdrop-filter:blur(4px)}
.tag .ic{width:13px;height:13px;vertical-align:-.18em}
.row.nofill .btn .ic{margin-right:.25em}
.hudr .pill .ic{width:18px;height:18px}
@media (max-width:640px){.camctl{bottom:calc(46% + 10px)}.chat.hidden ~ .camctl{bottom:10px}}

/* ---- scrollbars in the club design ---- */
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:#8a55e0 #150b26}}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#150b26;border-radius:10px;box-shadow:inset 0 0 0 1px #2d1a50}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff3cc8,#7a5cff);border-radius:10px;border:2px solid #150b26;min-height:36px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff6fd8,#9a82ff)}
::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#35e0ff,#7a5cff)}
::-webkit-scrollbar-corner{background:transparent}
.dock::-webkit-scrollbar{display:none}

/* ---- mood, edit pill, chat tabs ---- */
.mood{margin:4px 0 6px}
.mood-row{display:flex;align-items:center;gap:6px}
.mood-row .ic{width:18px;height:18px;color:var(--gold)}
.mood-row .bar{flex:1;margin:0}
.mood-row .bar>i{background:linear-gradient(90deg,#6dff9a,#35e0ff)}
.mood small{display:block;margin-top:4px;line-height:1.3;color:var(--muted);font-size:11px}
.pill.on{background:linear-gradient(90deg,var(--pink),var(--violet));border-color:transparent;color:#fff}
.chat-tabs{display:flex;gap:4px;flex:1}
.chat-tabs button{position:relative;display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:var(--cur-pointer);font-weight:600;font-size:13px}
.chat-tabs button.on{background:var(--panel2);color:var(--text);border-color:var(--line)}
.chat-tabs .ic{width:15px;height:15px}
.chat-tabs .dot{position:absolute;top:2px;right:3px;width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 6px var(--pink)}
.chat-head b{display:none}

/* ---- character creator ---- */
.cr-main{display:flex;gap:18px;align-items:flex-start}
.cr-left{flex:none;width:230px;display:flex;flex-direction:column;align-items:center;gap:10px}
#cr-big{width:230px;height:300px;background:radial-gradient(circle at 50% 35%,#3b1b66,#150b26 70%);border:1px solid var(--line);border-radius:16px}
.cr-right{flex:1;min-width:0}
.cr-right .tabs{flex-wrap:wrap}
.cr-right .tabs button{display:flex;align-items:center;justify-content:center;gap:4px;min-width:84px}
.cr-grid{display:flex;flex-wrap:wrap;gap:8px}
.cr-tpl{width:72px;height:72px;padding:0;border-radius:12px;border:2px solid var(--line);background:var(--bg2);cursor:var(--cur-pointer);overflow:hidden}
.cr-tpl canvas{width:100%;height:100%;display:block}
.cr-tpl:hover{border-color:var(--cyan)}
.cr-tpl.on,.cr-sw.on{border-color:var(--pink);box-shadow:0 0 12px rgba(255,60,200,.6)}
.cr-sw{width:34px;height:34px;border-radius:50%;border:3px solid #0006;cursor:var(--cur-pointer)}
.cr-sw:hover{transform:scale(1.1)}
@media (max-width:640px){.cr-main{flex-direction:column;align-items:center}.cr-left{width:100%}#cr-big{width:180px;height:240px}.cr-right{width:100%}.cr-tpl{width:64px;height:64px}}

.modal-bg.solid{background:radial-gradient(circle at 50% -10%,#47186e,#120a1f 62%)}

/* ---- page background follows the location ---- */
body{transition:background .8s}
body[data-loc="downtown"]{--page:#120a1f;--stage:#0b0614;--bar1:#2a1650;--bar2:#1a0e30}
body[data-loc="beach"]{--page:#220a1c;--stage:#1a0a22;--bar1:#5c1c4a;--bar2:#2e0f2e}
body[data-loc="rooftop"]{--page:#070a1f;--stage:#04061a;--bar1:#1a1f5c;--bar2:#0d1238}
body[data-loc="cellar"]{--page:#1a0e08;--stage:#100804;--bar1:#4a2514;--bar2:#2a140c}
body[data-loc="space"]{--page:#03040e;--stage:#01010a;--bar1:#14183f;--bar2:#080a22}
html,body{background:var(--page,#120a1f)}
.stage{background:var(--stage,#0b0614);transition:background .8s}
.topbar{background:linear-gradient(180deg,var(--bar1,#2a1650),var(--bar2,#1a0e30))}
.dock{background:var(--bar2,#1a0e30)}

/* ---- chat: dynamic tabs ---- */
#chat-logs{flex:1;min-height:0;display:flex;flex-direction:column}
.chat-log{flex:1}
.chat-tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.chat-tabs::-webkit-scrollbar{display:none}
.chat-tabs button{flex:none}
.chat-tabs .tx{display:inline-flex;margin-left:2px;opacity:.6;border-radius:50%}
.chat-tabs .tx:hover{opacity:1;background:#0006}
.chat-tabs .tx .ic{width:12px;height:12px}
.cm b.pn{cursor:var(--cur-pointer);text-decoration:none}
.cm b.pn:hover{text-decoration:underline}
.pn{cursor:var(--cur-pointer)}.pn:hover{text-decoration:underline}

/* ---- friends and player menu ---- */
.dotstat{display:inline-block;width:10px;height:10px;border-radius:50%;background:#5a4a78;flex:none;box-shadow:0 0 0 2px #0005}
.dotstat.on{background:var(--green);box-shadow:0 0 8px var(--green)}
.empty{color:var(--muted);padding:10px 4px;font-size:14px}
.pmenu{position:fixed;z-index:80;min-width:210px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 12px 36px #000b;animation:tin .15s}
.pm-head{display:flex;align-items:center;gap:6px;padding:8px 10px;font-weight:700;border-bottom:1px solid var(--line);margin-bottom:4px}
.pm-sub{display:flex;align-items:center;gap:7px;padding:2px 10px 6px;color:var(--muted);font-size:12px}
.pmenu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:9px 10px;border:0;background:transparent;border-radius:9px;cursor:var(--cur-pointer);font-size:14px}
.pmenu button:hover:not(:disabled){background:var(--panel2)}
.pmenu button:disabled{opacity:.45;cursor:var(--cur-no)}
#fr-q{margin-bottom:0}

/* ======================================================================
   CARTOON THEME: navy/cyan HUD, light-blue windows, glossy buttons
   ====================================================================== */
:root{
  --bg:#0d2652;--bg2:#15407f;--panel:#173f77;--panel2:#245ba8;--line:#5cc8ff;--text:#ffffff;--muted:#b4d6fb;
  --pink:#ffb02e;--violet:#ff7a1a;--cyan:#6fe3ff;--gold:#ffd34d;--green:#5ee08a;--red:#ff5b6b;--ol:#0a1d42;
}
html,body{font-family:"Trebuchet MS","Segoe UI",Verdana,system-ui,sans-serif;font-weight:600}
.brand{background:none;-webkit-text-fill-color:#ffd34d;color:#ffd34d;-webkit-text-stroke:2px #17407e;paint-order:stroke fill;text-shadow:0 3px 0 #17407e;font-weight:900}
.center-screen{background:radial-gradient(circle at 50% 0%,#2b6fc2,#0d2652 65%)}
.spinner{border-color:#2f6fb8;border-top-color:#ffb02e}

/* --- windows (modals and login cards) are light blue with a navy frame --- */
.modal,.card{--bg:#f1f9ff;--bg2:#ffffff;--panel:#d6ecff;--panel2:#b7dcff;--line:#86bdf0;--text:#16315c;--muted:#4f719c;--pink:#ff8a1f;--violet:#ff6a00;color:var(--text)}
.modal,.card{background:linear-gradient(#eaf6ff,#cfe7ff);border:4px solid #17407e;border-radius:20px;box-shadow:inset 0 0 0 2px #fff,0 12px 40px rgba(0,0,0,.6)}
.card{padding:26px}
.modal header{background:linear-gradient(#66c0ff,#2a82e6);border-bottom:3px solid #17407e;border-radius:15px 15px 0 0;color:#fff}
.modal header h2{text-shadow:0 2px 0 #0f3470,0 0 3px #0f3470;font-weight:900;letter-spacing:.3px}
.modal header .iconbtn{background:linear-gradient(#ff9a9a,#e84a4a);border-color:#7a1414;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 3px 0 #6a1010,0 5px 8px #0005}
.modal .tabs,.card .tabs{background:#fff;border:2px solid #86bdf0}
.modal .tabs button.on,.card .tabs button.on{background:linear-gradient(#7fd3ff,#2f8ff2);color:#fff;text-shadow:0 1px 0 #0b3270}
.modal .tabs button,.card .tabs button{color:#4f719c;font-weight:800}
.modal .price{color:#d97706}.modal .price.gem{color:#0a7fb0}
.modal .tag,.card .tag{background:#fff;border-color:#9ccbf2;color:#27508a}
.modal .tag.ok{color:#14803a;border-color:#6cc98c}.modal .tag.bad{color:#c4283f;border-color:#f08a9a}.modal .tag.adm{color:#a76500;border-color:#e3b13a}
.modal .msg.err,.card .msg.err{background:#ffe6ea;border-color:#f08a9a;color:#9a1f35}
.modal .msg.ok,.card .msg.ok{background:#e1f8e8;border-color:#6cc98c;color:#14693a}
.modal .msg.info,.card .msg.info{background:#e0f1ff;border-color:#86bdf0;color:#1d4f8f}
.modal code{background:#fff;color:#0a6fa8;border-color:#9ccbf2}
.modal .item,.modal .li,.modal .stat{background:#fff;border:2px solid #9ccbf2;box-shadow:0 2px 0 #b9dcf7}
.modal .li.on{border-color:#ff9a2e;box-shadow:0 0 0 2px rgba(255,154,46,.35)}
.modal .item:hover{border-color:#ff9a2e}
.modal h3{color:#2e5d9a}
.modal input[type=text],.modal input[type=password],.modal input[type=email],.modal input[type=number],.modal input[type=search],.modal input[type=date],.modal select,.modal textarea,.card input{background:#fff;border:2px solid #86bdf0;color:#16315c}
.modal input:focus,.modal select:focus,.modal textarea:focus,.card input:focus{border-color:#ff9a2e;box-shadow:0 0 0 3px rgba(255,154,46,.3)}
.modal th{color:#4f719c}.modal th,.modal td{border-bottom-color:#cfe5fa}
.modal .xpbar,.modal .bar{background:#fff}
.modal .sw{border-color:#14214a}
.lock{background:#14214a;color:#fff}
.cr-tpl{background:#fff;border-color:#9ccbf2}
#cr-big{background:radial-gradient(circle at 50% 35%,#ffffff,#bfe1ff 70%);border:3px solid #86bdf0}

/* --- glossy buttons --- */
.btn{background:linear-gradient(#80d4ff,#2f8ff2 55%,#1d6bd0);border:2px solid #0d3a7e;color:#fff;font-weight:800;text-shadow:0 1px 0 #0b3270,0 0 2px #0b3270;border-radius:12px;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.14),0 3px 0 #0a2e66,0 6px 8px rgba(0,0,0,.28)}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 0 0 #0a2e66}
.btn.primary{background:linear-gradient(#ffd68a,#ffa22e 55%,#f27a12);border-color:#a8520a;text-shadow:0 1px 0 #a8520a,0 0 2px #a8520a;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.12),0 3px 0 #8a4308,0 6px 8px rgba(0,0,0,.28)}
.btn.danger{background:linear-gradient(#ffa0a0,#ee4a4a 55%,#d02a2a);border-color:#7a1414;text-shadow:0 1px 0 #7a1414;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 3px 0 #6a1010,0 6px 8px rgba(0,0,0,.28)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.4);box-shadow:none;text-shadow:none}
.btn:disabled{filter:grayscale(.75) brightness(.9);opacity:.7;box-shadow:none;transform:none}
.link{color:#1d6bd0}
.iconbtn{width:40px;height:40px;border-radius:50%;background:linear-gradient(#80d4ff,#2f8ff2 60%,#1d6bd0);border:3px solid #0d3a7e;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 3px 0 #0a2e66,0 5px 8px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;padding:0}
.iconbtn:hover{border-color:#0d3a7e;filter:brightness(1.1)}
.iconbtn:active{transform:translateY(2px)}
.iconbtn.sm{width:30px;height:30px;border-width:2px}
.iconbtn .ic{width:22px;height:22px}.iconbtn.sm .ic{width:17px;height:17px}
.pill{background:linear-gradient(#80d4ff,#2f8ff2 55%,#1d6bd0);border:2px solid #0d3a7e;color:#fff;text-shadow:0 1px 0 #0b3270;font-weight:800;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 3px 0 #0a2e66,0 5px 8px rgba(0,0,0,.3)}
.pill.on,.pill.pulse{background:linear-gradient(#ffd68a,#ffa22e 55%,#f27a12);border-color:#a8520a;text-shadow:0 1px 0 #a8520a}
.pill.pulse{animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:translateY(-2px);filter:brightness(1.15)}}

/* --- HUD over the stage --- */
#game{position:relative}
.stage{position:absolute;inset:0;background:var(--stage,#0b0614)}
.topbar{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:flex-start;gap:10px;padding:10px 12px;padding-top:calc(10px + var(--safe-t));background:none;border:none;pointer-events:none}
.topbar>*{pointer-events:auto}
.hud-left{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.hud-center{flex:1;display:flex;justify-content:center;pointer-events:none}
.hud-center>*{pointer-events:auto}
.hud-right{display:flex;gap:8px}
.lvl{position:relative;display:flex;align-items:center;width:210px;max-width:none;flex:none}
.badge{width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fffbc0,#ffd34d 55%,#e0a000);border:3px solid #0d3a7e;box-shadow:0 0 0 3px #62d6ff,0 4px 6px rgba(0,0,0,.5);color:#5a3a00;font-weight:900;font-size:19px;z-index:2;text-shadow:0 1px 0 #fff6}
.xpbar{margin-left:-12px;flex:1;height:20px;border-radius:5px;transform:skewX(-12deg);background:linear-gradient(#0c2347,#17356a);border:2px solid #0a1d42;box-shadow:0 0 0 2px #62d6ff,inset 0 2px 3px rgba(0,0,0,.5)}
.xpbar>i{border-radius:3px;background:linear-gradient(#b8f6ff,#2fb4ee 60%,#1a8ccc)}
.chip{position:relative;height:26px;margin-left:12px;padding:0 14px 0 28px;border-radius:5px;transform:skewX(-12deg);background:linear-gradient(#d4f8ff,#86def5);border:2px solid #0a1d42;color:#0d2f5a;font-weight:900;font-size:14px;box-shadow:0 0 0 2px #62d6ff,0 3px 5px rgba(0,0,0,.35);min-width:112px;display:flex;align-items:center;gap:0;text-shadow:0 1px 0 #fff8}
.chip .ic{position:absolute;left:-20px;top:50%;transform:translateY(-50%) skewX(12deg);width:32px;height:32px;margin:0;filter:drop-shadow(0 2px 1px rgba(0,0,0,.4))}
.chip span{display:inline-block;transform:skewX(12deg)}
.clubsign{margin-top:2px;padding:5px 24px 6px;border-radius:14px;background:linear-gradient(#1a4684,#0d2956);border:3px solid #62d6ff;box-shadow:0 0 0 2px #0a1d42,0 5px 12px rgba(0,0,0,.5);text-align:center;min-width:190px}
.clubsign b{display:block;font-size:16px;font-weight:900;color:#fff;text-shadow:0 2px 0 #0a1d42,0 0 3px #0a1d42}
.clubsign small{display:flex;gap:12px;justify-content:center;color:#d6efff;font-weight:800;font-size:12px}
.clubsign small .ic{width:15px;height:15px;margin-right:2px}
.hud{z-index:3}
.cashcard{left:12px;top:134px;width:222px;background:linear-gradient(#1a4684,#0d2956);border:3px solid #62d6ff;border-radius:14px;box-shadow:0 0 0 2px #0a1d42,0 6px 14px rgba(0,0,0,.5);padding:10px 12px;backdrop-filter:none;color:#fff}
.cashcard small{color:#b9dcff}
.cashcard .big{color:#ffd34d;text-shadow:0 2px 0 #0a1d42,0 0 3px #0a1d42;font-weight:900}
.bar{background:#0a1d42;border:2px solid #0a1d42;box-shadow:0 0 0 1px #62d6ff}
.bar>i{background:linear-gradient(#ffe38a,#ff9d3c)}
.mood-row .ic{color:inherit}
.hudr{right:12px;top:114px}
.camctl{position:absolute;right:12px;top:62px;bottom:auto;flex-direction:row;gap:6px;background:rgba(10,29,66,.85);border:2px solid #62d6ff;border-radius:999px;padding:4px 6px}
.camctl .iconbtn{width:30px;height:30px;border-width:2px;background:linear-gradient(#80d4ff,#2f8ff2 60%,#1d6bd0);backdrop-filter:none}
.camctl .iconbtn .ic{width:17px;height:17px}
.hudr{top:150px}
.actionbar{bottom:112px;background:linear-gradient(#1a4684,#0d2956);border:3px solid #62d6ff;box-shadow:0 0 0 2px #0a1d42,0 6px 14px rgba(0,0,0,.5);color:#fff}
.banner{top:78px;background:linear-gradient(#1a4684,#0d2956);border:3px solid #62d6ff;box-shadow:0 0 0 2px #0a1d42,0 6px 14px rgba(0,0,0,.5);color:#fff}
.toast{background:linear-gradient(#1a4684,#0d2956);border:3px solid #62d6ff;color:#fff;box-shadow:0 0 0 2px #0a1d42,0 8px 20px rgba(0,0,0,.5);bottom:130px;text-shadow:0 1px 0 #0a1d42}
.toast.err{border-color:#ff8a9a;background:linear-gradient(#7a1f3a,#4a1024)}.toast.ok{border-color:#7dffa8}
.dropdown{background:linear-gradient(#1a4684,#0d2956);border:3px solid #62d6ff;box-shadow:0 0 0 2px #0a1d42,0 10px 24px rgba(0,0,0,.6);color:#fff}
.dropdown button{color:#fff;font-weight:700}.dropdown button:hover{background:#245ba8}.dropdown .who{color:#b9dcff;border-bottom-color:#2f6fb8}
.pmenu{background:linear-gradient(#1a4684,#0d2956);border:3px solid #62d6ff;box-shadow:0 0 0 2px #0a1d42,0 12px 30px rgba(0,0,0,.65);color:#fff}
.pm-head{border-bottom-color:#2f6fb8}.pmenu button{color:#fff}.pmenu button:hover:not(:disabled){background:#245ba8}.pm-sub{color:#b9dcff}
.floaty{color:#ffd34d;text-shadow:0 2px 0 #0a1d42}

/* --- pedestal menu bar (bottom right) --- */
.dock{position:absolute;right:10px;bottom:4px;left:auto;z-index:5;display:flex;gap:0;padding:0;background:none;border:none;overflow:visible;align-items:flex-end}
.dock button{position:relative;flex:none;width:74px;height:98px;min-width:0;padding:0;background:none;border:none;color:#fff;cursor:var(--cur-pointer);display:block}
.dock button:hover,.dock button.on{background:none;border:none}
.dock button::before{content:"";position:absolute;left:11px;right:11px;bottom:8px;height:40px;border-radius:0 0 46% 46% / 0 0 26% 26%;background:repeating-linear-gradient(90deg,#8d97aa 0 4px,#f4f6fa 4px 11px,#c2cad8 11px 15px);box-shadow:inset 0 -9px 0 rgba(0,0,0,.16),0 5px 0 #2fae86,0 9px 8px rgba(0,0,0,.5)}
.dock button::after,.dock .notif::after{content:"";position:absolute;left:11px;right:11px;top:auto;bottom:38px;width:auto;height:16px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#ffffff,#d4dbe8);border:2px solid #7f8aa0;box-shadow:none}
.dock button span{position:absolute;left:0;right:0;bottom:46px;z-index:2;display:flex;justify-content:center;height:auto;transition:transform .15s}
.dock button span .ic{width:42px;height:42px;filter:drop-shadow(0 4px 2px rgba(0,0,0,.45))}
.dock button:hover span{transform:translateY(-6px) scale(1.06)}
.dock button em{position:absolute;left:0;right:0;bottom:15px;z-index:3;text-align:center;font-style:normal;font-size:11px;font-weight:900;color:#16315c;text-shadow:0 1px 0 #fff}
.dock .notif span::after{content:"";position:absolute;top:-2px;right:10px;width:13px;height:13px;border-radius:50%;background:#ff3c6e;border:2px solid #fff;box-shadow:0 0 8px #ff3c6e}
.dock .hidden{display:none}

/* --- chat window in a navy frame --- */
.chat{--bg:#fff;--line:#86bdf0;--text:#16315c;--muted:#4f719c;left:12px;bottom:12px;width:350px;height:290px;background:#bfe4fb;border:4px solid #123a6b;border-radius:18px;box-shadow:inset 0 0 0 2px #fff,0 8px 24px rgba(0,0,0,.6);backdrop-filter:none;color:#16315c}
.chat-head{background:#123a6b;border:none;border-radius:12px 12px 0 0;padding:6px 6px;gap:6px}
.chat-head span{color:#b9dcff}
.chat-tabs{gap:5px}
.chat-tabs button{width:42px;height:38px;padding:0;border-radius:10px;background:linear-gradient(#2f6fb8,#1a4684);border:2px solid #0a1d42;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 0 rgba(255,255,255,.25)}
.chat-tabs button .ic{width:24px;height:24px}
.chat-tabs button.on{background:linear-gradient(#d4f1ff,#8fd0f5);border-color:#fff;box-shadow:inset 0 2px 0 #fff}
.chat-tabs .dmtab{width:auto;padding:0 8px;gap:4px;font-size:12px;font-weight:800;text-shadow:0 1px 0 #0a1d42}
.chat-tabs .dmtab.on{color:#16315c;text-shadow:none}
.chat-tabs .dmtab .ic{width:18px;height:18px}
.chat-tabs .dot{top:-3px;right:-3px;border:2px solid #fff}
.chat-tabs .tx .ic{width:12px;height:12px}
.chat-tabs .ct-fr{margin-left:auto}
.chat-who{color:#2e5d9a;font-weight:700;background:transparent}
#chat-logs{margin:0 8px;border:2px dashed #7fb4e8;border-radius:10px;background:#eaf6ff}
.chat-log{color:#16315c}
.cm b{color:#0a6fb0}.cm.me b{color:#c2410c}.cm b.adm{color:#b45309}.cm small{color:#7a9ac2}.cm.sys{color:#6f8fb8}
.chat-form{background:transparent;border:none;padding:8px}
.chat-form input{border:2px solid #7fb4e8;border-radius:12px;background:#fff;color:#16315c}
.chat-form input:focus{border-color:#ff9a2e}
.sendbtn{flex:none;width:40px;height:36px;border-radius:50%;border:2px solid #0a1d42;background:linear-gradient(#80d4ff,#2f8ff2 60%,#1d6bd0);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 2px 0 #0a2e66;cursor:var(--cur-pointer);display:flex;align-items:center;justify-content:center;padding:0}
.sendbtn .ic{width:20px;height:20px}
.dotstat.on{background:#3ddc6a;box-shadow:0 0 6px #3ddc6a}
.dotstat{box-shadow:0 0 0 2px #14214a55}

/* --- scrollbars: blue --- */
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:#3f9cf0 #cfe5fa}}
::-webkit-scrollbar-track{background:#cfe5fa;box-shadow:inset 0 0 0 1px #86bdf0}
::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#80d4ff,#2f8ff2);border:2px solid #cfe5fa}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#a4e2ff,#4aa3ff)}

@media (max-width:640px){
  .hud-center{display:none}
  .lvl{width:176px}.chip{min-width:96px;font-size:13px}
  .cashcard{top:128px;width:190px;padding:8px 10px}
  .hudr{top:128px;right:8px}
  .camctl{top:60px;right:8px}
  .dock{left:0;right:0;overflow-x:auto;justify-content:flex-start;padding:0 4px;background:linear-gradient(transparent,rgba(8,22,52,.85))}
  .dock button{width:66px}
  .chat{left:0;right:0;bottom:0;width:auto;height:48%;border-radius:18px 18px 0 0}
  .actionbar{bottom:104px}.toast{bottom:112px}
}

/* volume slider: opens below the speaker button on hover */
.volwrap{position:relative}
.volpop{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:10px;display:none;z-index:45}
.volwrap:hover .volpop,.volwrap.open .volpop,.volwrap:has(#b-vol:focus-visible) .volpop,.volwrap:has(#b-mvol:focus-visible) .volpop{display:block}
.volpop-in{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:10px;width:auto;padding:10px 6px 8px;border-radius:14px;background:linear-gradient(#1a4684,#0d2956);border:3px solid #62d6ff;box-shadow:0 0 0 2px #0a1d42,0 10px 24px rgba(0,0,0,.6)}
.volslider{position:relative;width:30px;height:120px}
.volslider input{position:absolute;left:50%;top:50%;width:112px;height:26px;margin:0;transform:translate(-50%,-50%) rotate(-90deg);accent-color:#62d6ff;cursor:var(--cur-pointer);background:transparent}
.volpop small{color:#b9dcff;font-weight:700;font-size:11px;line-height:1}

/* ================= mobile / touch ================= */
html,body{overscroll-behavior:none}
#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game input,#game textarea{-webkit-user-select:text;user-select:text}
@media (pointer:coarse){
  input,textarea,select{font-size:16px}   /* no zoom-in when a field is focused (iOS) */
  .camctl .iconbtn{width:38px;height:38px}.camctl .iconbtn .ic{width:19px;height:19px}
  .btn.sm{min-height:38px}
  .pmenu button{padding:12px 12px}
  .dropdown button{padding:13px 12px}
}
/* phones in portrait: the cash card moves to the bottom above the dock, the camera buttons stay at the top */
@media (max-width:640px) and (min-height:521px){
  .camctl,.chat.hidden ~ .camctl{bottom:auto;top:56px;right:8px}
  .cashcard{left:8px;right:8px;top:auto;bottom:calc(106px + var(--safe-b));width:auto;display:grid;grid-template-columns:1fr auto;column-gap:10px;row-gap:3px;align-items:center;padding:8px 10px}
  .cashcard #h-club{display:block;grid-column:1/-1;grid-row:1;font-size:11px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cashcard .big{grid-column:1;grid-row:2;font-size:18px}
  .cashcard>.bar{grid-column:1;grid-row:3}
  .cashcard #c-info{grid-column:1;grid-row:4;font-size:11px}
  .cashcard #b-collect{grid-column:2;grid-row:2 / span 2;margin:0;width:auto;min-width:96px}
  .cashcard #b-boost{grid-column:2;grid-row:4;margin:0;width:auto;min-width:96px}
  .cashcard #b-open{grid-column:1/-1;grid-row:6;margin:2px 0 0}
  .cashcard .mood{grid-column:1/-1;grid-row:5;margin:2px 0 0}
  .stage:has(#actionbar:not(.hidden)) #cash{display:none}
  .banner{top:auto;bottom:calc(106px + var(--safe-b));left:8px;right:8px;transform:none;flex-wrap:wrap;justify-content:space-between;max-width:none}
  .toast{bottom:auto;top:calc(104px + var(--safe-t))}
}
/* short screens (phones in landscape): everything gets smaller so the club stays visible */
@media (max-height:520px){
  .hud-center{display:none}
  .hud-left{transform:scale(.7);transform-origin:top left}
  .hud-right{transform:scale(.8);transform-origin:top right}
  .camctl,.chat.hidden ~ .camctl{top:6px;right:64px;bottom:auto;transform:scale(.8);transform-origin:top right}
  .cashcard{top:78px;left:10px;width:190px;padding:6px 8px;transform:scale(.8);transform-origin:top left}
  .cashcard .mood small{font-size:10px}
  .hudr{top:56px;right:10px}
  .dock{transform:scale(.7);transform-origin:bottom right}
  .actionbar{bottom:78px}
  .banner{top:6px;left:50%;font-size:12px;padding:5px 10px}
  .toast{bottom:84px}
  .chat{width:300px;height:62%}
  .modal{max-height:calc(100dvh - 12px)}
  .modal-bg{padding:6px}
}

/* action bar: as wide as its buttons (a position:absolute box at left:50% would otherwise only get half the width and wrap) */
.actionbar{width:max-content;max-width:calc(100% - 20px)}
@media (max-width:640px){.actionbar{left:8px;right:8px;transform:none;width:auto;max-width:none;justify-content:center}.actionbar>b{flex:1 0 100%;text-align:center;padding:0 !important}}
.toast{pointer-events:none}

.volcol{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:44px}
.vollbl{color:#fff;font-weight:700;font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.4px}

/* ---- notifications tab + branding ---- */
.check.nt{align-items:flex-start;gap:10px;margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.check.nt input{margin-top:3px;flex:none;width:18px;height:18px}
.check.nt small{display:block;color:var(--muted);font-weight:400;line-height:1.4;margin-top:2px}
.brandfoot{margin-top:18px;text-align:center}
.madeby{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;text-decoration:none;opacity:.85;transition:opacity .15s,color .15s}
.madeby:hover{opacity:1;color:var(--text)}
.madeby svg{flex:none}
.madeby b{font-weight:800}
.dd-foot{margin-top:4px;padding:8px 12px 4px;border-top:1px solid var(--line)}
.dd-foot .madeby{color:#b9dcff}
.dd-foot .madeby:hover{color:#fff}

/* ---- tutorial modal ---- */
.tut{text-align:center;padding:4px 2px}
.tut-ic{display:flex;justify-content:center;margin-bottom:6px}
.tut-ic .ic{width:48px;height:48px}
.tut h3{margin:0 0 6px;font-size:20px}
.tut .sub{margin:0 0 12px}
.tut-list{list-style:none;margin:0;padding:0;text-align:left;display:flex;flex-direction:column;gap:8px}
.tut-list li{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:9px 12px;line-height:1.4}
.tut-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.tut-dots button{width:11px;height:11px;border-radius:50%;border:0;padding:0;background:var(--line);cursor:var(--cur-pointer)}
.tut-dots button.on{background:var(--violet);transform:scale(1.25)}

/* ---- language selector on the sign-in pages ---- */
.langrow{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 0}
.langrow select{width:auto;min-width:150px;padding:6px 10px}

/* longer labels in other languages */
.dock button em{font-size:10px;letter-spacing:-.02em;white-space:nowrap}


/* ===== phone portrait: compact cash card + smaller chat, club stays visible and can be dragged / pinch-zoomed ===== */
.cash-tg{display:none}
@media (max-width:640px) and (min-height:521px){
  .cashcard{padding:6px 10px;row-gap:2px;opacity:.94}
  .cashcard .cash-tg{display:flex;grid-column:2;grid-row:1;justify-self:end;align-items:center;justify-content:center;width:30px;height:24px;margin:0;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:inherit;font-size:14px;line-height:1}
  .cashcard #h-club{grid-column:1;grid-row:1}
  .cashcard .big{font-size:16px}
  .cashcard:not(.open) .bar,
  .cashcard:not(.open) #c-info,
  .cashcard:not(.open) .mood,
  .cashcard:not(.open) #b-boost,
  .cashcard:not(.open) #b-open{display:none}
  .cashcard:not(.open) #b-collect{grid-row:2;min-height:34px}
  .cashcard.open .cash-tg{transform:rotate(180deg)}
  .chat{height:34%;max-height:300px}
  .camctl,.chat.hidden ~ .camctl{top:56px;bottom:auto}
}
@media (max-width:640px) and (max-height:520px){.chat{height:55%}}

/* ===== phones in landscape / short screens: the cash card is collapsed by default too (it used to cover the club) ===== */
@media (max-height:520px){
  .cashcard{width:200px;display:grid;grid-template-columns:1fr auto;column-gap:8px;row-gap:3px;align-items:center;padding:6px 8px;opacity:.94}
  .cashcard .cash-tg{display:flex;grid-column:2;grid-row:1;justify-self:end;align-items:center;justify-content:center;width:30px;height:24px;margin:0;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:inherit;font-size:14px;line-height:1;cursor:pointer}
  .cashcard #h-club{display:block;grid-column:1;grid-row:1;font-size:11px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cashcard .big{grid-column:1;grid-row:2;font-size:17px}
  .cashcard>.bar{grid-column:1/-1;grid-row:3}
  .cashcard #c-info{grid-column:1/-1;grid-row:4;font-size:11px}
  .cashcard .mood{grid-column:1/-1;grid-row:5;margin:2px 0 0}
  .cashcard #b-collect{grid-column:2;grid-row:2;margin:0;width:auto;min-width:90px}
  .cashcard #b-boost{grid-column:1/-1;grid-row:6;margin:2px 0 0;width:100%}
  .cashcard #b-open{grid-column:1/-1;grid-row:7;margin:2px 0 0;width:100%}
  .cashcard:not(.open) .bar,
  .cashcard:not(.open) #c-info,
  .cashcard:not(.open) .mood,
  .cashcard:not(.open) #b-boost,
  .cashcard:not(.open) #b-open{display:none}
  .cashcard.open .cash-tg{transform:rotate(180deg)}
}