/* ======================================================================
   【ファイル】css/base.css
   【概要】共通の土台：色・フォントの変数（CSS 変数）、ページ全体の土台、3Dの舞台、ダメージ・ボスの怒りの赤いふち、ボタン。
     ほかの CSS はここの変数（--gold など）を使う。
   【主な内容】
     ・:root の変数 … 色（--ink 背景 / --paper 文字 / --gold 金 / --shu 朱 など）とフォント（--f-display / --f-ui / --f-pop）
     ・#stage / #hurt / #rageEdge … 3Dの舞台と、ダメージを受けたとき・ボスが怒っている間の赤いふち
     ・.btn          … ふつうのボタン
     ・--ol2 / --ol3 … ゲーム中の文字の黒い縁取り（text-shadow）
   ====================================================================== */
/* 変数（CSS 変数）：ページ全体で使う色とフォント */
:root{
    /* layout: full-bleed 3D shrine stage; HUD clings to the corners; the typing slip is docked at the bottom */
    /* --ink = 背景の濃い藍、--panel = 半透明のパネル、--line = 金の細い線 */
    --ink:#0d0b1f;
    --panel:rgba(18,14,42,.74);
    --line:rgba(242,193,78,.26);
    /* --paper = 文字の生成り色、--mute = 控えめな文字、--gold = 金、--shu = 朱、--jade = 翡翠色 */
    --paper:#f3ead6;
    --mute:#a9a2c9;
    --gold:#f2c14e;
    --shu:#e5533b;
    --jade:#5fd3b5;
    /* --f-display = 筆の見出し用、--f-ui = ふつうの文字、--f-pop = 太いポップな文字 */
    --f-display:"Zen Antique","Hina Mincho","Yu Mincho","YuMincho",serif;
    --f-ui:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","Meiryo",system-ui,sans-serif;
    --f-pop:"Dela Gothic One","Zen Kaku Gothic New","Hiragino Sans",sans-serif;
    /* --outline = 縁取りの色、--pink / --cyan = 演出の差し色 */
    --outline:#140c2c;
    --pink:#ff5fa8;
    --cyan:#4fe3ff;
    /* 暗い画面用の部品（スクロールバーなど）にする */
    color-scheme:dark;
}
/* hidden 属性の付いた要素は必ず隠す */
[hidden]{display:none!important}
/* ページ全体（スクロールさせず、左右は安全領域ぶん空ける） */
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--f-ui);overflow:hidden;-webkit-tap-highlight-color:transparent;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
/* 3Dの舞台：画面いっぱいに置く */
#stage{position:fixed;inset:0;touch-action:none;cursor:crosshair}
#stage canvas{display:block;width:100%;height:100%}
/* ダメージを受けたときの赤いふち：ふだんは透明、.on で赤くする */
#hurt{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 120px 30px rgba(229,83,59,.0);transition:box-shadow .25s}
#hurt.on{box-shadow:inset 0 0 120px 30px rgba(229,83,59,.55);transition:none}
/* ボスが怒っている間：画面の四すみが暗い赤に染まり、ゆっくり脈打つ（打たれたときの #hurt より濃く、黒みがある） */
#rageEdge{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;box-shadow:inset 0 0 180px 50px rgba(150,8,4,.75),inset 0 0 40px 6px rgba(20,0,0,.6)}
#rageEdge.on{opacity:1;animation:rageedge 1.4s ease-in-out infinite alternate}
@keyframes rageedge{from{opacity:.55}to{opacity:1}}
/* 条件：動きを減らす設定なら、脈打たずに濃さを固定する */
@media (prefers-reduced-motion:reduce){#rageEdge.on{animation:none;opacity:.8}}

/* 小さなラベル */
.lbl{font-size:11px;letter-spacing:.14em;color:var(--mute)}

/* ふつうのボタン（朱）と、マウスを乗せた・キーボードで選んだ・押せないときの見た目、.alt は控えめなボタン */
.btn{font:inherit;font-weight:700;font-size:16px;padding:0 18px;border-radius:6px;border:0;cursor:pointer;background:var(--shu);color:#fff7ec}
.btn small{display:block;font-size:12px;font-weight:600;opacity:.85}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.alt{background:rgba(255,255,255,.08);color:var(--paper);border:1px solid var(--line)}

/* ===== ゲーム中のHUD：枠なし・縁取り文字・派手め ===== */
/* 縁取りは text-shadow で描く（文字の太さを削らない） */
/* 変数（CSS 変数）：--ol2 = 2px の縁取り、--ol3 = 3px の縁取り（下に少し影） */
:root{
    --ol2:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000,2px 2px 0 #000,-2px 2px 0 #000,2px -2px 0 #000,-2px -2px 0 #000;
    --ol3:3px 0 0 #000,-3px 0 0 #000,0 3px 0 #000,0 -3px 0 #000,3px 3px 0 #000,-3px 3px 0 #000,3px -3px 0 #000,-3px -3px 0 #000,0 5px 0 #000;
}