.kniffel-game{max-width:900px;margin:0 auto}
.kniffel-game [hidden]{display:none!important}
.kniffel-game header{text-align:center}
.kniffel-setup{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:16px 0}
.kniffel-setup label{display:grid;gap:4px;min-width:180px}
.kniffel-btn{padding:.7rem 1rem;border:1px solid #202124;border-radius:10px;background:#f3f4f5;color:#202124;cursor:pointer;min-height:44px}
.kniffel-btn:not(:disabled):hover,.kniffel-btn:not(:disabled):focus-visible{background:#e2e5e8;color:#111;outline:3px solid #f0b400;outline-offset:2px}
.kniffel-btn:disabled{opacity:.5;cursor:not-allowed}
.kniffel-primary{background:#202124;color:#fff;border-color:#202124;box-shadow:0 3px 10px rgba(0,0,0,.16)}
.kniffel-primary:not(:disabled):hover,.kniffel-primary:not(:disabled):focus-visible{filter:brightness(1.15)}
.kniffel-status{text-align:center;margin:10px 0}
.kniffel-turn-info{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:8px 0 14px}
.kniffel-roll-zone{display:grid;justify-items:center;gap:16px;margin:16px 0 12px}
.kniffel-dice{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:16px;padding:10px 8px 12px;width:min(100%,420px);min-height:86px;border-radius:18px;background:linear-gradient(180deg,#fafbfc,#f2f4f7);border:1px solid #e0e3e7;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.kniffel-dice.is-blank{background:linear-gradient(180deg,#fafbfc,#f2f4f7)}
.kniffel-die{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center;width:54px;height:54px;padding:8px;border:2px solid #202124;border-radius:11px;background:linear-gradient(145deg,#fff 0 50%,#eef0f2 100%);box-shadow:inset 3px 3px 5px rgba(255,255,255,.95),inset -5px -6px 8px rgba(0,0,0,.11),4px 5px 0 #b8bdc2,6px 7px 8px rgba(0,0,0,.18);overflow:visible;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}
.kniffel-die::before{content:"";position:absolute;left:5px;right:-5px;top:-7px;height:7px;border:1px solid rgba(32,33,36,.65);border-bottom:0;border-radius:8px 8px 2px 2px;background:linear-gradient(180deg,#fff,#dfe3e6);transform:skewX(-38deg);transform-origin:left bottom;z-index:-1}
.kniffel-die::after{content:"";position:absolute;top:3px;right:-7px;bottom:-5px;width:7px;border:1px solid rgba(32,33,36,.55);border-left:0;border-radius:2px 7px 7px 2px;background:linear-gradient(90deg,#d7dbdf,#aeb4ba);transform:skewY(-38deg);transform-origin:left top;z-index:-1}
.kniffel-die-pip{width:8px;height:8px;border-radius:50%;background:#202124;box-shadow:inset 1px 1px 1px rgba(255,255,255,.28),inset -1px -1px 2px rgba(0,0,0,.35);opacity:0}
.kniffel-die-pip.is-visible{opacity:1}
.kniffel-die-pip-1{grid-column:1;grid-row:1}
.kniffel-die-pip-2{grid-column:2;grid-row:1}
.kniffel-die-pip-3{grid-column:3;grid-row:1}
.kniffel-die-pip-4{grid-column:1;grid-row:2}
.kniffel-die-pip-5{grid-column:2;grid-row:2}
.kniffel-die-pip-6{grid-column:3;grid-row:2}
.kniffel-die-pip-7{grid-column:1;grid-row:3}
.kniffel-die-pip-8{grid-column:2;grid-row:3}
.kniffel-die-pip-9{grid-column:3;grid-row:3}
.kniffel-die[data-held="1"]{transform:translateY(-9px);box-shadow:inset 3px 3px 5px rgba(255,255,255,.95),inset -5px -6px 8px rgba(0,0,0,.11),4px 5px 0 #b8bdc2,0 0 0 4px rgba(255,196,0,.5),6px 9px 10px rgba(0,0,0,.2)}
.kniffel-die-flash{animation:kniffel-die-glow .52s ease-out}
.kniffel-die.kniffel-die-flash{box-shadow:inset 3px 3px 5px rgba(255,255,255,.95),inset -5px -6px 8px rgba(0,0,0,.11),4px 5px 0 #b8bdc2,0 0 0 4px rgba(255,214,87,.42),0 0 18px rgba(255,214,87,.72)}
@keyframes kniffel-die-glow{0%{box-shadow:inset 3px 3px 5px rgba(255,255,255,.95),inset -5px -6px 8px rgba(0,0,0,.11),4px 5px 0 #b8bdc2,0 0 0 0 rgba(255,214,87,0)}45%{box-shadow:inset 3px 3px 5px rgba(255,255,255,.95),inset -5px -6px 8px rgba(0,0,0,.11),4px 5px 0 #b8bdc2,0 0 0 6px rgba(255,214,87,.34),0 0 24px rgba(255,214,87,.78)}100%{box-shadow:inset 3px 3px 5px rgba(255,255,255,.95),inset -5px -6px 8px rgba(0,0,0,.11),4px 5px 0 #b8bdc2,6px 7px 8px rgba(0,0,0,.18)}}
.kniffel-die:disabled{cursor:default}
.kniffel-die.is-blank{cursor:default}
.kniffel-roll-btn{min-width:min(100%,220px)}
.kniffel-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.kniffel-help{text-align:center;margin:6px auto 0;max-width:40rem}
.kniffel-score-paper{position:relative;margin:54px auto 0;padding-top:18px;width:min(100%,760px);background:#fffdf7;border:1px solid #d9d0bc;border-top:0;border-radius:0 0 18px 18px;box-shadow:0 12px 24px rgba(0,0,0,.12);overflow:visible}
.kniffel-score-paper::before{content:"";position:absolute;left:-1px;right:-1px;top:-24px;height:28px;background:radial-gradient(circle at 16px 5px,transparent 0 7px,#d9d0bc 7.2px 8.4px,#fffdf7 8.7px 15px,transparent 15.4px) left top/44px 28px repeat-x;pointer-events:none}
.kniffel-score-paper::after{content:"";position:absolute;left:0;right:0;top:-1px;height:14px;background:radial-gradient(circle at 12px -1px,transparent 0 10px,#fffdf7 10.7px) left top/24px 14px repeat-x;pointer-events:none}
.kniffel-pencil{position:absolute;right:34px;top:-55px;width:280px;height:24px;--kniffel-pencil-height:24px;--kniffel-pencil-wood:36px;--kniffel-pencil-overlap:6px;--kniffel-pencil-lead-length:14px;--kniffel-pencil-lead-height:12px;height:var(--kniffel-pencil-height);border-radius:999px;transform:rotate(-7deg);background:linear-gradient(180deg,#f6d55a 0 35%,#d7a72f 35% 72%,#b9841f 72% 100%);box-shadow:0 5px 9px rgba(0,0,0,.22);z-index:5;border-right:30px solid #d48778}
.kniffel-pencil::before{content:"";position:absolute;left:calc(-1 * (var(--kniffel-pencil-wood) - var(--kniffel-pencil-overlap)));top:0;border-top:calc(var(--kniffel-pencil-height) / 2) solid transparent;border-bottom:calc(var(--kniffel-pencil-height) / 2) solid transparent;border-right:var(--kniffel-pencil-wood) solid #e6c59c}
.kniffel-pencil::after{content:"";position:absolute;left:calc(-1 * (var(--kniffel-pencil-wood) + var(--kniffel-pencil-lead-length) - var(--kniffel-pencil-overlap)));top:calc((var(--kniffel-pencil-height) - var(--kniffel-pencil-lead-height)) / 2);border-top:calc(var(--kniffel-pencil-lead-height) / 2) solid transparent;border-bottom:calc(var(--kniffel-pencil-lead-height) / 2) solid transparent;border-right:var(--kniffel-pencil-lead-length) solid #2d251e}
.kniffel-score-wrap{overflow-x:auto;padding:18px 12px 14px}
.kniffel-score{width:100%;border-collapse:collapse;table-layout:fixed;min-width:0;background:transparent}
.kniffel-score th,.kniffel-score td{border:1px solid #b7b1a2;padding:.45rem .55rem;text-align:center;vertical-align:middle;background:rgba(255,255,255,.72)}
.kniffel-score th:first-child{text-align:left;width:52%}
.kniffel-score-choice{width:100%;min-width:52px;padding:.45rem .55rem;border:2px solid #202124;border-radius:7px;background:#202124;color:#fff;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,.18)}
.kniffel-score-choice:hover,.kniffel-score-choice:focus-visible{background:#3a3d40;color:#fff;outline:3px solid #f0b400;outline-offset:2px}
.kniffel-summary th,.kniffel-summary td{border-top-width:2px}
.kniffel-remote-setup{display:flex;flex-wrap:wrap;gap:12px;flex-basis:100%;align-items:end}
.kniffel-remote-info,.kniffel-setup-status{margin:8px 0;text-align:center}
@media(max-width:600px){.kniffel-setup{display:grid}.kniffel-setup label{min-width:0}.kniffel-dice{gap:11px;width:100%;min-height:78px}.kniffel-die{width:48px;height:48px;padding:7px}.kniffel-die-pip{width:7px;height:7px}.kniffel-roll-btn{width:min(100%,260px)}.kniffel-help{padding:0 8px}.kniffel-score-paper{width:100%}.kniffel-score-wrap{padding:18px 8px 12px}.kniffel-pencil{--kniffel-pencil-height:21px;--kniffel-pencil-wood:31px;--kniffel-pencil-overlap:5px;--kniffel-pencil-lead-length:12px;--kniffel-pencil-lead-height:10px;right:12px;top:-49px;width:220px;height:21px;border-right-width:26px}.kniffel-score th,.kniffel-score td{padding:.38rem .3rem}.kniffel-score th:first-child{width:58%}.kniffel-controls{margin-top:12px}}