/* Unified no-native-dialog overlays; mobile WebKit-safe. */
.modal-backdrop{position:fixed;inset:0;z-index:5100;display:flex;align-items:center;justify-content:center;padding:calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom));background:rgba(3,17,30,.90);touch-action:pan-y}
.modal-backdrop[hidden]{display:none!important}
.modal-backdrop .sheet{position:relative;flex:none;min-width:0;max-width:440px;width:100%;max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:#15384c;color:#f8f1e2;border:1px solid #7897a3;border-radius:22px;box-shadow:0 18px 36px #0009}
.modal-open{overflow:hidden}
.topbar{position:relative;z-index:4}
.top-buttons{flex:none;position:relative;z-index:5}
.top-buttons button{position:relative;z-index:6;touch-action:manipulation}
@media(max-width:355px){
  .grid-badge{display:none}
  .brand-name span{display:none}
  .brand-mark{width:27px;height:27px}
  .identity{gap:5px}
  .brand-name{font-size:16px}
  .topbar{gap:5px}
  .top-buttons{gap:5px}
  .icon-button{width:32px;height:34px}
}
/* The only continuously animated thing is a single composited layer beneath
   the board. No canvas loop, heavy full-screen filters, or remote images. */
.board-stage{position:relative;isolation:isolate}
.ambient-field{position:absolute;z-index:0;inset:auto;pointer-events:none;width:min(98%,530px);aspect-ratio:1;opacity:0;transform:translate3d(0,0,0);border-radius:50%}
.board-frame{z-index:1}
html[data-theme="synthwave"] .ambient-field{opacity:.75;background:conic-gradient(from 30deg,#ff3bd63a,#3923b800,#00b4ef35,#ff3bd63a);animation:ambientSpin 21s linear infinite}
html[data-theme="edm"] .ambient-field{opacity:.85;background:conic-gradient(from 40deg,#00ffcc48,#ff1d9d36,#5b3fff52,#00ffcc48);animation:ambientSpin 13s linear infinite}
html[data-theme="terminal"] .ambient-field{opacity:.45;background:repeating-linear-gradient(90deg,transparent 0 26px,#27d45519 27px,transparent 29px),repeating-linear-gradient(0deg,transparent 0 26px,#27d45513 27px,transparent 29px);border-radius:0;animation:ambientShift 20s ease-in-out infinite alternate}
html[data-theme="sailor"] .ambient-field{opacity:.65;background:repeating-radial-gradient(ellipse at 40% 45%,#8edddd20 0 4px,transparent 5px 29px);animation:ambientTide 17s ease-in-out infinite alternate}
html[data-theme="space"] .ambient-field{opacity:.72;background:radial-gradient(ellipse at 35% 30%,#655bdb50,transparent 53%),radial-gradient(ellipse at 75% 70%,#8961e545,transparent 52%);animation:ambientTide 23s ease-in-out infinite alternate}
@keyframes ambientSpin{to{transform:rotate(360deg)}}
@keyframes ambientShift{to{transform:translate3d(12px,-16px,0)}}
@keyframes ambientTide{to{transform:translate3d(11px,-14px,0) scale(1.045)}}
/* Interaction: one short, clipped flash per touched tile, and <=6 sprites. */
.tile.fx-flash{animation:tileSpark .25s ease-out}
@keyframes tileSpark{0%{filter:brightness(1.55)}100%{filter:brightness(1)}}
.fx-spark{position:absolute;z-index:4;display:block;pointer-events:none;user-select:none;-webkit-user-select:none;font:700 22px/1 Georgia,serif;color:var(--spark,#ffe5ab);text-shadow:0 0 7px currentColor;opacity:0;transform:translate3d(-50%,-50%,0) scale(.5);animation:sparkPop .62s ease-out forwards}
@keyframes sparkPop{10%{opacity:.95}65%{opacity:.7}100%{opacity:0;transform:translate3d(calc(-50% + var(--dx,0px)),calc(-50% - 25px),0) scale(1.2)}}
html[data-theme="terminal"]{--spark:#4aff7d}
html[data-theme="sailor"]{--spark:#c4ffff}
html[data-theme="synthwave"]{--spark:#ffa5e9}
html[data-theme="edm"]{--spark:#93ffe8}
html[data-theme="space"]{--spark:#f4d7ff}
html[data-theme="classic"]{--spark:#edc588}
.word-bar.celebrate{animation:wordGlow .52s ease-out}
@keyframes wordGlow{30%{box-shadow:0 0 15px 2px var(--spark,#edc588)}to{box-shadow:none}}
html[data-motion="off"] .ambient-field,html[data-motion="off"] .fx-spark{display:none!important}
html[data-motion="off"] .tile.fx-flash,html[data-motion="off"] .word-bar.celebrate{animation:none!important}
html[data-motion="off"] .tile.rolling,html[data-motion="off"] .board-frame.shaking{animation:none!important}
html[data-paused="true"] .ambient-field, .modal-open .ambient-field{animation-play-state:paused!important}
.motion-choice{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 19px;border:1px solid #6e8fa04d;border-radius:12px;background:#ffffff0a;padding:10px}
.motion-choice strong{display:block;font-size:13px;color:#f6ebd5}
.motion-choice small{display:block;font-size:11px;color:#a9c5c9;margin-top:3px;line-height:1.4}
.motion-choice input{width:22px;height:22px;accent-color:#e9c58d;flex:none}
@media(prefers-reduced-motion:reduce){.ambient-field,.fx-spark{display:none!important}.tile.fx-flash,.word-bar.celebrate{animation:none!important}}

#settings-dialog{width:100%;max-width:none}

/* Subtle material motion through the seams of each themed tray. */
.board-frame::before{content:"";position:absolute;inset:5px;border-radius:19px;z-index:0;pointer-events:none;opacity:0}
.board-frame .board{position:relative;z-index:2}
html[data-theme="synthwave"] .board-frame::before{opacity:.64;background:repeating-linear-gradient(125deg,transparent 0 19px,#ed39e636 20px,transparent 22px);animation:ambientShift 15s ease-in-out infinite alternate}
html[data-theme="edm"] .board-frame::before{opacity:.6;background:conic-gradient(from 10deg,#38f4e474,#ed74f668,#72a7ff72,#38f4e474);animation:ambientSpin 26s linear infinite}
html[data-theme="terminal"] .board-frame::before{opacity:.6;background:repeating-linear-gradient(0deg,#34f05d1a 0 1px,transparent 2px 17px);animation:ambientShift 11s ease-in-out infinite alternate}
html[data-theme="sailor"] .board-frame::before{opacity:.55;background:repeating-radial-gradient(ellipse at 50% 80%,#b4fff247 0 2px,transparent 3px 16px);animation:ambientTide 11s ease-in-out infinite alternate}
html[data-theme="space"] .board-frame::before{opacity:.75;background:radial-gradient(circle at 10% 20%,#e8d4ffb5 0 1px,transparent 2px),radial-gradient(circle at 73% 48%,#e8d4ffb5 0 1px,transparent 2px),radial-gradient(circle at 49% 88%,#e8d4ffb5 0 1px,transparent 2px);animation:ambientTide 18s ease-in-out infinite alternate}
html[data-motion="off"] .board-frame::before{animation:none!important}
html[data-paused="true"] .board-frame::before,.modal-open .board-frame::before{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.board-frame::before{animation:none!important}}

.together-backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.top-buttons button{min-height:36px}