@font-face { font-family: "Sunfallow Pixel"; src: url(fonts/sunfallow-pixel.woff) format("woff"); font-display: swap; }

  :root {
    --bg: #12161d; --panel: #1b212c; --panel2: #232b39; --line: #3a475c; --line2: #0a0d12;
    --ink: #eef3fa; --mute: #93a1b8; --gold: #ffcf4a; --gold2: #f09a2a; --good: #6ad46a; --bad: #ef5a4a; --blue: #5aa8ff;
    --font: "Sunfallow Pixel", "Pixelify Sans", "Trebuchet MS", ui-monospace, system-ui, sans-serif; color-scheme: dark;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); overflow: hidden; -webkit-user-select: none; user-select: none; touch-action: none; }
  canvas#c { position: fixed; inset: 0; display: block; image-rendering: pixelated; cursor: grab; touch-action: none; }
  canvas#c.tool { cursor: crosshair; }
  .hidden { display: none !important; }
  button { font-family: inherit; color: inherit; cursor: pointer; }
  /* ---------- pixel panels ---------- */
  .px { background: var(--panel); box-shadow: 0 0 0 2px var(--line2), inset 0 0 0 2px var(--line), 0 6px 0 2px rgba(0,0,0,.35); border-radius: 4px; }
  .btn { background: var(--panel2); border: 0; box-shadow: 0 0 0 2px var(--line2), inset 0 0 0 2px var(--line), inset 0 -4px 0 rgba(0,0,0,.28); color: var(--ink); padding: 8px 14px; border-radius: 4px; font-size: 15px; transition: transform .06s; }
  .btn:hover { filter: brightness(1.15); } .btn:active { transform: translateY(2px); }
  .btn.gold { background: linear-gradient(#ffd85a, #f0a22a); color: #3a2208; box-shadow: 0 0 0 2px #3a2208, inset 0 0 0 2px #fff0a8, inset 0 -4px 0 rgba(160,80,0,.5); font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
  .btn.red { background: #7a2a2a; } .btn.sm { padding: 4px 9px; font-size: 13px; }
  .btn.on { background: linear-gradient(#ffd85a, #f0a22a); color: #3a2208; }
  /* ---------- screens ---------- */
  .screen { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  #splash { background: radial-gradient(circle at 50% 45%, #2a3550, #0b0e16); z-index: 40; transition: opacity .9s; gap: 18px; }
  #splash canvas { image-rendering: pixelated; }
  #splash .sub { font-size: 14px; letter-spacing: 3px; color: var(--mute); }
  #menu { background: linear-gradient(180deg, rgba(8,12,24,.55), rgba(8,12,24,.15) 40%, rgba(8,12,24,.7)); gap: 14px; }
  #menu .logo { image-rendering: pixelated; max-width: 88vw; filter: drop-shadow(0 10px 0 rgba(0,0,0,.35)); }
  #menu .tag { font-size: 16px; color: #dfe9ff; letter-spacing: 2px; text-shadow: 0 2px 0 #000; margin-top: -4px; }
  #menu .stack { display: flex; flex-direction: column; gap: 10px; width: min(320px, 82vw); margin-top: 10px; }
  #menu .stack .btn { font-size: 18px; padding: 12px; }
  #menu .foot { position: absolute; bottom: 14px; font-size: 12px; color: #b9c6dd; text-shadow: 0 1px 0 #000; text-align: center; line-height: 1.5; }
  .page { background: rgba(8,12,22,.9); backdrop-filter: blur(4px); padding: 18px; overflow: auto; justify-content: flex-start; }
  .page h2 { margin: 6px 0 14px; color: var(--gold); letter-spacing: 1px; font-size: 26px; }
  .wrap { width: min(980px, 96vw); }
  /* ---------- Welt erschaffen ---------- */
  #create .grid { display: grid; grid-template-columns: 320px 1fr; gap: 16px; }
  #create .prev { padding: 10px; text-align: center; }
  #create .prev canvas { width: 100%; image-rendering: pixelated; border-radius: 3px; box-shadow: 0 0 0 2px #000; background: #0e2838; }
  #create .prev .info { font-size: 13px; color: var(--mute); margin-top: 8px; }
  #create .form { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
  .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .row > label { min-width: 92px; color: var(--mute); font-size: 14px; }
  .chips { display: flex; gap: 6px; flex-wrap: wrap; }
  input[type=text] { background: #0d1118; border: 0; box-shadow: inset 0 0 0 2px var(--line); color: var(--ink); font-family: inherit; font-size: 16px; padding: 8px 10px; border-radius: 3px; width: 220px; user-select: text; -webkit-user-select: text; }
  input[type=range] { accent-color: var(--gold); width: 200px; }
  .val { min-width: 36px; text-align: right; color: var(--gold); font-size: 14px; }
  @media (max-width: 760px) { #create .grid { grid-template-columns: 1fr; } input[type=text] { width: 100%; } input[type=range] { width: 150px; } }
  /* ---------- Laden ---------- */
  .slot { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; }
  .slot .t { flex: 1; } .slot .t b { color: var(--gold); font-size: 17px; } .slot .t div { color: var(--mute); font-size: 13px; margin-top: 3px; }
  /* ---------- Ladebalken ---------- */
  #loading { background: radial-gradient(circle at 50% 40%, #1c3d4f, #0b141b); gap: 16px; z-index: 50; }
  #loading .bar { width: min(420px, 74vw); height: 14px; background: #0d1118; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--line); border-radius: 3px; overflow: hidden; }
  #loading .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold2), var(--gold)); transition: width .15s; }
  #loading .msg { color: var(--mute); font-size: 15px; } #loading h3 { color: var(--gold); margin: 0; font-size: 22px; }
  /* ---------- HUD ---------- */
  #hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
  #hud > * { pointer-events: auto; }
  #topbar { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; gap: 8px; }
  #topbar > * { pointer-events: auto; }
  #worldinfo { padding: 8px 12px; min-width: 180px; }
  #worldinfo .wn { font-size: 12px; color: var(--mute); letter-spacing: 1px; text-transform: uppercase; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #worldinfo .yr { font-size: 30px; font-weight: 700; color: var(--gold); line-height: 1; letter-spacing: 2px; text-shadow: 0 3px 0 #000; }
  #worldinfo .st { display: flex; gap: 12px; margin-top: 6px; font-size: 14px; } #worldinfo .st span { display: flex; align-items: center; gap: 4px; }
  #worldinfo canvas { image-rendering: pixelated; }
  #timebox { padding: 6px; display: flex; gap: 6px; align-items: center; }
  #timebox .btn { padding: 7px 11px; font-size: 14px; min-width: 40px; }
  #clock { font-size: 15px; color: var(--mute); padding: 0 6px; min-width: 62px; text-align: center; }
  #toasts { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none !important; width: min(520px, 90vw); }
  .toast { padding: 7px 14px; font-size: 14px; animation: tin .25s ease-out; text-align: center; background: rgba(20,26,36,.92); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--line); border-radius: 4px; }
  .toast.go { cursor: pointer; pointer-events: auto; } .toast.go:hover { filter: brightness(1.25); }
  #tip { position: fixed; z-index: 15; pointer-events: none; padding: 6px 9px; font-size: 12.5px; line-height: 1.35; max-width: 230px; }
  #miniBox { position: absolute; left: 8px; top: 98px; padding: 4px; } #miniBox canvas { display: block; width: 150px; height: 150px; image-rendering: pixelated; border-radius: 3px; cursor: crosshair; touch-action: none; }
  #miniBox.hidden { display: none; }
  .toast.war { box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #c0392b; } .toast.peace { box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #3a9a5a; } .toast.era { box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--gold); color: var(--gold); } .toast.disaster { box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #e67e22; }
  @keyframes tin { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
  #bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  #bottom > * { pointer-events: auto; }
  #powerbar { margin-bottom: 8px; padding: 8px; display: flex; gap: 6px; max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: thin; }
  .pw { position: relative; width: 64px; height: 72px; flex: 0 0 auto; background: var(--panel2); border: 0; box-shadow: 0 0 0 2px var(--line2), inset 0 0 0 2px var(--line), inset 0 -4px 0 rgba(0,0,0,.28); border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px; font-size: 11px; color: var(--ink); }
  .pw canvas { image-rendering: pixelated; width: 40px; height: 40px; }
  .pw span { line-height: 1.05; text-align: center; max-width: 60px; }
  .pw:hover { filter: brightness(1.2); } .pw.on { background: linear-gradient(#ffe27a, #f0a22a); color: #3a2208; box-shadow: 0 0 0 2px #3a2208, inset 0 0 0 2px #fff0a8, 0 0 14px 2px rgba(255,207,74,.55); }
  #brushbar { display: flex; align-items: center; gap: 6px; padding: 5px 9px; margin-bottom: 8px; font-size: 12px; color: var(--mute); }
  #brushbar .dot { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--panel2); box-shadow: 0 0 0 2px var(--line2), inset 0 0 0 2px var(--line); border: 0; border-radius: 3px; padding: 0; }
  #brushbar .dot i { display: block; background: #cfd8e6; border-radius: 50%; } #brushbar .dot.on { background: var(--gold); } #brushbar .dot.on i { background: #3a2208; }
  #tabbar { padding: 6px 8px; display: flex; gap: 6px; max-width: calc(100vw - 16px); overflow-x: auto; }
  .tab { width: 74px; height: 66px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--panel2); border: 0; box-shadow: 0 0 0 2px var(--line2), inset 0 0 0 2px var(--line), inset 0 -4px 0 rgba(0,0,0,.28); border-radius: 4px; font-size: 11px; color: var(--ink); }
  .tab canvas { image-rendering: pixelated; width: 34px; height: 34px; }
  .tab:hover { filter: brightness(1.2); } .tab.on { background: linear-gradient(#ffe27a, #f0a22a); color: #3a2208; box-shadow: 0 0 0 2px #3a2208, inset 0 0 0 2px #fff0a8; }
  #side { position: absolute; right: 8px; top: 96px; display: flex; flex-direction: column; gap: 8px; }
  #side .btn { width: 52px; height: 52px; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; gap: 1px; }
  #side canvas { image-rendering: pixelated; width: 28px; height: 28px; }
  #inspect { position: absolute; left: 8px; bottom: 100px; width: min(300px, 92vw); padding: 12px; font-size: 14px; }
  #inspect h4 { margin: 0 0 2px; color: var(--gold); font-size: 20px; } #inspect .sub { color: var(--mute); font-size: 13px; margin-bottom: 8px; }
  #inspect .kv { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dashed #2c374a; } #inspect .kv b { color: var(--ink); font-weight: 600; } #inspect .kv span { color: var(--mute); }
  .bar { height: 9px; background: #0d1118; box-shadow: 0 0 0 1px #000; border-radius: 2px; overflow: hidden; margin: 3px 0 6px; } .bar i { display: block; height: 100%; }
  #inspect .acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } #inspect .x { position: absolute; right: 8px; top: 8px; }
  /* ---------- Fenster ---------- */
  .modal { position: fixed; inset: 0; z-index: 30; background: rgba(6,9,16,.66); display: flex; align-items: center; justify-content: center; padding: 10px; }
  .modal .box { width: min(640px, 96vw); max-height: 88vh; overflow: auto; padding: 16px; position: relative; }
  .modal h3 { margin: 0 0 12px; color: var(--gold); font-size: 24px; } .modal .close { position: absolute; right: 12px; top: 12px; }
  .list .it { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; background: var(--panel2); box-shadow: inset 0 0 0 2px var(--line); border-radius: 3px; cursor: pointer; } .list .it:hover { filter: brightness(1.15); } .list .it.sel { box-shadow: inset 0 0 0 2px var(--gold); }
  .sw { width: 16px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 2px #000; flex: 0 0 auto; }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; } .stat { display: flex; justify-content: space-between; border-bottom: 1px dashed #2c374a; padding: 3px 0; } .stat span { color: var(--mute); }
  .tog { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; border-bottom: 1px dashed #2c374a; font-size: 15px; } .sw2 { width: 46px; height: 24px; background: #0d1118; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--line); position: relative; cursor: pointer; } .sw2 i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #6b7a90; transition: .15s; } .sw2.on { background: #2a6a3a; } .sw2.on i { left: 25px; background: #d6ffd6; }
  .chron .ev { padding: 5px 0; border-bottom: 1px dashed #2c374a; font-size: 14px; } .chron .ev b { color: var(--gold); margin-right: 8px; } .ev.war { color: #ff8a7a; } .ev.peace { color: #8affa8; } .ev.era { color: var(--gold); } .ev.disaster { color: #ffb86a; } .ev.fall { color: #c0a0ff; }
  .rel { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #2c374a; font-size: 14px; } .rel .st { padding: 2px 8px; border-radius: 3px; font-size: 12px; } .st.war { background: #7a2a2a; } .st.peace { background: #2a5a3a; } .st.ally { background: #2a4a7a; } .st.neutral { background: #3a4252; }
  .pill { display: inline-block; padding: 1px 8px; border-radius: 3px; background: #2c3648; font-size: 12px; margin-right: 4px; }
  .page, .modal .box { touch-action: pan-y; } #powerbar, #tabbar { touch-action: pan-x; } input[type=range] { touch-action: pan-x; }
  @media (max-width: 700px) {
    .pw { width: 56px; height: 64px; } .pw canvas { width: 34px; height: 34px; } #worldinfo { min-width: 0; padding: 6px 9px; } #worldinfo .yr { font-size: 20px; letter-spacing: 1px; } #worldinfo .st { gap: 8px; font-size: 11px; margin-top: 3px; }
    #worldinfo .st span span { display: none; } #topbar { flex-wrap: wrap; } #timebox { margin-left: auto; padding: 4px; gap: 4px; } #timebox .btn { padding: 6px 7px; min-width: 32px; font-size: 13px; } #clock { display: none; }
    #side { top: 92px; right: 6px; } #side .btn { width: 46px; height: 46px; } #inspect { bottom: 150px; left: 6px; } .tab { width: 62px; height: 58px; } .tab canvas { width: 28px; height: 28px; } #brushbar { padding: 4px 6px; }
    #toasts { top: 96px; } .toast { font-size: 12px; } #miniBox canvas { width: 96px; height: 96px; } #miniBox { top: 92px; padding: 3px; }
  }