:root { --edge:#0b1229; --text:#fff; --gold:#ffd04a; --orange:#f5a524; --blue:#4d6fc4; --purple:#7a4ae0; }
  * { box-sizing:border-box; }
  html,body { margin:0; height:100%; background:#14203f; color:var(--text); font:bold 12px Verdana,Tahoma,sans-serif; overflow:hidden; user-select:none; }
  canvas { display:block; }
  #c, #ov { position:fixed; left:0; top:0; }
  #ov { pointer-events:none; }
  .glass { background:linear-gradient(180deg,#3b5094,#29396c); border:3px solid var(--edge); border-radius:10px;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.2), 0 4px 0 var(--edge), 0 12px 28px rgba(0,0,0,.4); }
  input { font:bold 13px Verdana,sans-serif; border-radius:8px; border:3px solid var(--edge); background:#f4f6ff; color:#1a1426; padding:9px 12px; outline:none; box-shadow:inset 0 3px 0 rgba(0,0,0,.08); }
  input:focus { background:#fff; box-shadow:inset 0 3px 0 rgba(0,0,0,.08), 0 0 0 3px rgba(255,208,74,.5); }
  button { font:bold 12px Verdana,sans-serif; border:3px solid var(--edge); border-radius:8px; padding:8px 12px; cursor:pointer; color:#2a1600; white-space:nowrap;
    background:linear-gradient(180deg,#ffc94a,#f39a1e); box-shadow:inset 0 2px 0 rgba(255,255,255,.55), 0 3px 0 var(--edge); transition:transform .06s, filter .1s; position:relative; top:0; }
  button:hover { filter:brightness(1.08); } button:active { transform:translateY(3px); box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 0 0 var(--edge); }
  button:disabled { filter:grayscale(.8) brightness(.8); cursor:not-allowed; }
  button.ghost { background:linear-gradient(180deg,#6b8ad8,#4562b0); color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,.35); }
  button.purple { background:linear-gradient(180deg,#a47aff,#7046d8); color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,.35); }
  button.on { background:linear-gradient(180deg,#8be08b,#46b046); color:#0d2a0d; }

  /* Login */
  #login { position:fixed; inset:0; display:grid; place-items:center; z-index:30; background:rgba(10,16,36,.55); backdrop-filter:blur(6px); }
  #login .glass { padding:22px 28px 20px; width:340px; text-align:center; animation:pop .35s cubic-bezier(.2,1.6,.4,1); }
  .logo { font:900 34px Verdana,sans-serif; color:var(--gold); letter-spacing:1px; text-shadow:0 3px 0 #b5561c, 0 6px 0 var(--edge); margin:2px 0 4px; }
  .logo span { color:#7fd6ff; text-shadow:0 3px 0 #2a6fb0, 0 6px 0 var(--edge); }
  #login p { margin:0 0 6px; color:#c9d4ff; font-weight:normal; }
  #loginFig { margin:4px auto 10px; image-rendering:pixelated; background:radial-gradient(circle at 50% 75%,#4a66b0,#24336a 70%); border:3px solid var(--edge); border-radius:10px; }
  #name { width:100%; margin-bottom:10px; text-align:center; }
  #go { width:100%; font-size:15px; padding:11px; }
  #login small { display:block; margin-top:10px; color:#9fb0e0; font-weight:normal; }
  @keyframes pop { from { transform:scale(.85); opacity:0 } to { transform:scale(1); opacity:1 } }

  /* Raum-Karte + Chatverlauf */
  #room { position:fixed; left:14px; top:14px; width:280px; z-index:5; display:none; overflow:hidden; }
  #roomHead { display:flex; align-items:center; gap:10px; padding:9px 12px; background:rgba(0,0,0,.18); border-bottom:3px solid var(--edge); }
  #roomHead .ico { width:30px; height:30px; border-radius:7px; border:3px solid var(--edge); background:linear-gradient(180deg,#ffd04a,#f39a1e); display:grid; place-items:center; font-size:15px; }
  #roomHead .t { font-size:13px; text-shadow:1px 1px 0 var(--edge); } #roomHead .s { font-weight:normal; color:#bcd0ff; font-size:11px; }
  #roomHead .dot { display:inline-block; width:8px; height:8px; background:#46e046; border-radius:50%; border:2px solid var(--edge); margin-right:4px; vertical-align:-1px; }
  #log { padding:8px 12px 10px; max-height:30vh; overflow:hidden; font-size:11.5px; display:flex; flex-direction:column; justify-content:flex-end; min-height:40px; }
  #log div { margin:2px 0; font-weight:normal; line-height:1.35; animation:fadein .25s; } #log .sys { color:#9fb0e0; font-style:italic; }
  #log .twGo { display:inline-block; margin-left:4px; padding:0 7px; border-radius:8px; background:#9146ff; color:#fff; font-style:normal; font-weight:bold; text-decoration:none; } #log .twGo:hover { background:#a970ff; }
  @keyframes fadein { from { opacity:0; transform:translateX(-6px) } to { opacity:1 } }

  /* Dock unten */
  #bar { position:fixed; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:8px; padding:8px; z-index:5; align-items:stretch; }
  #chatbox { display:flex; gap:6px; align-items:center; }
  #msg { width:min(380px,40vw); }
  #say { padding:8px 12px; font-size:14px; }
  .sep { width:3px; background:var(--edge); border-radius:2px; margin:2px 4px; opacity:.6; }
  .dockBtn { display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 10px 4px; min-width:76px; }
  .dockBtn i { font-style:normal; font-size:20px; line-height:22px; } .dockBtn em { font-style:normal; font-size:10.5px; }

  /* Lumis */
  #wallet { position:fixed; right:14px; top:14px; padding:5px 6px 5px 10px; font-size:15px; color:var(--gold); z-index:6; text-shadow:1px 1px 0 var(--edge); display:none; align-items:center; gap:8px; }
  .coin { width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff1a8,#f2c94c 45%,#c9962e); border:3px solid var(--edge); display:inline-block; }
  #wallet button { padding:2px 9px; font-size:15px; }
  #wallet.bump { animation:bump .4s; } @keyframes bump { 40% { transform:scale(1.15) } }

  /* Einrichten */
  
  /* Stream-Test */
  #twitch { position:fixed; right:14px; bottom:14px; padding:10px; display:none; flex-direction:column; gap:6px; z-index:5; width:190px;
    background:linear-gradient(180deg,#8a5cf0,#5a32b8); }
  #twitch b { font-size:13px; text-shadow:1px 1px 0 var(--edge); } #twitch small { color:#e6dcff; font-weight:normal; margin-bottom:2px; }

  /* Hinweise */
  #toasts { position:fixed; left:50%; top:16px; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:40; pointer-events:none; }
  .toast { padding:9px 16px; font-size:13px; animation:toast 3.2s forwards; text-align:center; }
  @keyframes toast { 0% { transform:translateY(-30px); opacity:0 } 8% { transform:translateY(0); opacity:1 } 85% { opacity:1 } 100% { opacity:0; transform:translateY(-10px) } }
  #brand { position:fixed; left:16px; bottom:16px; color:var(--gold); text-shadow:2px 2px 0 var(--edge); letter-spacing:1px; z-index:4; opacity:.8; }
  #modal { animation:pop .25s cubic-bezier(.2,1.5,.4,1); }
  #modal { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(960px,96vw); height:min(640px,92vh); display:none; grid-template-columns:270px 1fr; grid-template-rows:1fr auto; gap:12px; padding:14px; z-index:20; }
  #modal.show { display:grid; }
  #modal h2 { margin:0 0 8px; color:#ffd04a; text-shadow:2px 2px 0 #0b1229; font-size:20px; }
  #mLeft { display:flex; flex-direction:column; align-items:center; gap:8px; overflow:auto; }
  #prev { background:radial-gradient(circle at 50% 70%,#3b5596,#1a2550); border:2px solid #0b1229; border-radius:4px; image-rendering:pixelated; }
  #mRight { display:flex; flex-direction:column; min-height:0; }
  #tabs { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
  #tabs button { padding:6px 9px; }
  #sub { color:#c9d4ff; margin:2px 0 6px; font-weight:normal; }
  #grid { flex:1; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; align-content:start; padding:2px; }
  .card { position:relative; border:2px solid #0b1229; border-radius:4px; cursor:pointer; text-align:center; padding:4px 4px 6px; box-shadow:inset 0 -26px 0 rgba(0,0,0,.35); }
  .card.sel { outline:3px solid #fff; }
  .card canvas { display:block; margin:0 auto; image-rendering:pixelated; }
  .card .n { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:1px 1px 0 #000; }
  .card .p { font-size:11px; color:#ffd04a; text-shadow:1px 1px 0 #000; }
  .card .p s { color:#ccc; margin-right:4px; }
  .card .lock { position:absolute; right:4px; top:3px; font-size:12px; }
  .card .deal { position:absolute; left:3px; top:3px; background:#e8453c; font-size:10px; padding:1px 4px; border-radius:2px; }
  .card.big { grid-column:span 2; }
  #swatches { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center; }
  #swatches b { width:100%; font-size:11px; color:#c9d4ff; }
  .sw { width:24px; height:24px; border:2px solid #0b1229; border-radius:3px; cursor:pointer; }
  .sw.sel { outline:2px solid #fff; }
  #mFoot { grid-column:1 / 3; display:flex; gap:8px; justify-content:flex-end; align-items:center; }
  #hint { flex:1; color:#ffb0a0; font-weight:normal; }
  #detail { text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center; }
  .rar { display:inline-block; padding:2px 8px; border-radius:3px; border:2px solid #0b1229; font-size:11px; }
  .row { display:flex; gap:6px; }

  /* ---------- Neu: Menüs ---------- */
  body:not(.in) #room, body:not(.in) #bar, body:not(.in) #wallet, body:not(.in) #twitch, body:not(.in) #topBtns { display:none !important; }
  body.in #room { display:block; } body.in #wallet { display:flex; }
  body.obs #room, body.obs #bar, body.obs #wallet, body.obs #twitch, body.obs #login, body.obs #brand, body.obs #topBtns, body.obs #hint2 { display:none !important; }
  body.clear { background:transparent; }
  #roomHead .ico { flex:none; } #roomHead { cursor:default; }
  #log { max-height:24vh; overflow:auto; } #log .tw { background:#9146ff; color:#fff; font-size:9px; padding:0 3px; border-radius:3px; } #log .whisper { color:#ffb0f0; } #log .r-bc { background:#e91916; } #log .r-mod { background:#00ad03; } #log .r-vip { background:#e005b9; } #log .r-sub { background:#8205b4; }
  .dockBtn { position:relative; } .dockBtn .pill, .pill { background:#e8453c; color:#fff; border:2px solid var(--edge); border-radius:10px; font-size:10px; padding:0 5px; }
  .dockBtn .pill { position:absolute; top:-8px; right:-6px; }
  #topBtns { position:fixed; right:14px; top:62px; display:flex; gap:6px; z-index:6; }
  #topBtns button { padding:5px 9px; }
  .panel { position:fixed; z-index:20; display:none; flex-direction:column; gap:8px; padding:14px; animation:pop .22s cubic-bezier(.2,1.5,.4,1); }
  .panel.show { display:flex; }
  .panel h3 { margin:0; color:var(--gold); text-shadow:2px 2px 0 var(--edge); font-size:17px; padding-right:30px; }
  .panel .x { position:absolute; right:10px; top:10px; padding:2px 8px; }
  .panel small { color:#c9d4ff; font-weight:normal; }
  .tabs { display:flex; gap:4px; flex-wrap:wrap; } .tabs button { padding:5px 8px; font-size:11px; }
  .empty { color:#9fb0e0; font-weight:normal; padding:14px; text-align:center; }
  #nav { left:50%; top:50%; transform:translate(-50%,-50%); width:min(480px,94vw); height:min(560px,86vh); }
  #navList { flex:1; overflow:auto; display:flex; flex-direction:column; gap:6px; padding:2px; }
  .roomRow { display:flex; align-items:center; gap:10px; padding:7px 10px; background:rgba(0,0,0,.2); border:2px solid var(--edge); border-radius:8px; cursor:pointer; }
  .roomRow:hover { background:rgba(255,255,255,.1); } .roomRow.here { outline:2px solid var(--gold); }
  .roomRow .ico { font-size:20px; } .roomRow .info { flex:1; min-width:0; } .roomRow .info b { display:block; } .roomRow small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cnt { min-width:30px; text-align:center; border:2px solid var(--edge); border-radius:6px; padding:2px 5px; background:#6b7aa8; }
  .cnt.some { background:#46b046; } .cnt.busy { background:#f39a1e; } .cnt.hot { background:#e8453c; }
  #buildPanel { right:14px; top:110px; width:320px; max-height:calc(100vh - 210px); }
  #bGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; overflow:auto; max-height:46vh; padding:2px; }
  .fcard { background:linear-gradient(180deg,#4d65ad,#2c3c74); border:2px solid var(--edge); border-radius:6px; text-align:center; cursor:pointer; padding:2px 2px 4px; }
  .fcard:hover { filter:brightness(1.15); } .fcard.sel { outline:3px solid var(--gold); }
  .fcard canvas { display:block; margin:0 auto; image-rendering:pixelated; } .fcard .n { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fcard .p { font-size:10px; color:var(--gold); }
  #bColors { display:flex; gap:5px; flex-wrap:wrap; } #bInfo { font-weight:normal; color:#dfe6ff; font-size:11px; }
  #bSel { gap:6px; flex-wrap:wrap; } #bSel button, #bRow button { padding:5px 8px; font-size:11px; }
  #settings { left:50%; top:50%; transform:translate(-50%,-50%); width:min(520px,94vw); max-height:90vh; overflow:auto; }
  #settings label.f { display:flex; flex-direction:column; gap:3px; font-size:11px; color:#c9d4ff; }
  #settings input[type=text], #settings select, #settings textarea { font:bold 12px Verdana; border:3px solid var(--edge); border-radius:8px; padding:6px 8px; background:#f4f6ff; color:#1a1426; }
  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  #sEffects { display:grid; grid-template-columns:1fr 1fr; gap:4px; font-weight:normal; font-size:11px; }
  #sStream { background:rgba(120,70,220,.25); border:2px solid var(--edge); border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:6px; }
  .btn { display:inline-block; text-decoration:none; font:bold 12px Verdana; border:3px solid var(--edge); border-radius:8px; padding:7px 12px; color:#fff; text-align:center; }
  .btn.purple { background:linear-gradient(180deg,#a47aff,#7046d8); } .btn.ghost { background:linear-gradient(180deg,#6b8ad8,#4562b0); }
  .copy { display:flex; gap:6px; } .copy input { flex:1; font-size:11px !important; padding:5px !important; }
  #profile { left:50%; top:50%; transform:translate(-50%,-50%); width:min(400px,94vw); }
  #profile .top { display:flex; gap:12px; align-items:center; }
  #pFig canvas { background:radial-gradient(circle at 50% 75%,#4a66b0,#24336a 70%); border:3px solid var(--edge); border-radius:10px; image-rendering:pixelated; }
  #pName { font-size:18px; color:#fff; text-shadow:2px 2px 0 var(--edge); } #pMotto { font-weight:normal; font-style:italic; color:#dfe6ff; margin:4px 0; } #pMotto input { width:100%; font-size:11px; padding:5px; }
  #pBadges { display:flex; flex-wrap:wrap; gap:4px; } .badge { border:2px solid var(--edge); border-radius:6px; padding:1px 6px; font-size:10px; color:#1a1426; }
  #pActions { display:flex; flex-wrap:wrap; gap:6px; } #pActions button { padding:6px 9px; font-size:11px; }
  #friends { right:14px; bottom:90px; width:330px; height:min(480px,70vh); }
  #frList { flex:1; overflow:auto; display:flex; flex-direction:column; gap:5px; } #frList h4 { margin:6px 0 2px; color:var(--gold); font-size:12px; }
  .frRow { display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.2); border:2px solid var(--edge); border-radius:8px; padding:2px 8px 2px 2px; }
  .frRow.off { opacity:.6; } .frRow .info { flex:1; min-width:0; } .frRow .info b { display:block; } .frRow button { padding:4px 8px; }
  .frRow canvas { image-rendering:pixelated; }
  #frChat { flex:1; flex-direction:column; gap:6px; min-height:0; }
  #frMsgs { flex:1; overflow:auto; display:flex; flex-direction:column; gap:5px; background:rgba(0,0,0,.2); border:2px solid var(--edge); border-radius:8px; padding:8px; }
  .dm { align-self:flex-start; background:#f4f6ff; color:#1a1426; border:2px solid var(--edge); border-radius:10px 10px 10px 2px; padding:5px 9px; max-width:80%; font-weight:normal; }
  .dm.me { align-self:flex-end; background:#ffd04a; border-radius:10px 10px 2px 10px; } .dm small { display:block; color:#6a6a80; font-size:9px; }
  #frChat .row input { flex:1; }
  #emotes { position:fixed; bottom:92px; left:50%; transform:translateX(-50%); display:none; gap:6px; padding:8px; z-index:21; }
  #emotes.show { display:flex; } #emotes button { display:flex; flex-direction:column; align-items:center; padding:5px 8px; font-size:10px; } #emotes i { font-style:normal; font-size:20px; }
  #invites { position:fixed; left:50%; top:70px; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:30; }
  .invite { padding:12px 14px; display:flex; flex-direction:column; gap:8px; text-align:center; animation:pop .3s cubic-bezier(.2,1.6,.4,1); } .invite .row { justify-content:center; }
  #twitch { width:230px; top:110px; bottom:auto; } #twitch .g2 { display:grid; grid-template-columns:1fr 1fr; gap:5px; } #twitch button { padding:5px 4px; font-size:10.5px; }
  #twitch.min .g2, #twitch.min small { display:none; } #twMin { position:absolute; right:8px; top:6px; padding:0 6px; font-size:11px; }
  #hype { position:fixed; left:50%; top:14px; transform:translateX(-50%); z-index:7; display:none; align-items:center; gap:10px; padding:6px 12px; }
  #hype b { color:#fff; text-shadow:1px 1px 0 var(--edge); } #hypeTrack { width:200px; height:14px; border:3px solid var(--edge); border-radius:8px; background:#1a2550; overflow:hidden; }
  #hypeBar { height:100%; width:0; transition:width .5s; box-shadow:inset 0 3px 0 rgba(255,255,255,.35); }
  #welcome { position:fixed; left:50%; top:24%; transform:translate(-50%,-20px); opacity:0; pointer-events:none; z-index:8; padding:12px 18px; text-align:center; max-width:420px; transition:all .4s; }
  #welcome.show { opacity:1; transform:translate(-50%,0); } #welcome b { color:var(--gold); font-size:15px; } #welcome p { margin:6px 0 0; font-weight:normal; }
  #c4 { left:50%; top:50%; transform:translate(-50%,-50%); width:362px; align-items:center; }
  #mem { left:50%; top:50%; transform:translate(-50%,-50%); width:356px; align-items:center; } #memst { font-size:13px; color:#fff; min-height:18px; } #memcv { cursor:pointer; image-rendering:pixelated; }
  .c4names { display:flex; gap:10px; width:100%; } .c4names div { flex:1; text-align:center; padding:5px; border:2px solid var(--edge); border-radius:8px; background:rgba(0,0,0,.25); }
  .c4names div.turn { outline:3px solid #fff; } .c4names i { display:inline-block; width:12px; height:12px; border-radius:50%; border:2px solid var(--edge); vertical-align:-2px; margin-right:4px; }
  #c4st { font-size:13px; color:#fff; min-height:18px; }
  #arcade { left:50%; top:50%; transform:translate(-50%,-50%); width:min(700px,96vw); }
  #arcade .wrap { display:flex; gap:12px; } #arcv { width:480px; height:360px; image-rendering:pixelated; border:4px solid var(--edge); border-radius:10px; background:#000; box-shadow:0 0 30px rgba(78,240,255,.25); }
  #arScores { flex:1; font-weight:normal; display:flex; flex-direction:column; gap:3px; } #arScores div { display:flex; gap:6px; } #arScores b { margin-left:auto; color:var(--gold); }
  #loginErr { color:#ffb0a0; font-weight:normal; min-height:14px; margin-top:6px; }
  #twLogin { width:100%; margin-top:8px; background:linear-gradient(180deg,#a47aff,#7046d8); color:#fff; }


  /* Moderation */
  #sMod { display:flex; flex-direction:column; gap:6px; border-top:2px dashed rgba(255,255,255,.2); padding-top:8px; }
  #sModList .mrow { display:flex; align-items:center; gap:6px; padding:3px 6px; background:rgba(0,0,0,.2); border-radius:6px; margin-top:3px; font-weight:normal; }
  #sModList .mrow button { margin-left:auto; padding:1px 8px; font-size:11px; }
  #pMod { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; } #pMod:empty { display:none; }
  #pMod .lbl { width:100%; font-size:11px; color:#ffd2a0; } #pMod button { padding:4px 8px; font-size:11px; }
  button.red { background:linear-gradient(180deg,#ff7a6a,#d8403a); color:#fff; }
  /* Schiffe versenken */
  #bs { left:50%; top:50%; transform:translate(-50%,-50%); width:min(530px,96vw); align-items:center; }
  .bsWrap { display:flex; gap:14px; } .bsHead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:3px; }
  #bs canvas { border:3px solid var(--edge); border-radius:8px; image-rendering:pixelated; } #bsEn { cursor:crosshair; }
  #bsSt { font-size:13px; min-height:18px; text-align:center; }

  /* Streamer-Merch */
  #merch { left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px,96vw); }
  .mWrap { display:flex; gap:14px; } .mStage { display:flex; flex-direction:column; align-items:center; gap:6px; }
  #mFig { width:150px; height:190px; border:3px solid var(--edge); border-radius:12px; background:radial-gradient(circle at 50% 35%, #6a5ad0, #2a2160 75%); image-rendering:pixelated; }
  .mInfo { flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; } #mName { font-size:16px; color:var(--gold); }
  #mPrice { font-size:15px; } #mEdit { display:flex; flex-direction:column; gap:5px; border-top:2px dashed rgba(255,255,255,.2); padding-top:8px; margin-top:4px; }
  .mSw { display:flex; flex-wrap:wrap; gap:4px; } .mSw i { width:20px; height:20px; border:2px solid var(--edge); border-radius:6px; cursor:pointer; } .mSw i.on { outline:3px solid #fff; }
  .merchDock { background:linear-gradient(180deg,#ff8ad0,#d84a9a) !important; color:#fff; }

  /* ---------- Handy & kleine Bildschirme ---------- */

  #likeBtn { padding:1px 6px; font-size:11px; border-width:2px; border-radius:10px; vertical-align:2px; margin-left:4px; } #likeBtn.on { background:linear-gradient(180deg,#ff7aa8,#e0457a); } #likeBtn:disabled { opacity:.75; cursor:default; }
  .roomRow .lk { font-size:11px; color:#ffb0cc; margin-right:4px; }
  .pGift { flex-basis:100%; display:flex; align-items:center; gap:6px; background:rgba(255,208,74,.12); border:2px solid var(--edge); border-radius:8px; padding:5px 8px; font-size:12px; }
  .pGift span { flex:1; } .pGift select { font:bold 12px Verdana,sans-serif; border:2px solid var(--edge); border-radius:6px; padding:3px; } .pGift button { padding:4px 10px; font-size:11px; }
  #pAch .lbl { font-size:11px; color:#c9d4ff; margin-bottom:4px; }
  .achGrid { display:flex; flex-wrap:wrap; gap:4px; } .ach { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:2px solid var(--edge); border-radius:6px; background:rgba(0,0,0,.25); filter:grayscale(1); opacity:.45; }
  .ach.done { filter:none; opacity:1; background:linear-gradient(180deg,#ffe08a,#f2a33a); } .ach i { font-style:normal; font-size:15px; }
  #pAch.self .achGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-height:190px; overflow:auto; } #pAch.self .ach { width:auto; height:auto; flex-direction:column; padding:4px 3px; filter:none; opacity:1; text-align:center; }
  #pAch.self .ach:not(.done) i { filter:grayscale(1); opacity:.5; } #pAch.self .ach b { font-size:10px; line-height:1.15; } #pAch.self .ach small { font-size:9px; font-weight:normal; } #pAch.self .ach.done small { color:#5a3a00; } #pAch.self .ach.done b { color:#3a2200; }
  .achBar { width:90%; height:4px; background:rgba(0,0,0,.4); border-radius:2px; overflow:hidden; margin-top:2px; } .achBar div { height:100%; background:var(--gold); }
  #pool { left:50%; top:50%; transform:translate(-50%,-50%); width:min(640px,98vw); align-items:center; }
  #poolCv { width:100%; max-width:600px; image-rendering:auto; border-radius:8px; border:3px solid var(--edge); touch-action:none; cursor:crosshair; }
  .poolHead { width:100%; display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:8px; align-items:center; } #poolSt { text-align:center; font-size:12px; }
  .pp { background:rgba(0,0,0,.25); border:2px solid var(--edge); border-radius:8px; padding:4px 8px; display:flex; flex-direction:column; font-size:12px; } .pp span { font-weight:normal; font-size:11px; display:flex; align-items:center; gap:4px; }
  .pp i { width:10px; height:10px; border-radius:50%; border:1px solid #1a1426; display:inline-block; } .pp.turn { border-color:var(--gold); box-shadow:0 0 0 2px rgba(255,208,74,.4); } #pp1 { text-align:right; } #pp1 span { justify-content:flex-end; }
  #poolHelp { font-weight:normal; color:#c9d4ff; }
  #player { position:fixed; left:14px; bottom:96px; z-index:9; width:360px; padding:6px; display:none; flex-direction:column; gap:5px; }
  #player.show { display:flex; } #player.big { width:min(720px,70vw); } #player.chat { width:560px; } #player.big.chat { width:min(960px,80vw); }
  .plHead { display:flex; align-items:center; gap:5px; } .plHead b { flex:1; font-size:12px; } .plHead button { padding:2px 7px; font-size:11px; }
  .plBody { display:flex; gap:5px; } #plVid { flex:1; aspect-ratio:16/9; background:#000; border-radius:6px; overflow:hidden; } #plVid iframe, #plChatBox iframe { width:100%; height:100%; border:0; }
  #plChatBox { display:none; width:190px; border-radius:6px; overflow:hidden; background:#18181b; } #player.chat #plChatBox { display:block; }
  .livePill { background:#e91916; color:#fff; font-size:9.5px; font-weight:800; padding:1px 6px; border-radius:6px; letter-spacing:.5px; animation: livePulse 1.6s ease-in-out infinite; white-space:nowrap; }
  @keyframes livePulse { 50% { opacity:.65; } }
  .card .deal.season { background:#2f9ad0; font-size:12px; }
  #fans { width:340px; } .fanHint { display:block; opacity:.75; margin:2px 0 8px; }
  .fanRow { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,.06); margin-bottom:4px; }
  .fanRow .fp { width:24px; text-align:center; font-weight:800; } .fanRow b { flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fanRow small { flex:1; opacity:.7; font-size:10px; white-space:nowrap; overflow:hidden; } .fanRow em { font-style:normal; font-weight:800; color:#ffd04a; }
  .fanRow.r0 { background:rgba(255,208,74,.18); } .fanRow.r1 { background:rgba(200,210,230,.14); } .fanRow.r2 { background:rgba(205,127,50,.16); }
  #fansObsBox { display:none; } #fansObsBox.on { display:block; position:fixed; left:12px; bottom:12px; width:300px; z-index:5; font-family:inherit; color:#fff; }
  #fansObsBox.on > b { display:block; background:#7a4ae0; padding:4px 10px; border-radius:8px 8px 0 0; } #fansObsBox.on .fanRow { background:rgba(20,16,48,.85); border-radius:0; margin:0; }
  #fansBtn { padding:1px 6px; font-size:11px; }
  #betBox { width:100%; display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:4px; } #betBox select { width:auto; padding:3px 6px; } #betBox button { padding:4px 10px; font-size:12px; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.4); }
  #shResolve button { flex:1; }
  .photoFlash { position:fixed; inset:0; background:#fff; z-index:50; pointer-events:none; animation: flash .5s ease-out forwards; } @keyframes flash { from { opacity:.85; } to { opacity:0; } }
  #photoBtn, #gbBtn { padding:1px 6px; font-size:11px; }
  /* Streamer-Aktionen */
  #show { right:14px; top:110px; width:320px; max-height:80vh; overflow:auto; }
  #show label.f { display:flex; flex-direction:column; gap:3px; font-size:11px; color:#c9d4ff; margin-top:6px; }
  #show input, #show select { font:bold 12px Verdana,sans-serif; border:3px solid var(--edge); border-radius:8px; padding:6px 8px; background:#f4f6ff; color:#1a1426; min-width:0; }
  #show .grid2 { margin-top:6px; } #showTabs { gap:4px; } #showTabs { flex-wrap:wrap; } #showTabs button { flex:1 1 40%; padding:6px 4px; font-size:11px; }
  #showInfo > b.shRun { font-size:20px; text-shadow:0 2px 0 #1a1426; }
  #show small { font-weight:normal; color:#dfe6ff; display:block; margin-top:6px; } #show code, #showBar code { background:rgba(0,0,0,.3); padding:1px 4px; border-radius:4px; }
  #shStart { margin-top:10px; width:100%; } #shRun { margin-top:10px; background:rgba(255,208,74,.15); border:2px solid var(--gold); border-radius:8px; padding:8px; } #shRun .row { gap:6px; margin-top:6px; }
  #showBar { position:fixed; left:50%; top:62px; transform:translate(-50%,-20px); opacity:0; pointer-events:none; z-index:7; padding:8px 14px; min-width:260px; max-width:min(520px,94vw); transition:all .35s; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; }
  #showBar.on { opacity:1; transform:translate(-50%,0); pointer-events:auto; }
  #showInfo { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 10px; } #showInfo > b { color:var(--gold); font-size:14px; }
  .shClock { background:rgba(0,0,0,.35); border-radius:10px; padding:2px 8px; font-size:12px; font-variant-numeric:tabular-nums; }
  .shSub { width:100%; font-weight:normal; font-size:11px; color:#dfe6ff; }
  .shOpts { width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:4px 10px; margin-top:2px; }
  .shO { display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:5px; font-size:12px; text-align:left; } .shO i { width:12px; height:12px; border:2px solid var(--edge); border-radius:3px; }
  .shO em { font-style:normal; color:var(--gold); } .shO.win span { color:var(--gold); } .shO.win { background:rgba(255,208,74,.18); border-radius:6px; }
  .shBar { grid-column:1/-1; height:5px; background:rgba(0,0,0,.35); border-radius:3px; overflow:hidden; } .shBar div { height:100%; transition:width .4s; }
  #showJoin { padding:6px 16px; animation:pulseJ 1.2s infinite; } @keyframes pulseJ { 50% { transform:scale(1.06); } }
  .shBoard { width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px; font-size:12px; margin-top:3px; } .shBoard em { font-style:normal; color:var(--gold); }
  #showIn { font-size:12px; color:#7aff9a; } .coin.sm { width:12px; height:12px; border-width:2px; display:inline-block; vertical-align:-1px; }
  @media (max-width:760px) {
    #show { left:6px; right:6px; width:auto; top:60px; } #showBar { top:54px; }
    #player, #player.big, #player.chat { left:6px; right:6px; width:auto; bottom:150px; } #plChatBox { display:none !important; }
    #room { left:8px; top:8px; width:min(58vw,240px); }
    #roomHead .s { display:none; } #log { max-height:74px; font-size:11px; }
    #wallet { right:8px; top:8px; font-size:13px; } #topBtns { right:8px; top:50px; } #topBtns button { padding:4px 7px; font-size:12px; }
    #meBtn { font-size:0 !important; } #meBtn::before { content:'👤'; font-size:14px; }
    #bar { left:6px; right:6px; bottom:6px; transform:none; flex-wrap:wrap; gap:5px; padding:6px; }
    #chatbox { width:100%; } #msg { flex:1; width:auto; } .sep { display:none; }
    #bar .dockBtn { flex:1 1 0; min-width:0; padding:4px 2px; } .dockBtn em { font-size:9px; } .dockBtn i { font-size:18px; }
    .dockBtn em { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #bar.crowded .dockBtn em { display:none; } #bar.crowded .dockBtn { padding:7px 1px; } #bar.crowded .dockBtn i { font-size:21px; }
    #brand, #hint2 { display:none; }
    #twitch { top:auto; bottom:128px; right:6px; width:180px; } #twitch:not(.min) .g2 button { font-size:10px; }
    .panel { left:6px !important; right:6px !important; width:auto !important; max-width:none !important; transform:none !important; top:60px !important; max-height:calc(100vh - 200px); overflow:auto; }
    #c4, #mem, #bs, #arcade { top:50% !important; transform:translateY(-50%) !important; }
    .bsWrap { flex-direction:column; align-items:center; gap:6px; } #bs canvas { width:200px; height:200px; }
    .mWrap { flex-direction:column; align-items:center; } #arcade .wrap { flex-direction:column; } #arcv { width:100%; height:auto; }
    #modal { width:100vw; height:100vh; height:100dvh; left:0; top:0; transform:none; border-radius:0; grid-template-columns:1fr; grid-template-rows:auto 1fr auto; padding:8px; gap:6px; }
    #mLeft { flex-direction:row; flex-wrap:wrap; justify-content:center; overflow:visible; } #mLeft h2 { width:100%; text-align:center; margin:0; font-size:16px; }
    #prev { width:96px; height:120px; } #detail { flex:1; min-width:140px; font-size:12px; }
    #tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; } #tabs button { flex:none; padding:5px 8px; font-size:12px; }
    #grid { grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); }
    #mFoot { grid-column:1; } #modal { box-sizing:border-box; max-width:100vw; } #mRight { min-height:0; overflow:hidden; } #mLeft { min-width:0; } #swatches { margin-top:4px; } .sw { width:22px; height:22px; }
    #invites { left:6px; right:6px; }
    #toasts { width:92vw; top:auto; bottom:140px; } .toast { font-size:12px; text-align:center; }
    #c { touch-action:none; }
  }

  /* Tagesaufgaben */
  #quests { right:14px; top:110px; width:320px; }
  .qRow { display:flex; flex-direction:column; gap:4px; padding:8px; border:2px solid var(--edge); border-radius:8px; background:rgba(0,0,0,.22); }
  .qRow.done { background:rgba(60,180,75,.25); } .qRow b { font-size:13px; } .qRow small { color:#c9d4ff; font-weight:normal; }
  .qBar { height:10px; border:2px solid var(--edge); border-radius:6px; background:#1a2550; overflow:hidden; } .qBar i { display:block; height:100%; background:linear-gradient(180deg,#ffe07a,#f5a524); }
  .qRow.done .qBar i { background:linear-gradient(180deg,#8aff9a,#3cb44b); }
  #qList { display:flex; flex-direction:column; gap:6px; } #qFoot { font-size:12px; text-align:center; }
  #qBtn.fresh { animation:bump .6s 3; }

.presets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.presets button { padding: 3px 8px; font-size: 12px; }
.presets button.sure { background: #e8a33c; color: #2a1a05; border-color: #e8a33c; }

#streak { margin: 8px 0 10px; padding: 8px; border-radius: 10px; background: rgba(255,140,40,.12); border: 1px solid rgba(255,160,60,.35); }
#streak .stTitle { font-size: 13px; margin-bottom: 6px; }
#streak .stRow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.stDay { text-align: center; border-radius: 6px; padding: 3px 0; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.12); font-size: 10px; opacity: .6; }
.stDay b { display: block; font-size: 11px; color: #ffd34d; }
.stDay.on { opacity: 1; background: linear-gradient(#ff9a3c, #e0602a); border-color: #ffc070; }
.stDay.on b { color: #fff; }
.stDay.now { box-shadow: 0 0 0 2px #fff6, 0 0 10px #ff9a3c; }

#trade { width: min(560px, 94vw); inset: 0; margin: auto; height: fit-content; max-height: 92vh; z-index: 40; }
#trade .trCols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
#trade .trCol { background: rgba(0,0,0,.2); border-radius: 10px; padding: 8px; min-height: 160px; }
#trade .trCol.them { background: rgba(80,160,255,.1); }
#trade .lbl { font-weight: bold; margin-bottom: 6px; display: flex; justify-content: space-between; }
#trade .trState { font-weight: normal; font-size: 12px; color: #9ef09e; }
#trade .trGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; max-height: 230px; overflow-y: auto; }
.trItem { border-radius: 8px; padding: 2px 2px 4px; text-align: center; cursor: pointer; border: 2px solid transparent; image-rendering: pixelated; }
.trItem canvas { display: block; margin: 0 auto; }
.trItem b { display: block; font-size: 10px; line-height: 1.15; }
.trItem.sel { border-color: #ffd34d; box-shadow: 0 0 8px #ffd34d88; }
.trCol.them .trItem { cursor: default; }
#trade .trLumis { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: #ffd34d; }
#trade .trLumis input { width: 90px; }
#trade .trWarn { color: #ffb070; font-size: 13px; min-height: 16px; }
#trade.confirm #trOk:not(:disabled) { animation: trPulse 1s infinite; }
@keyframes trPulse { 50% { box-shadow: 0 0 14px #ffd34d; } }

#recap { width: min(520px, 94vw); inset: 0; margin: auto; height: fit-content; max-height: 92vh; overflow-y: auto; z-index: 38; }
.rcHead { font-size: 13px; color: #c9d4ff; }
.rcGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rcTile { background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 6px 4px; text-align: center; }
.rcTile i { font-style: normal; font-size: 18px; display: block; }
.rcTile b { display: block; font-size: 20px; color: #fff; }
.rcTile span { font-size: 11px; color: #c9d4ff; }
.rcTile.hot { background: linear-gradient(160deg, rgba(169,112,255,.45), rgba(60,30,120,.5)); border-color: #b98cff; }
.rcRaids { font-size: 13px; }
.rcTop { background: rgba(0,0,0,.2); border-radius: 10px; padding: 8px; }
.rcTop .lbl { font-weight: bold; margin-bottom: 4px; }
.rcFan { display: flex; gap: 6px; align-items: center; padding: 3px 0; }
.rcFan span { margin-left: auto; color: #ffd34d; font-size: 12px; }
#recapNav { justify-content: space-between; align-items: center; }

.nextPill { display: inline-block; font-size: 10px; font-weight: bold; padding: 1px 6px; border-radius: 8px; background: #2c3e7a; color: #cfe0ff; border: 1px solid #6f8fe0; vertical-align: 2px; white-space: nowrap; }
#sNext { flex: 1; }

#tut { pointer-events: none; position: fixed; z-index: 60; width: min(320px, 90vw); padding: 12px 14px; animation: pop .25s cubic-bezier(.2,1.5,.4,1); border: 2px solid var(--gold); }
#tut b { color: var(--gold); font-size: 16px; text-shadow: 2px 2px 0 var(--edge); }
#tut p { margin: 6px 0 10px; font-size: 13px; line-height: 1.4; }
#tut .tutN { float: right; font-size: 11px; opacity: .7; }
#tut .tutWait { font-size: 12px; color: #c9d4ff; align-self: center; margin-right: auto; }
#tutArrow { position: fixed; z-index: 61; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; pointer-events: none; animation: tutBob .8s ease-in-out infinite alternate; }
#tutArrow.down { border-top: 16px solid var(--gold); }
#tutArrow.up { border-bottom: 16px solid var(--gold); }
@keyframes tutBob { to { transform: translateY(6px); } }
#tut button { pointer-events: auto; }

#gbook { width: min(400px, 94vw); right: 16px; top: 120px; max-height: 70vh; }
#gbWrite { display: flex; gap: 6px; } #gbText { flex: 1; resize: none; font: inherit; border-radius: 8px; padding: 6px; border: 2px solid var(--edge); }
#gbList { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.gbE { display: flex; gap: 8px; align-items: flex-start; background: rgba(0,0,0,.2); border-radius: 10px; padding: 6px; position: relative; }
.gbHead { width: 40px; height: 40px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.08); flex: none; }
.gbHead canvas { margin-top: -2px; image-rendering: pixelated; }
.gbB { min-width: 0; padding-right: 30px; } .gbB p { margin: 2px 0 0; font-size: 13px; word-wrap: break-word; } .gbB small { opacity: .7; }
.gbDel { position: absolute; right: 6px; top: 6px; padding: 0 6px; font-size: 12px; }

#annBox { display: flex; gap: 6px; } #annText { flex: 1; } #annSend { padding: 4px 10px; }
#note { width: min(380px, 92vw); inset: 0; margin: auto; height: fit-content; z-index: 40; }
#note .noteText { white-space: pre-wrap; background: #fff6c8; color: #3a2a10; border-radius: 6px; padding: 12px 14px; margin: 8px 0; font-size: 14px; line-height: 1.45; box-shadow: 3px 3px 0 rgba(0,0,0,.25); min-height: 60px; }
#note textarea { width: 100%; box-sizing: border-box; background: #fff6c8; color: #3a2a10; border: 0; border-radius: 6px; padding: 10px 12px; font: 14px/1.45 Verdana, sans-serif; resize: vertical; margin: 8px 0; }
#note .row { justify-content: space-between; align-items: center; }
#outfits .lbl { font-size: 12px; opacity: .8; margin: 8px 0 4px; text-align: center; }
#outfits .ofRow { display: flex; gap: 6px; justify-content: center; }
#outfits .ofSlot { position: relative; width: 52px; height: 64px; border-radius: 8px; background: rgba(0,0,0,.25); border: 2px solid rgba(255,255,255,.15); cursor: pointer; display: flex; align-items: center; justify-content: center; }
#outfits .ofSlot:hover { border-color: #ffd34d; }
#outfits .ofSlot.empty span { font-size: 20px; opacity: .4; }
#outfits .ofSlot.empty canvas { display: none; }
#outfits button.ofSave { position: absolute; right: -7px; bottom: -7px; padding: 0; width: 20px; height: 20px; font-size: 10px; line-height: 20px; min-width: 0; border-radius: 6px; box-shadow: none; }
#navSearch { width: 100%; box-sizing: border-box; margin: 6px 0 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.25); color: #fff; font: 14px Verdana, sans-serif; }
#navTabs.dim { opacity: .45; }
#wheel { width: 320px; inset: 0; margin: auto; height: fit-content; z-index: 40; text-align: center; }
#wheel canvas { display: block; margin: 4px auto; }
#wheel #whMsg { margin: 4px 0 8px; min-height: 20px; }
#wheel .row { justify-content: center; }
#wheelBtn { width: 100%; margin: 6px 0; }

button.mini { padding: 4px 8px; font-size: 11px; margin: 4px 0 0; }
#bAll { align-self: flex-start; }

/* Stream-Ton: kleiner Player. Das Bild bleibt sichtbar (Twitch verlangt das), ist aber auf die Hälfte verkleinert. */
#player.mini { width:212px; } #player.mini #plChat, #player.mini #plSize { display:none; }
#player.mini #plVid { flex:none; width:200px; height:150px; aspect-ratio:auto; }
#player.mini #plVid iframe { width:400px; height:300px; transform:scale(.5); transform-origin:0 0; }
#audioBtn.on { background:linear-gradient(#9b6cff,#7a4ae0); color:#fff; }
#arTabs { margin-bottom:6px; flex-wrap:wrap; }

#sExpand { font-weight:normal; font-size:12px; line-height:1.5; } .exBar { display:block; height:8px; background:rgba(0,0,0,.35); border-radius:4px; overflow:hidden; margin:3px 0; } .exBar i { display:block; height:100%; background:linear-gradient(90deg,#9b6cff,#ff4fd8); }
label.btn { font:inherit; font-weight:bold; cursor:pointer; display:inline-block; }

#c { image-rendering:pixelated; }
#zoomBox { position:fixed; left:14px; bottom:92px; z-index:8; display:flex; align-items:center; gap:4px; padding:3px 5px; font-size:11px; } #zoomBox button { padding:0 7px; font-size:14px; line-height:18px; } #zoomN { min-width:36px; text-align:center; }
body.obs #zoomBox { display:none; } @media (max-width:760px) { #zoomBox { bottom:150px; left:6px; } }
@media (min-width:761px) { #player { bottom:128px; } }

#refPanel { left:50%; top:50%; transform:translate(-50%,-50%); width:min(420px,94vw); display:none; flex-direction:column; gap:8px; } #refPanel.show { display:flex; }
#refStats { font-size:14px; } .refList { display:flex; flex-direction:column; gap:3px; font-weight:normal; font-size:12px; } .refList div { display:flex; justify-content:space-between; gap:8px; } .refList b { color:var(--gold); } .refList .done span { color:#7aff7a; }
#refBtn { align-self:stretch; margin:0 0 6px; }
.twDiag { display:block; background:rgba(0,0,0,.25); border-radius:6px; padding:5px 7px; margin:4px 0; line-height:1.5; } .twDiag a { color:var(--gold); }

  /* ---------- Shop im neuen Kleid ---------- */
  #modal.shop { background:linear-gradient(180deg,rgba(46,32,96,.97),rgba(18,22,58,.97)); }
  #modal.shop #mRight { background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 14px,transparent 14px 28px); border-radius:6px; padding:6px; }
  .shopWallet { float:right; font-size:14px; color:#fff; background:rgba(0,0,0,.35); border:2px solid #0b1229; border-radius:12px; padding:2px 10px 2px 6px; text-shadow:none; }
  #tabs .tabGold { background:linear-gradient(180deg,#ffd76a,#e09a1c); color:#3a2400; border-color:#0b1229; text-shadow:none; }
  #tabs .tabGold.ghost { background:rgba(240,170,40,.18); color:#ffd76a; }
  #modal.shop #grid { grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:10px; padding:4px; }
  .card.shopCard, .card.pack { border-radius:8px; border-width:3px; transition:transform .12s, filter .12s; overflow:hidden; box-shadow:inset 0 -30px 0 rgba(0,0,0,.4), 0 3px 0 #0b1229; }
  .card.shopCard:hover, .card.pack:hover { transform:translateY(-3px); filter:brightness(1.12); }
  .card.shopCard::before, .card.pack::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.35),transparent 60%); pointer-events:none; }
  .card.shopCard canvas, .card.pack canvas { position:relative; }
  .card.r-episch.shopCard { border-color:#d9a8ff; } .card.r-selten.shopCard { border-color:#9cc8ff; }
  .card.r-legendaer.shopCard { border-color:#ffe08a; }
  .card.r-legendaer.shopCard::after { content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); animation:shine 3.2s infinite; pointer-events:none; }
  @keyframes shine { 0%,55% { left:-60%; } 100% { left:130%; } }
  .card .rib { position:absolute; right:-22px; top:9px; transform:rotate(45deg); width:84px; font-size:9px; padding:1px 0; text-align:center; border-top:1px solid rgba(255,255,255,.5); border-bottom:1px solid rgba(0,0,0,.4); text-shadow:1px 1px 0 rgba(0,0,0,.6); }
  .card.shopCard .n { font-size:12px; position:relative; } .card.shopCard .p { font-size:12px; position:relative; }
  .card.shopCard .deal { font-size:11px; padding:2px 6px; border-radius:3px; border:2px solid #0b1229; transform:rotate(-6deg); }
  .card.pack { grid-column:span 1; background:linear-gradient(160deg,#5a48c8,#241a66); border-color:#b9a8ff; padding-bottom:8px; }
  .card.pack.p-crate { background:linear-gradient(160deg,#2f9ad0,#12406e); border-color:#9cdcff; }
  .card.pack.p-chest { background:linear-gradient(160deg,#b35ae0,#4a1a7a); border-color:#e6b8ff; }
  .card.pack.p-vault { background:linear-gradient(160deg,#f0b030,#8a4a08); border-color:#ffe9a0; }
  .card.pack.p-bag { background:linear-gradient(160deg,#3fae72,#145236); border-color:#a8f0c8; }
  .card.pack .pkN { font-size:12px; position:relative; }
  .card.pack .pkL { position:relative; font-size:15px; color:#fff; text-shadow:1px 1px 0 #000; margin:1px 0 3px; }
  .card.pack .pkP { position:relative; display:inline-block; background:#fff; color:#4a1f9a; font-size:12px; border:2px solid #0b1229; border-radius:10px; padding:1px 8px; }
  .card.pack .bonus { background:#2fa86a; left:5px; top:5px; font-size:11px; padding:2px 6px; border:2px solid #0b1229; border-radius:3px; transform:rotate(-6deg); }
  .card.pack .pkTag { position:absolute; right:-24px; top:10px; transform:rotate(45deg); width:96px; font-size:9px; background:#e8453c; padding:1px 0; text-shadow:1px 1px 0 rgba(0,0,0,.5); }
  .bitsI { vertical-align:-2px; } .pkBig { font-size:17px; color:#ffd04a; } .pkBits { font-size:13px; }
  #modal.shop #grid:has(.pack) { grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); }
  #modal.shop #grid { grid-auto-rows:max-content; }
  @media (min-width:761px) { #modal.shop #prev { width:176px; height:220px; } }
  @media (max-width:760px) { #modal.shop #prev { width:72px; height:90px; } #modal.shop #mLeft { max-height:38vh; } }
  #modal.shop #detail small { font-weight:normal; line-height:1.35; }
  #detail a.btn { font:inherit; font-weight:bold; display:inline-block; text-decoration:none; color:#3a2400; background:linear-gradient(180deg,#ffd76a,#e09a1c); border:3px solid #0b1229; border-radius:6px; padding:7px 12px; box-shadow:0 3px 0 #0b1229; }
  #login .legal { display:block; margin-top:8px; font-size:10px; opacity:.85; } #login .legal a { color:#ffd04a; }
  .card.pack.p-hill { background:linear-gradient(160deg,#ff7a5a,#7a1a2a); border-color:#ffc0a8; }
  .card.pack.p-hoard { background:linear-gradient(160deg,#ffe27a,#c9801a 55%,#5a2a08); border-color:#fff3b8; }
  .card.pack.p-hoard::after { content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); animation:shine 3.2s infinite; pointer-events:none; }
  #login .twHint { display:none; } body.twOnly #login #name, body.twOnly #login #go { display:none; } body.twOnly #login .twHint { display:block; } body.twOnly #twLogin { font-size:15px; padding:13px 12px; width:100%; }
  .emo { height:20px; vertical-align:-5px; image-rendering:auto; }
  #chatbox { position:relative; } #twEmoBtn { position:absolute; right:52px; top:50%; transform:translateY(-50%); padding:2px 5px; font-size:15px; background:none; border:none; box-shadow:none; }
  body:has(#twEmoBtn:not([style*="none"])) #msg { padding-right:34px; }
  #twEmoPick { display:none; position:fixed; bottom:84px; left:50%; transform:translateX(-50%); width:min(360px,94vw); max-height:230px; overflow:auto; padding:8px; z-index:25; }
  #twEmoPick.show { display:block; } #twEmoPick small { display:block; color:#c9d4ff; font-weight:normal; margin-bottom:6px; white-space:normal; }
  #twEmoPick > div { display:flex; flex-wrap:wrap; gap:4px; }
  .emoB { position:relative; padding:3px; min-width:36px; height:36px; background:rgba(0,0,0,.3); border-width:2px; color:#fff; font-size:10px; box-shadow:none; }
  .emoB img { height:26px; display:block; margin:auto; } .emoB.lock img { opacity:.35; filter:grayscale(1); } .emoB i { position:absolute; right:1px; bottom:0; color:#ffd04a; font-style:normal; font-size:11px; }
  @media (max-width:760px) { #twEmoPick { bottom:140px; } }
  @media (min-width:761px) and (max-width:1280px) { #msg { width:min(250px,22vw); } #bar .dockBtn { padding-left:7px; padding-right:7px; } #bar .dockBtn em { font-size:10px; } #bar { max-width:100vw; box-sizing:border-box; } }
  /* Twitch verlangt für eingebettete Player mindestens 400×300 Pixel und Sichtbarkeit */
  @media (min-width:761px) { #player:not(.mini):not(.big) { width:412px; } #player:not(.mini):not(.big).chat { width:612px; } #player:not(.mini):not(.big) #plVid { aspect-ratio:auto; height:300px; } }

  /* Monetarisierung: Status-Stufen, Saison-Pfad, Erstkauf */
  .card .deal.first { background:#ffd04a; color:#3a2400; text-shadow:none; }
  .card.pack .pkL s, .card .p s { opacity:.6; font-size:.8em; }
  .tierRow { flex:0 0 100%; width:100%; grid-column:1/-1; background:rgba(255,255,255,.06); border:2px solid #0b1229; border-radius:6px; padding:6px 10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .tierRow.on { background:rgba(240,170,40,.2); } .tierRow span { margin-left:auto; color:#ffd76a; font-size:12px; }
  .passHead { grid-column:1/-1; flex:0 0 100%; width:100%; display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:rgba(255,255,255,.06); border:2px solid #0b1229; border-radius:6px; padding:8px 10px; }
  .passBar { flex:1 1 140px; height:12px; background:#0b1229; border-radius:6px; overflow:hidden; } .passBar i { display:block; height:100%; background:linear-gradient(90deg,#ffd76a,#e09a1c); }
  .passInfo { grid-column:1/-1; flex:0 0 100%; width:100%; font-size:12px; color:#ffd76a; padding:2px 4px; }
  .passLvl { min-height:74px; background:rgba(255,255,255,.05); border:2px solid #0b1229; border-radius:6px; padding:4px; display:flex; flex-direction:column; gap:2px; font-size:11px; text-align:center; opacity:.75; }
  .passLvl.on { opacity:1; background:rgba(60,180,75,.22); } .passLvl.gift { border-color:#e09a1c; } .passLvl b { font-size:14px; } .passLvl .pr { color:#ffd76a; } .passLvl .pr.off { opacity:.55; }
  .card .mkBy { font-size:10px; opacity:.8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mkSell { display:flex; flex-direction:column; gap:5px; margin-top:8px; padding-top:8px; border-top:2px solid rgba(255,255,255,.15); width:100%; }
  .mkSell select, .mkSell input { width:100%; padding:5px; border-radius:4px; border:2px solid #0b1229; background:#1a2348; color:#fff; font:inherit; }
  /* Kisten */
  .crateHead canvas { image-rendering:pixelated; } .crateHead .crTxt { flex:1 1 220px; }
  #crate { position:fixed; inset:0; z-index:400; display:none; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:rgba(6,8,22,.88); }
  #crate.show { display:flex; }
  .crTitle { font-size:22px; font-weight:bold; color:#ffd76a; text-shadow:2px 2px 0 #000; }
  .crWin { position:relative; width:min(760px,94vw); height:158px; overflow:hidden; border:3px solid #0b1229; border-radius:8px; background:#141a38; box-shadow:0 0 0 2px #ffd76a55, inset 0 0 40px #000; }
  .crMark { position:absolute; left:50%; top:0; bottom:0; width:4px; margin-left:-2px; background:#ffd04a; z-index:2; box-shadow:0 0 12px #ffd04a; }
  .crBand { display:flex; position:absolute; left:0; top:8px; will-change:transform; }
  .crTile { flex:0 0 116px; width:116px; margin:0 4px; height:140px; border:3px solid; border-radius:6px; text-align:center; overflow:hidden; }
  .crTile canvas { image-rendering:pixelated; display:block; margin:0 auto; } .crTile .crN { font-size:10px; margin-top:-4px; text-shadow:1px 1px 0 #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 2px; }
  .crTile.hit { animation:crHit .5s ease-out 2; box-shadow:0 0 24px #fff6c0; } @keyframes crHit { 50% { transform:scale(1.08); filter:brightness(1.5); } }
  .crRow { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; min-height:146px; } .crTile.pop { animation:crPop .45s cubic-bezier(.2,1.6,.4,1); margin:0; } @keyframes crPop { from { transform:scale(.2) translateY(-60px); opacity:0; } }
  #crBig { image-rendering:pixelated; } #crBig.open { animation:crHit .4s ease-out; }
  .crResult { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; } .crResult b { font-size:20px; } .crBtns { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:4px; }
  #crate.big .crWin { box-shadow:0 0 0 2px #ffd76a, 0 0 60px #ffd04a88, inset 0 0 40px #000; }