/* Petal Path */
.h3 { font-size: 1.3rem; }
.h2 { font-size: clamp(1.5rem, 5vw, 2.2rem); margin: 0; }
.rule-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.rule-list li { display: flex; gap: .6rem; align-items: flex-start; }
.ri { font-size: 1.2rem; flex: none; width: 1.6rem; text-align: center; }
.total-stars { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; margin: .3rem 0 .8rem; }
.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.lvl {
  text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: .8rem .9rem; cursor: pointer;
  display: flex; flex-direction: column; gap: .2rem; min-height: 100px; transition: transform .15s ease, border-color .2s ease;
}
.lvl:hover { transform: translateY(-2px); border-color: var(--marigold); }
.lvl .ln { font-size: .75rem; font-weight: 800; color: var(--marigold); text-transform: uppercase; letter-spacing: .1em; }
.lvl .lt { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.15; }
.lvl .ls { margin-top: auto; letter-spacing: .1em; }
.lvl .ls .off { opacity: .25; filter: grayscale(1); }

.game-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.game-title .eyebrow { margin-bottom: .1rem; }
.hint-line { color: var(--ink-soft); margin: .6rem 0 .8rem; max-width: 44rem; }
.hud { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: .5rem; max-width: 560px; margin-bottom: .8rem; }
.hud-box { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .45rem .6rem; text-align: center; }
.hud-box b { font-size: 1.3rem; font-family: var(--font-display); }
.hud-box small { display: block; color: var(--ink-mute); font-size: .72rem; font-weight: 700; }
.hud-box.warn b { color: var(--rosa); }

.board-wrap { position: relative; width: min(100%, 560px); margin: 0 0 .9rem; }
.board {
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 0;
  border-radius: 16px; overflow: hidden; border: 3px solid #3b2516; box-shadow: var(--shadow);
  background: #4a3020;
}
.tile {
  position: relative; aspect-ratio: 1; border: 0; padding: 0; margin: 0; cursor: pointer;
  background: #6b4a33; color: #fff;
  background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.05) 0 2px, transparent 3px), radial-gradient(circle at 70% 75%, rgba(0,0,0,.08) 0 2px, transparent 3px);
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25);
  display: grid; place-items: center; font-size: clamp(14px, 5vw, 30px); line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="light"] .tile { background-color: #c99b6b; }
.tile:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; z-index: 2; border-radius: 4px; }
.tile:hover:not([data-fixed]) { filter: brightness(1.12); }
.tile[data-fixed] { cursor: default; }
.tile.t-water { background: linear-gradient(180deg, #1c6ea4, #13507a); background-size: 100% 200%; animation: water 4s ease-in-out infinite alternate; }
@keyframes water { from { background-position: 0 0; } to { background-position: 0 100%; } }
.tile.t-water::after { content: ""; position: absolute; inset: 30% 15%; border-top: 2px solid rgba(255,255,255,.25); border-radius: 50%; }
.tile.t-bridge { background: repeating-linear-gradient(90deg, #a0703f 0 18%, #7a5228 18% 22%); }
.tile.t-bridge::before, .tile.t-bridge::after { content: ""; position: absolute; left: 0; right: 0; height: 8%; background: #4a2f15; }
.tile.t-bridge::before { top: 4%; } .tile.t-bridge::after { bottom: 4%; }
.tile.t-house { background: #4d2f4f; }
.tile.t-tree { background: #3f5d32; }
.tile svg { width: 82%; height: 82%; display: block; pointer-events: none; overflow: visible; }
.tile .emo { pointer-events: none; filter: drop-shadow(0 2px 1px rgba(0,0,0,.4)); }
.tile .mon { position: absolute; right: 4%; top: 2%; font-size: .6em; z-index: 2; pointer-events: none; }
.tile .mon.got { animation: monfly 1s ease forwards; }
@keyframes monfly { to { transform: translate(30%, -120%) scale(1.4); opacity: 0; } }
.tile .petals { position: absolute; inset: 6%; pointer-events: none; }
.tile .petals svg { width: 100%; height: 100%; }
.tile.placed .petals { animation: drop .25s ease-out; }
@keyframes drop { from { transform: scale(1.5); opacity: 0; } to { transform: none; opacity: 1; } }
.tile.fixedp .petals { opacity: .85; filter: hue-rotate(-18deg) saturate(.85); }
.tile.walked::after { content: ""; position: absolute; inset: 0; background: var(--walk, rgba(255,255,255,.18)); mix-blend-mode: screen; pointer-events: none; }
.tile.stop { animation: stopflash .5s ease 3; }
@keyframes stopflash { 50% { box-shadow: inset 0 0 0 4px #ff3b3b; } }
.tile .fam-ring { position: absolute; inset: 4%; border-radius: 50%; border: 3px solid var(--fam); opacity: .9; pointer-events: none; }
.tile.t-of { color: var(--fam); }
.tile.t-of svg { width: 92%; height: 92%; }

.spirit-layer { position: absolute; inset: 3px; pointer-events: none; }
.spirit {
  position: absolute; width: calc(100% / var(--cols)); height: calc(100% / var(--rows));
  display: grid; place-items: center; transition: transform var(--step, 260ms) linear; will-change: transform;
}
.spirit .orb {
  width: 62%; height: 62%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--fam) 60%, transparent 72%);
  box-shadow: 0 0 14px 6px var(--fam); display: grid; place-items: center; font-size: clamp(10px, 3.5vw, 20px);
  animation: bob 1s ease-in-out infinite alternate;
}
.spirit.riding .orb { box-shadow: 0 0 20px 10px #9fe8ff; }
.spirit.home .orb { animation: homein .8s ease forwards; }
.spirit.fail .orb { filter: grayscale(.8); animation: shake .4s ease 2; }
@keyframes bob { from { transform: translateY(-6%); } to { transform: translateY(6%); } }
@keyframes homein { to { transform: scale(1.8); opacity: 0; } }
@keyframes shake { 25% { transform: translateX(-12%); } 75% { transform: translateX(12%); } }

.game-actions { margin-bottom: .6rem; }
.speed { font-weight: 700; display: flex; gap: .35rem; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 3px; }
.lg-grave { background: #9b8fae; }
.lg-of { background: #ff5fa8; }
.lg-p { background: #f26a00; border-radius: 50%; }

.result { position: fixed; inset: 0; z-index: 120; background: rgba(8, 2, 18, .72); display: grid; place-items: center; padding: 1rem; }
.result[hidden] { display: none; }
.result-card { max-width: 440px; width: 100%; text-align: center; animation: pop .35s cubic-bezier(.3,1.5,.5,1); }
@keyframes pop { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.res-stars { font-size: 2.6rem; margin: 0; letter-spacing: .15em; }
.res-stars .dim { opacity: .2; filter: grayscale(1); }
.res-list { list-style: none; padding: 0; margin: 0 0 1rem; text-align: left; display: grid; gap: .3rem; font-size: .95rem; }
.res-list li { background: var(--bg-2); border-radius: 10px; padding: .4rem .7rem; }