/* 算額の世界：神社に奉納された数の額。朱塗りの社殿、檜の板、墨の数字、朱の書き込み、紅白の紐。
   庭（タイトル画面）も、算額を選んでいる間はこの世界観になる。
   端末のダークモード用の指定より必ず優先させるため、:root を重ねて指定する。 */
:root:root[data-world="sangaku"]{--bg:#5c1a12;--bg-2:#3a0f0a;--ink:#f8eedb;--muted:#ecd6b8;--rule:rgba(248,238,219,.26);--focus:#ffd27a;--btn:#7a2418;--btn-ink:#f8eedb;--hinoki:#efe0bd;--sumi:#241812;--shu:#a8261a;color-scheme:dark}
html[data-world="sangaku"] body{background:linear-gradient(90deg,rgba(0,0,0,.18) 0 3%,transparent 3% 97%,rgba(0,0,0,.18) 97%) fixed,repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,transparent 2px 14px),linear-gradient(180deg,#6e2216 0%,var(--bg) 40%,var(--bg-2) 100%) fixed,var(--bg);font-family:'Yuji Syuku','Hiragino Mincho ProN',serif;color:var(--ink)}
html[data-world="sangaku"] body::before{opacity:0!important}
html[data-world="sangaku"] h1,html[data-world="sangaku"] h2{font-family:'Yuji Syuku',serif;font-weight:400;color:var(--ink)}
html[data-world="sangaku"] .garden-intro h1 span{color:var(--focus)}
html[data-world="sangaku"] .garden-mark{color:var(--hinoki)}
html[data-world="sangaku"] .eyebrow,html[data-world="sangaku"] .story-copy,html[data-world="sangaku"] .game-facts,html[data-world="sangaku"] .resume-note{color:var(--muted)}
html[data-world="sangaku"] .game-art{background:#3a0f0a;border:1px solid rgba(255,210,122,.35);border-radius:4px}
html[data-world="sangaku"] .art-caption{color:var(--hinoki);letter-spacing:.2em}
html[data-world="sangaku"] .catalog-number{border-color:var(--hinoki);color:var(--hinoki)}
html[data-world="sangaku"] .play-game{background:var(--hinoki);color:var(--sumi);border-radius:2px;box-shadow:0 3px 0 #8a6a3a}
html[data-world="sangaku"] .play-game:hover{background:#fff6e0}
html[data-world="sangaku"] .slide-dot[aria-current="true"]{color:var(--focus)}
html[data-world="sangaku"] .coach{border-color:rgba(239,224,189,.4);background:rgba(239,224,189,.1)}
html[data-world="sangaku"] .g-done{background:rgba(239,224,189,.1);border-color:rgba(239,224,189,.4)}
html[data-world="sangaku"] .g-seal{background:var(--hinoki);color:var(--shu);border:2px solid var(--shu)}
html[data-world="sangaku"] .g-btn.primary{background:var(--hinoki);color:var(--sumi);border-color:var(--hinoki)}
#sg-title:focus{outline:none}
.sg-main{grid-template-rows:minmax(0,1fr) auto auto!important}
/* 額：屋根の下の檜の板。盤は残りの高さと幅に合わせて伸び縮みする */
.sg-board{--pad:clamp(10px,3.4cqw,22px);box-sizing:border-box;width:min(100cqw,100cqh - 14px,560px);padding:var(--pad);margin-top:14px;position:relative;
  background:repeating-linear-gradient(178deg,rgba(120,90,50,.07) 0 2px,transparent 2px 11px),linear-gradient(90deg,#dcc69b,var(--hinoki) 50%,#d6bd8e);box-shadow:inset 0 0 0 2px #8a6a3a,0 18px 32px -16px #000}
.sg-board::before{content:"";position:absolute;left:-4%;right:-4%;top:-14px;height:14px;background:#2b201a;clip-path:polygon(0 100%,8% 0,92% 0,100% 100%)}
#sg-grid{display:grid;grid-template-columns:repeat(var(--n),1fr);width:100%;border-right:2.5px solid var(--sumi);border-bottom:2.5px solid var(--sumi)}
.sg-cell{position:relative;aspect-ratio:1;margin:0;padding:0;border:0;background:transparent;color:var(--sumi);font:inherit;cursor:pointer;display:grid;place-items:center;container-type:inline-size;
  box-shadow:inset -1px -1px 0 rgba(36,24,18,.3)}
/* 区画の境目は、マスの上と左の太線で描く（右端・下端は盤の線） */
.sg-cell{box-sizing:border-box}.sg-cell.bt{border-top:2.5px solid var(--sumi)}.sg-cell.bl{border-left:2.5px solid var(--sumi)}
.sg-cell i{position:absolute;left:6%;top:3%;font-style:normal;font-size:22cqw;line-height:1.1;color:var(--shu);font-family:'Yuji Syuku',serif;white-space:nowrap;pointer-events:none}
.sg-cell span{font-size:52cqw;line-height:1;margin-top:14%;font-family:'Yuji Syuku',serif}
.sg-cell.sel{background:rgba(255,210,122,.55)}
.sg-cell.clash span{color:var(--shu);text-decoration:underline wavy rgba(168,38,26,.7);text-decoration-thickness:2px;text-underline-offset:8%}
.sg-cell.cagebad i{background:var(--shu);color:#fff6e0;border-radius:3px;padding:0 3%}
.sg-cell.fresh span{animation:sg-ink .4s ease}
.sg-cell:focus-visible{outline:3px solid #1d4e89;outline-offset:-3px;z-index:2}
.sg-cell.guide::after{content:"";position:absolute;inset:6%;border:3px solid #c0392b;border-radius:4px;animation:sg-guide 1.2s ease-in-out infinite;pointer-events:none}
.sg-cell:disabled{cursor:default}
#sg-grid.solved{animation:sg-glow 1.4s ease}
@keyframes sg-ink{from{opacity:0;filter:blur(2px);transform:scale(1.15)}to{opacity:1;filter:none;transform:none}}
@keyframes sg-guide{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes sg-glow{50%{box-shadow:0 0 0 6px rgba(255,210,122,.6)}}
/* 数字の札 */
#sg-pad{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:6px;width:min(100%,560px);justify-self:center}
.sg-key{min-height:46px;padding:0;border:1px solid #8a6a3a;border-radius:3px;background:var(--hinoki);color:var(--sumi);font:inherit;font-family:'Yuji Syuku',serif;font-size:22px;cursor:pointer;box-shadow:0 2px 0 #8a6a3a}
.sg-key.erase{font-size:14px;background:transparent;color:var(--ink);border-color:var(--rule);box-shadow:none}
.sg-key:active{transform:translateY(1px);box-shadow:none}
.sg-key:disabled{opacity:.45;cursor:default}
.sg-key:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media(max-width:700px){#sg-pad{gap:4px}.sg-key{min-height:42px;font-size:20px}}
@media(prefers-reduced-motion:reduce){.sg-cell span,#sg-grid{animation:none!important}}