:root { --aqua: #00aa93; --coral: #f04f66; --gold: #efb51a; --violet: #904ce0; }
/* Round enamel medallions: brushed rim and upright, engraved motifs. */
html[data-pieces="enamel"] .tile,
html[data-pieces="enamel"] .tray-token,
html[data-pieces="enamel"] .flying-token {
  border-radius: 50%; transform: none;
  background-image: conic-gradient(from 30deg, #fff7df, #b3b8a9 15%, #65796e 30%, #f9f7df 48%, #87998b 68%, #e8ebdb 86%, #fff7df);
  border-color: #5b7163;
  box-shadow: inset 0 1px 1px #ffffff, inset 0 -1px 1px #34473b99, 0 2px 0 #637062, 0 4px 6px #342a1e55;
}
html[data-pieces="enamel"] .board .tile { width: calc(var(--tile-size, 32px) * 1.22); max-width: 73%; }
html[data-pieces="enamel"] .tile::before,
html[data-pieces="enamel"] .tray-token::before,
html[data-pieces="enamel"] .flying-token::before {
  border-radius: 50%;
  background-image: radial-gradient(ellipse at 35% 20%, #ffffff70, transparent 50%), linear-gradient(160deg, #ffffff0a 40%, #08281e4d);
  box-shadow: inset 0 1px 1px #ffffffb3, inset 0 -2px 3px #20382a55;
}
html[data-pieces="enamel"] .tile::after,
html[data-pieces="enamel"] .tray-token::after,
html[data-pieces="enamel"] .flying-token::after {
  content: ''; display: block; position: absolute; z-index: 1;
  left: 23%; top: 23%; width: 54%; height: 54%; margin: 0;
  border: 0; border-radius: 0; transform: none;
  background: var(--enamel-symbol) center / contain no-repeat;
  filter: drop-shadow(0 1px .5px #15352daa);
}
html[data-pieces="enamel"] .tray-token,
html[data-pieces="enamel"] .flying-token { width: 24px; height: 24px; }
.aqua { --enamel-symbol: url('assets/rimdrop-glyph-wave.svg'); }
.coral { --enamel-symbol: url('assets/rimdrop-glyph-heart.svg'); }
.gold { --enamel-symbol: url('assets/rimdrop-glyph-sun.svg'); }
.violet { --enamel-symbol: url('assets/rimdrop-glyph-moon.svg'); }
.appearance-picker { display: flex; align-items: center; gap: 12px; text-align: start; }
.appearance-picker label { font-size: .73rem; color: #756451; flex-shrink: 0; }
.appearance-picker select { min-width: 0; width: 100%; min-height: 44px; padding: 8px; border: 1px solid #c2ae8e; border-radius: 12px; color: #345c4f; background: #fff4de; font: inherit; font-size: .75rem; }
.appearance-picker select:focus-visible { outline: 3px solid #bd8730; outline-offset: 3px; }
.chapter-rule { margin: 0 3px 10px; padding: 10px 12px; border: 1px solid #b69c75; border-radius: 14px; background: #fff0d4b3; }
.chapter-rule strong { display: block; font-size: .75rem; color: #486251; }
.chapter-rule p { margin: 4px 0; font-size: .7rem; line-height: 1.4; color: #67563f; }
.chapter-rule small { display: block; font-size: .65rem; color: #9b4933; }
.edge { position: relative; }
.edge.cooling:disabled { opacity: 1; border-color: #b45b40; background: repeating-linear-gradient(135deg, #f4d7b6 0 8px, #e8c6a6 8px 16px); }
.edge-lock { font-style: normal; font-size: 1rem; line-height: 1; color: #a3442b; }
.preview-note { margin: 0; padding: 8px 16px; text-align: center; background: #345c4f; color: #fff7e0; font-size: .7rem; }
html[data-pieces="flowers"] .tile,
html[data-pieces="flowers"] .tray-token,
html[data-pieces="flowers"] .flying-token {
  border: 0; border-radius: 0; background-color: transparent;
  background-image: var(--flower); background-size: contain; background-position: center; background-repeat: no-repeat;
  box-shadow: none; transform: none; filter: drop-shadow(1px 3px 2px #46311b66);
}
html[data-pieces="flowers"] .tile::before, html[data-pieces="flowers"] .tile::after,
html[data-pieces="flowers"] .tray-token::before, html[data-pieces="flowers"] .flying-token::before { display: none; }
.aqua { --flower: url('assets/rimdrop-flower-aqua.svg'); }
.coral { --flower: url('assets/rimdrop-flower-coral.svg'); }
.gold { --flower: url('assets/rimdrop-flower-gold.svg'); }
.violet { --flower: url('assets/rimdrop-flower-violet.svg'); }
html[data-pieces="flowers"] .board .tile { width: calc(var(--tile-size, 32px) * 1.28); max-width: 76%; }
html[data-pieces="flowers"] .tray-token,
html[data-pieces="flowers"] .flying-token { width: 26px; height: 26px; }

/* Direct edge input: transparent clipped hit areas ON the board, no side bars. */
.stage.direct-board { display: flex; justify-content: center; align-items: center; grid-template: none; gap: 0; margin: auto 0; padding: 14px 0; }
.direct-board .board-wrap { grid-area: auto; width: var(--board-width, 100%); flex: 0 0 auto; }
.direct-board .cell { position: relative; }
.direct-board .cell.edge-preview-cell { outline: 2px solid #fff2a8; outline-offset: -3px; }
.direct-board .cell.edge-hint-cell, .direct-board .cell.edge-guide-cell { outline: 3px solid #267961; outline-offset: -3px; }
.direct-board .edge {
  grid-area: auto; position: absolute; z-index: 3; display: block;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; animation: none; opacity: 1;
  transform: none; visibility: hidden; -webkit-tap-highlight-color: transparent;
}
.direct-board .edge[style] { visibility: visible; }
.direct-board .edge:disabled:not(.tutorial-target) { opacity: 1; }
.direct-board .edge:focus-visible { outline: none; }
.direct-board .edge:hover:not(:disabled), .direct-board .edge:focus-visible:not(:disabled) { background: #fff3b51a; }
.direct-board .edge:active:not(:disabled) { transform: none; background: #fff3b530; }
.direct-board .edge.hint, .direct-board .edge.tutorial-target { background: #2b806024; box-shadow: none; animation: none; }
.direct-board .edge.cooling:disabled { background: repeating-linear-gradient(135deg, #a3442b29 0 4px, transparent 4px 10px); }
.direct-board .edge small { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.direct-board .edge > span, .direct-board .edge-lock {
  position: absolute; left: var(--edge-x); top: var(--edge-y); transform: translate(-50%, -50%);
  width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center;
  font-size: .85rem; color: #fffbe5; background: #246b60; box-shadow: 0 2px 4px #23392c44;
}
.direct-board .edge > span { display: none; }
.direct-board .edge.hint > span, .direct-board .edge.tutorial-target > span, .direct-board .edge:focus-visible > span { display: grid; }
.direct-board .edge-lock { background: #a3442b; }
@media (max-height: 780px) { .stage.direct-board { margin: 4px 0; padding: 8px 0; } }

/* Reserve breathing room INSIDE the safe viewport; Android also excludes bars natively. */
.shell {
  min-height: 0; height: 100vh; height: 100dvh;
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
  justify-content: flex-start; overflow-y: auto; overflow-x: hidden;
}
.shell > :not(.stage) { flex-shrink: 0; }
.shell .stage.direct-board { flex: 1 0 0px; min-height: 240px; margin: 8px 0; padding: 12px 0; }
.shell > nav {
  position: sticky; bottom: 0; z-index: 6; margin-top: 6px; padding: 10px 0 6px;
  background: linear-gradient(180deg, #eee5d700, #eee5d7 18%);
}
.welcome {
  padding-top: calc(28px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(24px + env(safe-area-inset-left, 0px));
  padding-right: calc(24px + env(safe-area-inset-right, 0px));
}
.toast { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 360px) {
  .shell { padding-inline: calc(12px + env(safe-area-inset-left, 0px)) calc(12px + env(safe-area-inset-right, 0px)); }
}