:root{
  --ink:#4a3b2c;
  --paper:#fdf4e3;
  --wool:#e8b84b;
  --bg:#2f3a2a;

  /* abgeleitete Toene — hier statt als Literal mitten im Regelwerk */
  --paper-veil:rgba(253,244,227,.88);
  --ink-veil:rgba(74,59,44,.22);
  --scrim:rgba(24,32,21,.58);
  --glow:rgba(255,240,200,.30);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:var(--ink);
}
#wrap{position:fixed;inset:0;}
canvas{display:block;width:100%;height:100%;touch-action:none;}

.overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;text-align:center;padding:20px;overflow:auto;
  background:var(--scrim);backdrop-filter:blur(0.25rem);
}
.card{
  background:var(--paper);border:4px solid var(--ink);border-radius:24px;
  max-width:min(440px,92vw);box-shadow:0 12px 0 rgba(0,0,0,.28);
  padding:0 0 20px;overflow:hidden;
  /* angedeutete Filznaht am Rand */
  outline:2px dashed rgba(74,59,44,.35);outline-offset:-11px;
}
.card .pad{padding:0 24px;}
#heroImg{
  display:block;width:100%;height:auto;max-height:32vh;object-fit:cover;
  object-position:50% 42%;border-bottom:4px solid var(--ink);
}
#sitImg{display:block;width:112px;height:auto;margin:14px auto 0;}
h1{margin:12px 0 2px;font-size:clamp(26px,7vw,42px);letter-spacing:-1px;}
h2{margin:14px 0 6px;font-size:clamp(21px,6vw,30px);}
p{margin:8px 0;font-size:clamp(13px,3.5vw,15px);line-height:1.45;opacity:.85;}
p.pts{font-size:clamp(18px,5vw,24px);font-weight:700;opacity:1;margin:12px 0 0;}
.keys{font-size:12.5px;opacity:.72;margin-top:10px;line-height:1.65;}
button{
  font:inherit;font-weight:700;font-size:clamp(16px,4.4vw,20px);cursor:pointer;
  background:var(--wool);color:var(--ink);border:4px solid var(--ink);border-radius:16px;
  padding:11px 26px;margin-top:12px;box-shadow:0 6px 0 var(--ink);
  transition:transform .06s,box-shadow .06s;
}
button:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink);}

#hud{
  position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  align-items:flex-start;
  padding:calc(0.9rem + env(safe-area-inset-top)) calc(1.1rem + env(safe-area-inset-right))
          0 calc(1.1rem + env(safe-area-inset-left));
  pointer-events:none;font-weight:700;
  font-size:clamp(1.15rem,3.4vw,1.9rem);color:var(--ink);
}
#hud > div{
  background:var(--paper-veil);border-radius:999px;padding:0.35rem 1.05rem;
  box-shadow:0 0.15rem 0 var(--ink-veil);
  backdrop-filter:blur(0.15rem);
}
#hud .right{text-align:right;font-size:clamp(0.85rem,2.4vw,1.15rem);opacity:.85;}

/* Werkzeugleiste unten rechts */
.tools{
  position:absolute;display:flex;gap:0.6rem;
  bottom:calc(0.9rem + env(safe-area-inset-bottom));
  right:calc(0.9rem + env(safe-area-inset-right));
}
.tool{
  pointer-events:auto;cursor:pointer;
  background:var(--paper-veil);border:0.19rem solid var(--ink);border-radius:0.85rem;
  width:2.9rem;height:2.9rem;font-size:1.3rem;display:flex;align-items:center;
  justify-content:center;box-shadow:0 0.25rem 0 var(--ink);
  transition:transform .06s,box-shadow .06s;user-select:none;
}
.tool:active{transform:translateY(0.16rem);box-shadow:0 0.09rem 0 var(--ink);}
/* Als Zeichnung statt als Emoji: das Vollbild-Zeichen fehlt in vielen
   Systemschriften und stand sonst als leeres Kaestchen da. */
/* im Vollbild zeigen die Pfeile nach innen */
.tool.on svg{transform:rotate(180deg);}
.tool svg{
  width:1.15rem;height:1.15rem;fill:none;stroke:var(--ink);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
.hide{display:none !important;}
.medal{font-size:15px;font-weight:700;color:#a8611a;margin-top:4px;}
.tag{
  display:inline-block;background:var(--ink);color:#ffe9c4;border-radius:999px;
  padding:3px 12px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:14px;
}
#loadScreen{color:#ffe9c4;font-weight:700;}
.paw{font-size:38px;animation:bob .9s ease-in-out infinite alternate;}
.loadtxt{margin-top:10px;font-size:17px;letter-spacing:.03em;}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-12px)}}