/* ラッコゲームス 共通の ボタンの 見た目（どの ゲームでも 読む。<style> より 前に <link rel="stylesheet" href="brand/buttons.css">）
   ボタンが まわり（カード・画面の 背景）に とけこまない ように、こい ふち（2px）を 内がわに 引く。
   ふちは outline で 引くので、ボタンの 大きさ・border・かげ（box-shadow。押せそうな 厚み）は ゲームの まま。
   目安：ふちと すぐ 外の 背景の コントラスト比が 3:1 以上（WCAG の「文字以外の コントラスト」。scripts/check-buttons.mjs で 見る）
   ・メインの ボタン（オレンジ など）も 色は そのまま、同じ ふちが つく
   ・ふちの 色は --rk-edge。こい 背景の 上（ゲームの バーなど）は その 場所で --rk-edge を 明るい 色（--rk-edge-light など）に かえる。
     ゲームの 色に 合わせて かえて よい（そのときも 背景との 差は 3:1 以上）
   ・押せない ボタン（disabled・aria-disabled）は ふちも うすく
   ・キーボードで えらんだ ときは 青い わく */
:root { --rk-edge: #8a5a2e; --rk-edge-light: #fff6e4; }
button, .rakko-top, .rk-btn { outline: 2px solid var(--rk-edge); outline-offset: -2px; }
button:disabled, button[aria-disabled="true"] { outline-color: rgba(138, 90, 46, .35); }
button:focus-visible, .rakko-top:focus-visible, .rk-btn:focus-visible { outline: 3px solid #2a6fdb; outline-offset: 1px; }
/* ダブルタップで 拡大しない（brand/notapzoom.js と いっしょに 使う）。:where で つよさ 0 に して、ゲームの touch-action（none・pan-y など）を いつも 先に する。
   カード・シートは 中で スクロールすると html・body の 指定が とどかないので、それぞれにも かける */
:where(html, body, button, a, label, summary, [role=button], canvas, dialog, [class*="card"], [class*="sheet"]) { touch-action: manipulation; }