/* Watten – bayerisches Kartenspiel (mod_watten) */

  .wt-root{
    --accent:#B1976B;
    --accent2:#d8c3a1;
    --accent-grad: linear-gradient(135deg, var(--accent), var(--accent2));
    --on-accent:#2a2114;
    --eichel:#6b4423;
    --gras:#2f6b3b;
    --herz:#b2332f;
    --schellen:#a8700f;
    --radius:16px;
    --card-ratio: 0.694;
    --card-w: 68px;
    --card-h: calc(var(--card-w) / var(--card-ratio));
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color:var(--ink);
    -webkit-tap-highlight-color: transparent;
    user-select:none;
  }
  .wt-root[data-theme="light"]{
    --bg:#f7f4ef;
    --panel:#ffffff;
    --panel-a:rgba(255,255,255,.95);
    --ink:#2c2a26;
    --ink-soft:#4f4a40;
    --line:#d9d1c2;
    --chip:#efe9dc;
    --card-bg:#ffffff;
    --card-edge:#d9d1c2;
    --wood-shade:rgba(0,0,0,0);
    --shadow: 0 10px 30px -12px rgba(143,117,71,.5);
    --brand-grad: linear-gradient(135deg,#8f7547,#B1976B);
  }
  .wt-root[data-theme="dark"]{
    --bg:#14120e;
    --panel:#23201a;
    --panel-a:rgba(35,32,26,.95);
    --ink:#f6f1e6;
    --ink-soft:#d8d0bf;
    --line:#4a4336;
    --chip:#312c22;
    --card-bg:#f8f3e7;
    --card-edge:#cfc6b2;
    --wood-shade:rgba(0,0,0,.42);
    --shadow: 0 10px 30px -12px rgba(0,0,0,.75);
    --brand-grad: linear-gradient(135deg,#B1976B,#e6d4b2);
  }
  .wt-root *{box-sizing:border-box;}

  .wt-app{
    max-width:var(--wt-max, 720px); margin:0 auto;
    display:flex; flex-direction:column;
    background:var(--bg); position:relative; color:var(--ink);
    border-radius:24px; border:1px solid var(--line); overflow:hidden; overflow:clip;
  }

  .wt-topbar{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--line);
    position:relative; z-index:2;
  }
  .wt-brand{
    font-weight:800; font-size:18px; letter-spacing:.2px;
    background: var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .wt-brand small{
    display:block; font-size:11.5px; font-weight:700; letter-spacing:.3px;
    color:var(--ink-soft); -webkit-text-fill-color:var(--ink-soft);
  }
  .wt-top-right{ display:flex; align-items:center; gap:8px; }
  .wt-score-pill{ display:flex; gap:8px; }
  .wt-score-chip{
    background:var(--chip); border:1px solid var(--line); border-radius:999px; color:var(--ink);
    padding:6px 12px; font-size:13px; font-weight:800;
    display:flex; align-items:center; gap:6px; white-space:nowrap;
  }
  .wt-score-chip .wt-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);}
  .wt-score-chip.wt-b .wt-dot{background:#8a94a6;}
  .wt-score-chip .wt-gesp{ font-size:10.5px; font-weight:800; color:#d2554f; letter-spacing:.2px; }

  .wt-btn{
    appearance:none; border:none; cursor:pointer;
    font-family:inherit; font-weight:800; font-size:15px;
    padding:13px 22px; border-radius:14px;
    background:var(--accent-grad); color:var(--on-accent);
    box-shadow: 0 8px 22px -8px rgba(177,151,107,.75);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .wt-btn:active{ transform:translateY(1px) scale(.98); }
  .wt-btn:hover{ box-shadow: 0 12px 28px -8px rgba(177,151,107,.9); }
  .wt-btn.wt-ghost{ background:var(--panel); color:var(--ink); border:1.5px solid var(--line); box-shadow:none; }
  .wt-btn.wt-ghost:hover{ border-color:var(--accent); }
  .wt-btn.wt-small{ padding:9px 14px; font-size:13px; border-radius:11px;}
  .wt-btn:disabled{ opacity:.5; cursor:default; box-shadow:none; }

  .wt-start{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:32px 20px; text-align:center; gap:18px;
  }
  .wt-hero-suits{ font-size:38px; letter-spacing:10px; opacity:.95; }
  .wt-start h2{ margin:0; font-size:26px; font-weight:800; color:var(--ink); }
  .wt-start p.wt-sub{ margin:0; color:var(--ink-soft); font-size:14.5px; max-width:460px; line-height:1.55; }
  .wt-start p.wt-sub b{ color:var(--ink); }


  .wt-acc{
    width:100%; max-width:460px; text-align:left;
    background:var(--panel); border:1.5px solid var(--line); border-radius:var(--radius);
    overflow:hidden; transition:border-color .15s ease, box-shadow .15s ease;
  }
  .wt-acc:hover{ border-color:var(--accent); }
  .wt-acc[open]{ border-color:var(--accent); box-shadow:var(--shadow); }
  .wt-acc summary{
    list-style:none; cursor:pointer; padding:13px 16px; font-weight:800; font-size:14.5px; color:var(--ink);
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .wt-acc summary::-webkit-details-marker{ display:none; }
  .wt-acc summary::after{
    content:''; width:9px; height:9px; flex-shrink:0;
    border-right:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent);
    transform:rotate(45deg); margin-top:-4px; transition:transform .2s ease;
  }
  .wt-acc[open] summary::after{ transform:rotate(-135deg); margin-top:4px; }
  .wt-acc-body{ padding:2px 16px 14px; display:flex; flex-direction:column; gap:10px; }
  .wt-acc-body p.wt-sub{ text-align:left; max-width:none; }


  .wt-acc-wrap{ max-width:var(--wt-max, 720px); margin:14px auto 0; display:flex; flex-direction:column; gap:10px; color:var(--ink); }
  .wt-acc-wrap .wt-acc{ max-width:none; }
  .wt-acc-body p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
  .wt-acc-body p b, .wt-acc-body p i{ color:var(--ink); }

  .wt-mode-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; max-width:420px; }
  .wt-mode-card{
    background:var(--panel); border:1.5px solid var(--line); border-radius:var(--radius);
    padding:18px 14px; cursor:pointer; text-align:left;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .wt-mode-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
  .wt-mode-card.wt-selected{ border-color:var(--accent); box-shadow: 0 0 0 3px rgba(177,151,107,.3); }
  .wt-mode-card .wt-ico{ font-size:22px; }
  .wt-mode-card h3{ margin:8px 0 3px; font-size:15px; color:var(--ink); }
  .wt-mode-card p{ margin:0; font-size:13px; color:var(--ink-soft); line-height:1.45; }

  .wt-diff-row, .wt-target-row{ display:flex; gap:10px; }
  .wt-diff-row .wt-btn.wt-ghost.wt-selected, .wt-target-row .wt-btn.wt-ghost.wt-selected{ border-color:var(--accent); background:var(--chip); }
  .wt-row-label{ font-size:12px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.4px; }

  .wt-game{ display:none; flex:none; flex-direction:column; }
  .wt-size-bar{
    display:flex; align-items:center; gap:10px;
    padding:8px 16px; background:var(--panel); border-bottom:1px solid var(--line);
  }
  .wt-size-ico{ font-size:12px; opacity:.85; flex-shrink:0; }
  .wt-size-bar input[type="range"]{
    flex:1; height:4px; border-radius:999px; background:var(--chip);
    accent-color:var(--accent); cursor:pointer;
  }
  .wt-table-wrap{ flex:none; position:relative; padding:10px 10px 0; display:flex; flex-direction:column; }

  /* Wirtshaustisch aus Holz (Textur wird per Skript als SVG erzeugt) */
  .wt-felt{
    flex:none; height:max(340px, calc(var(--card-h) * 2 + 150px)); position:relative; border-radius:28px; margin-bottom:8px;
    border:4px solid #3a2411;
    background-color:#7a4d29;
    background-image:
      radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255,214,150,.22), rgba(255,214,150,0) 70%),
      radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,.55) 100%),
      linear-gradient(var(--wood-shade), var(--wood-shade)),
      var(--wood-tex, none);
    background-size: auto, auto, auto, 680px 680px;
    box-shadow: inset 0 0 0 2px rgba(255,220,170,.14), inset 0 8px 28px rgba(0,0,0,.4), var(--shadow);
    display:flex; flex-direction:column; overflow:hidden;
  }
  .wt-trump-badge{
    position:absolute; top:10px; left:10px; z-index:5;
    background:var(--panel-a); color:var(--ink); border:1px solid var(--line); border-radius:12px;
    padding:6px 10px; font-size:12.5px; font-weight:800;
    display:flex; align-items:center; gap:6px; box-shadow:0 6px 16px -6px rgba(0,0,0,.5);
  }
  .wt-trump-badge .wt-icon{ font-size:16px; }
  .wt-trump-info{
    position:absolute; top:48px; left:10px; z-index:5;
    background:var(--panel-a); color:var(--ink); border:1px solid var(--line); border-radius:10px;
    padding:5px 9px; font-size:11.5px; font-weight:700; line-height:1.4;
    box-shadow:0 6px 16px -6px rgba(0,0,0,.5); max-width:min(200px, calc(50% - 76px)); display:none;
  }
  .wt-corner-right{
    position:absolute; top:10px; right:10px; z-index:5;
    display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  }
  .wt-trump-card-box{
    display:none; flex-direction:column; align-items:center; gap:4px;
    background:var(--panel-a); border:1px solid var(--line); border-radius:12px;
    padding:6px 8px 5px; box-shadow:0 6px 16px -6px rgba(0,0,0,.55);
  }
  .wt-tc-label{ font-size:10.5px; font-weight:800; color:var(--ink); letter-spacing:.2px; }
  .wt-stake-badge{
    background:var(--accent-grad); color:var(--on-accent); border-radius:12px;
    padding:6px 10px; font-size:12.5px; font-weight:800;
    box-shadow:0 6px 16px -6px rgba(0,0,0,.55); display:none;
  }

  .wt-seat-top, .wt-seat-left, .wt-seat-right{
    position:absolute; z-index:4;
    display:flex; flex-direction:column; align-items:center; gap:4px;
  }
  .wt-seat-top{ top:10px; left:50%; transform:translateX(-50%); }
  .wt-seat-left{ left:8px; top:50%; transform:translateY(-50%); }
  .wt-seat-right{ right:8px; top:50%; transform:translateY(-50%); }

  .wt-seat-label{
    font-size:12px; font-weight:800; color:var(--ink);
    background:var(--panel-a); padding:3px 10px; border-radius:999px;
    border:1px solid var(--line); white-space:nowrap;
  }
  .wt-seat-label.wt-active{ color:var(--on-accent); background:var(--accent-grad); border-color:transparent; }
  .wt-mini-hand{ display:flex; }
  .wt-mini-card{
    width:22px; height:32px; border-radius:4px; margin-left:-12px;
    border:1px solid rgba(0,0,0,.4);
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 4px, transparent 4px 8px), linear-gradient(135deg,#B1976B,#8f7547);
    box-shadow:0 2px 5px rgba(0,0,0,.4);
  }
  .wt-mini-card:first-child{ margin-left:0; }

  .wt-center-area{ flex:1; display:flex; align-items:center; justify-content:center; position:relative; }
  .wt-trick-slots{ position:relative; width:calc(var(--card-w) * 2.9); height:calc(var(--card-h) * 2.0); }
  .wt-slot{ position:absolute; width:var(--card-w); height:var(--card-h); display:flex; align-items:center; justify-content:center; }
  /* Uhrzeigersinn: unten (0) → links (1) → oben (2) → rechts (3) */
  .wt-slot.wt-p0{ bottom:0; left:50%; transform:translateX(-50%); }
  .wt-slot.wt-p1{ left:0; top:50%; transform:translateY(-50%); }
  .wt-slot.wt-p2{ top:0; left:50%; transform:translateX(-50%); }
  .wt-slot.wt-p3{ right:0; top:50%; transform:translateY(-50%); }

  .wt-msg-banner{
    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
    background:var(--panel-a); border:1px solid var(--line); color:var(--ink);
    padding:7px 14px; border-radius:999px; font-size:13px; font-weight:700;
    z-index:6; max-width:90%; text-align:center; box-shadow:0 6px 16px -6px rgba(0,0,0,.55);
  }

  .wt-card{
    width:var(--card-w); height:var(--card-h); border-radius:10px;
    background:var(--card-bg); border:1px solid var(--card-edge);
    box-shadow:0 3px 8px rgba(0,0,0,.3);
    display:flex; flex-direction:column; justify-content:space-between;
    padding:5px 6px; font-weight:800; font-size:calc(var(--card-w) * 0.22);
    position:relative; animation: dealIn .28s ease;
    transition: width .15s ease, height .15s ease;
  }
  .wt-card.wt-small{ --card-w:52px; --card-h:calc(52px / var(--card-ratio)); }
  .wt-card.wt-mid{ --card-w:58px; --card-h:calc(58px / var(--card-ratio)); }
  @keyframes dealIn{ from{ opacity:0; transform:translateY(8px) scale(.9);} to{opacity:1; transform:none;} }
  .wt-card .wt-rank{ line-height:1; }
  .wt-card .wt-rank.wt-bottom{ align-self:flex-end; transform:rotate(180deg); }
  .wt-card .wt-suit-ico{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:calc(var(--card-w) * 0.38); }
  .wt-card.wt-eichel{ color:var(--eichel); }
  .wt-card.wt-gras{ color:var(--gras); }
  .wt-card.wt-herz{ color:var(--herz); }
  .wt-card.wt-schellen{ color:var(--schellen); }
  .wt-card.wt-eternal{ box-shadow:0 0 0 2px var(--accent), 0 3px 8px rgba(0,0,0,.35); }
  .wt-card.wt-kritisch{ background: linear-gradient(160deg, var(--card-bg), #f1e6cf); }
  .wt-card.wt-back{
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 6px, transparent 6px 12px), var(--accent-grad);
    border-color:var(--accent);
  }
  .wt-card.wt-back > *{ display:none; }
  .wt-kritisch-badge{
    position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:50%;
    background:var(--accent-grad); color:var(--on-accent); font-size:10px; font-weight:800;
    display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.4);
  }
  .wt-kritisch-badge.wt-h{ background:#2f6b3b; color:#fff; }
  .wt-kritisch-badge.wt-b{ background:#5b564c; color:#fff; }

  .wt-hand-wrap{ background:var(--panel); border-top:1px solid var(--line); padding:10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .wt-signal-box, .wt-sig{ overflow:hidden; }

  /* Signal des Partners – groß dargestellt */
  .wt-signal-box{
    display:none; margin:0 0 8px; padding:6px 8px 8px; border-radius:12px;
    background:var(--chip); border:1.5px solid var(--accent);
  }
  .wt-sig-title{ text-align:center; font-size:11.5px; font-weight:800; color:var(--ink); margin-bottom:5px; letter-spacing:.2px; }
  .wt-sig-list{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
  .wt-sig{
    display:flex; align-items:center; gap:7px; padding:4px 11px 4px 8px;
    background:var(--panel); color:var(--ink); border:1.5px solid var(--line); border-radius:11px;
    box-shadow:0 6px 16px -8px rgba(0,0,0,.5); animation: sigPop .5s ease;
  }
  .wt-sig-ico{ font-size:26px; line-height:1; }
  .wt-sig-ico.wt-flip{ display:inline-block; transform:scaleX(-1); }
  .wt-sig-name{ font-size:14px; font-weight:800; color:var(--ink); line-height:1.15; text-align:left; }
  .wt-sig-sub{ font-size:11px; font-weight:700; color:var(--ink-soft); text-align:left; margin-top:1px; }
  @keyframes sigPop{ 0%{ opacity:0; transform:scale(.7);} 60%{ transform:scale(1.08);} 100%{ opacity:1; transform:scale(1);} }

  .wt-hand-row{ display:flex; justify-content:center; gap:8px; padding:6px 0 10px; overflow-x:auto; }
  .wt-hand-row .wt-card{ cursor:default; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease; }
  .wt-hand-row .wt-card.wt-legal{ cursor:pointer; }
  .wt-hand-row .wt-card.wt-legal:hover{ transform:translateY(-6px); box-shadow: 0 8px 16px -6px rgba(177,151,107,.8); }
  .wt-hand-row .wt-card.wt-legal{ box-shadow: 0 0 0 2px rgba(177,151,107,.8), 0 3px 8px rgba(0,0,0,.3); }
  .wt-hand-row .wt-card.wt-dim{ opacity:.45; }
  .wt-hand-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:6px; gap:8px; flex-wrap:wrap; }
  .wt-hand-foot .wt-acts{ display:flex; gap:8px; flex-wrap:wrap; }
  .wt-trick-counts{ display:flex; gap:10px; font-size:13px; color:var(--ink-soft); font-weight:700; }
  .wt-trick-counts b{ color:var(--ink); }

  .wt-overlay{
    position:fixed; inset:0; background:rgba(20,16,10,.65);
    display:flex; align-items:flex-start; justify-content:center; z-index:50;
    padding:20px; padding-top:12vh;
    overflow-y:auto; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  .wt-overlay .wt-panel{
    background:var(--panel); color:var(--ink); border-radius:20px; padding:24px 22px;
    max-width:380px; width:100%; text-align:center;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.6); animation: dealIn .22s ease;
  }
  .wt-overlay .wt-panel.wt-wide{ max-width:460px; }
  .wt-overlay h2{ margin:0 0 6px; font-size:20px; color:var(--ink); }
  .wt-overlay p{ margin:0 0 16px; color:var(--ink-soft); font-size:14px; line-height:1.5;}
  .wt-suit-pick-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
  .wt-suit-pick{
    border:1.5px solid var(--card-edge); border-radius:14px; padding:14px 8px;
    cursor:pointer; font-weight:800; font-size:14px; display:flex; flex-direction:column; gap:6px; align-items:center;
    background:var(--card-bg);
  }
  .wt-suit-pick:hover{ border-color:var(--accent); box-shadow:var(--shadow); }
  .wt-suit-pick .wt-ico{ font-size:26px; }
  .wt-suit-pick.wt-eichel{ color:var(--eichel); }
  .wt-suit-pick.wt-gras{ color:var(--gras); }
  .wt-suit-pick.wt-herz{ color:var(--herz); }
  .wt-suit-pick.wt-schellen{ color:var(--schellen); }

  .wt-rank-pick-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:6px; }
  .wt-rank-pick{
    border:1.5px solid var(--line); border-radius:12px; padding:12px 2px; color:var(--ink);
    cursor:pointer; font-weight:800; font-size:13.5px; background:var(--chip); text-align:center;
  }
  .wt-rank-pick:hover{ border-color:var(--accent); box-shadow:var(--shadow); }

  .wt-lt-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:18px; }
  .wt-lt-item{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 8px 6px; border-radius:14px; border:1.5px solid transparent; }
  .wt-lt-item.wt-win{ border-color:var(--accent); background:var(--chip); }
  .wt-lt-name{ font-size:12.5px; font-weight:800; color:var(--ink); max-width:90px; }
  .wt-lt-tag{ min-height:16px; font-size:12px; font-weight:800; color:var(--ink); }

  footer.wt-rules-note{ text-align:center; font-size:12px; color:var(--ink-soft); padding:10px 16px 18px; line-height:1.5; }

  @media (max-width:380px){
    .wt-sig-ico{ font-size:22px; }
    .wt-sig-name{ font-size:13px; }
  }

  /* Kartenbilder */
  .wt-card.wt-imgcard{ padding:0; background:transparent; border:0; }
  .wt-cimg{ display:block; width:100%; height:100%; object-fit:fill; border-radius:inherit; pointer-events:none; -webkit-user-drag:none; }
  .wt-card.wt-back.wt-imgcard > .wt-cimg{ display:block; }
  .wt-card.wt-imgcard .wt-kritisch-badge{ z-index:2; }

  /* Tischvarianten */
  .wt-root[data-table="felt"] .wt-felt{
    border-color:#1d3a28; background-color:#2e6b47;
    background-image:
      radial-gradient(ellipse 70% 60% at 50% 42%, rgba(190,255,200,.16), rgba(190,255,200,0) 70%),
      radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,.5) 100%),
      linear-gradient(var(--wood-shade), var(--wood-shade));
    background-size:auto;
  }
  .wt-root[data-table="image"] .wt-felt{
    border-color:#2a2118; background-color:#444;
    background-image:
      radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.4) 100%),
      linear-gradient(var(--wood-shade), var(--wood-shade)),
      var(--table-img, none);
    background-size:auto, auto, cover; background-position:center;
  }

/* Kartenbilder: kein farbiger Rand, nur weicher Schatten */
.wt-root .wt-hand-row .wt-card.wt-imgcard.wt-legal{ box-shadow:0 3px 10px rgba(0,0,0,.28); }
.wt-root .wt-hand-row .wt-card.wt-imgcard.wt-legal:hover{ box-shadow:0 10px 18px -6px rgba(0,0,0,.38); }
.wt-root .wt-card.wt-imgcard, .wt-root .wt-card.wt-imgcard.wt-win, .wt-root .wt-card.wt-imgcard.wt-trumpinfo{ border:0; outline:0; }
.wt-root .wt-card.wt-imgcard:not(.wt-back){ box-shadow:0 2px 8px rgba(0,0,0,.25); border-radius:12px; }

.wt-root .wt-suit-pick .wt-ico{ display:block; width:46px; height:46px; margin:0 auto 4px; }
.wt-root .wt-suit-pick .wt-ico svg, .wt-root [data-id=trumpIcon] svg{ width:100%; height:100%; display:block; }
.wt-root [data-id=trumpIcon]{ display:inline-block; width:1.3em; height:1.3em; vertical-align:-.25em; }

.wt-root .wt-suit-pick .wt-ico img, .wt-root [data-id=trumpIcon] img{ width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }

/* Handkarten: kein Einblend-Flackern bei jedem Zug */
.wt-root .wt-hand-row .wt-card{ animation:none; }