[data-game=spider] .layout__board,[data-game=nonograms] .layout__board{min-width:0;max-width:100%}.table-guide{font:14px/1.5 Arial;color:#c4d2cb;margin:0 0 12px}
.spider-viewport{width:100%;height:540px;max-height:65dvh;overflow:auto;contain:inline-size;border:7px solid #896442;border-radius:12px;background:radial-gradient(ellipse at top,#246b51,#113b30);overscroll-behavior:contain}
.spider-table{position:relative;width:100%;min-width:660px;min-height:640px;--step:25px;--gap:6px;--cw:calc((100% - 66px)/10);isolation:isolate}.spider-table.fit{min-width:0;--gap:3px;--cw:calc((100% - 33px)/10)}
.spider-column{position:absolute;top:12px;left:calc(6px + var(--col)*(var(--cw) + var(--gap)));width:var(--cw);height:90px;border:1px dashed #b7d7bf80;border-radius:5px;background:#001b1626;color:#8bb59d;font:16px Arial;cursor:pointer;padding:0}
.spider-card{position:absolute;left:calc(6px + var(--col)*(var(--cw) + var(--gap)));top:calc(12px + var(--row)*var(--step));width:var(--cw);aspect-ratio:72/100;display:block;padding:0;border:1px solid #b8b09c;border-radius:5px;background:#fff6e5;color:#192129;box-shadow:0 2px 3px #0009;cursor:pointer;touch-action:manipulation;z-index:var(--row)}
.spider-card.red{color:#b42c29}.spider-card svg{display:block;width:100%;height:100%;pointer-events:none}.spider-card.down{background:repeating-conic-gradient(#295786 0 25%,#20476f 0 50%) 0/10px 10px;box-shadow:inset 0 0 0 3px #e3dac1,0 2px 3px #0009}.spider-card.selected,.spider-card.hinted{outline:3px solid #f9d65d;outline-offset:-3px;filter:brightness(1.08)}.spider-column.target{background:#ffdc5538;outline:3px solid #f9d65d}.spider-card:focus-visible{outline:3px solid #7dfbd1;outline-offset:-3px}
.nono-mode{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}.nono-mode button{flex:1;min-height:46px}.nono-mode button[aria-pressed=true]{background:#f5d46d;color:#24221a;border-color:#f5d46d}
.nono-viewport{width:100%;max-width:650px;overflow:auto;contain:inline-size;overscroll-behavior-x:contain;margin:0 auto}.nono-board{display:grid;grid-template-columns:var(--hint-width) repeat(var(--n),minmax(0,1fr));grid-template-rows:var(--hint-height) repeat(var(--n),minmax(0,1fr));width:100%;aspect-ratio:1;border:6px solid #8c714d;border-radius:8px;overflow:hidden;background:#f3ead8;color:#3b362c;user-select:none}.nono-board.zoomed{width:calc(var(--n)*32px + var(--hint-width));min-width:100%;max-width:none}
.nono-clue{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:3px 5px;font:700 clamp(10px,1.3vw,16px) Arial;background:#e1d7bf;border-right:1px solid #ada28c;border-bottom:1px solid #ada28c}.nono-clue.col{flex-direction:column;justify-content:flex-end;padding:5px 1px}.nono-clue.complete{background:#c6dec8;color:#245137}.nono-corner{display:grid;place-items:center;font:700 13px Arial;color:#695c43;background:#d5c8aa}
.nono-cell{position:relative;min-width:0;min-height:0;padding:0;border:0;border-bottom:1px solid #c0b49d;border-right:1px solid #c0b49d;background:#fff6e5;color:#4f665e;border-radius:0;cursor:pointer;touch-action:manipulation}.nono-cell.filled{background:linear-gradient(145deg,#337d73,#143d38);box-shadow:inset 1px 1px 2px #80bfb173,inset -2px -2px 2px #09282488}.nono-cell.crossed::after{content:'×';display:grid;place-items:center;position:absolute;inset:0;font:500 clamp(12px,3vw,24px) Arial}.nono-cell.wrong{outline:3px solid #e4493d;outline-offset:-3px}.nono-cell:focus-visible{outline:3px solid #e7b330;outline-offset:-3px;z-index:1}.nono-cell.block-right{border-right:2px solid #8b7a5c}.nono-cell.block-bottom{border-bottom:2px solid #8b7a5c}
@media(max-width:640px){.spider-viewport{height:470px;max-height:62dvh}.nono-board{border-width:4px}.nono-clue{font-size:11px;gap:3px;padding:2px}.nono-board.zoomed .nono-clue{font-size:14px}}
.nono-clue{white-space:nowrap;flex-wrap:nowrap;gap:6px;line-height:20px;font-variant-numeric:tabular-nums;min-width:0;box-sizing:border-box}
.nono-clue span{flex-shrink:0}.nono-clue.col{gap:4px}.nono-clue.complete{background:#175d46;color:#fff5ba;font-weight:800;box-shadow:inset 0 0 0 2px #62b78b}.nono-clue.complete span{text-decoration:line-through;text-decoration-thickness:2px}
.nono-cell{touch-action:none}.nono-board{touch-action:none}