/* WÜRFELTELLER · STAND 02
 * Fünf eigenständige HTML/CSS-Komponenten. Kein JavaScript, keine externen Abrufe.
 * Alle Regeln und Variablen sind auf .wt-tray beschränkt.
 * Materialkörnung: eingebettete, prozedurale SVG-Filter, keine Teller-Fotografien.
 */
.wt-tray {
  --wt-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20preserveAspectRatio%3D%22none%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.82%22%20numOctaves%3D%223%22%20seed%3D%2224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22150%22%20height%3D%22150%22%20filter%3D%22url%28%23n%29%22%20opacity%3D%22.75%22%2F%3E%3C%2Fsvg%3E");
  --wt-woodgrain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20preserveAspectRatio%3D%22none%22%20width%3D%22360%22%20height%3D%22240%22%20viewBox%3D%220%200%20360%20240%22%3E%3Cfilter%20id%3D%22w%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.007%20.18%22%20numOctaves%3D%223%22%20seed%3D%2216%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%22gamma%22%20amplitude%3D%221%22%20exponent%3D%221.7%22%20offset%3D%220%22%2F%3E%3CfeFuncG%20type%3D%22gamma%22%20amplitude%3D%221%22%20exponent%3D%221.7%22%20offset%3D%220%22%2F%3E%3CfeFuncB%20type%3D%22gamma%22%20amplitude%3D%221%22%20exponent%3D%221.7%22%20offset%3D%220%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22360%22%20height%3D%22240%22%20filter%3D%22url%28%23w%29%22%2F%3E%3C%2Fsvg%3E");
  --wt-leathergrain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20preserveAspectRatio%3D%22none%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cfilter%20id%3D%22l%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.33%22%20numOctaves%3D%223%22%20seed%3D%228%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeDiffuseLighting%20lighting-color%3D%22%23fff%22%20surfaceScale%3D%222.5%22%20diffuseConstant%3D%22.75%22%3E%3CfeDistantLight%20azimuth%3D%22225%22%20elevation%3D%2250%22%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url%28%23l%29%22%2F%3E%3C%2Fsvg%3E");
  --wt-shape: polygon(29.29% 0,70.71% 0,100% 29.29%,100% 70.71%,70.71% 100%,29.29% 100%,0 70.71%,0 29.29%);
  --wt-radius: 0%;
  --wt-well-inset: 8.5%;
  --wt-bed-inset: 12%;
  --wt-die-size: 17%;
  --wt-die-top: #fff9e9;
  --wt-die-bottom: #d8caaa;
  --wt-pip-color: #242629;
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  isolation: isolate;
  flex: none;
  filter: drop-shadow(0 1px 1px rgba(37,24,12,.28)) drop-shadow(0 12px 10px rgba(37,24,12,.17));
  -webkit-tap-highlight-color: transparent;
}
.wt-tray, .wt-tray * { box-sizing: border-box; }
.wt-tray .wt-base,
.wt-tray .wt-rim-edge,
.wt-tray .wt-rim,
.wt-tray .wt-lip,
.wt-tray .wt-well,
.wt-tray .wt-bed {
  position: absolute;
  clip-path: var(--wt-shape);
  border-radius: var(--wt-radius);
  pointer-events: none;
}
.wt-tray .wt-base {
  inset: 2% .2% -1.8%;
  background: linear-gradient(90deg,#21150e,#4f301c 24%,#3e2618 75%,#180e09);
}
.wt-tray .wt-rim-edge {
  inset: 0;
  background: linear-gradient(140deg,#d6b283 0%,#896747 24%,#46301e 56%,#211308 78%,#725131 100%);
}
.wt-tray .wt-rim {
  inset: .65%;
  background: #705033;
  overflow: hidden;
}
.wt-tray .wt-board {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(var(--wt-light,145deg),#926941,#5c3c23 58%,#795130);
  clip-path: var(--wt-board-shape);
}
.wt-tray .wt-board::before {
  content: "";
  position: absolute;
  inset: -45%;
  transform: rotate(var(--wt-grain-angle,0deg));
  background: var(--wt-woodgrain) 42% 50% / 360px 240px repeat;
  opacity: .75;
  mix-blend-mode: soft-light;
}
.wt-tray .wt-board::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg,rgba(255,221,168,.15),transparent 50%,rgba(0,0,0,.17));
}
.wt-tray .wt-joints {
  position: absolute;
  inset: .65%;
  width: 98.7%; height: 98.7%;
  fill: none;
  stroke: rgba(25,12,4,.5);
  stroke-width: .18;
  pointer-events: none;
  overflow: visible;
}
.wt-tray .wt-lip {
  inset: 7.3%;
  background: linear-gradient(145deg,#2c1a0e,#402414 44%,#ae8556 89%,#89633d);
}
.wt-tray .wt-well {
  inset: var(--wt-well-inset);
  background: linear-gradient(180deg,#0b1b14 0%,#1b382a 24%,#254b39 61%,#4b6e4c 100%);
}
.wt-tray .wt-bed {
  inset: var(--wt-bed-inset);
  background:
    radial-gradient(ellipse at 44% 70%,rgba(92,132,91,.20),transparent 75%),
    linear-gradient(150deg,#254e3c,#315f48 58%,#224332);
  overflow: hidden;
}
.wt-tray .wt-bed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wt-grain) 0 0 / 115px 115px repeat;
  mix-blend-mode: soft-light;
  opacity: .52;
}
.wt-tray .wt-bed::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.20),transparent 13%,transparent 90%,rgba(255,240,188,.035)),
    radial-gradient(ellipse at 50% 60%,transparent 33%,rgba(0,0,0,.10) 78%,rgba(0,0,0,.23));
}
.wt-tray .wt-inset-shadow {
  position: absolute;
  inset: var(--wt-bed-inset);
  width: calc(100% - var(--wt-bed-inset) * 2);
  height: calc(100% - var(--wt-bed-inset) * 2);
  pointer-events: none;
  overflow: visible;
}
.wt-tray .wt-stitch {
  position: absolute;
  pointer-events: none;
  fill: none;
  overflow: visible;
  stroke-linecap: round;
}
/* Die Würfel sind eine eigene Ebene. Für eine leere Komponente nur
   .wt-dice-layer entfernen; die Material- und Rahmenebenen bleiben bestehen. */
.wt-tray .wt-dice-layer {
  position: absolute;
  inset: var(--wt-bed-inset);
  z-index: 2;
}
.wt-tray .wt-die {
  position: absolute;
  left: var(--wt-x,50%);
  top: var(--wt-y,50%);
  width: var(--wt-die-size);
  aspect-ratio: 1;
  transform: translate(-50%,-50%) rotate(var(--wt-angle,0deg));
  border-radius: 22%;
  background:
    radial-gradient(ellipse at 30% 12%,rgba(255,255,255,.95),transparent 70%),
    linear-gradient(145deg,var(--wt-die-top) 8%,#f2e8d1 68%,var(--wt-die-bottom));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 1px 0 1px rgba(255,255,255,.7),
    inset -1px -2px 2px rgba(133,110,74,.24),
    0 2px 0 #c2b69f,
    1px 4px 0 #a89d88,
    2px 6px 4px rgba(0,0,0,.24),
    4px 10px 9px rgba(0,0,0,.20);
}
.wt-tray .wt-die::after {
  content: "";
  position: absolute;
  inset: 3%;
  border-radius: 20%;
  border: 1px solid rgba(255,255,255,.24);
  pointer-events: none;
}
.wt-tray .wt-pips {
  position: absolute;
  inset: 17%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(3,1fr);
  gap: 10%;
}
.wt-tray .wt-pip {
  width: 83%; height: 83%;
  justify-self: center; align-self: center;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle at 62% 70%,#414140 0%,var(--wt-pip-color) 64%,#101213 100%);
  box-shadow: inset 0 1px 1.5px rgba(0,0,0,.8),0 .6px 0 rgba(255,255,255,.8);
}
.wt-tray .wt-die[data-value="1"] .wt-pip:nth-child(5),
.wt-tray .wt-die[data-value="2"] .wt-pip:nth-child(1),
.wt-tray .wt-die[data-value="2"] .wt-pip:nth-child(9),
.wt-tray .wt-die[data-value="3"] .wt-pip:nth-child(1),
.wt-tray .wt-die[data-value="3"] .wt-pip:nth-child(5),
.wt-tray .wt-die[data-value="3"] .wt-pip:nth-child(9),
.wt-tray .wt-die[data-value="4"] .wt-pip:nth-child(1),
.wt-tray .wt-die[data-value="4"] .wt-pip:nth-child(3),
.wt-tray .wt-die[data-value="4"] .wt-pip:nth-child(7),
.wt-tray .wt-die[data-value="4"] .wt-pip:nth-child(9),
.wt-tray .wt-die[data-value="5"] .wt-pip:nth-child(1),
.wt-tray .wt-die[data-value="5"] .wt-pip:nth-child(3),
.wt-tray .wt-die[data-value="5"] .wt-pip:nth-child(5),
.wt-tray .wt-die[data-value="5"] .wt-pip:nth-child(7),
.wt-tray .wt-die[data-value="5"] .wt-pip:nth-child(9),
.wt-tray .wt-die[data-value="6"] .wt-pip:nth-child(1),
.wt-tray .wt-die[data-value="6"] .wt-pip:nth-child(3),
.wt-tray .wt-die[data-value="6"] .wt-pip:nth-child(4),
.wt-tray .wt-die[data-value="6"] .wt-pip:nth-child(6),
.wt-tray .wt-die[data-value="6"] .wt-pip:nth-child(7),
.wt-tray .wt-die[data-value="6"] .wt-pip:nth-child(9) { opacity: 1; }
/* 01 · CLUBHAUS — massiver, auf Gehrung gefügter Nussbaum; grüner Filz. */
.wt-tray--clubhaus .wt-rim::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(140deg,rgba(255,205,128,.12),transparent 47%,rgba(0,0,0,.11));
}
/* 02 · NOIR — gepolstertes Leder, eine feine bronzefarbene Einfassung. */
.wt-tray--noir {
  --wt-shape: inset(0 round 16%);
  --wt-radius: 16%;
  --wt-well-inset: 10.3%;
  --wt-bed-inset: 13.8%;
}
.wt-tray--noir .wt-base {
  background: linear-gradient(90deg,#141516,#343332 23%,#242523 80%,#111213);
}
.wt-tray--noir .wt-rim-edge {
  background: linear-gradient(130deg,#bc9e74,#6a5842 30%,#302a22 61%,#967b54 83%,#574836);
}
.wt-tray--noir .wt-rim {
  inset: .75%;
  background:
    radial-gradient(ellipse at 46% 0%,rgba(159,150,139,.24),transparent 45%),
    linear-gradient(140deg,#494847,#272829 45%,#1c1e20 83%,#393938);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.27),inset -3px -3px 6px rgba(0,0,0,.42);
}
.wt-tray--noir .wt-rim::before {
  content:""; position:absolute; inset:0;
  background:var(--wt-leathergrain) 0 0 / 125px 125px;
  mix-blend-mode:soft-light; opacity:.24;
}
.wt-tray--noir .wt-lip {
  inset: 9.4%;
  --wt-shape: inset(0 round 11%);
  --wt-radius: 11%;
  background:linear-gradient(145deg,#0c0d0f,#23211f 55%,#7c705c);
}
.wt-tray--noir .wt-well {
  --wt-shape: inset(0 round 10%);
  --wt-radius: 10%;
  background:linear-gradient(180deg,#090a0c,#222426 34%,#484747);
}
.wt-tray--noir .wt-bed {
  --wt-shape: inset(0 round 8%);
  --wt-radius: 8%;
  background:radial-gradient(ellipse at 46% 70%,#3b3c3c,#2c2e30 84%);
}
.wt-tray--noir .wt-bed::before {
  background-image:var(--wt-leathergrain);
  background-size:110px 110px; opacity:.23;
}
.wt-tray--noir .wt-stitch {
  inset:3.7%; width:92.6%; height:92.6%;
  stroke:#9a8b74; stroke-width:.22; stroke-dasharray: .85 1.0; opacity:.76;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.8));
}
/* 03 · ROYAL BLUE — dunkelblauer Samt und kreisförmig gebürstetes Messing. */
.wt-tray--royal {
  --wt-shape: circle(50%);
  --wt-radius: 50%;
  --wt-well-inset: 9.2%;
  --wt-bed-inset: 13%;
}
.wt-tray--royal .wt-base {
  background:linear-gradient(90deg,#52402a,#c8aa6b 24%,#957545 69%,#453624);
}
.wt-tray--royal .wt-rim-edge {
  background:linear-gradient(135deg,#ffedc4,#c5a66d 33%,#6d542e 55%,#e0c58e 76%,#695136);
}
.wt-tray--royal .wt-rim {
  inset:.7%;
  background:
    repeating-radial-gradient(circle at 50% 50%,rgba(255,246,209,.14) 0 .55px,rgba(55,35,12,.09) .8px 1.25px,transparent 1.6px 2.1px),
    conic-gradient(from 25deg,#ae8a4f,#e0c68d 11%,#9a753d 21%,#806134 33%,#c7a767 43%,#f3dfa7 52%,#b89658 64%,#8b6b39 76%,#d2b77d 91%,#ae8a4f);
  box-shadow:inset 0 1px 2px #fae9bb,inset 0 -1px 2px rgba(64,43,15,.8);
}
.wt-tray--royal .wt-lip {
  inset:7.4%;
  background:linear-gradient(155deg,#55442d,#826b47 40%,#e5d09b 81%,#b39251);
}
.wt-tray--royal .wt-well {
  background:linear-gradient(180deg,#06101e,#152c48 45%,#375779);
}
.wt-tray--royal .wt-bed {
  background:
    radial-gradient(ellipse at 37% 80%,rgba(82,120,161,.30),transparent 70%),
    linear-gradient(155deg,#193353,#254e75 63%,#1c3c5c);
}
.wt-tray--royal .wt-bed::before {
  background-size:85px 110px; opacity:.38;
}
/* 04 · BORDEAUX — sechseckiger dunkler Holzrahmen mit genähtem Lederbett. */
.wt-tray--bordeaux {
  --wt-shape:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  --wt-well-inset:8.8%;
  --wt-bed-inset:12.3%;
  aspect-ratio:1.1547;
}
.wt-tray--bordeaux .wt-base {
  background:linear-gradient(90deg,#171111,#3a2823 25%,#2d1c19 72%,#17100e);
}
.wt-tray--bordeaux .wt-rim-edge {
  background:linear-gradient(130deg,#927263,#4b3429 35%,#201411 72%,#584032);
}
.wt-tray--bordeaux .wt-board {
  background:linear-gradient(var(--wt-light,145deg),#50392f,#241913 57%,#432d23);
}
.wt-tray--bordeaux .wt-board::before { opacity:.8; }
.wt-tray--bordeaux .wt-joints {stroke:rgba(12,5,2,.75);}
.wt-tray--bordeaux .wt-lip {
  inset:7.5%;
  background:linear-gradient(150deg,#594533,#4b3025 40%,#ac8559 85%,#634b35);
}
.wt-tray--bordeaux .wt-well {
  background:linear-gradient(180deg,#280c15,#4c1426 30%,#843e4a);
}
.wt-tray--bordeaux .wt-bed {
  background:
    radial-gradient(ellipse at 35% 75%,rgba(174,74,91,.18),transparent 70%),
    linear-gradient(145deg,#58172b,#7b293b 64%,#65202f);
}
.wt-tray--bordeaux .wt-bed::before {
  background-image:var(--wt-leathergrain);
  background-size:110px 110px; opacity:.27;
}
.wt-tray--bordeaux .wt-stitch {
  inset:16.1%; width:67.8%; height:67.8%;
  stroke:#c4947f; stroke-width:.27; stroke-dasharray:1.15 1.15; opacity:.78;
  filter:drop-shadow(0 1px 0 rgba(26,0,5,.8));
}
/* 05 · ATELIER — helle Eiche, großzügige Rechteckform, taupefarbenes Wildleder. */
.wt-tray--atelier {
  --wt-shape:inset(0 round 9% / 15%);
  --wt-radius:9% / 15%;
  --wt-well-inset:7.3%;
  --wt-bed-inset:11.7%;
  --wt-die-size:12.3%;
  aspect-ratio:1.6;
  filter:drop-shadow(0 1px 1px rgba(65,47,28,.22)) drop-shadow(0 12px 10px rgba(65,47,28,.16));
}
.wt-tray--atelier .wt-base {
  background:linear-gradient(90deg,#98774e,#c0a173 25%,#b49365 70%,#846744);
}
.wt-tray--atelier .wt-rim-edge {
  background:linear-gradient(140deg,#f5e6c6,#d4b98d 36%,#ad8e62 73%,#dfc59a);
}
.wt-tray--atelier .wt-rim {
  inset:.75% .5%;
  background:
    linear-gradient(135deg,rgba(255,249,225,.25),transparent 62%,rgba(112,80,41,.09)),
    linear-gradient(3deg,#c3a371,#d8bd92 53%,#dfc8a0);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -1px 1px rgba(94,67,28,.24);
}
.wt-tray--atelier .wt-rim::before {
  content:""; position:absolute; inset:0;
  background:var(--wt-woodgrain) 0 50% / 350px 185px;
  opacity:.58; mix-blend-mode:multiply;
}
.wt-tray--atelier .wt-rim::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(175deg,rgba(255,243,214,.22),transparent 25%,transparent 75%,rgba(94,61,28,.1));
}
.wt-tray--atelier .wt-lip {
  inset:6.1%;
  --wt-shape:inset(0 round 6% / 11%);
  --wt-radius:6% / 11%;
  background:linear-gradient(155deg,#927449,#b5996f 53%,#f2e1bd);
}
.wt-tray--atelier .wt-well {
  --wt-shape:inset(0 round 5% / 9%);
  --wt-radius:5% / 9%;
  background:linear-gradient(180deg,#756550,#94836b 35%,#c1b298);
}
.wt-tray--atelier .wt-bed {
  --wt-shape:inset(0 round 3.5% / 7%);
  --wt-radius:3.5% / 7%;
  background:
    radial-gradient(ellipse at 40% 80%,rgba(219,207,183,.30),transparent 70%),
    linear-gradient(130deg,#a39680,#beb099 65%,#b0a18b);
}
.wt-tray--atelier .wt-bed::before {opacity:.5; background-size:92px 92px;}
.wt-tray--atelier .wt-bed::after {
  background:linear-gradient(180deg,rgba(49,35,14,.16),transparent 16%),radial-gradient(ellipse at 50% 65%,transparent 35%,rgba(68,50,24,.13));
}
/* Nur die Komponente selbst skaliert. Keine Bildschirmbreiten-Abhängigkeit,
   kein globaler Reset, kein Eingriff in das Layout des übergeordneten Spiels. */


/* WÜRFELTELLER · STAND 06
 * Additive Erweiterung: 06 Cognac, 07 Graphit, 08 Petrol & Kupfer,
 * 09 Elfenbein, 10 Aubergine. Benötigt teller-stand02.css als Basis.
 * Alle Materialregeln sind ausschließlich auf die fünf neuen Klassen begrenzt.
 * Materialstruktur: CSS-Verläufe und die eingebetteten prozeduralen SVG-Texturen.
 */

/* 06 · COGNAC — acht Gehrungsbretter, Walnuss, genähtes Sattlerleder. */
.wt-tray--cognac {
  --wt-shape:polygon(29.29% 0,70.71% 0,100% 29.29%,100% 70.71%,70.71% 100%,29.29% 100%,0 70.71%,0 29.29%);
  --wt-radius:0%; --wt-well-inset:8.5%; --wt-bed-inset:12%;
}
.wt-tray--cognac .wt-base {
  background:linear-gradient(90deg,#1d130d,#483020 24%,#312116 76%,#170e09);
}
.wt-tray--cognac .wt-rim-edge {
  background:linear-gradient(138deg,#b99365,#735135 27%,#3b2415 64%,#27170e 82%,#735033);
}
.wt-tray--cognac .wt-board {
  background:linear-gradient(var(--wt-light,145deg),#755333,#422c1c 57%,#64452a);
}
.wt-tray--cognac .wt-board::before {opacity:.79;}
.wt-tray--cognac .wt-joints {stroke:rgba(19,10,4,.66);}
.wt-tray--cognac .wt-lip {
  background:linear-gradient(147deg,#291a10,#3f2415 38%,#c09966 83%,#7e542e);
}
.wt-tray--cognac .wt-well {
  background:linear-gradient(180deg,#3c1e10,#774124 34%,#c79056 94%);
}
.wt-tray--cognac .wt-bed {
  background:
    radial-gradient(ellipse at 37% 74%,rgba(247,183,113,.16),transparent 69%),
    linear-gradient(146deg,#94582f,#b77946 61%,#a16838);
}
.wt-tray--cognac .wt-bed::before {
  background:var(--wt-leathergrain) 0 0 / 118px 118px; opacity:.31;
}
.wt-tray--cognac .wt-bed::after {
  background:linear-gradient(180deg,rgba(43,19,7,.19),transparent 15%,transparent 89%,rgba(255,222,169,.06)),
    radial-gradient(ellipse at 48% 62%,transparent 36%,rgba(51,22,9,.15) 87%);
}
.wt-tray--cognac .wt-stitch {
  inset:15.6%;width:68.8%;height:68.8%;
  stroke:#ebc99a;stroke-width:.27;stroke-dasharray:1.05 1.1;opacity:.83;
  filter:drop-shadow(0 .7px .25px rgba(49,22,8,.85));
}

/* 07 · GRAPHIT — gebürsteter Metallrahmen, kühler Mikrovelours. */
.wt-tray--graphit {
  --wt-shape:inset(0 round 16%); --wt-radius:16%;
  --wt-well-inset:10.3%; --wt-bed-inset:13.8%;
}
.wt-tray--graphit .wt-base {
  background:linear-gradient(90deg,#14191c,#51595f 23%,#2c3338 75%,#14191d);
}
.wt-tray--graphit .wt-rim-edge {
  background:linear-gradient(138deg,#c0c6c8,#737f87 28%,#303b43 54%,#222a30 68%,#919ba0 90%,#576169);
}
.wt-tray--graphit .wt-rim {
  inset:.75%;
  background:
    repeating-linear-gradient(93deg,rgba(240,249,255,.055) 0 .5px,rgba(8,16,21,.045) .7px 1.2px,transparent 1.5px 2.6px),
    linear-gradient(135deg,#859097 0%,#505c65 24%,#69757d 40%,#37434c 66%,#525f68 83%,#7e8a91);
  box-shadow:inset 0 1px 1px #e4eced55,inset 0 -2px 3px #10171e66;
}
.wt-tray--graphit .wt-rim::after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 19%,#e0ebee13 29%,transparent 45%,#08151b15 73%,transparent 83%);
}
.wt-tray--graphit .wt-lip {
  inset:9.4%; --wt-shape:inset(0 round 11%); --wt-radius:11%;
  background:linear-gradient(146deg,#111b22,#26313a 48%,#a1acb0);
}
.wt-tray--graphit .wt-well {
  --wt-shape:inset(0 round 10%); --wt-radius:10%;
  background:linear-gradient(180deg,#111a20,#29353d 38%,#5b666b);
}
.wt-tray--graphit .wt-bed {
  --wt-shape:inset(0 round 8%); --wt-radius:8%;
  background:radial-gradient(ellipse at 39% 76%,#5361690f,transparent 74%),
    linear-gradient(144deg,#303c45,#46545d 66%,#3a474f);
}
.wt-tray--graphit .wt-bed::before {
  background:var(--wt-grain) 0 0 / 82px 98px;opacity:.39;
}
.wt-tray--graphit .wt-bed::after {
  background:linear-gradient(180deg,#0b162530,transparent 14%),radial-gradient(ellipse at 45% 65%,transparent 37%,#0a1b242c);
}

/* 08 · PETROL & KUPFER — runde, kreisförmig gebürstete Kupferschale. */
.wt-tray--petrol {
  --wt-shape:circle(50%); --wt-radius:50%;
  --wt-well-inset:9.2%; --wt-bed-inset:13%;
}
.wt-tray--petrol .wt-base {
  background:linear-gradient(90deg,#643d2c,#c28b62 25%,#955b3e 70%,#4c2a20);
}
.wt-tray--petrol .wt-rim-edge {
  background:linear-gradient(133deg,#ffe0b7,#c1845e 32%,#6a3526 54%,#e6b58b 79%,#814f37);
}
.wt-tray--petrol .wt-rim {
  inset:.7%;
  background:
    repeating-radial-gradient(circle at 50% 50%,rgba(255,219,181,.15) 0 .55px,rgba(89,39,19,.08) .8px 1.25px,transparent 1.6px 2.1px),
    conic-gradient(from 22deg,#b47b55,#edc39a 12%,#bc825c 23%,#915132 34%,#cb986e 44%,#f4d2a9 53%,#b07954 65%,#965d3d 76%,#deb087 90%,#b47b55);
  box-shadow:inset 0 1px 2px #ffe0bc,inset 0 -1px 2px #65381ecc;
}
.wt-tray--petrol .wt-rim::after {
  content:"";position:absolute;inset:0;opacity:.3;
  background:linear-gradient(117deg,transparent 19.8%,#fff1d333 20%,transparent 20.2%),
    linear-gradient(141deg,transparent 84.8%,#60371e29 85%,transparent 85.2%);
}
.wt-tray--petrol .wt-lip {
  inset:7.4%; background:linear-gradient(151deg,#603a2c,#a26947 46%,#f3d1a7 83%,#ae754d);
}
.wt-tray--petrol .wt-well {
  background:linear-gradient(180deg,#06242a,#12434a 45%,#487b7c);
}
.wt-tray--petrol .wt-bed {
  background:radial-gradient(ellipse at 36% 76%,rgba(117,173,164,.16),transparent 70%),
    linear-gradient(143deg,#17515a,#2d7076 63%,#225a62);
}
.wt-tray--petrol .wt-bed::before {background-size:94px 106px;opacity:.45;}
.wt-tray--petrol .wt-bed::after {
  background:linear-gradient(180deg,#061e2833,transparent 14%),radial-gradient(ellipse at 50% 63%,transparent 35%,#05252b2c);
}

/* 09 · ELFENBEIN — Ahorngehrung, Champagnerkante, cremefarbenes Wildleder.
   Der Materialname bezeichnet nur die Farbe; kein tierisches Elfenbein. */
.wt-tray--elfenbein {
  --wt-shape:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  --wt-radius:0%;--wt-well-inset:8.8%;--wt-bed-inset:12.3%;aspect-ratio:1.1547;
}
.wt-tray--elfenbein .wt-base {
  background:linear-gradient(90deg,#9a825b,#cbb38b 25%,#b19870 76%,#816944);
}
.wt-tray--elfenbein .wt-rim-edge {
  background:linear-gradient(132deg,#fff1d6,#dfc8a0 29%,#b09870 68%,#f0dbb6);
}
.wt-tray--elfenbein .wt-rim {background:#d8c29a;}
.wt-tray--elfenbein .wt-board {
  background:linear-gradient(var(--wt-light,145deg),#efdfbf,#ceb58b 60%,#e4d2ad);
}
.wt-tray--elfenbein .wt-board::before {opacity:.32;mix-blend-mode:multiply;}
.wt-tray--elfenbein .wt-board::after {
  background:linear-gradient(131deg,#fff4df2b,transparent 54%,#806a4312);
}
.wt-tray--elfenbein .wt-joints {stroke:#7f633838;stroke-width:.13;}
.wt-tray--elfenbein .wt-lip {
  inset:7.5%;background:linear-gradient(145deg,#b7a47e,#d9c6a0 39%,#978665 54%,#fff0d0 84%,#c8b48d);
}
.wt-tray--elfenbein .wt-well {
  background:linear-gradient(180deg,#8b7d66,#b4a68b 31%,#e1d5bd);
}
.wt-tray--elfenbein .wt-bed {
  background:radial-gradient(ellipse at 34% 79%,#f6ebd62a,transparent 72%),
    linear-gradient(142deg,#c6b89b,#d7cab0 63%,#cabc9f);
}
.wt-tray--elfenbein .wt-bed::before {background-size:92px 103px;opacity:.38;}
.wt-tray--elfenbein .wt-bed::after {
  background:linear-gradient(180deg,#513b1829,transparent 16%),radial-gradient(ellipse at 50% 64%,transparent 35%,#6c542421);
}

/* 10 · AUBERGINE — dunkles Holz, zurückhaltende Metallkante, violetter Samt. */
.wt-tray--aubergine {
  --wt-shape:inset(0 round 9% / 15%); --wt-radius:9% / 15%;
  --wt-well-inset:7.3%; --wt-bed-inset:11.7%; --wt-die-size:12.3%;aspect-ratio:1.6;
}
.wt-tray--aubergine .wt-base {
  background:linear-gradient(90deg,#121214,#30282b 25%,#241d22 71%,#100f12);
}
.wt-tray--aubergine .wt-rim-edge {
  background:linear-gradient(137deg,#74625b,#3e3030 34%,#1e181d 72%,#594a48);
}
.wt-tray--aubergine .wt-rim {
  inset:.75% .5%;
  background:linear-gradient(134deg,#dcc7b113,transparent 63%,#0e0a121c),linear-gradient(3deg,#292126,#433333 53%,#493735);
  box-shadow:inset 0 1px 1px #b99a7a38,inset 0 -1px 1px #0d081c66;
}
.wt-tray--aubergine .wt-rim::before {
  content:"";position:absolute;inset:0;background:var(--wt-woodgrain) 0 50% / 350px 185px;
  opacity:.63;mix-blend-mode:soft-light;
}
.wt-tray--aubergine .wt-rim::after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(176deg,#fff0db16,transparent 25%,transparent 77%,#0f081929);
}
.wt-tray--aubergine .wt-lip {
  inset:6.1%;--wt-shape:inset(0 round 6% / 11%);--wt-radius:6% / 11%;
  background:linear-gradient(151deg,#665859,#332b31 39%,#837477 82%,#41363d);
}
.wt-tray--aubergine .wt-well {
  --wt-shape:inset(0 round 5% / 9%);--wt-radius:5% / 9%;
  background:linear-gradient(180deg,#201324,#412238 33%,#835773);
}
.wt-tray--aubergine .wt-bed {
  --wt-shape:inset(0 round 3.5% / 7%);--wt-radius:3.5% / 7%;
  background:radial-gradient(ellipse at 36% 76%,#b687a724,transparent 72%),
    linear-gradient(136deg,#4b2946,#72435f 63%,#5b3451);
}
.wt-tray--aubergine .wt-bed::before {background-size:87px 112px;opacity:.4;}
.wt-tray--aubergine .wt-bed::after {
  background:linear-gradient(180deg,#1f0c2230,transparent 16%),radial-gradient(ellipse at 50% 64%,transparent 35%,#23082526);
}

/* Stand 08 · additive Ausstattung; keine Ersetzung der zehn bisherigen Teller. */
.wt-tray--rubin {--wt-shape:polygon(50% 0,100% 16%,100% 72%,50% 100%,0 72%,0 16%);aspect-ratio:.94;--wt-bed-inset:12%;--wt-well-inset:8.7%}
.wt-tray--rubin .wt-base {background:linear-gradient(90deg,#170e0d,#432621 30%,#2d1916 75%,#100908)}
.wt-tray--rubin .wt-rim-edge {background:linear-gradient(140deg,#bb927a,#694436 30%,#231310 64%,#745144)}
.wt-tray--rubin .wt-rim{background:#523127}
.wt-tray--rubin .wt-board{background:linear-gradient(var(--wt-light,140deg),#6e493a,#39231c 55%,#63402f)}
.wt-tray--rubin .wt-lip{background:linear-gradient(145deg,#130b08,#381b15 48%,#a78265)}
.wt-tray--rubin .wt-well{background:linear-gradient(180deg,#230a11,#4f1727 44%,#8d3c4c)}
.wt-tray--rubin .wt-bed{background:radial-gradient(ellipse at 43% 68%,#832c3c,#661827 80%,#45101e)}
.wt-tray--rubin .wt-bed::before{background-image:var(--wt-leathergrain);background-size:120px;opacity:.34}
.wt-tray--rubin .wt-stitch{inset:13.8%;width:72.4%;height:72.4%;stroke:#bc8c78;stroke-width:.19;stroke-dasharray:.8 .9;opacity:.58}
.wt-tray--oval{--wt-shape:ellipse(50% 50%);--wt-radius:50%;aspect-ratio:1.52;--wt-bed-inset:11.5%;--wt-well-inset:8.3%}
.wt-tray--oval .wt-base{background:linear-gradient(90deg,#211510,#543a2a 25%,#332119 85%,#140e0a)}
.wt-tray--oval .wt-rim-edge{background:linear-gradient(135deg,#b79169,#75563c 35%,#2f1f15 68%,#987350)}
.wt-tray--oval .wt-rim{background:linear-gradient(135deg,#826248,#65472e 40%,#483020 70%,#96724a);box-shadow:inset 0 1px 3px #e9cfa477,inset 0 -3px 4px #170d0966}
.wt-tray--oval .wt-rim::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--wt-woodgrain) 50% 50%/360px 230px;mix-blend-mode:soft-light;opacity:.75}
.wt-tray--oval .wt-rim::after{content:'';position:absolute;inset:2%;border:1px solid #d1aa7344;border-radius:50%;box-shadow:0 1px 1px #1a110c55}
.wt-tray--oval .wt-lip{inset:7%;background:linear-gradient(140deg,#1c170f,#3b3123 60%,#bc9161)}
.wt-tray--oval .wt-well{background:linear-gradient(180deg,#0d272e,#20515a 40%,#477980)}
.wt-tray--oval .wt-bed{background:radial-gradient(ellipse at 44% 64%,#326f75,#22525f 85%)}
.wt-tray--oval .wt-bed::before{background:var(--wt-grain) 0 0/88px;opacity:.6}

/* Originalbecher, ohne die Spiel- und Menülayouts. */
.cup-button{position:absolute;left:-3%;top:1%;width:23%;aspect-ratio:.76;background:transparent;border:0;padding:0;z-index:12;transform:rotate(-14deg);transform-origin:50% 88%;appearance:none;-webkit-appearance:none;filter:drop-shadow(5px 13px 7px #20181045);cursor:pointer}.wt-tray--atelier .cup-button{width:18%;top:-9%}.cup-button:disabled{cursor:default;opacity:1}.cup-button:focus-visible{outline:2px dashed #b39762;outline-offset:7px;border-radius:14px}.cup-body{position:absolute;inset:13% 2% 4%;border-radius:6% 6% 39% 39% / 6% 6% 15% 15%;background:linear-gradient(90deg,#1b100b,#65452e 17%,#8a6040 35%,#65442d 66%,#2b1b13 100%);border:1px solid #402b20;box-shadow:inset 2px 0 3px #ac7b5266,inset -2px -2px 5px #0c0907b3;overflow:hidden}.cup-body::before{content:'';position:absolute;inset:0;background-image:var(--wt-leathergrain);background-size:85px;mix-blend-mode:soft-light;opacity:.42}.cup-body::after{content:'';position:absolute;inset:10% 8% 7%;border:1px dashed #b28c606e;border-radius:4% 4% 39% 39% / 4% 4% 11% 11%;box-shadow:0 1px 0 #271c1244}.cup-base{position:absolute;bottom:3%;left:6%;width:88%;height:9%;border-radius:0 0 50% 50%;background:linear-gradient(90deg,#513522,#bb9360 25%,#896744 65%,#3f2a1d);box-shadow:0 2px 2px #1b100950}.cup-ring{position:absolute;top:5.5%;left:0;width:100%;height:21%;border-radius:50%;background:linear-gradient(150deg,#d0b181,#73522f 45%,#332116 65%,#b59466);box-shadow:0 2px 3px #1b10097a,inset 0 1px 1px #dfc296}.cup-interior{position:absolute;inset:11% 6% 16%;border-radius:50%;background:radial-gradient(ellipse at 52% 66%,#070706 10%,#1b120d 66%,#59412a 100%);box-shadow:inset 0 4px 5px #000c,inset 0 -1px 1px #d6b07d66}.cup-mouth-anchor{position:absolute;width:1px;height:1px;left:50%;top:15%;pointer-events:none}.cup-emblem{position:absolute;top:50%;left:35%;width:30%;aspect-ratio:1;transform:rotate(45deg);border:1px solid #dab78166;border-radius:20%;opacity:.85;box-shadow:0 1px 0 #26190daa}.cup-emblem::before,.cup-emblem::after{content:'';position:absolute;width:18%;height:18%;border-radius:50%;background:#c8a06d70;box-shadow:0 1px 0 #26190dcc}.cup-emblem::before{top:18%;left:18%}.cup-emblem::after{bottom:18%;right:18%}
.wt-tray--oval .cup-button{width:18%;top:-9%}
.wt-tray--aubergine .cup-button {width:18%;top:-9%;}

:root{--wood-grain:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20preserveAspectRatio%3D%22none%22%20width%3D%22360%22%20height%3D%22240%22%20viewBox%3D%220%200%20360%20240%22%3E%3Cfilter%20id%3D%22w%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.007%20.18%22%20numOctaves%3D%223%22%20seed%3D%2216%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%22gamma%22%20amplitude%3D%221%22%20exponent%3D%221.7%22%20offset%3D%220%22%2F%3E%3CfeFuncG%20type%3D%22gamma%22%20amplitude%3D%221%22%20exponent%3D%221.7%22%20offset%3D%220%22%2F%3E%3CfeFuncB%20type%3D%22gamma%22%20amplitude%3D%221%22%20exponent%3D%221.7%22%20offset%3D%220%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22360%22%20height%3D%22240%22%20filter%3D%22url%28%23w%29%22%2F%3E%3C%2Fsvg%3E");--leather-grain:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20preserveAspectRatio%3D%22none%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cfilter%20id%3D%22l%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.33%22%20numOctaves%3D%223%22%20seed%3D%228%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeDiffuseLighting%20lighting-color%3D%22%23fff%22%20surfaceScale%3D%222.5%22%20diffuseConstant%3D%22.75%22%3E%3CfeDistantLight%20azimuth%3D%22225%22%20elevation%3D%2250%22%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url%28%23l%29%22%2F%3E%3C%2Fsvg%3E");}
:root{--page-bg15:linear-gradient(#eee9df,#eee9df);--table-bg15:radial-gradient(ellipse at 30% 5%,#f0d6a828,transparent 70%),linear-gradient(96deg,#61412d,#78543a 42%,#5e422f);--table-grain15:var(--wood-grain);--table-size15:860px 650px;--table-opacity15:.72}

/* Unveränderte interaktive Würfelgestaltung aus PaschDuell Stand 24. */
.game-dice .wt-die{border:0;padding:0;margin:0;appearance:none;-webkit-appearance:none;touch-action:manipulation;will-change:transform;cursor:pointer;transition:outline-color .2s;outline:2px solid transparent;outline-offset:7px}.game-dice .wt-die::before{content:'';position:absolute;inset:-7px;border-radius:27%;background:transparent}.game-dice .wt-die:disabled{opacity:1;cursor:default}.game-dice .wt-die.is-held{outline-color:#dec796}.held-mark{position:absolute;right:-9px;top:-10px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;font-weight:700;font-size:12px;line-height:1;background:#e2c88f;color:#3f3e2e;box-shadow:0 2px 4px #0003;border:1px solid #f6e7c6;opacity:0;transition:opacity .12s;pointer-events:none;transform:rotate(calc(-1 * var(--game-angle,0deg)))}.is-held .held-mark{opacity:1}.game-dice .wt-die:focus-visible{outline:3px solid #fff;outline-offset:6px}

/* Originalwürfel aus PaschDuell Stand 24, Selektor für die Topfpille angepasst. */
.dice-pill .wt-die {
  position: absolute;
  left: var(--wt-x,50%);
  top: var(--wt-y,50%);
  width: var(--wt-die-size);
  aspect-ratio: 1;
  transform: translate(-50%,-50%) rotate(var(--wt-angle,0deg));
  border-radius: 22%;
  background:
    radial-gradient(ellipse at 30% 12%,rgba(255,255,255,.95),transparent 70%),
    linear-gradient(145deg,var(--wt-die-top) 8%,#f2e8d1 68%,var(--wt-die-bottom));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 1px 0 1px rgba(255,255,255,.7),
    inset -1px -2px 2px rgba(133,110,74,.24),
    0 2px 0 #c2b69f,
    1px 4px 0 #a89d88,
    2px 6px 4px rgba(0,0,0,.24),
    4px 10px 9px rgba(0,0,0,.20);
}
.dice-pill .wt-die::after {
  content: "";
  position: absolute;
  inset: 3%;
  border-radius: 20%;
  border: 1px solid rgba(255,255,255,.24);
  pointer-events: none;
}
.dice-pill .wt-pips {
  position: absolute;
  inset: 17%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(3,1fr);
  gap: 10%;
}
.dice-pill .wt-pip {
  width: 83%; height: 83%;
  justify-self: center; align-self: center;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle at 62% 70%,#414140 0%,var(--wt-pip-color) 64%,#101213 100%);
  box-shadow: inset 0 1px 1.5px rgba(0,0,0,.8),0 .6px 0 rgba(255,255,255,.8);
}
.dice-pill .wt-die[data-value="1"] .wt-pip:nth-child(5),
.dice-pill .wt-die[data-value="2"] .wt-pip:nth-child(1),
.dice-pill .wt-die[data-value="2"] .wt-pip:nth-child(9),
.dice-pill .wt-die[data-value="3"] .wt-pip:nth-child(1),
.dice-pill .wt-die[data-value="3"] .wt-pip:nth-child(5),
.dice-pill .wt-die[data-value="3"] .wt-pip:nth-child(9),
.dice-pill .wt-die[data-value="4"] .wt-pip:nth-child(1),
.dice-pill .wt-die[data-value="4"] .wt-pip:nth-child(3),
.dice-pill .wt-die[data-value="4"] .wt-pip:nth-child(7),
.dice-pill .wt-die[data-value="4"] .wt-pip:nth-child(9),
.dice-pill .wt-die[data-value="5"] .wt-pip:nth-child(1),
.dice-pill .wt-die[data-value="5"] .wt-pip:nth-child(3),
.dice-pill .wt-die[data-value="5"] .wt-pip:nth-child(5),
.dice-pill .wt-die[data-value="5"] .wt-pip:nth-child(7),
.dice-pill .wt-die[data-value="5"] .wt-pip:nth-child(9),
.dice-pill .wt-die[data-value="6"] .wt-pip:nth-child(1),
.dice-pill .wt-die[data-value="6"] .wt-pip:nth-child(3),
.dice-pill .wt-die[data-value="6"] .wt-pip:nth-child(4),
.dice-pill .wt-die[data-value="6"] .wt-pip:nth-child(6),
.dice-pill .wt-die[data-value="6"] .wt-pip:nth-child(7),
.dice-pill .wt-die[data-value="6"] .wt-pip:nth-child(9) { opacity: 1; }

.pot{display:inline-flex;flex-direction:column;align-items:center;flex:none;filter:drop-shadow(0 2px 3px #0003)}
.score-pill{background:#63402a;color:#fff7e9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px 3px;width:44px;height:29px;border:1px solid #a67c55;border-radius:10px 10px 5px 5px;white-space:nowrap;flex:none;z-index:1}
.score-pill small{font-size:9px;line-height:1}.score-pill strong{font-size:12px;line-height:1;font-variant-numeric:tabular-nums}
.dice-pill{background:#efe6d6;border:1px solid #a67c55;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:1px;width:calc(var(--die-size) + 4px);height:max-content;margin-top:-1px;border-radius:0 0 10px 10px;flex:none}
.die{width:var(--die-size);height:var(--die-size);flex:0 0 var(--die-size);border-radius:3px;background:#fffdf6;display:grid;place-items:center;color:#284f39;font-size:var(--die-size);line-height:1;box-shadow:0 1px 2px #0003}
.pot.hidden .dice-pill{display:none}.pot.hidden .score-pill{border-radius:10px}

:root{font-family:system-ui,-apple-system,sans-serif;color:#294235;background:#eee9df;font-synthesis:none;--serif:Georgia,'Times New Roman',serif;--view-w18:100vw;--view-h18:100vh;--view-x18:0px;--view-y18:0px}
@supports(height:100dvh){:root{--view-h18:100dvh;--view-w18:100dvw}}
*{box-sizing:border-box}html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;min-height:100%;background-image:var(--page-bg15)}
button,select,summary{-webkit-tap-highlight-color:transparent}
#game-view{position:fixed;left:var(--view-x18);top:var(--view-y18);width:var(--view-w18);height:var(--view-h18);display:grid;grid-template-rows:calc(46px + env(safe-area-inset-top,0px)) minmax(0,1fr);min-width:0;min-height:0}
.game-top12{display:flex;align-items:center;gap:12px;min-width:0;padding:calc(6px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 6px max(12px,env(safe-area-inset-left,0px));background:#f4f1e8;border-bottom:1px solid #d7d4c8;z-index:2}
.game-brand12{display:flex;align-items:center;gap:9px;flex:none;margin:0;font:400 28px/1.05 var(--serif);color:#263b30;letter-spacing:-.6px;white-space:nowrap}
.game-brand12 img{display:block;width:29px;height:29px;object-fit:contain;flex:none}
.game-label{margin-left:auto;white-space:nowrap;font-size:11px;color:#65745f}
.table-settings{position:relative;flex:none}
.table-settings summary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:34px;padding:5px 12px;border:1px solid #b7bea9;border-radius:30px;background:#fffef7;color:#30513e;cursor:pointer;list-style:none;font-size:12px;font-weight:650;white-space:nowrap}
.table-settings summary::-webkit-details-marker{display:none}.table-settings summary svg{width:21px;height:21px;flex:none}
.table-settings[open] summary{background:#e8efdc;border-color:#6e865f}
.table-settings:not([open]) .settings-panel{display:none}
.settings-panel{position:absolute;right:0;top:calc(100% + 7px);z-index:10;width:min(300px,calc(var(--view-w18) - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));display:grid;gap:10px;padding:14px;background:#fffef7;border:1px solid #b7bea9;border-radius:14px;box-shadow:0 8px 22px #20170f40;color:#294235}
.settings-panel label{font-size:12px;font-weight:650}.settings-panel select,.settings-panel button{font:12px/1.2 system-ui,-apple-system,sans-serif;min-width:0;width:100%;min-height:34px;border:1px solid #b8c4b6;border-radius:9px;background:#fff;color:#36513e;padding:7px 9px}
.settings-panel button{cursor:pointer}.settings-panel button[aria-pressed=true]{background:#d7e9dc;border-color:#55745e}.settings-panel p{margin:0;font-size:11px;line-height:1.3;color:#697466}
:focus-visible{outline:2px solid #315d46;outline-offset:3px}
.world15{position:relative;isolation:isolate;min-width:0;min-height:0;padding:10px max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));background-image:var(--page-bg15);display:flex}
.table15{position:relative;isolation:isolate;background-image:var(--table-bg15);min-width:0;min-height:0;width:100%;max-width:1560px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 184px;grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"stage players" "actions actions";gap:8px 14px;border:1px solid #48342377;border-radius:16px;padding:12px;box-shadow:0 4px 14px #20170f28,inset 0 1px 1px #fff5}
.table15::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background-image:var(--table-grain15);background-size:var(--table-size15);background-position:30% 45%;mix-blend-mode:soft-light;opacity:var(--table-opacity15);pointer-events:none}
.players{grid-area:players;display:grid;gap:6px;align-content:start;align-self:start;min-width:0}
.player{display:flex;align-items:center;justify-content:space-between;min-width:0;min-height:43px;padding:5px 9px;gap:6px;border:1px solid #d4d1c3;border-radius:10px;background:#faf9f0;color:#283d30;font-size:12px;line-height:1.25}
.player b{font-size:12px;line-height:1.25}.player span{font:400 25px/1 var(--serif);flex:none}.player.current{background:#e8efdc;border-color:#6e865f;box-shadow:inset 0 0 0 1px #6e865f}.player.current>div>div{font-size:9px;line-height:1.35;color:#7b8872}
.stage{grid-area:stage;position:relative;display:grid;place-items:center;min-width:0;min-height:0;width:100%;height:100%;padding:0;isolation:isolate}
.layout{--tray-w:200px;--tray-h:200px;--envelope-w:220px;--envelope-h:228px;--tray-left:20px;--tray-top:24px;--pot-center:10px;--rail:44px;--pot-height:22px;--die-size:18px;--pot-gap:8px;display:grid;grid-template-columns:auto var(--rail);grid-template-areas:"tray pot";gap:var(--pot-gap);width:max-content;align-items:center;justify-items:center}
.tray-envelope{grid-area:tray;position:relative;width:var(--envelope-w);height:var(--envelope-h)}
.tray-mount{position:absolute;left:var(--tray-left);top:var(--tray-top);width:var(--tray-w);height:var(--tray-h)}
.tray-mount>.wt-tray{width:100%;height:100%;margin:0}
.pot-slot{grid-area:pot;display:flex;align-items:center;justify-content:center;width:var(--rail);min-width:0}
.actions{grid-area:actions;display:flex;gap:7px;align-items:center;align-self:end;min-width:0;padding-top:7px;border-top:1px solid #f9f1dc60}
.actions button{flex:1;min-width:0;height:44px;min-height:44px;padding:8px 11px;border:1px solid #bbc5b0;border-radius:11px;background:#fafbf3;color:#365139;box-shadow:0 2px 0 #0001;font:650 12px/1.2 system-ui,-apple-system,sans-serif;opacity:1}
.actions button:first-child{background:#2b513e;color:#fff;border-color:#739178;box-shadow:0 2px 0 #193726}
body[data-orientation=portrait] .table15{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"players" "stage" "actions";padding:9px;gap:7px}
body[data-orientation=portrait] .players{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-orientation=portrait] .layout{--pot-gap:6px;grid-template-columns:auto;grid-template-areas:"tray" "pot"}
body[data-orientation=portrait] .pot-slot{width:190px;height:var(--pot-height);transform:translateX(var(--pot-center))}
body[data-orientation=portrait] .pot{flex-direction:row;align-items:stretch;height:var(--pot-height)}
body[data-orientation=portrait] .score-pill{order:1;flex-direction:row;gap:4px;width:80px;height:var(--pot-height);padding:0 5px;border-radius:0 10px 10px 0}
body[data-orientation=portrait] .score-pill small{font-size:10px}body[data-orientation=portrait] .score-pill strong{font-size:14px}
body[data-orientation=portrait] .dice-pill{order:0;flex-direction:row;width:max-content;height:var(--pot-height);margin:0;border-right:0;border-radius:10px 0 0 10px}
body[data-orientation=portrait] .actions button{padding:6px 4px;font-size:11px}
body[data-compact=true] #game-view{grid-template-rows:calc(32px + env(safe-area-inset-top,0px)) minmax(0,1fr)}
body[data-compact=true] .game-top12{padding-top:calc(3px + env(safe-area-inset-top,0px));padding-bottom:3px}
body[data-compact=true] .game-brand12{font-size:23px}body[data-compact=true] .game-brand12 img{width:23px;height:23px}
body[data-compact=true] .table-settings summary{min-height:26px;padding:2px 10px;font-size:11px}body[data-compact=true] .table-settings summary svg{width:19px;height:19px}
body[data-compact=true] .world15{padding:5px max(6px,env(safe-area-inset-right,0px)) max(5px,env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
body[data-compact=true] .table15{grid-template-columns:minmax(0,1fr) clamp(146px,calc(var(--view-w18) * .5 - 200px),184px);padding:6px 9px;gap:4px 9px;border-radius:12px}
body[data-compact=true] .players{gap:4px}body[data-compact=true] .player{min-height:34px;padding:4px 7px}body[data-compact=true] .player b{font-size:11px}body[data-compact=true] .player.current>div>div{font-size:8px}body[data-compact=true] .player span{font-size:21px}
body[data-compact=true] .layout{--die-size:16px;--pot-height:20px;--pot-gap:6px}
body[data-compact=true] .score-pill{height:27px;padding:1px 3px;gap:0}
body[data-compact=true] .actions{padding-top:5px}body[data-compact=true] .actions button{height:36px;min-height:36px;padding:5px 11px;font-size:11px}
body[data-short=true] .player{min-height:30px;padding-top:2px;padding-bottom:2px}
body[data-short=true] .score-pill{height:25px}
body[data-short=true] .settings-panel{gap:6px;padding:9px;top:calc(100% + 4px)}body[data-short=true] .settings-panel select,body[data-short=true] .settings-panel button{min-height:28px;padding:4px 8px}
@media(max-width:600px){.table-settings summary{width:36px;padding:5px}.table-settings summary span{display:none}.game-top12{gap:8px}.game-brand12{font-size:24px}.game-brand12 img{width:25px;height:25px}.game-label{font-size:10px}.world15{padding-left:max(6px,env(safe-area-inset-left,0px));padding-right:max(6px,env(safe-area-inset-right,0px))}}
@media(max-width:360px){body[data-orientation=portrait] .player{padding-left:5px;padding-right:5px;gap:4px}body[data-orientation=portrait] .player b{font-size:11px}body[data-orientation=portrait] .player span{font-size:22px}}

/* Stand 19: nur die rechte Würfelspalte im Querformat vergrößern. */
body[data-orientation=landscape] .layout{--die-size:var(--landscape-die-size,18px);--rail:var(--landscape-rail,44px)}
body[data-orientation=landscape] .pot-slot{height:var(--envelope-h);align-items:flex-start}
body[data-orientation=landscape] .pot{margin-top:var(--landscape-pot-top,0px)}

/* Ergänzungen für die Spielanbindung; die Tischgeometrie stammt aus Stand 19. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.actions button:disabled{opacity:.55;cursor:default}
.actions button:not(:disabled){cursor:pointer}
.player .player-info20{font-size:9px;line-height:1.35;color:#7b8872}
body[data-compact=true] .player .player-info20{font-size:8px}
.player.winner20{border-color:#6e865f;box-shadow:inset 0 0 0 1px #6e865f}
.dice-pill{--wt-die-top:#fff9e9;--wt-die-bottom:#d8caaa;--wt-pip-color:#242629}
.dice-pill .wt-die{position:relative;left:auto;top:auto;transform:none;width:var(--die-size);height:var(--die-size);flex:0 0 var(--die-size);margin:0;box-shadow:inset 0 1px 1px #fffffff2,inset 1px 0 1px #ffffffb3,inset -1px -2px 2px #856e4a3d,0 1px 2px #0003}
.pot.empty .dice-pill{display:none}
.pot:is(.hidden,.empty) .score-pill{border-radius:10px}
.game-dice .wt-die.is-held{outline-offset:3px}
.game-dice .wt-die::before{inset:-3px}
.game-dice .held-mark{width:clamp(6px,calc(var(--wt-die-size) * .4),20px);height:clamp(6px,calc(var(--wt-die-size) * .4),20px);right:-10%;top:-10%;font-size:clamp(5px,calc(var(--wt-die-size) * .25),12px)}
.game-dice .wt-die[hidden]{display:none}
