:root {
  --gold: #f4bd3c;
  --gold-2: #ffd970;
  --ink: #17130c;
  --paper: #f4ecdb;
  --danger: #d85b3d;
  --glass: rgba(22, 18, 11, .78);
  --line: rgba(255, 255, 255, .12);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #10150f; color: white; font-family: Inter, system-ui, sans-serif; }
button { font: inherit; }
button, kbd { user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: linear-gradient(#86a5b7, #e4bd77); }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle, transparent 45%, rgba(12,9,5,.26) 100%); z-index: 2; }
#damage-flash { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; background: radial-gradient(circle, transparent 30%, rgba(179,48,22,.8)); transition: opacity .12s; }

.glass { background: linear-gradient(145deg, rgba(29,24,15,.88), rgba(15,13,9,.7)); border: 1px solid var(--line); box-shadow: 0 10px 35px rgba(0,0,0,.24); backdrop-filter: blur(9px); }
.topbar { position: fixed; inset: 0 0 auto; z-index: 5; display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 28px; pointer-events: none; }
.brand { display: flex; gap: 12px; align-items: center; filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.brand-mark { width: 49px; height: 49px; display: grid; place-items: center; border: 3px solid var(--gold); transform: rotate(-5deg); background: #20180a; color: var(--gold); font: 900 33px/1 Barlow Condensed; }
.brand h1 { margin: 0; letter-spacing: .14em; font: 900 28px/.85 Barlow Condensed, sans-serif; }
.brand p { margin: 8px 0 0; color: #f8dfaa; letter-spacing: .22em; font: 600 9px/1 Inter; text-transform: uppercase; }
.gold-panel { pointer-events: auto; min-width: 330px; padding: 11px 14px; display: grid; grid-template-columns: 45px 1fr auto auto; gap: 10px; align-items: center; color: var(--gold-2); background: linear-gradient(120deg, rgba(31,24,12,.94), rgba(76,51,15,.86)); border: 1px solid rgba(248,197,77,.4); border-radius: 5px; box-shadow: 0 10px 35px rgba(0,0,0,.25); }
.nugget-icon { width: 36px; height: 30px; border-radius: 45% 55% 50% 40%; background: radial-gradient(circle at 30% 25%, #fff1a6 0 7%, transparent 8%), linear-gradient(145deg,#ffe378,#c88209); transform: rotate(-7deg); box-shadow: inset -4px -5px 8px rgba(116,65,0,.5), 0 0 18px rgba(255,199,58,.25); }
.gold-panel span { display: block; font: 700 9px/1 Inter; letter-spacing: .16em; color: #e6cc92; }
.gold-panel strong { display: block; margin-top: 2px; font: 900 27px/1 Barlow Condensed; }
.bag-count, .score-count { padding-left: 11px; border-left: 1px solid rgba(255,255,255,.13); color: #d8cdb6; font-size: 9px; text-transform: uppercase; line-height: 1.35; }
.bag-count b, .score-count b { display: block; color: white; font: 800 18px/1.1 Barlow Condensed; }
.score-count b { color: var(--gold-2); }

.stats-panel { position: fixed; z-index: 5; top: 177px; left: 28px; width: 205px; padding: 12px 13px; border-radius: 4px; }
.stat { display: grid; grid-template-columns: 76px 1fr 15px; align-items: center; gap: 7px; margin: 6px 0; }
.stat span { font: 700 9px/1 Barlow Condensed; letter-spacing: .08em; color: #d6cbb3; }
.stat > div { height: 4px; background: rgba(255,255,255,.13); }
.stat i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#a26f1c,var(--gold-2)); box-shadow: 0 0 8px rgba(244,189,60,.5); transition: width .3s; }
.stat b { color: var(--gold-2); font: 800 14px/1 Barlow Condensed; }
.rate-panel { position: fixed; z-index: 5; top: 99px; right: 28px; width: 168px; padding: 11px 13px; border-radius: 4px; text-align: right; }
.rate-panel span { display: block; color: #d6cbb3; letter-spacing: .08em; font: 700 8px/1.2 Inter; }
.rate-panel strong { display: block; color: var(--gold-2); font: 900 27px/1.1 Barlow Condensed; }
.rate-panel small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: white; font: 500 10px/1.2 Inter; }

.hud-button { position: fixed; z-index: 7; top: 326px; left: 28px; padding: 10px 14px; border: 1px solid rgba(248,197,77,.38); border-radius: 4px; color: #ffe4a2; background: rgba(27,21,12,.88); cursor: pointer; text-transform: uppercase; letter-spacing: .06em; font: 700 10px/1 Inter; transition: .2s; }
.hud-button:hover { background: #3b2a11; transform: translateY(-1px); }
.hud-button span { margin-right: 6px; color: var(--gold); font-size: 14px; }
.hud-button.help { left: auto; right: 28px; top: 172px; width: 38px; height: 38px; padding: 0; border-radius: 50%; color: white; font: 800 17px/1 Inter; }

.compass { position: fixed; z-index: 5; top: 94px; left: 28px; width: 205px; height: 70px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 4px; pointer-events: none; color: white; text-shadow: 0 2px 4px #000; }
.compass > div:last-child { display: flex; flex-direction: column; gap: 4px; }
.compass small { color: #c6b999; letter-spacing: .1em; font: 700 7px/1 Inter; }
.compass b { color: var(--gold-2); font: 900 22px/1 Barlow Condensed; }
.compass-rose { position: relative; width: 49px; height: 49px; flex: 0 0 49px; filter: drop-shadow(0 0 7px rgba(244,189,60,.25)); }
.compass-rose::before { content:'N'; position:absolute; z-index:3; top:-2px; left:50%; transform:translateX(-50%); color:#ffd970; font:800 7px/1 Inter; }
.compass-rose span { position:absolute; z-index:2; inset:0; display:grid; place-items:center; color:#fff3b3; font-size:12px; }
.compass-rose .petal { position:absolute; left:19px; top:3px; width:11px; height:22px; border:1px solid rgba(255,222,126,.65); border-radius:80% 12% 80% 12%; transform-origin:5px 21px; background:linear-gradient(#f0c55a,#6d5223); }
.compass-rose .p2 { transform:rotate(45deg); }.compass-rose .p3 { transform:rotate(90deg); }.compass-rose .p4 { transform:rotate(135deg); }
.compass-rose .p5 { transform:rotate(180deg); }.compass-rose .p6 { transform:rotate(225deg); }.compass-rose .p7 { transform:rotate(270deg); }.compass-rose .p8 { transform:rotate(315deg); }

.player-actions { position:fixed; z-index:7; top:255px; left:28px; width:205px; display:grid; grid-template-columns:1.25fr .75fr; gap:7px; }
.player-actions button { min-width:0; padding:8px 9px; display:grid; grid-template-columns:17px 1fr; grid-template-rows:auto auto; column-gap:5px; text-align:left; border:1px solid rgba(255,255,255,.12); border-radius:4px; color:white; background:rgba(22,18,11,.82); cursor:pointer; }
.player-actions button:hover { border-color:rgba(244,189,60,.55); background:#342611; }
.player-actions span { grid-row:1/3; align-self:center; color:var(--gold); }
.player-actions small { color:#a99d87; font:700 7px/1 Inter; letter-spacing:.08em; }
.player-actions b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f8e8c2; font:700 10px/1.4 Inter; }

#minimap { position: fixed; z-index: 5; right: 28px; bottom: 27px; width: 155px; height: 155px; border: 2px solid rgba(255,222,145,.45); border-radius: 50%; background: rgba(28,25,16,.82); box-shadow: 0 10px 35px rgba(0,0,0,.3); }
#crosshair { position: fixed; z-index: 6; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%,-50%); pointer-events: none; }
#crosshair i { position: absolute; background: rgba(255,255,255,.92); box-shadow: 0 1px 2px #000; }
#crosshair i:nth-child(1) { width: 1px; height: 6px; left: 10px; top: 0; }
#crosshair i:nth-child(2) { width: 1px; height: 6px; left: 10px; bottom: 0; }
#crosshair i:nth-child(3) { width: 6px; height: 1px; left: 0; top: 10px; }
#crosshair i:nth-child(4) { width: 6px; height: 1px; right: 0; top: 10px; }
.dig-target { position: fixed; z-index: 6; left: 50%; top: calc(50% + 42px); transform: translateX(-50%); display: flex; align-items: center; gap: 7px; pointer-events: none; color: white; text-shadow: 0 1px 3px #000; font: 700 9px/1 Inter; letter-spacing: .1em; }
.dig-target.hidden { opacity: 0; }
.target-ring { width: 21px; height: 21px; padding: 3px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; }
.target-ring i { display: block; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(var(--gold) var(--progress,0%), transparent 0); }

#message-stack { position: fixed; z-index: 30; left: 50%; top: 27%; width: min(430px,90vw); transform: translateX(-50%); pointer-events: none; text-align: center; }
.toast { margin: 7px auto; width: max-content; max-width: 100%; padding: 10px 15px; border-left: 3px solid var(--gold); background: rgba(22,17,10,.9); box-shadow: 0 8px 25px rgba(0,0,0,.28); animation: toast-in .25s ease, toast-out .35s ease 2.5s forwards; color: #f6ead1; font: 650 12px/1.3 Inter; }
.toast.gold { color: #ffe17b; font-size: 14px; }
.toast.danger { border-color: var(--danger); color: #ffd0c5; }
@keyframes toast-in { from { opacity:0; transform: translateY(8px) scale(.97); } }
@keyframes toast-out { to { opacity:0; transform: translateY(-5px); } }

.controls-hint { position: fixed; z-index: 5; bottom: 27px; left: 28px; display: flex; gap: 13px; padding: 9px 12px; border-radius: 4px; color: #ded5c3; font: 500 9px/1 Inter; transition: opacity .5s; }
.controls-hint span { white-space: nowrap; }
kbd { padding: 2px 4px; border: 1px solid rgba(255,255,255,.28); border-radius: 2px; background: rgba(255,255,255,.09); color: white; font: 700 8px/1 Inter; box-shadow: inset 0 -1px rgba(0,0,0,.4); }

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 18px; background: rgba(10,9,7,.73); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.modal.open { opacity: 1; pointer-events: auto; }
.modal-card { position: relative; width: min(760px,95vw); max-height: 94vh; overflow: auto; padding: 34px; border: 1px solid rgba(246,200,88,.35); border-radius: 6px; background: linear-gradient(145deg, #282116, #15120d 66%); box-shadow: 0 25px 80px rgba(0,0,0,.6); }
.modal-card::before { content:''; position:absolute; inset: 8px; border: 1px solid rgba(255,255,255,.055); pointer-events:none; }
.eyebrow { color: var(--gold); letter-spacing: .18em; font: 800 10px/1 Inter; }
.modal h2 { margin: 8px 0 7px; color: #fff4d9; font: 900 clamp(28px,5vw,42px)/1 Barlow Condensed; text-transform: uppercase; letter-spacing: .025em; }
.modal-card > p { margin: 0 0 18px; color: #cfc3ac; font-size: 12px; line-height: 1.6; }
.modal-close { position: absolute; right: 21px; top: 18px; z-index: 2; border: 0; color: #d5c9b2; background: transparent; cursor: pointer; font-size: 30px; line-height: 1; }
.points-left, .shop-balance { display: inline-block; margin: 5px 0 16px; padding: 7px 11px; color: #d9cbb1; background: rgba(255,255,255,.06); border-radius: 3px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.points-left b, .shop-balance b { color: var(--gold-2); font-size: 14px; }
.ability-list { display: grid; gap: 9px; }
.ability { display: grid; grid-template-columns: 49px 1fr auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035); }
.ability-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #231a0d; background: var(--gold); font-size: 20px; }
.ability h3 { margin: 0 0 4px; text-transform: uppercase; color: #fff1ce; font: 800 17px/1 Barlow Condensed; letter-spacing: .07em; }
.ability p { margin: 0; color: #bfb49f; font-size: 10px; line-height: 1.35; }
.stepper { display: flex; align-items: center; gap: 9px; }
.stepper button { width: 29px; height: 29px; border: 1px solid rgba(255,255,255,.18); border-radius: 2px; color: white; background: rgba(255,255,255,.07); cursor: pointer; font-size: 18px; }
.stepper button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.stepper button:disabled { opacity: .25; cursor: default; }
.stepper b { width: 17px; text-align: center; color: var(--gold-2); font: 900 22px/1 Barlow Condensed; }
.risk-note { margin: 13px 0 18px; padding: 10px 12px; border-left: 3px solid var(--danger); color: #cdbfa8; background: rgba(194,72,42,.1); font-size: 10px; line-height: 1.45; }
.risk-note b { color: #ffb29f; }
.primary, .secondary { min-height: 42px; padding: 0 18px; border: 1px solid #ffd56b; border-radius: 2px; cursor: pointer; font: 800 11px/1 Inter; letter-spacing: .09em; transition: .2s; }
.primary { color: #211707; background: linear-gradient(#ffd66a,#d89b1f); box-shadow: 0 8px 20px rgba(216,155,31,.15); }
.primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.secondary { color: #f2e6ce; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.17); }
.secondary.danger:hover { color: #ffc1b2; border-color: var(--danger); }
.ability-card > .primary { width: 100%; }

.login-card { width:min(520px,94vw); text-align:center; }
.login-emblem { width:72px; height:72px; margin:0 auto 18px; display:grid; place-items:center; border:3px solid var(--gold); transform:rotate(-4deg); color:var(--gold); background:#20180a; box-shadow:0 0 35px rgba(244,189,60,.16); font:900 49px/1 Barlow Condensed; }
.login-card form { display:grid; gap:8px; text-align:left; }
.login-card label { color:#d1c4aa; letter-spacing:.12em; font:700 9px/1 Inter; }
.login-card input { width:100%; height:48px; padding:0 14px; outline:none; border:1px solid rgba(255,255,255,.17); border-radius:3px; color:white; background:rgba(255,255,255,.06); font:700 16px/1 Inter; }
.login-card input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(244,189,60,.1); }
.login-card .primary { width:100%; margin-top:5px; }
.form-error { min-height:15px; color:#ffad99; font-size:9px; }
.login-note { margin-top:14px; padding:10px; color:#a99d89; background:rgba(255,255,255,.035); font-size:9px; line-height:1.5; }
.login-note b { color:#dfcfae; }

.highscore-card { width:min(720px,95vw); }
.highscore-head, .highscore-row { display:grid; grid-template-columns:58px minmax(130px,1fr) 100px 120px; align-items:center; gap:8px; }
.highscore-head { padding:8px 12px; color:#a99d88; border-bottom:1px solid rgba(255,255,255,.1); letter-spacing:.1em; font:700 8px/1 Inter; }
.highscore-list { min-height:150px; max-height:420px; overflow:auto; }
.highscore-row { min-height:47px; padding:7px 12px; border-bottom:1px solid rgba(255,255,255,.065); color:#d9cdb4; font-size:11px; }
.highscore-row.me { color:#fff1c5; background:rgba(244,189,60,.09); }
.highscore-rank { color:#b9ac93; font:900 18px/1 Barlow Condensed; }
.highscore-row:nth-child(1) .highscore-rank { color:#ffd95b; font-size:26px; }
.highscore-row:nth-child(2) .highscore-rank { color:#d7d9dc; font-size:22px; }
.highscore-row:nth-child(3) .highscore-rank { color:#c98d55; font-size:20px; }
.highscore-player { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.highscore-gold { color:#e5c878; }
.highscore-points { color:var(--gold-2); font:900 18px/1 Barlow Condensed; }
.loading-row { padding:45px 12px; text-align:center; color:#a99d88; font-size:10px; }
.current-player-score { margin-top:12px; padding:10px 12px; text-align:right; color:#c8bca5; background:rgba(255,255,255,.04); font-size:10px; }
.current-player-score b { color:var(--gold-2); font-size:15px; }

.shop-card { width: min(980px,96vw); }
.tool-grid { display: grid; grid-template-columns: repeat(5, minmax(135px,1fr)); gap: 10px; }
.tool-card { position: relative; display: flex; flex-direction: column; min-height: 265px; padding: 15px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); overflow: hidden; }
.tool-card.owned { border-color: rgba(244,189,60,.42); }
.tool-card.equipped::after { content:'AUSGERÜSTET'; position:absolute; right:-29px; top:16px; width:105px; padding:4px 0; transform:rotate(42deg); text-align:center; color:#201608; background:var(--gold); font:800 7px/1 Inter; }
.tool-art { height: 83px; display: grid; place-items: center; color: var(--gold); font-size: 53px; filter: drop-shadow(0 7px 7px rgba(0,0,0,.5)); }
.tool-card h3 { margin: 5px 0 3px; color: #fff2d5; text-transform: uppercase; font: 800 18px/1 Barlow Condensed; }
.tool-card p { min-height: 39px; margin: 0 0 9px; color: #aa9f8b; font-size: 9px; line-height: 1.45; }
.rate-badge { margin-bottom: 11px; color: #ddcda9; font-size: 9px; }
.rate-badge b { display: block; color: var(--gold-2); font: 900 25px/1 Barlow Condensed; }
.tool-card button { margin-top: auto; min-height: 34px; border: 1px solid rgba(244,189,60,.48); border-radius: 2px; color: #ffe19a; background: rgba(244,189,60,.08); cursor: pointer; text-transform: uppercase; font: 800 9px/1 Inter; }
.tool-card button:hover:not(:disabled) { color: #211707; background: var(--gold); }
.tool-card button:disabled { opacity: .35; cursor: not-allowed; }

.help-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.help-grid article { padding: 13px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); }
.help-grid article > b { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; color:#211707; background:var(--gold); font:900 13px/1 Barlow Condensed; }
.help-grid h3 { margin:9px 0 4px; color:#fff1ce; text-transform:uppercase; font:800 16px/1 Barlow Condensed; }
.help-grid p { margin:0; color:#b9ad98; font-size:9px; line-height:1.5; }
.danger-box { margin:12px 0 16px; padding:12px 14px; border:1px solid rgba(216,91,61,.25); background:rgba(216,91,61,.09); }
.danger-box strong { color:#ffb39f; text-transform:uppercase; font:800 11px/1 Inter; }
.danger-box p { margin:4px 0 0; color:#cabca6; font-size:10px; line-height:1.45; }
.help-actions { display:flex; justify-content:space-between; gap:10px; }
.collapse-card { width:min(430px,94vw); text-align:center; }
.collapse-icon { width:68px; height:68px; margin:0 auto 14px; display:grid; place-items:center; border:3px solid #f28d72; border-radius:50%; color:#ffd0c3; font:900 39px/1 Barlow Condensed; }
.collapse-card .primary { width:100%; }

.pause-screen { position:fixed; inset:0; z-index:20; display:grid; place-items:center; opacity:0; pointer-events:none; background:rgba(13,11,8,.3); transition:.2s; }
.pause-screen.visible { opacity:1; pointer-events:auto; }
.pause-screen > div { padding:22px 32px; text-align:center; border:1px solid rgba(255,218,123,.32); background:rgba(22,18,11,.9); box-shadow:0 15px 50px rgba(0,0,0,.4); }
.pause-screen span,.pause-screen b,.pause-screen small { display:block; }
.pause-screen span { color:var(--gold); letter-spacing:.16em; font:900 12px/1 Inter; }
.pause-screen b { margin:7px 0; color:#fff0cf; font:800 22px/1 Barlow Condensed; }
.pause-screen small { color:#a99d88; font-size:9px; }

@media (max-width: 820px) {
  .topbar { padding: 14px; }
  .brand p, .stats-panel, .controls-hint { display:none; }
  .brand-mark { width:39px; height:39px; font-size:25px; }
  .brand h1 { font-size:21px; }
  .gold-panel { min-width:230px; padding:8px 9px; grid-template-columns:30px 1fr auto auto; gap:6px; }
  .nugget-icon { width:28px; height:24px; }
  .gold-panel strong { font-size:22px; }
  .rate-panel { top:75px; right:14px; }
  .compass { top:75px; left:14px; width:145px; height:55px; padding:6px 8px; }
  .compass-rose { width:39px; height:39px; flex-basis:39px; transform:scale(.8); transform-origin:left center; }
  .player-actions { top:137px; left:14px; width:180px; }
  .hud-button { top:auto; bottom:18px; left:14px; }
  .hud-button.help { top:130px; right:14px; }
  #minimap { right:14px; bottom:14px; width:110px; height:110px; }
  .modal-card { padding:27px 18px 20px; }
  .tool-grid { grid-template-columns:repeat(2,1fr); }
  .help-grid { grid-template-columns:repeat(2,1fr); }
  .highscore-head, .highscore-row { grid-template-columns:40px minmax(90px,1fr) 65px 77px; gap:5px; padding-inline:7px; }
}

@media (max-height: 650px) {
  .modal-card { padding-top:24px; }
  .ability { padding:8px 12px; }
  .ability-icon { width:34px; height:34px; font-size:16px; }
  .risk-note { margin:8px 0; }
}