/* Meadow Circle: 8-bit meadow look using CSS only. */
.hint { color: var(--muted); font-size: .95rem; }
.plain-list { margin: 0; padding-left: 1.2rem; }
.notice { padding: .6rem .8rem; border: 3px dashed var(--border); background: var(--note); }
.modes { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .75rem; }
.mode-card { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem; border: 3px solid var(--border); background: var(--bg); min-height: 44px; cursor: pointer; }
.mode-card input { width: 1.5rem; height: 1.5rem; margin-top: .15rem; flex: none; }
.check { display: inline-flex; gap: .5rem; align-items: center; min-height: 44px; }
.check input { width: 1.4rem; height: 1.4rem; }
a.button { display: inline-flex; align-items: center; text-decoration: none; }
.confirm { margin-top: .75rem; padding: .6rem .8rem; border: 3px solid var(--border); background: var(--note); }
details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; }

.hud { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; }
.hud p { margin: 0; }
.blooms, .countdown { font-weight: 700; }

.arena-wrap { width: min(100%, 32rem); margin: 0 auto 1rem; }
.arena { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border: 4px solid var(--border); background: var(--border); gap: 1px; }
.cell { position: relative; aspect-ratio: 1; background: var(--tile-a); }
.cell:nth-child(even) { background: var(--tile-b); }
/* Outside the gathering circle: a diagonal hatch, so it is never colour alone. Still fully playable. */
.cell.out { background-color: var(--outside); background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(0, 0, 0, .14) 3px 5px); }
.cell .layer { position: absolute; inset: 8%; width: 84%; height: 84%; }
.you-mark { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); font-size: .55rem; line-height: 1; color: var(--ink); }
.bot-num { position: absolute; right: 1px; bottom: 0; font-size: .55rem; line-height: 1; font-weight: 700; color: var(--ink); }

.a11y-grid { width: 100%; border-collapse: collapse; font-size: .75rem; background: var(--panel); }
.a11y-grid caption { text-align: left; padding-bottom: .25rem; color: var(--muted); }
.a11y-grid th, .a11y-grid td { border: 1px solid var(--border); padding: .15rem; text-align: center; min-width: 1.6rem; }
.a11y-grid td.out { background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(0, 0, 0, .14) 3px 5px); }

.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 4rem)); grid-template-areas: ". up ." "left . right" ". down ."; gap: .5rem; justify-content: center; margin: 0 0 1rem; }
.dpad { width: 100%; min-width: 44px; height: 4rem; font-size: 1.4rem; padding: 0; }
.dpad.up { grid-area: up; } .dpad.left { grid-area: left; } .dpad.right { grid-area: right; } .dpad.down { grid-area: down; }
.actions { justify-content: center; }

.summary-table { border-collapse: collapse; margin: 0 0 1rem; min-width: min(100%, 18rem); }
.summary-table th, .summary-table td { border: 2px solid var(--border); padding: .35rem .6rem; text-align: left; }
.summary-table caption { text-align: left; color: var(--muted); padding-bottom: .25rem; }
.game-footer { margin-top: 1.5rem; }