/* Gemeinsame Grundlage für Spiel und Werkstatt: Zurücksetzen sowie Figuren-, Gegenstands- und Gebietsbilder. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}

/* Figuren (gemalt oder gezeichnet) */
.character-svg{width:100%;height:100%;display:block;overflow:visible}
.painted-character,.painted-item{overflow:hidden!important;isolation:isolate}
.painted-character image,.painted-item image{pointer-events:none}
.g-figure-img{width:100%;height:100%;object-fit:contain;display:block}

/* Gebiete und Arenen */
.arena-landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.arena-svg{display:block}
.painted-arena{object-fit:fill;image-rendering:auto}
.painted-zone{object-fit:cover;object-position:50% 35%}

/* Gegenstandssymbole */
.item-art{display:block;position:relative;width:64px;height:64px;flex-shrink:0;border:1px solid #96794d;border-radius:9px;overflow:hidden;background:radial-gradient(ellipse at 48% 32%,#524a3a,#1a211c 75%);box-shadow:inset 0 0 0 3px #080f0b66,0 3px 8px #0004}
.item-art>i{display:block;width:100%;height:100%;background-repeat:no-repeat}
.item-art img{width:100%;height:100%;object-fit:contain}
.item-art>b{display:grid;place-items:center;width:100%;height:100%;font-size:28px}
.item-art>.item-svg{display:block;width:100%;height:100%}
.item-art>.painted-item{padding:3px}
.item-art.q1{background:radial-gradient(ellipse at 48% 32%,#3c5a38,#17251a 78%);border-color:#7fd45a}
.item-art.q2{background:radial-gradient(ellipse at 48% 32%,#2e4a66,#131f2d 78%);border-color:#4aa8ff}
.item-art.q3{background:radial-gradient(ellipse at 48% 32%,#4f3a68,#1f1830 78%);border-color:#b56cff;box-shadow:inset 0 0 0 3px #120c1a55,0 0 12px #b56cff22}
.item-art.q4{background:radial-gradient(ellipse at 48% 32%,#6e4420,#2d1a0c 78%);border-color:#ff9a2a;box-shadow:inset 0 0 0 3px #1a0e0655,0 0 16px #ff9a2a44}
.item-art.compact{width:38px;height:38px;border-radius:8px}
.item-art.compact>.painted-item{padding:1px}
.empty-item-art{width:38px;height:38px;display:grid;place-items:center;color:#acb494;border:1px dashed #7e8a67;border-radius:8px}
.material-sample{display:flex;align-items:center;gap:7px;font-size:9px;color:#d5c8a7;margin:7px 0}
.material-sample>i{width:25px;height:18px;display:block;border:1px solid #bba270;border-radius:4px;background-image:repeating-linear-gradient(45deg,#ffffff14 0 3px,transparent 3px 6px),linear-gradient(135deg,var(--mat-a,#6a6a5a),var(--mat-b,#2a2a22));flex-shrink:0}
@media(max-width:600px){.item-art{width:56px;height:56px}.item-art.compact,.empty-item-art{width:32px;height:32px}.material-sample{font-size:8px}}