.cardLayout{display:grid;grid-template-columns:minmax(0,760px) minmax(250px,1fr);gap:40px}
.table{position:relative;border-radius:16px;padding:12px;background:radial-gradient(ellipse at 50% 30%,#3f6b5c,#2a4d42 70%,#223f37);box-shadow:inset 0 0 0 2px #1c332c,0 12px 35px #172b3333}
#kboard{position:relative;width:100%;min-height:200px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;--cw:80px;--ch:112px}
.slot,.card{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:calc(var(--cw)*.1)}
.slot{border:2px solid #ffffff2e;background:#ffffff0d;display:grid;place-items:center;color:#ffffff40;font-family:Manrope,sans-serif;font-weight:800;font-size:calc(var(--cw)*.38)}
.slot.stock{cursor:pointer;color:#ffffff66}
.slot.stock:not(.empty) span{visibility:hidden}
.slot.stock.done span{visibility:hidden}
.slot.found.redsuit{color:#f2a3a340}
.slot.tabslot span{font-size:calc(var(--cw)*.3)}
.card{background:#fffdf8;box-shadow:0 1px 2px #0005,0 0 0 1px #0000001f;transition:transform .22s cubic-bezier(.3,.7,.3,1);cursor:pointer;touch-action:none;color:#1d2b33}
.card.red{color:#b23a31}
.card .face{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.card .corner{position:absolute;left:7%;top:4%;display:flex;flex-direction:column;align-items:center;line-height:.95;font-family:Manrope,sans-serif}
.card .corner b{font-size:calc(var(--cw)*.3);font-weight:800;letter-spacing:-.04em}
.card .corner i{font-style:normal;font-size:calc(var(--cw)*.26)}
.card .corner.bottom{left:auto;top:auto;right:7%;bottom:4%;transform:rotate(180deg)}
.card .pip{position:absolute;right:10%;top:26%;font-size:calc(var(--cw)*.62);line-height:1;opacity:.92}
@media(max-width:680px){.card .corner.bottom{display:none}.card .pip{right:8%;top:auto;bottom:6%;font-size:calc(var(--cw)*.5)}}
.card.down{background:repeating-linear-gradient(45deg,#2f5566 0 4px,#29495a 4px 8px);box-shadow:0 1px 2px #0005,inset 0 0 0 2px #fffdf8,inset 0 0 0 3px #1e3743;cursor:default;touch-action:auto}
.card.down .face{visibility:hidden}
.card.down::after{content:"r.";position:absolute;inset:0;display:grid;place-items:center;color:#e9d8c4;font-family:Manrope,sans-serif;font-weight:800;font-size:calc(var(--cw)*.34);opacity:.55}
.card.buried{cursor:default}
.card.dragging{transition:none;box-shadow:0 12px 26px #0006;cursor:grabbing}
.card.nope{animation:nope .32s}
@keyframes nope{25%{translate:-4px 0}75%{translate:4px 0}}
.card.hinted,.slot.hinted{animation:hinted 1.4s ease-in-out 2}
@keyframes hinted{50%{box-shadow:0 0 0 3px #f6d77b,0 0 18px #f6d77b}}
.moveBox{background:var(--navy);color:#fff;border-radius:9px;padding:7px 14px;gap:10px!important}
.moveBox small{font-size:10px;letter-spacing:1px}
.moveBox b{font-size:21px;font-variant-numeric:tabular-nums}
#clock{font-variant-numeric:tabular-nums;font-weight:700}
.tools{grid-template-columns:repeat(3,minmax(0,1fr))}
.tools button:last-child{color:inherit}
.statGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.statGrid div{background:#eef2ec;border-radius:10px;padding:10px;text-align:center}
.statGrid small{display:block;font-size:10px;font-weight:800;letter-spacing:1.2px;color:var(--muted)}
.statGrid b{display:block;font-family:Manrope,sans-serif;font-size:22px;font-variant-numeric:tabular-nums}
.statGrid span{font-size:11px;color:var(--muted)}
@media(max-width:850px){.cardLayout{grid-template-columns:1fr;gap:28px}}
@media(max-width:680px){.table{padding:7px;border-radius:12px;margin:0 -8px}}
.game-focus .cardLayout{flex:1;min-height:0;display:block}
.game-focus .boardColumn{height:100%;display:flex;flex-direction:column;gap:6px}
.game-focus .table{flex:1;min-height:0;overflow:hidden;width:100%;max-width:min(100%,calc((100dvh - 140px)*1.05));margin:0 auto;padding:6px}
.game-focus .boardColumn{align-items:stretch}
.game-focus .boardMeta{width:100%;max-width:760px;margin:0 auto}
.game-focus .cardAside{display:none}
.game-focus .tools{width:100%;max-width:560px;margin:0 auto}
@media(prefers-reduced-motion:reduce){.card{transition:none}.card.nope,.card.hinted{animation:none}}
.pillButton{border:0;cursor:pointer;font-family:inherit}
.pillButton:hover{background:#d3e2dc;color:#2e528f;border:0}
.passInfo{font-size:12px;color:var(--muted)}
.card.selected{box-shadow:0 0 0 3px #f6d77b,0 6px 14px #0005;translate:0 -3px}
.tools.single{grid-template-columns:minmax(0,200px);justify-content:center}
.choiceRow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choiceRow.three{grid-template-columns:repeat(3,1fr)}
.choiceRow .modeChoice{margin:0;align-items:flex-start}
dialog fieldset{margin:14px 0}
/* Beskeder under bordet med fast plads, så bordet aldrig hopper. */
.boardColumn #message{min-height:42px;margin:10px 0 0;padding:10px 14px;font-size:14px}
.boardColumn #message:empty{display:block;visibility:hidden}
@media(max-width:540px){.choiceRow.three{grid-template-columns:1fr}.choiceRow .modeChoice{padding:10px}.choiceRow.three .modeChoice{padding:8px 10px}}
.pillButton{white-space:nowrap}.passInfo{white-space:nowrap}
@media(max-width:540px){.boardMeta{flex-wrap:wrap;row-gap:8px}.boardMeta>div{gap:8px}.moveBox{padding:5px 10px}.moveBox small{font-size:9px}.moveBox b{font-size:18px}}
.card.buried{box-shadow:none}