/* Kitten Pile: the claymation shelves for web/kittenpile.js, from design/kittenpile/. Everything is
   scoped under .table-kittenpile except the last block, which themes the page around the
   board while the game is open. The board is a fixed-ratio plate; everything on it is
   placed in container units (cqw, cqh) so one layout serves a TV and a phone. */
.table-kittenpile{--ground:#efe6d6;--plate:#faf6ee;--ink:#2a241d;--muted:#6f6454;--rule:#d8cdb8;--accent:#8a3b2a;--tint:#f1e0d2;--mat:#b84f31;--mat2:#c75b3a;font-family:Karla,"Segoe UI",system-ui,sans-serif;color:var(--ink);display:flex;flex-direction:column;gap:10px}
.table-kittenpile .kp-wrap{display:flex;flex-direction:column;gap:12px}
.table-kittenpile .kp-board{position:relative;width:100%;aspect-ratio:16/9;container-type:size;overflow:hidden;border-radius:4px;box-shadow:0 2px 10px rgba(42,36,29,.18);background:#e6d6bd;user-select:none}
/* The set is the plate at the camera's zoom, its foot on the window's foot; everything on
   the plate is placed in its container units. The window shows what the camera frames. */
.table-kittenpile .kp-set{position:absolute;bottom:0;aspect-ratio:3072/2048;container-type:size}
.table-kittenpile .kp-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.table-kittenpile .kp-set>*{position:absolute}
.table-kittenpile .kp-board>.kp-result-band,.table-kittenpile .kp-board>.kp-finish-band,.table-kittenpile .kp-board>.kp-floor,.table-kittenpile .kp-board>.kp-frames{position:absolute}
/* The finish on a display: the floor band grown to hold the winner, the podium and the cards. */
.table-kittenpile .kp-finish-band{left:31cqw;right:3cqw;bottom:5cqh;display:grid;grid-template-columns:1.1fr 1fr 1.1fr;gap:1.6cqw;padding:1.3cqw 1.6cqw;background:rgba(250,246,238,.92);border:1px solid rgba(122,82,48,.35);box-shadow:0 .3cqw .9cqw rgba(60,40,20,.25);box-sizing:border-box;z-index:4;font-size:1.15cqw;line-height:1.35}
.table-kittenpile .kp-finish-win{display:flex;flex-direction:column;gap:.5cqw}
.table-kittenpile .kp-finish-win p{margin:0;color:var(--muted)}
.table-kittenpile .kp-finish-win .kp-next{margin-top:auto;color:var(--ink)}
.table-kittenpile .kp-win{margin:0;font-family:Archivo,"Arial Narrow",sans-serif;font-stretch:85%;font-weight:900;font-size:4.2cqw;letter-spacing:-.025em;text-transform:uppercase;line-height:.96}
.table-kittenpile .kp-podium{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.6cqw;align-items:end;min-height:12cqw}
.table-kittenpile .kp-step{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.4cqw}
.table-kittenpile .kp-step-name{font-size:1.05cqw;white-space:nowrap}
.table-kittenpile .kp-stack{display:flex;flex-direction:column-reverse;align-items:center}
.table-kittenpile .kp-stack img{height:1.3cqw;width:auto;margin-top:-.8cqw;filter:drop-shadow(0 .1cqw .1cqw rgba(60,30,10,.3))}
.table-kittenpile .kp-stack img:first-child{margin-top:0}
.table-kittenpile .kp-block{width:100%;display:grid;place-items:center;color:#fbf3e4;font-weight:700;background:#8a5a2e;box-shadow:inset 0 .25cqw 0 #a97444,0 .25cqw 0 rgba(42,36,29,.25);height:2.6cqw}
.table-kittenpile .kp-block.step-1{height:5.6cqw;background:var(--accent);box-shadow:inset 0 .25cqw 0 #a84c38,0 .25cqw 0 rgba(42,36,29,.25)}
.table-kittenpile .kp-block.step-2{height:4cqw}
.table-kittenpile .kp-rest{margin:.3cqw 0 0;text-align:center;color:var(--muted);font-size:1cqw}
.table-kittenpile .kp-cards-up{display:flex;flex-direction:column;gap:.2cqw}
.table-kittenpile .kp-card-row{display:flex;justify-content:space-between;gap:1cqw;padding:.3cqw 0;border-bottom:1px solid var(--rule)}
.table-kittenpile .kp-card-row:last-of-type{border-bottom:0}
.table-kittenpile .kp-card-row .won{color:#4f6b4a}
.table-kittenpile .kp-card-row .lost{color:var(--accent)}
/* The scored leg on a display: two lines over the floor where the strip sits, so the shelves stay in view. */
/* How to play: the caption over the wall on a display, the remote on a phone, and a frame flashing what it was just paid. */
.table-kittenpile .kp-tut-board{position:relative}
.table-kittenpile .kp-tut-band{position:absolute;left:22cqw;right:22cqw;top:2.5cqh;padding:.9cqw 1.4cqw;background:rgba(250,246,238,.92);border:1px solid rgba(122,82,48,.35);box-shadow:0 .3cqw .8cqw rgba(60,40,20,.25);box-sizing:border-box;font-size:1.3cqw;line-height:1.35;z-index:4;text-align:center}
.table-kittenpile .kp-tut-band strong{display:block;font-family:Archivo,"Arial Narrow",sans-serif;font-stretch:85%;font-weight:900;font-size:2.2cqw;letter-spacing:-.02em;line-height:1.1;margin:.1cqw 0 .3cqw}
.table-kittenpile .kp-tut-n{display:block;font-size:.85cqw;letter-spacing:.08em;text-transform:uppercase;color:#6f5a44;font-weight:700}
.table-kittenpile .kp-tut-panel{display:flex;flex-direction:column;gap:10px}
.table-kittenpile .kp-tut-panel .kp-tut-n{font-size:12px;margin:0}
.table-kittenpile .kp-tut-nav{display:flex;gap:8px;align-items:stretch}
.table-kittenpile .kp-tut-nav .kp-back{flex:1;align-self:stretch}
.table-kittenpile .kp-tut-nav .kp-verb{flex:2;min-height:48px;align-items:center}
.table-kittenpile .kp-frame.paid{outline:3px solid #4f6b4a;outline-offset:3px}
.table-kittenpile .kp-plus{margin-left:auto;font-weight:700;color:#4f6b4a;white-space:nowrap}
.table-kittenpile .kp-board .kp-frame.paid{outline-width:.25cqw;outline-offset:.25cqw}
.table-kittenpile .kp-board .kp-plus{font-size:1cqw}
.table-kittenpile .kp-result-band{left:31cqw;right:3cqw;bottom:5cqh;display:flex;flex-direction:column;gap:.3cqw;padding:1cqw 1.4cqw;background:rgba(250,246,238,.9);border:1px solid rgba(122,82,48,.35);box-shadow:0 .3cqw .8cqw rgba(60,40,20,.25);box-sizing:border-box;z-index:4;font-size:1.35cqw;line-height:1.35}
.table-kittenpile .kp-result-band strong{font-family:Archivo,"Arial Narrow",sans-serif;font-stretch:85%;font-weight:900;font-size:1.9cqw;letter-spacing:-.02em}
.table-kittenpile .kp-mat{height:1.1cqw;border-radius:.6cqw;background:var(--mat);box-shadow:inset 0 .2cqw 0 rgba(255,255,255,.22),0 .25cqw .25cqw rgba(60,30,10,.35)}
.table-kittenpile .kp-mat.alt{background:var(--mat2)}
.table-kittenpile .kp-mat.open{outline:.35cqw dashed #faf6ee;outline-offset:.3cqw}
.table-kittenpile .kp-num{transform:translateX(-50%);font-family:Archivo,"Arial Narrow",sans-serif;font-stretch:85%;font-weight:900;font-size:1.3cqw;color:#fbf3e4;text-shadow:0 .1cqw 0 rgba(60,30,10,.6);line-height:1}
.table-kittenpile .kp-space-btn{background:rgba(250,246,238,.08);border:.3cqw dashed #faf6ee;border-radius:.8cqw;cursor:pointer;min-height:0;padding:0;z-index:6}
.table-kittenpile .kp-space-btn:hover{background:rgba(250,246,238,.25)}
.table-kittenpile .kp-kit,.table-kittenpile .kp-pile,.table-kittenpile .kp-leap,.table-kittenpile .kp-whirl{z-index:3;filter:drop-shadow(0 .5cqw .4cqw rgba(60,30,10,.35));pointer-events:none}
.table-kittenpile .kp-kit{object-fit:contain}
.table-kittenpile .kp-pile{position:absolute}
.table-kittenpile .kp-pile .kp-band{position:absolute;display:block}
.table-kittenpile .kp-flying,.table-kittenpile .kp-leap{z-index:5}
.table-kittenpile .kp-whirl{z-index:7;background-repeat:no-repeat}
.table-kittenpile .kp-leap{background-repeat:no-repeat}
/* The winner at the tin, looping through its strip at eight frames a second. */
/* Percent positions move the image by (box - image), so cell k of 12 sits at k/11 of 100%. Eleven steps show cells 0 to 10, three times over, then the kitten sits on the last cell. */
.table-kittenpile .kp-tinpatch{position:absolute;z-index:2;pointer-events:none}
.table-kittenpile .kp-winloop{z-index:3;background-repeat:no-repeat;filter:drop-shadow(0 .5cqw .4cqw rgba(60,30,10,.35));animation:kp-winloop 1.5s steps(11) 3 forwards}
@keyframes kp-winloop{to{background-position:100% 0}}
.table-kittenpile .kp-settle{animation:kp-settle var(--kp-settle,.38s) ease-out;transform-origin:50% 100%}
@keyframes kp-settle{0%{transform:scale(1.08,.82)}60%{transform:scale(.96,1.06)}100%{transform:scale(1,1)}}
.table-kittenpile .kp-settle-flip{animation:kp-settle-flip var(--kp-settle,.38s) ease-out;transform-origin:50% 100%}
@keyframes kp-settle-flip{0%{transform:scale(-1.08,.82)}60%{transform:scale(-.96,1.06)}100%{transform:scale(-1,1)}}
/* Toys: the laser is light, not clay; the cucumber is a sprite. */
.table-kittenpile .kp-laser{width:1.3cqw;height:1.3cqw;margin-left:-.65cqw;border-radius:50%;background:#ff2a1a;box-shadow:0 0 0 .5cqw rgba(255,42,26,.28),0 0 1.4cqw .3cqw rgba(255,42,26,.85);z-index:2}
.table-kittenpile .kp-laser.inline{position:static;display:inline-block;width:12px;height:12px;margin:0 8px 0 0;box-shadow:0 0 0 4px rgba(255,42,26,.28);vertical-align:middle}
.table-kittenpile .kp-cuke{z-index:2;filter:drop-shadow(0 .25cqw .2cqw rgba(60,30,10,.35))}
/* The players' frames, a row above the board, readable on a phone. */
.table-kittenpile .kp-frames{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.table-kittenpile .kp-frame{flex:1 1 150px;max-width:260px;background:#fbf3e4;border:5px solid #7a5230;box-shadow:inset 0 0 0 2px #d9b98c,0 4px 8px rgba(60,40,20,.35);padding:6px 10px;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.3;min-width:0}
.table-kittenpile .kp-frame.turn{outline:3px solid var(--accent);outline-offset:3px}
.table-kittenpile .kp-frame-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.table-kittenpile .kp-name{font-family:Archivo,"Arial Narrow",sans-serif;font-stretch:85%;font-weight:900;font-size:19px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-kittenpile .kp-tag{font-size:12px;font-weight:700;color:var(--accent);white-space:nowrap}
.table-kittenpile .kp-frame-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;color:var(--muted);min-width:0}
.table-kittenpile .kp-frame-row strong{color:var(--ink);font-size:16px}
.table-kittenpile .kp-biscuit{height:14px;width:auto}
.table-kittenpile .kp-frame-note{margin-left:auto;font-size:12px}
.table-kittenpile .kp-tiles{display:inline-flex;flex-wrap:wrap;gap:2px}
.table-kittenpile .kp-tile{display:inline-grid;place-items:center;width:16px;height:21px;border-radius:3px;font-family:Archivo,"Arial Narrow",sans-serif;font-weight:900;font-stretch:85%;font-size:12px;border:1px solid rgba(42,36,29,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.table-kittenpile .kp-floor .kp-tile{width:1.3cqw;height:1.7cqw;border-radius:.3cqw;font-size:1.05cqw}
.table-kittenpile .kp-tile.gone{background:transparent;border:1px dashed var(--rule)}
/* The floor strip: jar, dice, leg tiles and the race piles, over the floorboards. */
.table-kittenpile .kp-floor{left:31cqw;right:3cqw;bottom:5cqh;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"jar jar leg" "tiles piles piles";align-items:center;gap:.6cqw 2cqw;padding:.6cqw 1.2cqw;background:rgba(250,246,238,.82);border:1px solid rgba(122,82,48,.35);box-shadow:0 .3cqw .8cqw rgba(60,40,20,.25);box-sizing:border-box;z-index:4;font-size:1.1cqw}
.table-kittenpile .kp-jar-group{grid-area:jar;display:flex;align-items:flex-end;gap:1.2cqw}
.table-kittenpile .kp-jar{height:4.6cqw;width:auto;filter:drop-shadow(0 .3cqw .2cqw rgba(60,30,10,.35));transform-origin:50% 90%}
.table-kittenpile .kp-jar.shaking{animation:kp-rattle .32s ease-in-out infinite}
@keyframes kp-rattle{0%,100%{transform:rotate(-7deg) translateX(-.3cqw)}50%{transform:rotate(7deg) translateX(.3cqw)}}
.table-kittenpile .kp-dice{display:flex;flex-direction:column;gap:.3cqw}
.table-kittenpile .kp-dice>div{display:flex;gap:.4cqw;min-height:2.4cqw;align-items:center}
.table-kittenpile .kp-die{height:2.4cqw;width:auto;filter:drop-shadow(0 .2cqw .15cqw rgba(60,30,10,.3))}
.table-kittenpile .kp-die.dim{opacity:.55}
.table-kittenpile .kp-lbl{font-size:.85cqw;letter-spacing:.08em;text-transform:uppercase;color:#6f5a44;font-weight:700}
.table-kittenpile .kp-empty,.table-kittenpile .kp-muted{color:var(--muted)}
.table-kittenpile .kp-floor .kp-empty,.table-kittenpile .kp-floor .kp-muted{font-size:1cqw}
.table-kittenpile .kp-legtiles{grid-area:tiles;display:flex;flex-direction:column;gap:.3cqw}
.table-kittenpile .kp-legtiles>div{display:flex;gap:.9cqw;align-items:center;min-height:2.2cqw}
.table-kittenpile .kp-legtile-set{display:inline-flex;align-items:center;gap:.2cqw}
.table-kittenpile .kp-legtile-set i{width:.9cqw;height:.9cqw;border-radius:50%;border:1px solid rgba(42,36,29,.4);margin-right:.2cqw}
.table-kittenpile .kp-racepiles{grid-area:piles;display:flex;gap:1.6cqw;justify-self:end}
.table-kittenpile .kp-racepile{display:flex;align-items:center;gap:.9cqw;line-height:1.25}
.table-kittenpile .kp-cards{display:flex;min-width:2.4cqw}
.table-kittenpile .kp-cards img{height:2.8cqw;width:auto;margin-right:-1.3cqw;filter:drop-shadow(0 .1cqw .1cqw rgba(60,30,10,.35))}
.table-kittenpile .kp-cards img:last-child{margin-right:0}
.table-kittenpile .kp-leg{grid-area:leg;font-family:Archivo,"Arial Narrow",sans-serif;font-stretch:85%;font-weight:900;font-size:1.6cqw;color:var(--muted);align-self:start}
.table-kittenpile .kp-leg small{display:block;font:400 .95cqw/1.2 Karla,system-ui,sans-serif;font-stretch:100%}
/* The leg's result as a block in the panel on a phone. */
.table-kittenpile .kp-panel .kp-result{background:var(--plate);border:2px solid var(--ink);padding:14px 16px;font-size:15px;line-height:1.4}
/* The finish in a phone's panel, under the client's card: px, so a phone reads it. */
.table-kittenpile .kp-finish{display:flex;flex-direction:column;gap:12px;padding:4px 0 8px;border-bottom:2px solid var(--ink)}
.table-kittenpile .kp-winline{margin:0;font-size:15px;color:var(--muted)}
.table-kittenpile .kp-finish .kp-podium{gap:8px;min-height:150px}
.table-kittenpile .kp-finish .kp-step{gap:6px}
.table-kittenpile .kp-finish .kp-step-name{font-size:13px}
.table-kittenpile .kp-finish .kp-stack img{height:14px;margin-top:-9px}
.table-kittenpile .kp-finish .kp-block{height:30px;box-shadow:inset 0 3px 0 #a97444,0 3px 0 rgba(42,36,29,.25)}
.table-kittenpile .kp-finish .kp-block.step-1{height:68px}
.table-kittenpile .kp-finish .kp-block.step-2{height:46px}
.table-kittenpile .kp-finish .kp-rest{font-size:13px;margin-top:6px}
.table-kittenpile .kp-finish-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.table-kittenpile .kp-order>div{display:flex;gap:4px;align-items:flex-end;margin-top:6px}
.table-kittenpile .kp-order img{width:auto}
.table-kittenpile .kp-order p,.table-kittenpile .kp-finish .kp-cards-up p{margin:4px 0 0;font-size:12px;max-width:none}
.table-kittenpile .kp-finish .kp-card-row{font-size:13px;padding:5px 0}
.table-kittenpile .kp-panel .kp-result h2{margin:0 0 6px;font-size:22px}
.table-kittenpile .kp-panel .kp-result ul{grid-template-columns:1fr}
.table-kittenpile .kp-result h2{font-family:Archivo,"Arial Narrow",sans-serif;font-stretch:85%;font-weight:900;letter-spacing:-.02em;text-transform:none}
.table-kittenpile .kp-result p{margin:0 0 .6cqw;max-width:none}
.table-kittenpile .kp-result ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.3cqw 1.4cqw}
.table-kittenpile .kp-change{color:var(--accent);font-weight:700}
.table-kittenpile .kp-fx{position:absolute;inset:0;pointer-events:none}
.table-kittenpile .kp-fx>*{position:absolute}
/* The panel under the board: the seat's verbs, or Next leg for a public screen. */
.table-kittenpile .kp-panel{display:flex;flex-direction:column;gap:10px;padding:0 2px 8px}
.table-kittenpile .kp-panel:empty{display:none}
.table-kittenpile .kp-folded .kp-board{display:none}
.table-kittenpile .kp-fold{align-self:flex-start;min-height:36px;padding:0 12px;font-size:13px;background:transparent;border:1px solid var(--rule);color:var(--muted);cursor:pointer;border-radius:0}
.table-kittenpile .kp-floor-text{display:none;margin:0;font-size:14px;color:var(--muted);max-width:none}
.table-kittenpile .kp-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){.table-kittenpile .kp-floor{display:none}.table-kittenpile .kp-floor-text{display:block}}
.table-kittenpile .kp-you{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;font-size:14px;color:var(--muted);border-block:1px solid var(--rule);padding:8px 0}
.table-kittenpile .kp-you strong{color:var(--ink);font-size:17px}
.table-kittenpile .kp-you .kp-biscuit{height:14px;margin-right:4px;vertical-align:-2px}
.table-kittenpile .kp-down,.table-kittenpile .kp-note{margin:0;font-size:14px;color:var(--muted);max-width:none}
.table-kittenpile .kp-h{margin:4px 0 0;font-family:Archivo,"Arial Narrow",sans-serif;font-stretch:85%;font-weight:900;font-size:24px;letter-spacing:-.02em}
.table-kittenpile .kp-verbs{display:flex;flex-direction:column;gap:8px}
.table-kittenpile button.kp-verb{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:64px;padding:10px 14px;background:var(--plate);border:1px solid var(--rule);text-align:left;border-radius:0;font:inherit;color:inherit;cursor:pointer;width:100%}
.table-kittenpile button.kp-verb strong{font-size:18px}
.table-kittenpile button.kp-verb span{font-size:13px;color:var(--muted)}
.table-kittenpile button.kp-verb.primary{background:var(--accent);border-color:var(--accent);color:var(--plate)}
.table-kittenpile button.kp-verb.primary span{color:#f1e0d2}
.table-kittenpile button.kp-verb:hover:not(:disabled){border-color:var(--ink)}
.table-kittenpile .kp-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.table-kittenpile .kp-choice{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 6px;background:var(--plate);border:2px solid var(--rule);font:inherit;color:inherit;cursor:pointer;border-radius:0;min-height:44px}
.table-kittenpile .kp-choice img{width:48px;height:48px;object-fit:contain}
.table-kittenpile .kp-choice span{font-size:12px;font-weight:700}
.table-kittenpile .kp-choice .kp-tile{width:20px;height:26px;font-size:13px}
.table-kittenpile .kp-choice.on{border-color:var(--accent);transform:translateY(-4px)}
.table-kittenpile .kp-choice.gone{opacity:.5}
.table-kittenpile .kp-toykinds{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.table-kittenpile .kp-kind{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px;background:var(--plate);border:2px solid var(--rule);font:inherit;color:inherit;cursor:pointer;text-align:left;border-radius:0}
.table-kittenpile .kp-kind.on{border-color:var(--accent)}
.table-kittenpile .kp-kind strong{font-size:16px}
.table-kittenpile .kp-kind span{font-size:13px;color:var(--muted)}
.table-kittenpile .kp-kind img{height:18px;width:auto}
.table-kittenpile .kp-back{align-self:flex-start;min-height:44px;padding:0 14px;background:transparent;border:1px solid var(--rule);font:inherit;color:inherit;cursor:pointer;border-radius:0}
.table-kittenpile .kp-error{margin:0;padding:8px 0;border-block:1px solid var(--accent);color:var(--accent);font-size:14px;max-width:none}
/* A display: the board alone, as big as the window allows. */
/* A display: the window is the screen under the header, whatever its shape, and the
   camera fills it from the plate (kittenpile.js fitCamera), so the room runs edge to
   edge with no frame around it. The players' frames hang on the set's walls. */
.table-kittenpile .kp-display{min-height:100dvh;background:#e6d6bd}
.table-kittenpile .kp-display .kp-board{width:100%;height:100dvh;aspect-ratio:auto;border-radius:0;box-shadow:none}
.table-kittenpile .kp-display .kp-panel{display:none}
/* Frames on the walls, in window units so the camera never crops them. */
.table-kittenpile .kp-board .kp-frames{flex-direction:column;flex-wrap:nowrap;gap:1.2cqw;z-index:2;top:3cqh;width:14.5cqw}
.table-kittenpile .kp-board .kp-frames.left{left:1.2cqw}
.table-kittenpile .kp-board .kp-frames.right{right:1.2cqw}
.table-kittenpile .kp-board .kp-frame{flex:none;max-width:none;border-width:.35cqw;box-shadow:inset 0 0 0 .15cqw #d9b98c,0 .4cqw .8cqw rgba(60,40,20,.35);padding:.5cqw .8cqw;font-size:1cqw;gap:.15cqw}
.table-kittenpile .kp-board .kp-frame.turn{outline-width:.25cqw;outline-offset:.25cqw}
.table-kittenpile .kp-board .kp-name{font-size:1.45cqw}
.table-kittenpile .kp-board .kp-tag{font-size:.9cqw}
.table-kittenpile .kp-board .kp-frame-row{gap:.3cqw .5cqw}
.table-kittenpile .kp-board .kp-frame-row strong{font-size:1.2cqw}
.table-kittenpile .kp-board .kp-biscuit{height:1.05cqw}
.table-kittenpile .kp-board .kp-frame-note{font-size:.9cqw}
.table-kittenpile .kp-board .kp-frame .kp-tile{width:1.2cqw;height:1.6cqw;font-size:.95cqw;border-radius:.25cqw}
@media (prefers-reduced-motion:reduce){.table-kittenpile .kp-settle,.table-kittenpile .kp-settle-flip,.table-kittenpile .kp-jar.shaking,.table-kittenpile .kp-winloop{animation:none}.table-kittenpile .kp-winloop{background-position:100% 0}}

/* The page around the board: warm paper, brick accent, the house fonts. kittenpile.js puts
   kittenpile-theme on the body from mount to unmount. */
/* The variables and the text colour both, on the root and the body: the page's text colour
   is declared on the root from its own --ink, so a dark-mode root would otherwise keep light
   text over these cream panels (the Share panel, the people screen). */
html:has(body.kittenpile-theme),body.kittenpile-theme{--ground:#efe6d6;--plate:#faf6ee;--ink:#2a241d;--muted:#6f6454;--rule:#d8cdb8;--accent:#8a3b2a;--tint:#f1e0d2;--alert:#8a3b2a;color-scheme:light;background:#efe6d6;color:#2a241d}
body.kittenpile-theme main:has(>.table-kittenpile .kp-display){max-width:none;padding:0}
/* A display has no header: the frame marked "to play" already says whose turn it is, and
   the set runs to the top of the screen. */
body.kittenpile-theme main:has(>.table-kittenpile .kp-display) .table-top{display:none}
/* The corner QR for a phone joining late hangs on the right wall as one more framed
   picture, in the players' frames' wood with the modules in the set's dark wood on cream
   paper, so it reads as part of the room and still scans. No caption. It sits above the
   shelves' right end, inside a TV's safe area. The inline SVG (table.js inlineCornerQR)
   takes the colours; the img it replaces is framed the same way meanwhile. */
body.kittenpile-theme .table-corner{right:clamp(22px,2.8vw,56px);bottom:auto;top:clamp(90px,24vh,260px);gap:0}
body.kittenpile-theme .table-corner figcaption{display:none}
body.kittenpile-theme .table-corner img,body.kittenpile-theme .table-corner svg{display:block;width:clamp(76px,8.5vmin,124px);height:auto;box-sizing:content-box;padding:.7vmin;background:#edd9b8;border:.6vmin solid #7a5230;box-shadow:inset 0 0 0 .22vmin #d9b98c,0 .6vmin 1.2vmin rgba(60,40,20,.4);border-radius:1px}
body.kittenpile-theme .table-corner img{opacity:.9;mix-blend-mode:multiply}
body.kittenpile-theme .table-corner svg [fill]:not([fill="none"]){fill:#4a3222}
body.kittenpile-theme .table-corner svg [stroke]{stroke:#4a3222}
body.kittenpile-theme .table-corner svg>rect[rx][fill]{fill:#edd9b8;stroke:none}
body.kittenpile-theme .table-top .active-turn[data-tone="alert"]{color:var(--accent);font-weight:700}
/* On a phone the frames say whose turn it is, so the header keeps only the game's name and the tools, and the name never wraps. */
@media (max-width:700px){body.kittenpile-theme .table-top{grid-template-columns:auto 1fr auto}body.kittenpile-theme .table-top .active-turn{display:none}body.kittenpile-theme .table-top .game-name{white-space:nowrap}}