/* Same Energy: one food or drink a day, and how many of another hold the same energy. Every class starts with e-. */
.e-q { margin-top: 4px; font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 5.6vw, 1.62rem); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }

.e-panel { padding: 12px 14px 10px; background: var(--card); box-shadow: var(--shadow); }
.e-top { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.e-pic { width: 64px; height: 64px; flex: none; border-radius: 16px; background: var(--tint); display: grid; place-items: center; }
.e-pic svg { width: 54px; height: 54px; display: block; overflow: visible; }
.e-name { min-width: 0; flex: 1; }
.e-face { font-family: var(--display); font-weight: 800; font-size: 1.36rem; line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
.e-chips { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px 6px; }
.e-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--tint); color: var(--ink); font-weight: 700; font-size: 0.86rem; line-height: 1.2; }
.e-same { margin: 6px 0 0; text-align: center; color: var(--soft); font-weight: 700; font-size: 0.86rem; letter-spacing: .02em; }
.e-same span { color: var(--c); font-family: var(--display); font-weight: 800; font-size: 1.25rem; margin-right: 4px; vertical-align: -1px; }

/* the plate, or the glasses: drag up anywhere on it to add, down to take away; a tap adds one */
.e-stage { display: flex; justify-content: center; margin-top: 2px; }
.e-plate { display: block; width: min(100%, 330px); height: auto; aspect-ratio: 320 / 152; touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; cursor: ns-resize; outline-offset: 4px; border-radius: 18px; overflow: visible; }
.e-panel.revealed .e-plate { cursor: default; }
.e-dish { fill: color-mix(in srgb, var(--c) 7%, #EEF1F6); }
.e-dish-in { fill: color-mix(in srgb, var(--c) 4%, #F8F9FC); }
.e-table { fill: color-mix(in srgb, var(--c) 14%, var(--tint)); }
.e-track { fill: color-mix(in srgb, var(--c) 16%, var(--tint)); }
.e-thumb { fill: var(--c); stroke: var(--card); stroke-width: 3; transition: cy .08s ease; }
.e-stage.on .e-thumb { r: 12px; }
#items .it { transition: transform .12s ease; }
/* Show before any move: the pile bobs up twice (it moves; it never flashes) */
#items.nudge, #base.nudge { animation: e-nudge .55s ease-in-out 2; }
@keyframes e-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.e-count { margin: 4px 0 0; text-align: center; line-height: 1.1; }
.e-count b { font-family: var(--display); font-weight: 800; font-size: 1.9rem; letter-spacing: -0.03em; color: var(--c); font-variant-numeric: tabular-nums; }
.e-count #unit { font-weight: 700; font-size: 1.05rem; }
.e-cap { display: block; color: var(--soft); font-weight: 800; font-size: .7rem; letter-spacing: .1em; }
.e-cap:empty { display: none; }
.e-you { display: block; color: var(--soft); font-weight: 600; font-size: .92rem; margin-top: 2px; }
.e-you:empty { display: none; }
.e-unit { margin: 3px 0 0; text-align: center; color: var(--soft); font-weight: 600; font-size: .86rem; }

.e-hint { margin: 8px 4px 0; color: var(--soft); font-weight: 500; font-size: 0.95rem; line-height: 1.25; text-align: center; }
.e-verdict { margin-top: 10px; }

/* revealed: the panel takes the game's colour; the real amount is white, yellow the part you got wrong */
.e-panel.revealed .e-dish { fill: rgba(255, 255, 255, .13); }
.e-panel.revealed .e-dish-in { fill: rgba(255, 255, 255, .07); }
.e-panel.revealed .e-table { fill: rgba(255, 255, 255, .16); }
.e-panel.revealed .e-gauge { visibility: hidden; }
.e-panel.revealed .e-pic { background: #fff; }
.e-panel.revealed .e-chip { background: rgba(255, 255, 255, .18); color: #fff; }
.e-panel.revealed .e-same, .e-panel.revealed .e-same span { color: rgba(255, 255, 255, .86); }
.e-panel.revealed .e-count b { color: #fff; }
.e-panel.revealed .e-cap, .e-panel.revealed .e-you, .e-panel.revealed .e-unit { color: rgba(255, 255, 255, .84); }
#items .ok path, #items .ok rect { fill: #fff; stroke: none; }
#items .ok .d { fill: rgba(0, 0, 0, .13); }
#items .miss path, #items .miss rect { fill: var(--miss); stroke: none; }
#items .miss .d { fill: rgba(0, 0, 0, .12); }
#items .extra path, #items .extra rect { fill: rgba(240, 180, 41, .3); stroke: var(--miss); stroke-width: 2.6; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
#items .extra .d { display: none; }
#items .ghost path, #items .ghost rect { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2; vector-effect: non-scaling-stroke; }
#items .ghost .d { display: none; }
#items .glassline { fill: none; stroke: color-mix(in srgb, var(--c) 30%, #9FB3C8); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.e-panel.revealed #items .glassline { stroke: rgba(255, 255, 255, .7); }
#items .fade { transition: opacity .45s ease; }
#items .wait { opacity: 0; }

.e-note { margin: 10px 6px 0; color: var(--soft); font-size: 0.92rem; line-height: 1.4; }
.e-sources { margin: 10px 6px 0; padding: 0; list-style: none; color: var(--soft); font-size: 0.9rem; line-height: 1.45; }
.e-sources li + li { margin-top: 4px; }
.e-sources a { color: inherit; text-underline-offset: 3px; }

/* the stamp in the album: the thing at the top, and how many of the unit */
.stamp.se .sed { width: 30px; height: 30px; margin-bottom: auto; overflow: visible; padding: 2px; border-radius: 9px; background: #fff; }
.stamp.se .p { font-family: var(--display); font-weight: 800; font-size: 1.12rem; letter-spacing: -0.03em; line-height: 0.98; font-variant-numeric: tabular-nums; }
.stamp.se .what { font-weight: 600; font-size: 0.8rem; margin-top: 3px; }
.stamp.se .of { font-weight: 600; font-size: 0.74rem; opacity: 0.88; margin-top: 2px; }

/* short screens: step down so that nothing needs scrolling while you play */
.fit1 .e-plate { width: min(100%, 292px); }
.fit1 .e-pic { width: 56px; height: 56px; }
.fit1 .e-pic svg { width: 46px; height: 46px; }
.fit2 .e-plate { width: min(100%, 256px); }
.fit2 .e-q { font-size: 1.22rem; }
.fit2 .e-hint { display: none; }
.fit3 .e-plate { width: min(100%, 212px); }
.fit3 .e-same { display: none; }
.fit3 .e-count b { font-size: 1.6rem; }
.fit3 .e-face { font-size: 1.18rem; }
.fit3 .e-top { min-height: 0; }
.fit3 .e-panel { padding-top: 9px; padding-bottom: 7px; }
.fit3 .e-unit { display: none; }

@media (min-width: 560px) {
  .e-plate { width: min(100%, 360px); }
}

@media (prefers-color-scheme: dark) {
  .e-panel { background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px var(--line); }
  .e-chip { background: rgba(255, 255, 255, .07); }
  .e-pic { background: rgba(255, 255, 255, .92); }
  .e-dish { fill: rgba(255, 255, 255, .1); }
  .e-dish-in { fill: rgba(255, 255, 255, .05); }
  .e-table { fill: rgba(255, 255, 255, .1); }
  .e-track { fill: rgba(255, 255, 255, .1); }
  .e-thumb { stroke: var(--bg); }
  #items .glassline { stroke: rgba(255, 255, 255, .5); }
  .e-panel.revealed .e-count b { color: var(--c); }
  .e-panel.revealed .e-cap, .e-panel.revealed .e-you, .e-panel.revealed .e-unit { color: var(--soft); }
  .e-panel.revealed .e-same, .e-panel.revealed .e-same span { color: var(--soft); }
  .e-panel.revealed .e-chip { background: rgba(255, 255, 255, .08); color: var(--ink); }
  #items .ok path, #items .ok rect { fill: var(--c); }
  #items .ghost path, #items .ghost rect { stroke: rgba(255, 255, 255, .4); }
  .e-panel.revealed #items .glassline { stroke: rgba(255, 255, 255, .45); }
}
@media (prefers-reduced-motion: reduce) {
  #items.nudge, #base.nudge { animation: none; }
  #items .it, .e-thumb { transition: none; }
  #items .fade { transition: none; }
}