.g-p-root{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;min-width:0;color:var(--ink,#172125)}
.g-p-root button,.g-p-root input{font:inherit;touch-action:manipulation}
.g-p-root button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.g-p-root button:disabled{cursor:default}
.g-p-root button:focus-visible,.g-p-root input:focus-visible,.g-p-root [tabindex]:focus-visible{outline:3px solid var(--blue,#285bc2);outline-offset:3px}
.g-p-hud{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;width:100%;font-size:14px;color:var(--muted,#4b575c)}
.g-p-hud strong{font-size:24px;color:var(--ink,#172125);font-variant-numeric:tabular-nums;min-width:32px}
.g-p-button,.g-p-arrow{min-height:48px;min-width:48px;border:1px solid var(--line,#dedfda);border-radius:12px;padding:12px 20px;background:var(--surface,#ffffff);color:var(--ink,#172125);font-weight:650}
.g-p-button:hover,.g-p-arrow:hover{border-color:var(--red,#c92d3b);background:var(--red-light,#fbe9e9)}
.g-p-button:active,.g-p-arrow:active{transform:translateY(1px)}
.g-p-button[aria-pressed=true]{background:var(--ink,#172125);color:var(--surface,#ffffff);border-color:var(--ink,#172125)}
.g-p-caption{margin:0;text-align:center;line-height:1.5;color:var(--muted,#4b575c);font-variant-numeric:tabular-nums}
.g-p-color-grid{display:grid;grid-template-columns:repeat(var(--p-cols),1fr);gap:8px;width:min(100%,400px);aspect-ratio:1}
.g-p-color-tile{min-width:0;min-height:44px;border:2px solid transparent;border-radius:12px}
.g-p-color-tile:hover{border-color:var(--ink,#172125)}
.g-p-color-tile.g-p-wrong{border-color:var(--ink,#172125);opacity:.55}
.g-p-hue-row{display:grid;grid-template-columns:repeat(var(--p-cols),1fr);width:min(100%,560px);gap:4px;min-height:128px}
.g-p-hue-tile{min-width:0;min-height:64px;border:3px solid transparent;border-radius:8px;color:var(--ink,#172125);font-size:24px}
.g-p-hue-tile[aria-pressed=true]{border-color:var(--ink,#172125);transform:translateY(-8px)}
.g-p-hue-tile:hover:not(:disabled){box-shadow:inset 0 0 0 2px var(--ink,#172125)}
.g-p-swatch{width:min(100%,400px);min-height:160px;border-radius:16px;border:1px solid var(--line,#dedfda)}
.g-p-sliders{display:grid;width:min(100%,400px);gap:16px}
.g-p-slider-label{display:grid;gap:8px;line-height:1.5}
.g-p-slider-label input{width:100%;height:48px;margin:0;accent-color:var(--red,#c92d3b)}
.g-p-comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(100%,400px);text-align:center}
.g-p-small-swatch{min-height:128px;margin-bottom:8px}
.g-p-2048{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px;border-radius:16px;background:var(--line,#dedfda);width:min(100%,400px);aspect-ratio:1;touch-action:none;user-select:none}
.g-p-number{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;border-radius:8px;font-size:clamp(20px,6vw,40px);font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums;background:hsl(40 65% calc(97% - var(--p-heat)*.45%));color:var(--ink,#172125)}
.g-p-value-0{background:var(--paper,#faf9f6)}
.g-p-value-1024,.g-p-value-2048{background:var(--red,#c92d3b);color:var(--surface,#ffffff);font-size:clamp(20px,5vw,32px)}
.g-p-arrows{display:grid;grid-template-columns:repeat(3,48px);gap:8px}
.g-p-arrow{padding:8px;font-size:24px}
.g-p-arrow:first-child{grid-column:2}
.g-p-arrow:nth-child(2){grid-column:1;grid-row:2}
.g-p-arrow:nth-child(3){grid-column:2;grid-row:2}
.g-p-arrow:nth-child(4){grid-column:3;grid-row:2}
.g-p-snake{display:grid;grid-template-columns:repeat(16,1fr);width:min(100%,400px);aspect-ratio:1;padding:4px;background:var(--paper,#faf9f6);border:2px solid var(--ink,#172125);border-radius:12px;touch-action:none;user-select:none;overflow:hidden}
.g-p-snake-cell{aspect-ratio:1;min-width:0;border-radius:4px}
.g-p-snake-body{background:var(--green,#12694b);border:1px solid var(--paper,#faf9f6)}
.g-p-snake-head{background:var(--ink,#172125)}
.g-p-snake-food{background:var(--red,#c92d3b);border:3px solid var(--paper,#faf9f6);border-radius:50%}
.g-p-mine-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.g-p-mines{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:min(100%,320px)}
.g-p-mine{display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-width:40px;min-height:44px;border-radius:8px;border:1px solid var(--line,#dedfda);background:var(--surface,#ffffff);color:var(--ink,#172125);font-size:24px;font-weight:650;font-variant-numeric:tabular-nums}
.g-p-mine:hover:not(:disabled){border-color:var(--red,#c92d3b);background:var(--red-light,#fbe9e9)}
.g-p-mine-open{background:var(--blue-light,#e8efff);border-color:transparent;color:var(--blue,#285bc2)}
.g-p-mine-hit{background:var(--red-light,#fbe9e9);color:var(--red,#c92d3b)}
@media(max-width:480px){.g-p-hue-row{grid-template-columns:repeat(5,1fr);min-height:144px;gap:8px}.g-p-hue-tile{min-height:64px}.g-p-color-grid{gap:4px}.g-p-hud{gap:8px}.g-p-number{font-size:24px}.g-p-value-1024,.g-p-value-2048{font-size:20px}}
@media(prefers-reduced-motion:reduce){.g-p-root *{scroll-behavior:auto}.g-p-button:active,.g-p-arrow:active{transform:none}}
/* Horizontal ordering stays on one row, with comfortably sized selectable tiles. */
.g-p-hue-scroll{width:100%;overflow:auto;padding:8px 4px 12px;overscroll-behavior-x:contain}
.g-p-hue-row{grid-template-columns:repeat(var(--p-cols),minmax(48px,1fr));width:max(100%,calc(var(--p-cols)*52px));min-height:96px;gap:4px}
.g-p-hue-tile{padding:4px;min-height:80px;position:relative;font-size:14px;font-weight:700;text-shadow:0 1px 2px #ffffffa8}
.g-p-hue-tile:disabled{opacity:1}
.g-p-color-tile{padding:0}
.g-p-review{display:grid;gap:12px;width:100%;padding:16px 0;border-bottom:1px solid var(--line,#dedfda)}
.g-p-review h3{margin:0;text-align:center;font-size:16px}
.g-p-gradient{display:flex;width:100%;height:64px;border-radius:8px;overflow:hidden}
.g-p-gradient span{flex:1;min-width:0}
.g-p-slider-label{width:min(100%,400px)}
.g-p-slider-label output{font-variant-numeric:tabular-nums;color:var(--muted,#4b575c)}
.g-p-color-errors{width:100%;text-align:center;border:1px solid var(--line,#dedfda);border-radius:12px;padding:16px}
.g-p-win{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:16px;border:1px solid var(--line,#dedfda);border-radius:12px}
.g-p-win strong{flex-basis:100%;text-align:center}
.g-p-board-paused{visibility:hidden}
.g-p-select{width:100%;min-height:48px;padding:8px;border:1px solid var(--line,#dedfda);border-radius:8px;background:white;font:inherit;color:inherit}
.g-p-mine-viewport{width:100%;max-height:560px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line,#dedfda);border-radius:12px;padding:8px;background:var(--paper,#faf9f6);touch-action:pan-x pan-y;scrollbar-gutter:stable}
.g-p-mines{--p-cell:44px;display:grid;grid-template-columns:repeat(var(--p-cols),var(--p-cell));gap:4px;width:max-content}
.g-p-mine{width:var(--p-cell);height:var(--p-cell);min-width:0;min-height:0;padding:0;aspect-ratio:1;font-size:clamp(16px,3vw,22px);touch-action:pan-x pan-y}
.g-p-mine:disabled{opacity:1}
.g-p-mine-open{cursor:pointer}
.g-p-mine-open:hover:not(:disabled){background:var(--blue-light,#e8efff);outline:1px solid var(--blue,#285bc2)}
.g-p-2048 .g-p-number{font-size:clamp(16px,5vw,32px)}
@media(max-width:480px){.g-p-hue-row{grid-template-columns:repeat(var(--p-cols),minmax(48px,1fr));min-height:96px;gap:4px}.g-p-small-swatch{min-height:96px}.g-p-comparison{gap:12px}.g-p-comparison .g-p-caption{font-size:13px}.g-p-mine-viewport{max-height:440px}}
/* Reference-rule games, independently drawn controls and shapes. */
.g-p-hue-tile{touch-action:none;user-select:none}
.g-p-snake{grid-template-columns:repeat(37,1fr);width:min(100%,740px);aspect-ratio:37/27;gap:0;padding:2px;border-radius:8px}
.g-p-snake-cell{border-radius:1px}
.g-p-snake-food{border-width:1px}
.g-p-memory-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:min(100%,460px)}
.g-p-memory-shape{display:grid;place-items:center;width:min(100%,200px);aspect-ratio:1;padding:12px;background:var(--paper,#faf9f6)}
.g-p-memory-shape>span{display:block;width:100%;height:100%}
.g-p-memory-small{width:100%;max-width:160px;margin:0 auto 8px}
.g-p-shape-circle{border-radius:50%}
.g-p-shape-diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.g-p-shape-triangle{clip-path:polygon(50% 0,100% 100%,0 100%)}
.g-p-shape-hexagon{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.g-p-shape-star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 92%,50% 70%,21% 92%,32% 57%,2% 35%,39% 35%)}
.g-p-shape-cross{clip-path:polygon(33% 0,67% 0,67% 33%,100% 33%,100% 67%,67% 67%,67% 100%,33% 100%,33% 67%,0 67%,0 33%,33% 33%)}
.g-p-ready{min-height:180px;display:grid;place-items:center;font-size:24px}