/* Classic palette and system color mode */
:root {
  --bg: #f0f2ec;
  --board: #e1e8df;
  --surface: #d9e2d8;
  --text: #26332e;
  --muted: #566660;
  --perk-rare: #234f81;
  --perk-epic: #67418d;
  --snake: #4f8f7e;
  --head: #2c6556;
  --food: #b4711a;
  --wall: #768480;
  --enemy: #b5625c;
  --enemy-head: #8f3f3a;
  --on-accent: #f1f5f0;
  --board-grid: rgba(38, 51, 46, 0.07);
  --board-vignette: 0.055;
  --depth-mid: #567684;
  --depth-deep: #665f87;
  --depth-abyss: #765568;
  --snake-eye: #f1f5f0;
  --dpad-size: 4.5rem;
  --board-size: min(calc(100vw - 2rem), max(12rem, calc(100dvh - 19rem)), 32rem);
  box-sizing: border-box;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141a19;
    --board: #1b2321;
    --surface: #25302d;
    --text: #c5d0cb;
    --muted: #82918a;
    --perk-rare: #8fbfff;
    --perk-epic: #d0a9ee;
    --snake: #4f7d72;
    --head: #8cc4b4;
    --food: #d8ad5a;
    --wall: #63726c;
    --enemy: #9c615c;
    --enemy-head: #d6948c;
    --on-accent: #10201b;
    --board-grid: rgba(197, 208, 203, 0.055);
    --board-vignette: 0.11;
    --depth-mid: #365866;
    --depth-deep: #514c70;
    --depth-abyss: #624457;
    --snake-eye: #10201b;
  }
}
:root[data-theme="dark"] {
  --bg: #141a19;
  --board: #1b2321;
  --surface: #25302d;
  --text: #c5d0cb;
  --muted: #82918a;
  --perk-rare: #8fbfff;
  --perk-epic: #d0a9ee;
  --snake: #4f7d72;
  --head: #8cc4b4;
  --food: #d8ad5a;
  --wall: #63726c;
  --enemy: #9c615c;
  --enemy-head: #d6948c;
  --on-accent: #10201b;
  --board-grid: rgba(197, 208, 203, 0.055);
  --board-vignette: 0.11;
  --depth-mid: #365866;
  --depth-deep: #514c70;
  --depth-abyss: #624457;
  --snake-eye: #10201b;
}

/* Page layout */
html { height: 100%; overflow: auto; scroll-padding-top: env(safe-area-inset-top, 0px); }
body {
  display: flex;
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
.app { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: auto; padding: 1rem; }

/* Shared text and badges */
.label { font-size: 0.8125rem; color: var(--muted); }
.value { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.badge { display: grid; flex: none; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--board); color: var(--head); }
.badge .icon { width: 1.25rem; height: 1.25rem; }

/* Shared mask icons */
.icon { flex: none; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon-revive { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M12%202L20%205V11C20%2016%2016.5%2020.5%2012%2022C7.5%2020.5%204%2016%204%2011V5Z%20M11%208H13V11H16V13H13V16H11V13H8V11H11Z'/%3E%3C/svg%3E"); }
.icon-smash { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M3.15%2019.15L12.15%2010.15L13.85%2011.85L4.85%2020.85Z%20M20.9%2010.2L17.2%2013.9L10.1%206.8L13.8%203.1Z'/%3E%3C/svg%3E"); }

.icon-gun { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%209H12.5L14.2%207.2C14.5%206.9%2014.9%206.7%2015.3%206.7H20.3C20.7%206.7%2021%207%2021%207.4V11.6C21%2012%2020.7%2012.3%2020.3%2012.3H16.2L14.4%2014.4C14.1%2014.7%2013.7%2014.9%2013.3%2014.9H11.7L11.1%2018.1C11%2018.6%2010.6%2019%2010.1%2019H8.2C7.7%2019%207.3%2018.5%207.4%2018L7.9%2014.9H6.1C4.9%2014.9%204%2014%204%2012.8Z'/%3E%3Crect%20x='15.4'%20y='8.1'%20width='3.3'%20height='1.4'%20rx='0.4'/%3E%3C/svg%3E"); }
.icon-slow { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M2%2017C2%2012.5%205.5%209%2010%209S18%2012.5%2018%2017Z%20M20.5%2011.5A2.5%202.5%200%201%200%2020.5%2016.5A2.5%202.5%200%201%200%2020.5%2011.5Z%20M4%2018H7V21H4Z%20M12%2018H15V21H12Z'/%3E%3C/svg%3E"); }
.icon-fast { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M13%202L4%2014H10L9%2022L20%209.5H14Z'/%3E%3C/svg%3E"); }
.icon-blobs { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M12%203A9%209%200%201%200%2012%2021A9%209%200%201%200%2012%203Z%20M8.5%207.5A1.75%201.75%200%201%200%208.5%2011A1.75%201.75%200%201%200%208.5%207.5Z'/%3E%3C/svg%3E"); }
.icon-bonus { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M12%202A10%2010%200%201%200%2012%2022A10%2010%200%201%200%2012%202Z%20M12%206A6%206%200%201%201%2012%2018A6%206%200%201%201%2012%206Z%20M12%2010.5A1.5%201.5%200%201%200%2012%2013.5A1.5%201.5%200%201%200%2012%2010.5Z'/%3E%3C/svg%3E"); }
.icon-quota { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M5%203H7V21H5Z%20M7%204H19L16%208.5L19%2013H7Z'/%3E%3C/svg%3E"); }
.icon-walls { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M2%203H11V8H2Z%20M13%203H22V8H13Z%20M2%2010H6V15H2Z%20M8%2010H16V15H8Z%20M18%2010H22V15H18Z%20M2%2017H11V22H2Z%20M13%2017H22V22H13Z'/%3E%3C/svg%3E"); }
.icon-choices { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M3%205C6%203.8%209%203.8%2011.2%205V18.5C9%2017.3%206%2017.3%203%2018.5Z%20M12.8%205C15%203.8%2018%203.8%2021%205V18.5C18%2017.3%2015%2017.3%2012.8%2018.5Z'/%3E%3C/svg%3E"); }
.icon-lean { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M2%2012C6%205%2015%204%2022%2012C15%2020%206%2019%202%2012Z'/%3E%3C/svg%3E"); }