/* games/owldoku.html: what only the Owldoku page needs (the page: board-game.css + puzzle.css, the board: ../owldoku-board.css). */
.hero{background:linear-gradient(135deg,rgba(89,0,176,.3),var(--card) 62%)}
.hero h1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero-owl,.tool-owl{display:inline-block;width:46px;height:46px;background:url(../../iconer/HAKOO.png) center/contain no-repeat;flex-shrink:0}
.tool-owl{width:18px;height:18px;vertical-align:-3px}

.hearts{font-size:18px;letter-spacing:1px;white-space:nowrap}
.hearts.hit{animation:od-hit .5s ease}
.hearts.fun{opacity:.55}
@keyframes od-hit{0%,100%{transform:none}25%{transform:scale(1.25) rotate(-6deg)}50%{transform:scale(.95) rotate(5deg)}}
@media (prefers-reduced-motion:reduce){.hearts.hit{animation:none}}

.od-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.tool[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#04130a}
.od-tip{flex:1 1 200px}
/* The board fits the page: as wide as there is room, at most 560 px; the squares stay big enough for a finger
   (10 × 10 on a 360 px phone: about 34 px). No finger on the board scrolls the page (touch-action: none). */
.od-board-wrap{width:100%}
#board{max-width:560px;margin:0 auto}

@media (max-width:520px){
  .hero-owl{width:36px;height:36px}
  .od-tools .btn{flex:1 1 0;height:44px}
  .od-tip{flex-basis:100%;font-size:12px}
  .hearts{font-size:16px}
}