@font-face{font-family:'Cinzel';src:url(/fonts/Cinzel-Bold.ttf);font-weight:700}
@font-face{font-family:'Alegreya';src:url(/fonts/AlegreyaSans-Medium.ttf);font-weight:500}
@font-face{font-family:'Alegreya';src:url(/fonts/AlegreyaSans-Bold.ttf);font-weight:700}
:root{--or:#ff9900;--slot:48px;--gap:4px;--pair:14px;--text:#e8e3d8;--dim:#a39d90;--line:#3a342b}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b0a09;color:var(--text);font:15px/1.35 'Alegreya',system-ui,sans-serif;overflow:auto}
.bank{max-width:1100px;margin:0 auto;padding:12px 14px 8px;background:radial-gradient(ellipse at 50% 0,#211a10 0,#0b0a09 70%)}
.head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid var(--or);padding:4px 2px 8px;margin-bottom:12px}
h1{font:700 26px 'Cinzel',serif;margin:0;color:#fff;letter-spacing:.03em}
.sub{color:var(--dim);font-size:14px}
.right{text-align:right}
.guild{font:700 18px 'Cinzel',serif;color:var(--or)}
.body{display:flex;gap:14px;align-items:flex-start}
.grid{display:flex;gap:var(--pair);flex:none}
.pair{display:grid;grid-template-columns:repeat(2,var(--slot));gap:var(--gap);padding:6px;background:#0f0d0b;border:1px solid var(--line);border-radius:8px}
.slot{position:relative;width:var(--slot);height:var(--slot);background:#1a1815;border:1px solid #3e382f;box-shadow:inset 0 0 0 1px #0e0d0c;cursor:default}
.slot img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:cover}
.slot .n{position:absolute;right:3px;bottom:0;font:700 calc(var(--slot) * .34) 'Alegreya',sans-serif;color:#fff;text-shadow:0 0 2px #000,1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.slot.full{cursor:pointer}
.slot.full:hover{outline:2px solid #ffd27a;outline-offset:0;z-index:2}
.slot.q2{border-color:#1eff00;box-shadow:0 0 6px #1eff0088}
.slot.q3{border-color:#0070dd;box-shadow:0 0 6px #0070dd99}
.slot.q4{border-color:#a335ee;box-shadow:0 0 7px #a335eeaa}
.slot.q5{border-color:#ff8000;box-shadow:0 0 7px #ff8000aa}
.slot.dim{opacity:.18}
.slot.hit{outline:2px solid var(--or);z-index:2}
.tabs{display:flex;flex-direction:column;gap:10px}
.tab{width:52px;height:52px;padding:0;border:2px solid var(--line);border-radius:8px;background:#141210;cursor:pointer;position:relative}
.tab img{width:100%;height:100%;border-radius:6px;filter:brightness(.55)}
.tab.on{border-color:var(--or);box-shadow:0 0 10px #ff990066}
.tab.on img,.tab:hover img{filter:none}
.tab.empty{opacity:.4}
.foot{display:flex;align-items:center;gap:22px;margin-top:12px;flex-wrap:wrap}
.money{font:700 20px 'Alegreya',sans-serif;display:flex;gap:12px;align-items:center}
.coin{display:inline-block;width:14px;height:14px;border-radius:50%;margin-left:4px;vertical-align:-1px}
.goal{color:var(--dim);font-size:14px;display:flex;align-items:center;gap:8px}
.goal .bar{width:140px;height:8px;background:#26221c;border-radius:4px;overflow:hidden}
.goal .bar i{display:block;height:100%;background:linear-gradient(90deg,#c46f00,var(--or))}
.search{margin-left:auto;background:#141210;border:1px solid var(--line);border-radius:6px;color:var(--text);padding:6px 10px;font:15px 'Alegreya',sans-serif;width:200px}
.legal{color:#6f6a61;font-size:12px;text-align:right;margin-top:6px}
/* Tooltip wie im Spiel */
.tip{position:fixed;z-index:10;max-width:330px;background:rgba(8,8,24,.95);border:1px solid #9a9a9a;border-radius:5px;box-shadow:0 0 0 1px #000,0 6px 20px #000c;padding:7px 10px 8px;font:13.5px/1.35 'Segoe UI',Verdana,sans-serif;color:#fff;pointer-events:none}
.tip table{border-collapse:collapse;width:100%}
.tip td,.tip th{padding:0;vertical-align:top;font-weight:400;text-align:left}
.tip th{text-align:right;padding-left:12px}
.tip b{font-size:15px;font-weight:600}
.tip .q0{color:#9d9d9d}.tip .q1{color:#fff}.tip .q2{color:#1eff00}.tip .q3{color:#0070dd}.tip .q4{color:#a335ee}.tip .q5{color:#ff8000}
.tip .q{color:#ffd100}
.tip a{color:inherit;text-decoration:none}
.tip .moneygold,.tip .moneysilver,.tip .moneycopper{margin-right:6px}
.tip .moneygold::after,.tip .moneysilver::after,.tip .moneycopper::after{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:3px;vertical-align:-1px}
.tip .moneygold::after{background:#ffd100}.tip .moneysilver::after{background:#c7c7cf}.tip .moneycopper::after{background:#eda55f}
.tip .bank-line{margin-top:6px;padding-top:5px;border-top:1px solid #333;color:#ffd27a}
@media (max-width:760px){.body{flex-direction:column-reverse}.tabs{flex-direction:row}.search{margin-left:0;width:100%}}
/* kurz aufleuchten, wenn ein neuer Stand da ist */
.bank.fresh .head{border-bottom-color:#ffd27a;transition:border-color .2s}
.bank .head{transition:border-color 1s}