.pento-game{max-width:610px;margin:auto;min-width:0}.pento-rules,.pento-tip{line-height:1.65}.pento-tools{display:flex;flex-wrap:wrap;gap:.45rem;margin:.65rem 0}.pento-tools .btn,.pento-notice .btn{min-height:44px}.pento-progress{font-weight:700}.pento-tray{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:.45rem}.pento-piece.btn{min-width:0;min-height:76px;display:flex;flex-direction:column;align-items:center;padding:.2rem .25rem;gap:0;background:#f5eddb}.pento-piece svg{width:50px;height:50px;display:block}.pento-piece[aria-pressed=true]{outline:3px solid #a16e24;outline-offset:1px}.pento-piece[data-placed=true]{background:#d9e5d6}.pento-piece span{font-weight:700}.pento-selected{display:flex;align-items:center;gap:.5rem;min-height:80px}.pento-selected>svg{flex:0 0 72px;width:72px;height:72px}.pento-selected>p{font-size:.86rem;line-height:1.6}.pento-viewport{overflow:auto;max-width:100%;padding:4px;overscroll-behavior:contain}.pento-board{position:relative;margin:auto;min-width:0}.pento-board>svg{display:block;width:100%;height:100%;position:absolute;inset:0;pointer-events:none}.pento-cells{display:grid;grid-template-columns:repeat(var(--pento-cols),1fr);grid-template-rows:repeat(var(--pento-rows),1fr);position:absolute;inset:0}.pento-cell{display:block;min-width:0;min-height:0;margin:0;padding:0;border:0;background:transparent;border-radius:3px;touch-action:pan-x pan-y}.pento-cell:disabled{opacity:1;cursor:default}.pento-cell:focus-visible{outline:3px solid #a66c20;outline-offset:-3px;z-index:2}.pento-overview{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.5rem 0}.pento-overview svg{width:150px;max-height:150px}.pento-overview figcaption{font-size:.8rem}.pento-notice{line-height:1.65;margin:.65rem 0}.pento-notice>svg{display:block;width:100px;height:100px}.pento-notice .btn{margin:.2rem .4rem .2rem 0}.pento-tip{font-size:.8rem}.pento-tools .btn:focus-visible,.pento-piece:focus-visible,.pento-notice .btn:focus-visible{outline:3px solid #ad7924;outline-offset:3px}@media(max-width:360px){.pento-tools .btn{font-size:.82rem;padding:.45rem .55rem}.pento-tray{grid-template-columns:repeat(auto-fit,minmax(57px,1fr));gap:.4rem}.pento-selected>svg{flex-basis:60px;width:60px;height:60px}}

.pento-viewport[data-zoom=true]{max-height:56svh}

.pento-rules{margin:.35rem 0;font-size:.88rem}.pento-progress{margin:.3rem 0;font-size:.9rem}.pento-tray{display:flex;gap:.4rem;overflow-x:auto;overflow-y:hidden;padding:4px 3px;scroll-padding:4px;overscroll-behavior:contain}.pento-piece.btn{flex:0 0 62px;min-height:62px;background:#f5eddb;color:#263b36}.pento-piece[data-placed=true]{background:#d9e5d6;color:#263b36}.pento-piece svg{width:44px;height:36px}.pento-piece span{font-size:.8rem;line-height:1.2}.pento-selected{min-height:48px;gap:.45rem}.pento-selected>svg{flex:0 0 40px;width:40px;height:40px}.pento-selected>p{margin:.3rem 0;font-size:.8rem}.pento-tools{margin:.5rem 0}.pento-tools [data-pento-action=place]{font-weight:700}.pento-piece:disabled{color:#263b36}@media(max-width:360px){.pento-selected>svg{flex-basis:40px;width:40px;height:40px}}