/* 日課遊戯ポータル 共通スタイル ── 藍×金トークン(資料2)を継承 */
:root{
  --ai:#17293F; --ai2:#203752; --kin:#E0B14B; --kin-hi:#F6D687; --kin-dk:#9C7A2C;
  --shu:#CE4A3E; --kinari:#F1E8D2; --sumi:#241C0E; --line:rgba(241,232,210,.16);
  --font-min:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","BIZ UDMincho",serif;
  --font-got:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ai); color:var(--kinari);
  font-family:var(--font-got); font-size:16px; line-height:1.7;
  min-height:100vh; min-height:100svh;
}
.wrap{max-width:430px; margin:0 auto; padding:20px 16px 48px}
a{color:var(--kin-hi)}
:focus-visible{outline:2px solid var(--kin-hi); outline-offset:2px; border-radius:4px}

/* ヘッダー */
.site-head{text-align:center; padding:8px 0 2px}
.site-mark{font-family:var(--font-min); font-weight:600; font-size:28px;
  letter-spacing:.14em; color:var(--kin); margin:0}
.site-mark .kari{font-size:12px; color:var(--kinari); opacity:.55;
  letter-spacing:.1em; vertical-align:super}
.site-date{font-size:12px; opacity:.7; letter-spacing:.08em; margin:2px 0 0}
.rule{height:1px; border:0; margin:14px 0 22px;
  background:linear-gradient(90deg,transparent,var(--kin-dk),transparent)}

/* ゲームカード(games.jsonから自動生成) */
.card{background:var(--ai2); border:1px solid var(--line); border-radius:14px;
  padding:18px 18px 16px; margin:0 0 14px}
.card h2{font-family:var(--font-min); font-weight:600; font-size:22px;
  color:var(--kin-hi); letter-spacing:.06em; margin:0 0 2px}
.card .tagline{font-size:13px; color:var(--kin); letter-spacing:.04em; margin:0 0 10px}
.card .desc{font-size:14px; opacity:.9; margin:0 0 14px}
.btn{display:inline-block; width:100%; text-align:center; padding:12px 16px;
  background:var(--kin); color:var(--sumi); font-weight:700; font-size:16px;
  border:0; border-radius:10px; text-decoration:none; letter-spacing:.06em;
  cursor:pointer; transition:transform .12s ease, filter .12s ease}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}

/* プレイ頁の骨格 */
.back{display:inline-block; font-size:13px; color:var(--kinari); opacity:.75;
  text-decoration:none; margin-bottom:10px}
.back:hover{opacity:1}
.game-title{font-family:var(--font-min); font-weight:600; font-size:24px;
  color:var(--kin-hi); letter-spacing:.1em; text-align:center; margin:4px 0 14px}
.panel{background:var(--ai2); border:1px solid var(--line); border-radius:14px;
  padding:22px 18px; text-align:center}
.panel .big{font-family:var(--font-min); font-size:18px; color:var(--kin); margin:0 0 8px}
.panel p{margin:0 0 6px}

.note{font-size:12px; opacity:.6; text-align:center; letter-spacing:.05em; margin-top:26px}

/* よつくみ盤面(色は資料2の組色) */
.yg .bars{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
.bar{border-radius:10px; padding:8px 12px; color:var(--sumi); font-size:13px; line-height:1.5}
.bar b{display:block; font-size:14px; letter-spacing:.04em}
.bar.muted{opacity:.55}
.board{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.tile{appearance:none; border:0; border-radius:10px; background:var(--kinari); color:var(--sumi);
  font-family:var(--font-got); font-weight:600; font-size:15px; line-height:1.3;
  min-height:56px; padding:6px 2px; cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent; overflow-wrap:anywhere;
  transition:transform .08s ease, background .12s ease, box-shadow .12s ease}
.tile.sel{background:var(--kin); box-shadow:inset 0 0 0 2px var(--kin-dk)}
.tile:active{transform:scale(.96)}
.status{display:flex; align-items:center; gap:10px; margin:12px 2px}
.mlabel{font-size:13px; opacity:.8}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--line); margin-right:6px}
.dot.used{background:var(--shu)}
.toolbar{display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:8px; margin-top:2px}
.btn2{appearance:none; background:transparent; color:var(--kinari); border:1px solid var(--line);
  border-radius:10px; padding:12px 8px; font-size:14px; font-family:var(--font-got);
  letter-spacing:.04em; cursor:pointer}
.btn2:hover{border-color:var(--kin-dk)}
.btn[disabled]{opacity:.4; cursor:default; filter:none; transform:none}
.hint{text-align:center; font-size:14px; color:var(--kin-hi); min-height:1.5em;
  margin:10px 0 0; letter-spacing:.06em}
.toast{position:fixed; left:50%; bottom:96px; transform:translateX(-50%);
  background:var(--sumi); color:var(--kinari); border:1px solid var(--kin-dk);
  padding:10px 18px; border-radius:999px; font-size:14px; white-space:nowrap;
  opacity:0; transition:opacity .2s ease; pointer-events:none; z-index:9}
.toast.on{opacity:1}
@keyframes yg-shake{0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)}}
.tile.shake{animation:yg-shake .3s ease 2}
.result-emoji{font-size:18px; line-height:1.6; white-space:pre-line; margin:8px 0}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}