/* ── Stadt-Hub Klassen (rendereStadtHub in ui.js) ── */
.city-hub{padding:4px 0;}
.city-hub-header{text-align:center;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.city-hub-header h3{font-family:var(--font-title);font-size:20px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-1);}

/* ── Shop Popup ── */
.popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:400;backdrop-filter:blur(3px);}
.popup-box{background:var(--bg-surface);border:1px solid var(--border-em);border-top:2px solid var(--gold);border-radius:var(--r-lg);width:340px;max-width:95vw;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;}
.popup-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;border-bottom:1px solid var(--border);flex-shrink:0;}
.popup-header h3{font-family:var(--font-title);font-size:18px;font-weight:700;letter-spacing:.5px;color:var(--text-1);}
.popup-header button{background:transparent;border:1px solid var(--border-em);color:var(--text-2);font-size:16px;width:28px;height:28px;border-radius:var(--r-sm);cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;line-height:1;font-family:var(--font-ui);}
.popup-header button:hover{background:var(--bg-raised);color:var(--text-1);}
#shopItemList{overflow-y:auto;padding:10px 16px 16px;flex:1;}
#shopItemList::-webkit-scrollbar{width:3px;}
#shopItemList::-webkit-scrollbar-thumb{background:var(--border-em);}

/* ── Gebäude-Popup ── */
#gebaeudeBody{overflow-y:auto;padding:12px 16px 16px;flex:1;}
#gebaeudeBody::-webkit-scrollbar{width:3px;}
#gebaeudeBody::-webkit-scrollbar-thumb{background:var(--border-em);}
.gebaeude-leer{color:var(--text-3);font-size:13px;text-align:center;padding:18px 4px;}

/* ── Spielhalle ── */
#spielhalleBody{overflow-y:auto;padding:12px 16px 16px;flex:1;}
#spielhalleBody::-webkit-scrollbar{width:3px;}
#spielhalleBody::-webkit-scrollbar-thumb{background:var(--border-em);}
.sh-wallet{display:flex;align-items:center;gap:10px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 10px;margin-bottom:10px;}
.sh-wallet span{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.8px;}
.sh-wallet b{font-family:var(--font-mono);font-size:16px;color:#ffd24a;flex:1;}
.sh-wallet-geld{font-family:var(--font-mono);color:var(--gold)!important;font-size:12px!important;text-transform:none!important;}
.sh-hinweis{color:var(--text-2);font-size:13px;text-align:center;padding:14px 4px;}
.sh-status{font-size:12px;min-height:16px;margin-bottom:8px;text-align:center;color:var(--text-2);}
.sh-status.ok{color:var(--green);}
.sh-status.warn{color:var(--red);}
.sh-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.sh-row:last-child{border-bottom:none;}
.sh-row-info{flex:1;display:flex;flex-direction:column;}
.sh-row-info b{font-size:14px;color:var(--text-1);}
.sh-row-info small{font-size:11px;color:var(--text-3);}
.sh-row-preis{font-family:var(--font-mono);font-size:13px;color:#ffd24a;}
.sh-row button{padding:6px 12px;border-radius:var(--r-sm);background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--font-title);font-size:12px;font-weight:700;transition:opacity .15s;}
.sh-row button:disabled{opacity:.35;cursor:not-allowed;}
.sh-row button:hover:not(:disabled){opacity:.85;}
.sh-link{display:block;width:100%;margin-top:12px;padding:9px;background:transparent;border:1px solid var(--border-em);color:var(--text-2);border-radius:var(--r-sm);cursor:pointer;font-family:var(--font-ui);font-size:13px;}
.sh-link:hover:not(:disabled){background:var(--bg-raised);color:var(--text-1);}
.sh-btn-gross{display:block;width:100%;margin-top:12px;padding:11px;background:var(--red);border:none;color:#fff;border-radius:var(--r-sm);cursor:pointer;font-family:var(--font-title);font-weight:700;font-size:14px;}
/* Spielautomat */
.slot-maschine{background:linear-gradient(180deg,#2a1010,#140808);border:2px solid var(--gold);border-radius:var(--r-md);padding:14px;margin:4px 0 10px;box-shadow:0 0 18px rgba(245,197,24,.15) inset;}
.slot-fenster{position:relative;background:#0b0d11;border:2px solid #3a2a0a;border-radius:6px;padding:6px 4px;overflow:hidden;}
.slot-row{display:flex;justify-content:space-around;align-items:center;height:46px;}
.slot-row span{font-size:30px;width:33%;text-align:center;filter:drop-shadow(0 1px 1px #000);}
.slot-row-pay{height:54px;}
.slot-row-pay span{font-size:38px;}
.slot-row-pay span.blur{filter:blur(1.5px);opacity:.85;}
.slot-payline{position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-1px);background:rgba(224,48,48,.55);box-shadow:0 0 6px var(--red);pointer-events:none;}
.slot-row:not(.slot-row-pay){opacity:.45;}
.slot-meldung{text-align:center;font-family:var(--font-title);font-size:14px;font-weight:600;letter-spacing:.4px;color:var(--text-2);min-height:20px;margin-bottom:10px;}
.slot-meldung.gewinn{color:#ffd24a;text-shadow:0 0 8px rgba(245,197,24,.4);}
.sh-einsatz-zeile{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;}
.sh-einsatz-zeile span{font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.6px;}
.sh-bet{width:34px;height:34px;border-radius:var(--r-sm);background:var(--bg-raised);border:1px solid var(--border-em);color:var(--text-2);font-family:var(--font-title);font-weight:700;font-size:15px;cursor:pointer;transition:.15s;}
.sh-bet.aktiv{background:var(--gold);color:#1a1400;border-color:var(--gold);}
.sh-bet:disabled{opacity:.4;cursor:not-allowed;}
.slot-spin-btn{display:block;width:100%;padding:13px;background:var(--red);border:none;color:#fff;border-radius:var(--r-sm);cursor:pointer;font-family:var(--font-title);font-weight:700;font-size:17px;letter-spacing:1px;transition:opacity .15s,transform .1s;}
.slot-spin-btn:hover:not(:disabled){opacity:.9;}
.slot-spin-btn:active:not(:disabled){transform:scale(.98);}
.slot-spin-btn:disabled{opacity:.45;cursor:not-allowed;}
.sh-tabelle{margin-top:12px;border-top:1px solid var(--border);padding-top:8px;}
.sh-tabelle summary{font-size:12px;color:var(--text-3);cursor:pointer;text-transform:uppercase;letter-spacing:.6px;}
.sh-tabelle table{width:100%;margin-top:8px;border-collapse:collapse;}
.sh-tabelle td{padding:3px 4px;font-size:14px;color:var(--text-2);}
.sh-tabelle td:last-child{text-align:right;font-family:var(--font-mono);color:#ffd24a;}
.sh-tabelle small{display:block;margin-top:6px;color:var(--text-3);font-size:11px;}

/* ── Pokédex ── */
.dex-header{padding:4px 0 12px;border-bottom:1px solid var(--border);margin-bottom:12px;}
.dex-counts{display:flex;align-items:center;gap:14px;margin-bottom:8px;}
.dex-count-item{font-size:13px;color:var(--text-2);}
.dex-count-item{display:inline-flex;align-items:center;gap:4px;}
.dex-count-item b{color:var(--text-1);}
.dex-shiny-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:4px;background:var(--bg-raised);border:1px solid var(--border-em);color:var(--text-2);border-radius:var(--r-sm);padding:4px 10px;font-size:13px;cursor:pointer;transition:.15s;}
.dex-shiny-toggle b{color:#ffd24a;}
.dex-shiny-toggle:hover{background:var(--bg-hover);color:var(--text-1);}
.dex-shiny-toggle.aktiv{background:var(--gold-dim);border-color:rgba(245,197,24,.5);color:#ffd24a;box-shadow:0 0 8px rgba(245,197,24,.2);}
.dex-progress-bar{height:4px;background:var(--bg-active);border-radius:2px;overflow:hidden;}
.dex-progress-fill{height:100%;background:var(--red);border-radius:2px;transition:width .5s;}
.dex-regionen{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.dex-reg-tab{padding:5px 11px;border-radius:999px;border:1px solid var(--border-em);background:var(--bg-raised);color:var(--text-2);font-family:var(--font-ui);font-size:11px;font-weight:600;cursor:pointer;transition:.15s;}
.dex-reg-tab:hover{background:var(--bg-hover);color:var(--text-1);}
.dex-reg-tab.aktiv{background:var(--red);border-color:var(--red);color:#fff;}
.dex-shiny-mark{position:absolute;top:2px;left:3px;font-size:10px;line-height:1;pointer-events:none;filter:drop-shadow(0 0 2px rgba(245,197,24,.8));}
.dex-entry-shiny{border-width:1px;box-shadow:0 0 8px rgba(245,197,24,.15);}
.dex-shiny-empty{width:100%;text-align:center;padding:30px 12px;color:var(--text-2);font-style:normal;}
.dex-shiny-empty small{display:block;margin-top:8px;color:var(--text-3);}

.dex-grid{display:flex;flex-wrap:wrap;gap:6px;}
.dex-entry{width:70px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 4px;text-align:center;cursor:pointer;transition:.15s;position:relative;}
.dex-entry:hover{background:var(--bg-raised);transform:scale(1.05);}
.dex-unseen{opacity:.4;}
.dex-seen{opacity:.75;}
.dex-caught{opacity:1;}
.dex-num{font-family:var(--font-mono);font-size:8px;color:var(--text-3);margin-bottom:2px;}
.dex-sprite{width:46px;height:46px;image-rendering:pixelated;display:block;margin:0 auto;}
.dex-unknown{width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-3);margin:0 auto;background:var(--bg-raised);border-radius:4px;}
.dex-silhouette{filter:brightness(0);}
.dex-name{font-size:9px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.dex-pokeball{position:absolute;top:2px;right:3px;line-height:1;}
.dex-ball-icon{width:13px;height:13px;image-rendering:pixelated;vertical-align:-2px;}
.dex-pokeball .dex-ball-icon{width:12px;height:12px;display:block;}

/* Detail-Overlay */
.dex-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:600;backdrop-filter:blur(3px);padding:8px;}
.dex-detail-box{background:var(--bg-surface);border:1px solid var(--border-em);border-top:2px solid var(--red);border-radius:var(--r-lg);width:480px;max-width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;}
.dex-detail-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;}
.dex-detail-titlerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.dex-detail-num{font-family:var(--font-mono);font-size:12px;color:var(--text-3);}
.dex-detail-name{font-family:var(--font-title);font-size:20px;font-weight:700;letter-spacing:.5px;color:var(--text-1);}
.dex-close-btn{background:transparent;border:1px solid var(--border-em);color:var(--text-2);font-size:16px;width:30px;height:30px;border-radius:var(--r-sm);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.dex-close-btn:hover{background:var(--bg-raised);color:var(--text-1);}
.dex-detail-body{display:flex;gap:0;overflow-y:auto;flex:1;}
.dex-detail-body::-webkit-scrollbar{width:3px;}
.dex-detail-body::-webkit-scrollbar-thumb{background:var(--border-em);}
.dex-detail-left{width:160px;flex-shrink:0;padding:12px;border-right:1px solid var(--border);}
.dex-detail-right{flex:1;padding:12px;overflow-y:auto;}
.dex-sprite-box{text-align:center;margin-bottom:10px;}
.dex-detail-sprite{width:80px;height:80px;image-rendering:pixelated;display:block;margin:0 auto;}
.dex-catch-count{font-size:10px;color:var(--green);margin-top:4px;text-align:center;}
.dex-section-title{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:6px;padding-bottom:3px;border-bottom:1px solid var(--border);}
.dex-stats{display:flex;flex-direction:column;gap:4px;}
.dex-stat-row{display:flex;align-items:center;gap:5px;}
.dex-stat-name{font-size:10px;color:var(--text-3);width:38px;flex-shrink:0;}
.dex-stat-val{font-family:var(--font-mono);font-size:10px;color:var(--text-2);width:26px;text-align:right;flex-shrink:0;}
.dex-stat-bar{flex:1;height:4px;background:var(--bg-active);border-radius:2px;overflow:hidden;}
.dex-stat-fill{height:100%;border-radius:2px;}
.dex-loc-list{display:flex;flex-direction:column;gap:4px;}
.dex-loc-row{font-size:12px;color:var(--text-2);display:flex;align-items:center;justify-content:space-between;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.dex-loc-lv{font-family:var(--font-mono);font-size:10px;color:var(--text-3);}
.dex-empty{font-size:12px;color:var(--text-3);font-style:italic;padding:4px 0;}
.dex-catch-hint{color:var(--gold)!important;font-style:normal!important;}
.dex-move-list{display:flex;flex-direction:column;gap:2px;}
.dex-move-header{display:grid;grid-template-columns:28px 1fr 56px 28px 28px;gap:4px;font-size:9px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;padding:2px 0;border-bottom:1px solid var(--border);margin-bottom:2px;}
.dex-move-row{display:grid;grid-template-columns:28px 1fr 56px 28px 28px;gap:4px;align-items:center;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.dex-move-lv{font-family:var(--font-mono);font-size:10px;color:var(--text-3);}
.dex-move-name{font-size:11px;color:var(--text-1);}
.dex-move-pwr,.dex-move-pp{font-family:var(--font-mono);font-size:10px;color:var(--text-3);text-align:center;}