.solitaire-game{max-width:760px;margin:1.5rem auto;padding:clamp(12px,3vw,24px);border-radius:24px;background:linear-gradient(145deg,#f4efe5,#e8dcc8);box-shadow:0 18px 45px rgba(57,37,16,.16);color:inherit}
.solitaire-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 10px}.solitaire-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.solitaire-btn{border:1px solid rgba(74,47,20,.28);border-radius:12px;background:rgba(255,255,255,.8);color:inherit;padding:.7rem .9rem;cursor:pointer}.solitaire-btn-primary{background:#62431f;color:#fff;border-color:#62431f}.solitaire-btn:disabled{opacity:.4;cursor:not-allowed}.solitaire-status{margin:10px 0 15px;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.66);border-left:4px solid #98704a;}
.solitaire-board-wrap{position:relative;width:min(100%,620px);margin:0 auto;padding:4.8%;border-radius:50%;background:radial-gradient(circle at 36% 26%,#c89455 0 5%,#a96e32 30%,#774619 65%,#4c2b10 100%);box-shadow:inset 0 6px 12px rgba(255,231,187,.34),inset 0 -12px 20px rgba(51,24,4,.48),0 20px 36px rgba(55,29,8,.28),0 0 0 6px #e1c28e,0 0 0 8px #6b421d}.solitaire-board-wrap:before{content:"";position:absolute;inset:2.7%;border-radius:50%;pointer-events:none;background:repeating-radial-gradient(ellipse at 25% 20%,transparent 0 18px,rgba(65,32,9,.045) 19px 20px);mix-blend-mode:multiply}.solitaire-board{position:relative;z-index:2;aspect-ratio:1;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:1.65%;padding:8%;border-radius:50%}.solitaire-cell{display:grid;place-items:center;min-width:0;min-height:0}.solitaire-cell.is-void{visibility:hidden}.solitaire-hole{position:relative;width:100%;aspect-ratio:1;border:0;border-radius:50%;padding:0;background:radial-gradient(circle at 42% 35%,#2f1c0d 0 30%,#160c05 64%,#070401 100%);box-shadow:inset 0 4px 7px rgba(0,0,0,.72),0 1px 1px rgba(255,224,172,.22);cursor:pointer;touch-action:none}.solitaire-hole:before{content:"";position:absolute;inset:7%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(246,201,130,.08)}.solitaire-hole.is-center:after{content:"";position:absolute;inset:-12%;border:2px solid rgba(244,196,85,.56);border-radius:50%;pointer-events:none}.solitaire-center-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;color:rgba(245,205,126,.34);font-size:clamp(28px,8vw,58px);pointer-events:none}.solitaire-peg{position:absolute;z-index:3;inset:-7%;border-radius:50%;background:radial-gradient(circle at 31% 24%,#fff 0 5%,#d7f4ff 8%,#75bad1 25%,#25738f 51%,#123f56 73%,#071e2c 100%);box-shadow:inset -7px -9px 11px rgba(0,16,28,.48),inset 6px 7px 9px rgba(255,255,255,.28),0 7px 10px rgba(24,12,3,.5),0 1px 2px rgba(255,255,255,.5);transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;pointer-events:auto}.solitaire-peg:before{content:"";position:absolute;width:26%;height:15%;left:19%;top:14%;border-radius:50%;background:rgba(255,255,255,.72);filter:blur(.3px);transform:rotate(-26deg)}.solitaire-peg.can-move{cursor:grab}.solitaire-peg.can-move:active{cursor:grabbing}.solitaire-hole.is-selected .solitaire-peg{transform:scale(1.12) translateY(-4%);filter:saturate(1.25) brightness(1.15);box-shadow:inset -7px -9px 11px rgba(0,16,28,.44),inset 6px 7px 9px rgba(255,255,255,.34),0 0 0 4px rgba(255,214,95,.88),0 10px 16px rgba(24,12,3,.56)}.solitaire-hole.is-target{animation:solitaire-pulse 1s ease-in-out infinite;background:radial-gradient(circle,#6d5317 0 20%,#2e2108 52%,#140d03 100%);box-shadow:inset 0 4px 7px rgba(0,0,0,.64),0 0 0 4px rgba(255,216,95,.34),0 0 18px rgba(255,210,70,.4)}.solitaire-hole.is-target:after{content:"";position:absolute;inset:31%;border-radius:50%;background:#ffdc69;box-shadow:0 0 9px #ffe693}
@keyframes solitaire-pulse{50%{transform:scale(.91)}}
.solitaire-progress{height:8px;margin:20px auto 10px;max-width:620px;border-radius:99px;background:rgba(82,51,21,.13);overflow:hidden}.solitaire-progress-bar{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#24607a,#6ab7ce,#d8b85a);transition:width .25s ease}.solitaire-rules{margin-top:14px;border-top:1px solid rgba(70,43,18,.18);padding-top:12px}.solitaire-rules summary{cursor:pointer;}.solitaire-rules p{margin-bottom:.6rem}
.solitaire-result[hidden]{display:none!important}.solitaire-result{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:18px;background:rgba(20,12,5,.72);backdrop-filter:blur(4px)}.solitaire-result-dialog{width:min(92vw,470px);padding:24px;border-radius:24px;text-align:center;background:linear-gradient(150deg,#fffaf0,#f1e2c6);box-shadow:0 26px 70px rgba(0,0,0,.48)}.solitaire-result-icon{width:76px;height:76px;margin:0 auto 10px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0 5%,#bfefff 9%,#4e9bb6 36%,#164f68 69%,#082636 100%);color:#ffe084;font-size:2rem;font-weight:900;box-shadow:0 10px 22px rgba(0,0,0,.28)}.solitaire-result-dialog h3{margin:.3rem 0}.solitaire-result-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px}
@media(max-width:680px){.solitaire-game{margin:.6rem 0;padding:10px;border-radius:16px}.solitaire-toolbar{display:grid;grid-template-columns:1fr;align-items:stretch;gap:12px}.solitaire-speed{width:100%;min-width:0}.solitaire-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%;justify-content:stretch}.solitaire-actions .solitaire-btn{width:100%;min-width:0;white-space:normal;overflow-wrap:normal;word-break:normal}.solitaire-actions .solitaire-btn-primary{grid-column:1/-1}.solitaire-board-wrap{width:94%;padding:3.5%;box-shadow:inset 0 5px 10px rgba(255,231,187,.3),inset 0 -10px 17px rgba(51,24,4,.45),0 14px 26px rgba(55,29,8,.24),0 0 0 4px #e1c28e,0 0 0 6px #6b421d}.solitaire-board{padding:7%;gap:1.25%}.solitaire-peg{inset:-10%}}
@media(max-width:380px){.solitaire-actions{grid-template-columns:1fr}.solitaire-actions .solitaire-btn-primary{grid-column:auto}}

/* Animierte Lösung: nur Zustands-/Bewegungsdarstellung, keine eigene Typografie. */
.solitaire-board.is-demo{cursor:wait}.solitaire-board.is-demo .solitaire-hole{cursor:default}.solitaire-hole.is-demo-from .solitaire-peg{transform:scale(1.16) translateY(-7%);filter:brightness(1.2) saturate(1.3);box-shadow:inset -7px -9px 11px rgba(0,16,28,.4),inset 6px 7px 9px rgba(255,255,255,.38),0 0 0 5px rgba(255,210,67,.88),0 0 24px rgba(255,197,31,.82),0 12px 18px rgba(24,12,3,.52)}.solitaire-hole.is-demo-over .solitaire-peg{filter:brightness(.8) saturate(.7);box-shadow:inset -7px -9px 11px rgba(0,16,28,.48),inset 6px 7px 9px rgba(255,255,255,.22),0 0 0 4px rgba(220,67,42,.8),0 0 18px rgba(220,67,42,.64)}.solitaire-hole.is-demo-to{background:radial-gradient(circle,#8a6a1d 0 22%,#37290b 54%,#140d03 100%);box-shadow:inset 0 4px 7px rgba(0,0,0,.64),0 0 0 5px rgba(255,220,92,.46),0 0 24px rgba(255,211,56,.7)}.solitaire-hole.is-demo-to.is-empty:after{content:"";position:absolute;inset:27%;border-radius:50%;background:#ffe06c;box-shadow:0 0 14px #ffe071;animation:solitaire-demo-target .55s ease-in-out infinite alternate}.solitaire-hole.is-demo-to .solitaire-peg{animation:solitaire-demo-land .24s ease-out}@keyframes solitaire-demo-target{to{transform:scale(.72);opacity:.55}}@keyframes solitaire-demo-land{0%{transform:scale(1.3);filter:brightness(1.4)}100%{transform:scale(1);filter:none}}
.solitaire-speed{display:grid;gap:4px;min-width:min(260px,100%)}.solitaire-speed span{}.solitaire-speed input[type="range"]{width:100%;accent-color:#6f421e}.solitaire-speed strong{}

/* 0.14.21: Premium-Holzbrett und ruhigere, realistischere Spielkugeln. */
.solitaire-game{
  background:
    radial-gradient(circle at 18% 8%,rgba(255,255,255,.72),transparent 25%),
    linear-gradient(150deg,#f5ead8,#ead8ba 62%,#e2cba5);
  box-shadow:0 18px 42px rgba(66,42,18,.15);
}
.solitaire-toolbar{margin-top:0}
.solitaire-board-wrap{
  isolation:isolate;
  padding:5.2%;
  border:1px solid rgba(73,39,14,.72);
  background:
    radial-gradient(ellipse at 27% 18%,rgba(255,226,168,.24) 0 9%,transparent 31%),
    radial-gradient(ellipse at 71% 76%,rgba(66,28,5,.18),transparent 47%),
    repeating-linear-gradient(3deg,rgba(69,31,8,.14) 0 1px,rgba(255,205,129,.035) 2px 5px,rgba(89,43,11,.09) 6px 8px),
    repeating-linear-gradient(91deg,rgba(255,223,169,.035) 0 2px,rgba(73,33,7,.045) 3px 7px),
    linear-gradient(145deg,#c58a49 0%,#ad6d30 36%,#95531f 68%,#713812 100%);
  box-shadow:
    inset 0 0 0 5px rgba(70,34,10,.36),
    inset 0 0 0 9px rgba(232,177,102,.26),
    inset 0 12px 18px rgba(255,218,158,.28),
    inset 0 -18px 30px rgba(52,22,4,.42),
    0 12px 0 #5b2e0f,
    0 15px 0 #3d1d08,
    0 23px 30px rgba(57,28,7,.34),
    0 0 0 3px #d5a56c,
    0 0 0 7px #704116;
}
.solitaire-board-wrap::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:4.2%;
  border-radius:50%;
  pointer-events:none;
  background:
    repeating-radial-gradient(ellipse at 18% 26%,transparent 0 26px,rgba(54,24,6,.055) 27px 29px,transparent 30px 43px),
    linear-gradient(105deg,transparent 0 38%,rgba(255,224,175,.07) 39% 40%,transparent 41% 100%);
  opacity:.9;
  mix-blend-mode:multiply;
}
.solitaire-board-wrap::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:2.6%;
  border-radius:50%;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 2px rgba(255,211,145,.42),
    inset 0 0 0 8px rgba(64,28,7,.18),
    inset 0 9px 14px rgba(255,227,181,.18),
    inset 0 -12px 18px rgba(46,19,4,.24);
}
.solitaire-board{z-index:2;padding:8.2%;gap:1.7%}
.solitaire-hole{
  background:
    radial-gradient(circle at 48% 45%,#44220d 0 19%,#241005 43%,#100602 68%,#060201 100%);
  box-shadow:
    inset 0 7px 9px rgba(0,0,0,.78),
    inset 0 -2px 3px rgba(210,130,59,.18),
    0 0 0 2px rgba(235,177,104,.50),
    0 0 0 4px rgba(73,35,10,.48),
    0 3px 3px rgba(255,215,149,.10);
}
.solitaire-hole::before{
  inset:11%;
  box-shadow:inset 0 0 0 1px rgba(255,203,126,.10),0 1px 0 rgba(255,255,255,.04);
}
.solitaire-peg{
  inset:-7%;
  border:1px solid rgba(6,51,68,.64);
  background:
    radial-gradient(ellipse at 29% 22%,rgba(255,255,255,.96) 0 5%,rgba(232,252,255,.88) 6%,rgba(184,233,243,.38) 12%,transparent 22%),
    radial-gradient(ellipse at 63% 72%,rgba(1,35,49,.28),transparent 38%),
    radial-gradient(circle at 38% 31%,#8ed8e8 0 20%,#48aac4 39%,#237a97 59%,#11526c 77%,#082e40 100%);
  box-shadow:
    inset 4px 5px 8px rgba(255,255,255,.22),
    inset -8px -10px 12px rgba(0,25,38,.42),
    0 3px 0 rgba(3,43,58,.68),
    0 8px 10px rgba(35,17,4,.43),
    0 11px 16px rgba(40,20,5,.20);
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;
}
.solitaire-peg::before{
  width:25%;height:13%;left:19%;top:14%;
  background:rgba(255,255,255,.88);
  filter:blur(.25px);
  transform:rotate(-28deg);
}
.solitaire-peg::after{
  content:"";position:absolute;left:27%;right:20%;bottom:11%;height:7%;border-radius:50%;
  background:rgba(0,20,31,.24);filter:blur(1.2px);
}
.solitaire-hole.is-selected .solitaire-peg{
  transform:translateY(-7%) scale(1.10);
  filter:brightness(1.08) saturate(1.08);
  box-shadow:
    inset 4px 5px 8px rgba(255,255,255,.25),inset -8px -10px 12px rgba(0,25,38,.40),
    0 0 0 4px rgba(244,194,69,.86),0 6px 0 rgba(3,43,58,.65),0 13px 18px rgba(35,17,4,.48);
}
.solitaire-hole.is-target{
  background:radial-gradient(circle at 48% 45%,#704812 0 18%,#392306 48%,#120803 76%,#060201 100%);
  box-shadow:inset 0 7px 9px rgba(0,0,0,.72),0 0 0 3px rgba(255,210,83,.48),0 0 18px rgba(238,184,50,.32);
}
.solitaire-progress{background:rgba(81,48,18,.12)}
.solitaire-progress-bar{background:linear-gradient(90deg,#174f67,#46a0b7,#d0a14e)}
@media(max-width:680px){
  .solitaire-board-wrap{width:94%;padding:4.2%;box-shadow:inset 0 0 0 4px rgba(70,34,10,.34),inset 0 0 0 8px rgba(232,177,102,.22),inset 0 10px 15px rgba(255,218,158,.24),inset 0 -16px 25px rgba(52,22,4,.38),0 8px 0 #5b2e0f,0 11px 0 #3d1d08,0 18px 25px rgba(57,28,7,.28),0 0 0 3px #d5a56c,0 0 0 6px #704116}
  .solitaire-board{padding:7.5%;gap:1.35%}
  .solitaire-peg{inset:-9%}
}


/* 0.14.33: gezeichnete WebP-Materialien und kompakte Lösungssteuerung. */
.solitaire-toolbar{justify-content:flex-end;margin:8px 0 10px}
.solitaire-toolbar .solitaire-actions{width:100%;justify-content:flex-end}
.solitaire-solution-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;max-width:620px;margin:12px auto 0;padding-top:12px;border-top:1px solid rgba(70,43,18,.18)}
.solitaire-speed{display:grid;gap:5px;min-width:0}
.solitaire-speed input[type=\"range\"]{width:100%;accent-color:#6f421e}
.solitaire-board-wrap{
  background-image:
    radial-gradient(circle at 32% 20%,rgba(255,232,194,.18),transparent 36%),
    radial-gradient(circle at 68% 78%,rgba(45,20,5,.18),transparent 48%),
    url('images/wood-texture.webp');
  background-size:auto,auto,cover;
  background-position:center;
  background-repeat:no-repeat;
}
.solitaire-board-wrap::before{background:linear-gradient(110deg,rgba(255,238,204,.10),transparent 35%,rgba(41,18,4,.08) 72%,transparent);mix-blend-mode:soft-light;opacity:1}
.solitaire-peg{
  background-image:url('images/ball.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:transparent;
  border:0;
  box-shadow:0 8px 10px rgba(31,15,4,.42),0 2px 3px rgba(255,255,255,.22);
}
.solitaire-peg::before,.solitaire-peg::after{display:none}
.solitaire-hole.is-selected .solitaire-peg{box-shadow:0 0 0 4px rgba(244,194,69,.88),0 12px 16px rgba(31,15,4,.48)}
.solitaire-result-icon{background-image:url('images/ball.webp');background-size:cover;background-position:center;background-repeat:no-repeat;background-color:transparent;color:#f7d878}
@media(max-width:680px){
  .solitaire-toolbar .solitaire-actions{display:grid;grid-template-columns:1fr 1fr}
  .solitaire-toolbar .solitaire-actions .solitaire-btn-primary{grid-column:auto}
  .solitaire-solution-controls{grid-template-columns:1fr;align-items:stretch}
  .solitaire-solution-controls .solitaire-btn{width:100%}
}

/* 0.14.34: exakt die zuletzt erzeugte Brett-/Kugeloptik als interaktive WebP-Assets. */
.solitaire-board-wrap{
  position:relative;
  width:min(100%,620px);
  aspect-ratio:1;
  margin:0 auto;
  padding:0;
  border:0;
  border-radius:0;
  background:url('images/board-reference.webp') center/100% 100% no-repeat;
  box-shadow:none;
  isolation:isolate;
}
.solitaire-board-wrap::before{
  content:"";
  display:block;
  position:absolute;
  z-index:1;
  inset:11.7%;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 28% 20%,rgba(255,226,177,.18),transparent 34%),
    radial-gradient(circle at 75% 78%,rgba(72,31,8,.14),transparent 48%),
    url('images/wood-texture.webp') center/cover no-repeat;
  box-shadow:inset 0 0 22px rgba(68,31,7,.22),inset 0 1px 0 rgba(255,231,190,.28);
}
.solitaire-board-wrap::after{display:none}
.solitaire-center-mark{display:none}
.solitaire-board{
  position:absolute;
  z-index:2;
  left:14.35%;
  right:14.35%;
  top:10.75%;
  bottom:17.75%;
  aspect-ratio:auto;
  padding:0;
  gap:0;
  border-radius:0;
}
.solitaire-cell{position:relative;overflow:visible}
.solitaire-hole{
  width:100%;
  aspect-ratio:1;
  border:0;
  border-radius:50%;
  padding:0;
  background:url('images/hole-reference.webp') center/116% 116% no-repeat;
  box-shadow:none;
  overflow:visible;
}
.solitaire-hole::before{display:none}
.solitaire-hole.is-center::after{display:none}
.solitaire-peg{
  position:absolute;
  z-index:3;
  inset:-1%;
  border:0;
  border-radius:50%;
  overflow:hidden;
  background:url('images/ball-reference.webp') center/116% 116% no-repeat;
  box-shadow:0 5px 8px rgba(19,10,3,.36);
}
.solitaire-peg::before,.solitaire-peg::after{display:none}
.solitaire-hole.is-selected .solitaire-peg{
  transform:translateY(-5%) scale(1.06);
  filter:brightness(1.08) saturate(1.08);
  box-shadow:0 0 0 4px rgba(244,194,69,.88),0 9px 13px rgba(19,10,3,.42);
}
.solitaire-hole.is-target{
  animation:solitaire-pulse 1s ease-in-out infinite;
  background:url('images/hole-reference.webp') center/116% 116% no-repeat;
  box-shadow:0 0 0 4px rgba(255,216,95,.52),0 0 16px rgba(255,210,70,.42);
}
.solitaire-hole.is-target::after{content:"";display:block;position:absolute;inset:35%;border-radius:50%;background:#ffdc69;box-shadow:0 0 8px #ffe693}
.solitaire-result-icon{background:url('images/ball-reference.webp') center/116% 116% no-repeat;color:#f7d878}
@media(max-width:680px){
  .solitaire-board-wrap{width:96%;padding:0;box-shadow:none}
  .solitaire-board{left:14.35%;right:14.35%;top:10.75%;bottom:17.75%;padding:0;gap:0}
  .solitaire-peg{inset:-1%}
}