/* Picnic Panic: the blanket, cloches and ants. Used by the solo game and the phone in a race. */

.pp { --check: rgba(229, 72, 60, .34); --check-2: rgba(229, 72, 60, .2); --cloth: #FFFDF8; --grass: #DDEFCF; --grass-2: #D2E8C1; --edge: #C9473B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pp { --cloth: #F3E9DA; --grass: #26372A; --grass-2: #223226; }
}
:root[data-theme="dark"] .pp { --cloth: #F3E9DA; --grass: #26372A; --grass-2: #223226; }

.pp svg { width: auto; height: auto; stroke-width: 0; }

.pp-board { position: relative; width: min(100%, calc((100dvh - var(--pp-room, 250px)) * 0.75)); margin: 0 auto; }
.pp-blanket {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 3px; padding: 6px;
  aspect-ratio: calc(var(--cols) / var(--rows)); border-radius: 16px;
  background: #B93B30; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -3px 0 rgba(0,0,0,.18) inset, var(--shadow);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.pp-blanket.locked { pointer-events: none; }

.pp-cell {
  position: relative; display: grid; place-items: center; min-width: 0; padding: 0; border: 0; border-radius: 5px;
  aspect-ratio: 1; container-type: inline-size;
  /* gingham: two sets of see-through stripes over cream */
  background:
    linear-gradient(90deg, var(--check) 50%, transparent 0) 0 0 / 50% 100%,
    linear-gradient(var(--check-2) 50%, transparent 0) 0 0 / 100% 50%,
    var(--cloth);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -2px 0 rgba(120,30,20,.22) inset, 0 1px 1px rgba(60,10,5,.25);
  transition: transform .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.pp-cell.alt { background-position: 25% 0, 0 25%, 0 0; }
.pp-cell[data-s="covered"]:active { transform: scale(.92); }
.pp-cell[data-s="open"] {
  background: var(--grass); box-shadow: 0 1px 2px rgba(0,0,0,.18) inset; border-radius: 4px;
}
.pp-cell.alt[data-s="open"] { background: var(--grass-2); }
.pp-cell b { font: 800 62cqi/1 var(--display); letter-spacing: -.04em; }
.pp-cell[data-n="1"] b { color: #2D78D2; }
.pp-cell[data-n="2"] b { color: #2B8F47; }
.pp-cell[data-n="3"] b { color: #E0452E; }
.pp-cell[data-n="4"] b { color: #7348CC; }
.pp-cell[data-n="5"] b { color: #B0601A; }
.pp-cell[data-n="6"] b { color: #11888A; }
.pp-cell[data-n="7"], .pp-cell[data-n="8"] { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pp-cell[data-n="1"] b { color: #7DB6FF; }
  :root:not([data-theme="light"]) .pp-cell[data-n="2"] b { color: #7FE39A; }
  :root:not([data-theme="light"]) .pp-cell[data-n="3"] b { color: #FF8A73; }
  :root:not([data-theme="light"]) .pp-cell[data-n="4"] b { color: #C3A6FF; }
  :root:not([data-theme="light"]) .pp-cell[data-n="5"] b { color: #F4B26D; }
  :root:not([data-theme="light"]) .pp-cell[data-n="6"] b { color: #6FE0DC; }
}
:root[data-theme="dark"] .pp-cell[data-n="1"] b { color: #7DB6FF; }
:root[data-theme="dark"] .pp-cell[data-n="2"] b { color: #7FE39A; }
:root[data-theme="dark"] .pp-cell[data-n="3"] b { color: #FF8A73; }
:root[data-theme="dark"] .pp-cell[data-n="4"] b { color: #C3A6FF; }
:root[data-theme="dark"] .pp-cell[data-n="5"] b { color: #F4B26D; }
:root[data-theme="dark"] .pp-cell[data-n="6"] b { color: #6FE0DC; }

.pp-cell[data-s="x"] { background: #FFC9BE; box-shadow: 0 0 0 2px #E0452E inset; }
.pp-cell[data-s="a"] { background: #F1E4D2; box-shadow: none; opacity: .9; }
.pp-cell .ant { width: 78%; height: 78%; fill: #2A1A14; stroke: #2A1A14; }
.pp-cell .ant .legs { fill: none; stroke-width: 1.4; stroke-linecap: round; }
.pp-cell .ant .eye { fill: #fff; }
.pp-cell[data-s="x"] .ant { animation: wiggle .5s ease-in-out infinite alternate; }
.cloche { fill: #EEF1F5; stroke: #59616D; }
.cloche .dome { stroke-width: 1.3; }
.cloche .shine { fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; }
.cloche .knob, .cloche .tray { stroke-width: 1.1; }
.pp-cell .cloche { width: 92%; height: 92%; animation: drop .22s cubic-bezier(.2,1.4,.4,1); filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.pp-cell.pop[data-s="open"] b { animation: pop .25s cubic-bezier(.2,1.4,.4,1); }
@keyframes drop { from { transform: translateY(-30%) scale(.8); opacity: 0; } }
@keyframes wiggle { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes pop { from { transform: scale(.4); } }

/* Dig or cloche */
.pp-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--chrome); border: 1px solid var(--line); box-shadow: 0 1px 0 var(--hi) inset, 0 1px 2px var(--lo); }
.pp-mode button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 0; border-radius: 12px; background: transparent; font: 600 16px/1 var(--body); color: var(--soft); }
.pp-mode button[aria-pressed="true"] { background: var(--lcd); color: var(--lcd-ink); box-shadow: 0 2px 5px rgba(0,0,0,.45) inset; text-shadow: 0 0 6px rgba(125,255,163,.5); }
.pp-mode .cloche { width: 22px; height: 22px; }

/* the status strip over the blanket */
.pp-lcd { justify-content: space-between; margin: 0 0 10px; }
.pp-lcd span { white-space: nowrap; }
.pp-lcd .warn { color: #FFB199; text-shadow: 0 0 6px rgba(255,140,110,.6); }

/* Shown over the blanket: the count-in, a bite, a win or a loss */
.pp-over {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; padding: 20px; text-align: center;
  border-radius: 16px; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: enter .25s ease;
}
.pp-over h2, .pp-over .pp-big { margin: 0; }
.pp-big { font: 400 clamp(64px, 26vw, 120px)/1 var(--pixel); color: var(--accent); text-shadow: 0 3px 0 rgba(0,0,0,.12); }
.pp-over p { margin: 0; color: var(--soft); }
.pp-over .ant { width: 64px; height: 64px; fill: #2A1A14; stroke: #2A1A14; animation: wiggle .4s ease-in-out infinite alternate; }
.pp-over .ant .legs { fill: none; stroke-width: 1.4; stroke-linecap: round; }
.pp-over .ant .eye { fill: #fff; }
.pp-over.bite { background: color-mix(in srgb, #FFC9BE 70%, transparent); }
:root[data-theme="dark"] .pp-over.bite { background: color-mix(in srgb, #4A1F1A 80%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp-over.bite { background: color-mix(in srgb, #4A1F1A 80%, transparent); } }
.pp-over .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* the phone in a race */
.picnic-panic { gap: 10px; padding-bottom: 8px; --pp-room: 270px; }
.picnic-panic h2 { margin: 4px 0 0; }
.pp-places { list-style: none; margin: 0; padding: 8px; display: grid; gap: 6px; border-radius: 16px; background: var(--lcd); }
.pp-places li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: #DDF7E5; font-weight: 600; }
.pp-places li.me { background: rgba(125,255,163,.1); }
.pp-places i { width: 26px; height: 26px; border-radius: 50%; background: var(--tint); flex: none; }
.pp-places b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pp-places span { font: 400 13px/1 var(--pixel); color: var(--lcd-ink); text-transform: uppercase; white-space: nowrap; }
.picnic-panic .actions { display: grid; gap: 10px; margin-top: 6px; }
/* A win or a loss: a card low on the blanket, so the board stays in view */
.pp-over.result { inset: auto 10px 10px; padding: 18px 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: none; -webkit-backdrop-filter: none; gap: 10px; }
.pp-over.result .ant { width: 44px; height: 44px; }
.pp-over.result .pp-big { font-size: clamp(44px, 16vw, 72px); }
.pp-over .pp-big { color: var(--accent); }
.picnic-panic #pp-mode { margin-top: auto; }