/* Schrift lokal statt von Google Fonts (Datenschutz). Fehlt die Datei, greift die Ersatzschrift. */
@font-face { font-family: 'Patrick Hand'; font-style: normal; font-weight: 400; font-display: swap; src: local('Patrick Hand'), local('PatrickHand-Regular'), url('../fonts/PatrickHand-Regular.woff2') format('woff2'); }
:root { --paper: #f7f2e4; --ink: #1d1a17; --yellow: #f2d33b; --red: #c0392b; --green: #4f8a3b; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #b9b29c; font-family: 'Patrick Hand', 'Comic Sans MS', cursive; color: var(--ink); user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
.sk { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 18px 6px 16px 7px / 7px 16px 6px 18px; box-shadow: 3px 4px 0 rgba(0, 0, 0, .22); }
button { font-family: inherit; font-size: 17px; line-height: 1.1; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px 4px 10px 5px / 5px 10px 4px 12px; padding: 3px 9px; cursor: pointer; }
button:hover { background: #fff6cf; }
button.on { background: var(--yellow); }
button.off { opacity: .45; }
button.warn { background: #f3a59b; }
button.big { font-size: 22px; padding: 6px 18px; }
img.ic { vertical-align: -4px; }

#topbar { position: fixed; top: 8px; left: 8px; right: 8px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 4px 10px; z-index: 5; }
#topbar .grow { flex: 1; }
#res, #pop, #ctrl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#pop { padding-left: 10px; border-left: 2px dashed rgba(0, 0, 0, .25); }
.chip { display: flex; align-items: center; gap: 3px; font-size: 20px; min-width: 46px; }
.chip img { height: 24px; }
.chip.lack span { color: var(--red); }
#clock { display: flex; align-items: center; gap: 4px; font-size: 20px; }

#goals { position: fixed; left: 8px; top: 66px; width: 290px; padding: 6px 12px 8px; font-size: 16px; z-index: 4; }
#goals h4 { margin: 0 0 3px; font-size: 18px; }
#goals .done { color: #5a7a4a; text-decoration: line-through; font-size: 14px; }
#goals .cur { font-weight: bold; }
#goals .next { opacity: .55; font-size: 14px; }

#toasts { position: fixed; top: 66px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; z-index: 6; width: min(520px, 60vw); pointer-events: none; }
.toast { padding: 5px 12px; font-size: 17px; pointer-events: auto; transition: opacity .6s, transform .6s; animation: pop .25s ease-out; }
.toast.click { cursor: pointer; }
.toast.out { opacity: 0; transform: translateY(-8px); }
.toast.fox { background: #ffd9c7; }
.toast.bad { background: #f6c0b8; }
.toast.good { background: #dff0c8; }
.toast.goal { background: #fff0a8; font-weight: bold; }
.toast.build { background: #f0e6d0; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#info { position: fixed; right: 8px; top: 66px; width: 300px; padding: 10px 12px; font-size: 16px; z-index: 4; max-height: calc(100vh - 200px); overflow: auto; }
#info .ih { display: flex; gap: 10px; align-items: center; }
#info .ih img { width: 64px; height: auto; max-height: 72px; object-fit: contain; }
#info .ih img.big { width: 70px; }
#info h3 { margin: 0; font-size: 22px; }
#info small { font-size: 14px; opacity: .8; display: block; }
#info p { margin: 6px 0; }
#info .hint { font-size: 14px; opacity: .8; }
#info a { text-decoration: underline; cursor: pointer; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 4px 0; }
.row.center, .btns.center { justify-content: center; }
.btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.bar { height: 10px; border: 2px solid var(--ink); border-radius: 6px 3px 6px 3px; background: #fff; overflow: hidden; margin: 4px 0; }
.bar div { width: 0; height: 100%; background: repeating-linear-gradient(-45deg, #f2c94c 0 5px, #e6b33a 5px 10px); }

#buildbar { position: fixed; left: 220px; right: 8px; bottom: 8px; display: flex; gap: 4px; padding: 5px 6px; overflow-x: auto; z-index: 4; align-items: stretch; }
.bb { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 74px; padding: 3px 4px; font-size: 14px; }
.bb img { height: 44px; max-width: 64px; object-fit: contain; }
.bb span { margin-top: 2px; text-align: center; }
.bb.tool img { height: 36px; margin: 4px 0; }
.sep { width: 2px; background: rgba(0, 0, 0, .25); margin: 4px 4px; }
#minimap { position: fixed; left: 8px; bottom: 8px; width: 200px; border: 2.5px solid var(--ink); border-radius: 8px 3px 8px 3px; box-shadow: 3px 4px 0 rgba(0, 0, 0, .22); cursor: pointer; z-index: 4; image-rendering: pixelated; background: #c9dba0; }

#tooltip { position: fixed; z-index: 30; max-width: 280px; padding: 6px 10px; font-size: 15px; pointer-events: none; }
#tooltip b { font-size: 18px; }
#tooltip .cost { display: flex; gap: 8px; margin: 2px 0; font-size: 17px; }
#tooltip .chain { margin: 2px 0; font-size: 16px; }
#tooltip .lack { color: var(--red); font-weight: bold; }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; background: rgba(40, 32, 20, .35); padding: 16px; }
#help { z-index: 25; }
.panel { padding: 18px 26px; max-width: 760px; width: 100%; max-height: 94vh; overflow: auto; position: relative; text-align: center; }
.panel.wide { max-width: 980px; text-align: left; }
.panel h1 { font-size: 64px; margin: 0; letter-spacing: 1px; transform: rotate(-1.5deg); }
.panel h1::after { content: ''; display: block; height: 6px; margin: -4px auto 0; width: 60%; background: var(--yellow); border-radius: 4px; transform: rotate(1deg); }
.panel h2 { font-size: 34px; margin: 0 0 8px; }
.panel h3 { margin: 12px 0 4px; font-size: 22px; }
.panel ul { margin: 4px 0; padding-left: 20px; }
.panel li, .panel p { font-size: 17px; }
.sub { font-size: 20px !important; margin: 6px 0 14px; }
.tiny { font-size: 13px !important; opacity: .6; margin-top: 14px; }
#cast { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0 16px; }
.card { display: flex; flex-direction: column; align-items: center; width: 128px; }
.card img { height: 110px; max-width: 128px; object-fit: contain; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .15)); transition: transform .2s; }
.card:hover img { transform: rotate(-4deg) scale(1.06); }
.card b { font-size: 19px; }
.card small { font-size: 14px; opacity: .75; }
#loadtxt { font-size: 20px; margin: 10px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.chain { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 17px; margin: 5px 0; }
.chainimg { height: 24px; }
.close { position: absolute; right: 12px; top: 10px; }
.endimg { height: 90px; }

@media (max-width: 900px) {
  #goals { display: none; }
  #info { width: 240px; }
  .cols { grid-template-columns: 1fr; }
  .panel h1 { font-size: 44px; }
  #buildbar { left: 8px; bottom: 140px; }
}

.sitelinks { font-size: 15px !important; margin-top: 10px; }
.sitelinks a { color: var(--ink); margin: 0 6px; }