:root{
  --tuch:#1f5c3d;
  --tuch-tief:#123d28;
  --tuch-hell:#2c7a52;
  --holz:#2a1c12;
  --holz-hell:#3d2a1b;
  --messing:#d3ab52;
  --messing-tief:#9a7a2c;
  --pergament:#f4ecd8;
  --schrift:#eee6d3;
  --schrift-matt:#a9bfae;
  --rot:#a63a2c;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* Grünes Tuch: Grundton, Webstruktur, feine Körnung, Randabdunklung */
body{
  min-height:100vh;
  color:var(--schrift);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  background-color:var(--tuch);
  background-image:
    radial-gradient(130% 100% at 50% -10%, rgba(255,255,255,.10), rgba(0,0,0,0) 45%),
    radial-gradient(120% 120% at 50% 55%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.13) 0 1px, rgba(255,255,255,.05) 1px 2px, rgba(0,0,0,0) 2px 4px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.13) 0 1px, rgba(255,255,255,.05) 1px 2px, rgba(0,0,0,0) 2px 4px);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

button{font:inherit;cursor:pointer}
a{color:var(--messing)}

/* ------------------------------------------------------------ Startseite */

.startwrap{max-width:26rem;margin:0 auto;padding:5rem 1.25rem 4rem}
.wordmark{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(3.5rem,17vw,5.5rem);letter-spacing:-.015em;
  margin:0 0 1.75rem;color:var(--messing);
  text-shadow:0 2px 0 rgba(0,0,0,.45), 0 6px 22px rgba(0,0,0,.4);
  animation:rise .6s cubic-bezier(.2,.7,.3,1) both;
}
.panel{
  background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.18));
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;padding:1.4rem;
  box-shadow:0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.09);
  animation:rise .6s .08s cubic-bezier(.2,.7,.3,1) both;
}
.panel label{display:block;font-size:.85rem;color:var(--schrift-matt);margin-bottom:.25rem}
.panel input{
  display:block;width:100%;margin-bottom:1rem;padding:.65rem .75rem;
  background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.18);
  border-radius:7px;color:var(--schrift);font:inherit;
}
.panel input:focus{outline:2px solid var(--messing);outline-offset:1px;background:rgba(0,0,0,.42)}
.primary{
  width:100%;padding:.8rem;border:1px solid var(--messing-tief);border-radius:7px;
  background:linear-gradient(#e0bb63,#bd9339);color:#241a06;font-weight:700;
  transition:transform .12s ease, filter .12s ease;
}
.primary:hover{filter:brightness(1.07)}
.primary:active{transform:translateY(1px)}
.hint{font-size:.82rem;color:var(--schrift-matt);margin:.9rem 0 0}

/* ------------------------------------------------------------ Kopfleiste */

.bar{
  display:flex;align-items:center;gap:1rem;padding:.55rem 1rem;
  background:linear-gradient(180deg,var(--holz-hell),var(--holz));
  border-bottom:2px solid rgba(0,0,0,.5);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  position:sticky;top:0;z-index:20;
}
.back{text-decoration:none;font-size:1.25rem;line-height:1;color:var(--messing)}
.tisch{font-family:var(--serif);font-size:1.1rem;color:var(--pergament)}
.pot{margin-left:auto;text-align:right;line-height:1.05}
.pot b{display:block;font-family:var(--serif);font-size:1.55rem;color:var(--messing)}
.pot small{font-size:.68rem;color:var(--schrift-matt)}
.pot b.bump{animation:bump .45s cubic-bezier(.3,1.5,.5,1)}

/* ------------------------------------------------------------ Tisch */

#table{max-width:62rem;margin:0 auto;padding:1rem 1rem 3rem;display:grid;gap:1rem}

.seats{display:flex;flex-wrap:wrap;gap:.5rem}
.seat{
  flex:1 1 9rem;padding:.55rem .65rem;font-size:.85rem;border-radius:9px;
  background:linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.14));
  border:1px solid rgba(255,255,255,.12);
  transition:border-color .2s ease, box-shadow .2s ease, opacity .3s ease;
}
.seat.turn{border-color:var(--messing);animation:glow 1.9s ease-in-out infinite}
.seat.out{opacity:.4}
.seat.won{animation:winflash .9s ease-out}
.seat .nm{font-weight:600;display:block}
.seat .meta{color:var(--schrift-matt);font-size:.78rem}
.backs{display:flex;gap:2px;margin:.3rem 0 .15rem;min-height:14px}
.mini{
  width:9px;height:14px;border-radius:2px;display:inline-block;
  background:repeating-linear-gradient(45deg,#5d3129 0 3px,#744036 3px 6px);
  border:1px solid rgba(0,0,0,.55);
  animation:rise .3s ease both;
}
.tags{display:flex;gap:.3rem;flex-wrap:wrap}
.tag{font-size:.68rem;padding:.05rem .38rem;border-radius:3px;background:rgba(255,255,255,.13)}
.tag.g{background:var(--messing-tief);color:#f7f0dd}
.tag.s{background:var(--rot);color:#fff}

.mitte{
  border-radius:14px;padding:1rem;min-height:9.5rem;
  display:flex;gap:1.25rem;align-items:flex-start;flex-wrap:wrap;
  background:radial-gradient(90% 120% at 50% 0%, rgba(255,255,255,.07), rgba(0,0,0,.20));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 2px 14px rgba(0,0,0,.35);
}
.trump{display:flex;flex-direction:column;gap:.35rem;align-items:center}
.trump .cap{font-size:.72rem;color:var(--schrift-matt)}
.played{display:flex;gap:.6rem;flex-wrap:wrap;flex:1}
.slot{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.slot .who{font-size:.72rem;color:var(--schrift-matt)}
.slot.win .who{color:var(--messing);font-weight:700}
.slot.win .card{box-shadow:0 0 0 2px var(--messing), 0 8px 18px rgba(0,0,0,.45)}

/* ------------------------------------------------------------ Karten */

.card{
  width:72px;height:108px;flex:0 0 auto;border-radius:7px;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.45));
  transition:transform .15s cubic-bezier(.2,.7,.3,1), filter .15s ease;
}
.card .face{display:block;width:100%;height:100%}
.card.faded{opacity:.55}
.hand .card{cursor:default}
.hand .card.playable,.hand .card.pick{cursor:pointer}
.hand .card.playable:hover,.hand .card.pick:hover{transform:translateY(-10px)}
.hand .card.dim{opacity:.34;cursor:not-allowed}
.hand .card.sel{transform:translateY(-12px);filter:drop-shadow(0 0 0 var(--rot)) drop-shadow(0 8px 12px rgba(0,0,0,.5))}
.hand .card.sel .face rect:first-of-type{stroke:var(--rot);stroke-width:3}
.card:focus-visible{outline:3px solid var(--messing);outline-offset:3px}
.hand{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;min-height:110px}

/* ------------------------------------------------------------ Aktionen */

.actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;min-height:2.6rem}
.actions .say{flex-basis:100%;color:var(--schrift);font-size:.95rem}
.actions .say.dim{color:var(--schrift-matt);font-size:.82rem;margin-top:-.35rem}
.btn{
  padding:.55rem 1rem;border-radius:7px;color:var(--schrift);
  border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.20));
  transition:transform .12s ease, filter .12s ease;
}
.btn:hover{filter:brightness(1.15)}
.btn:active{transform:translateY(1px)}
.btn.gold{background:linear-gradient(#e0bb63,#bd9339);color:#241a06;border-color:var(--messing-tief);font-weight:700}
.btn.rot{background:linear-gradient(#c04a39,#8f2c20);border-color:#6f2117;color:#fff;font-weight:600}
.btn.tiny{padding:.2rem .6rem;font-weight:700}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.stake{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--schrift-matt);
       margin-right:.5rem;flex-basis:100%}
.stake b{font-family:var(--serif);font-size:1rem;color:var(--messing);min-width:4.2rem;text-align:center}

/* ------------------------------------------------------------ Abrechnung */

.resultwrap{width:100%}
.result{width:100%;border-collapse:collapse;font-size:.9rem;margin:.4rem 0 .8rem}
.result th{text-align:left;font-weight:600;color:var(--schrift-matt);
           border-bottom:1px solid rgba(255,255,255,.18);padding:.32rem .4rem}
.result td{padding:.32rem .4rem;border-bottom:1px solid rgba(255,255,255,.09)}
.result tbody tr{animation:rise .35s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i) * 70ms)}
.result .plus{color:#8fd39b}
.result .minus{color:#eb9184}

/* ------------------------------------------------------------ Anschrieb */

.board{
  border-radius:11px;padding:.75rem .9rem;max-height:12rem;overflow:auto;
  background:linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.22));
  border:1px solid rgba(255,255,255,.10);
}
#log div{font-size:.85rem;color:var(--schrift-matt);padding:.12rem 0}
#log div:last-child{color:var(--schrift)}

.toast{
  position:fixed;left:50%;bottom:1.25rem;transform:translateX(-50%);
  background:linear-gradient(#c04a39,#8f2c20);color:#fff;
  padding:.6rem 1.1rem;border-radius:7px;z-index:50;max-width:90vw;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.toast.in{animation:toast .3s cubic-bezier(.2,1.4,.4,1)}

/* ------------------------------------------------------------ Bewegung */

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes toast{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(211,171,82,.0)}50%{box-shadow:0 0 0 3px rgba(211,171,82,.30)}}
@keyframes winflash{0%{background-color:rgba(211,171,82,.34)}100%{background-color:transparent}}

@keyframes dealin{
  from{opacity:0;transform:translate(-38vw,-58vh) rotate(-22deg) scale(.7)}
  60%{opacity:1}
  to{opacity:1;transform:none}
}
.card.deal{animation:dealin .5s cubic-bezier(.2,.75,.3,1) both;animation-delay:calc(var(--i) * 90ms)}

@keyframes layin{
  from{opacity:0;transform:translateY(46px) rotate(var(--tilt,-5deg)) scale(.86)}
  to{opacity:1;transform:none}
}
.card.lay{animation:layin .3s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i) * 40ms)}

@keyframes flipin{from{transform:rotateY(84deg) scale(.9);opacity:0}to{transform:none;opacity:1}}
.card.flip{animation:flipin .45s cubic-bezier(.2,.8,.3,1) both}

@media (max-width:540px){
  .card{width:60px;height:90px}
  .hand{min-height:92px;gap:.35rem}
  #table{padding:.75rem .75rem 2.5rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}