/* Hidden Five: glass pebbles that flip to show clues. */
.h5-board { display: grid; gap: 8px; width: min(100%, 340px); margin: 6px auto 0; }
.h5-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.h5-row.shake { animation: shake .35s; }
.h5-tile { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 18px;
  font: 800 clamp(24px, 7vw, 32px) var(--display); color: var(--text); text-transform: uppercase;
  background: var(--glass); border: 2px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .15s; }
.h5-tile.current { border-color: rgba(45, 91, 208, .25); }
.h5-tile.typed { border-color: rgba(45, 91, 208, .65); animation: h5-pop .12s ease-out; background: var(--glass-strong); }
.h5-tile.flip { animation: h5-flip .35s ease-in-out; }
.h5-tile.hit, .h5-tile.near, .h5-tile.miss { color: #fff; border-color: transparent; box-shadow: inset 0 2px 1px rgba(255, 255, 255, .45), inset 0 -4px 8px rgba(0, 0, 0, .15), 0 4px 10px rgba(20, 33, 58, .18); }
.h5-tile.hit { background: linear-gradient(165deg, #6FA8FF, #2D5BD0); }
.h5-tile.hit::after { content: '★'; position: absolute; top: 6%; right: 9%; font-size: 30%; color: #FFE38A; }
.h5-tile.near { background: linear-gradient(165deg, #FFB48A, #EE6A33); }
.h5-tile.near::after { content: ''; position: absolute; bottom: 9%; left: 50%; width: 14%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: rgba(255, 255, 255, .85); }
.h5-tile.miss { background: linear-gradient(165deg, #6B768C, #4A5468); }
:root[data-theme="dark"] .h5-tile.miss { background: linear-gradient(165deg, #2A3348, #1A2134); color: rgba(255, 255, 255, .7); }
.h5-tile.mini { display: inline-flex; width: 30px; height: 30px; font-size: 15px; border-radius: 10px; vertical-align: middle; }
.h5-legend { list-style: none; padding: 0; display: grid; gap: 8px; }
@keyframes h5-pop { 50% { transform: scale(1.08); } }
@keyframes h5-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@media (prefers-reduced-motion: reduce) { .h5-tile.flip, .h5-tile.typed { animation: none; } }