/* 紙、青磁、墨。庭と器に共通する設え。 */
:root{--bg:#eee9df;--bg-2:#e2dbcd;--ink:#303d35;--muted:#65685b;--btn:#e1dbc9;--btn-ink:#303d35;--focus:#796027;--rule:#30433530;--fiber:.045;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#eee9df;--bg-2:#e2dbcd;--ink:#303d35;--muted:#65685b;--btn:#e1dbc9;--btn-ink:#303d35;--focus:#796027;--rule:#30433530;--fiber:.045}}
[hidden]{display:none!important}
body{background:radial-gradient(ellipse at 78% 15%,#faf7ef88,transparent 65%),var(--bg);font-family:'Zen Old Mincho',serif}
body::before{mix-blend-mode:multiply!important}
a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:2px solid var(--focus);outline-offset:6px}
h1,h2{font-family:'Kaisei Tokumin',serif;font-weight:400;background:none;color:var(--ink);-webkit-text-fill-color:currentColor}
.eyebrow{font-size:12px;letter-spacing:.22em;color:var(--muted);margin:0 0 22px}
.garden{max-width:1200px;margin:auto;padding:0 56px;position:relative;z-index:1}
.garden-nav{height:98px;display:flex;gap:15px;align-items:center;border-bottom:1px solid var(--rule);font-size:12px;letter-spacing:.12em}
.garden-nav a{margin-left:auto}.garden-nav a span{margin-left:22px}.garden-mark{font-size:32px;color:#7b8464}
.garden-intro{text-align:center;padding:66px 0 44px;position:relative}
.garden-intro h1{writing-mode:horizontal-tb;font-size:clamp(42px,6vw,74px);letter-spacing:.14em;margin:0;line-height:1.4}
.garden-intro h1 span{color:#7b815e}.garden-copy{font-size:14px;line-height:2.1;letter-spacing:.16em;margin:24px 0 0}.garden-stem{width:1px;height:34px;background:#8c795750;margin:24px auto 0}
.game-card{display:grid;grid-template-columns:1.2fr 1fr;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:36px 0 42px;gap:66px;align-items:center;scroll-margin-top:20px}
.game-art{position:relative;aspect-ratio:1.15;background:radial-gradient(ellipse at 40% 35%,#e4dfd0,#d6d1c1 85%);overflow:hidden;border-radius:48% 48% 2px 2px}
.game-art canvas{width:100%;height:100%;display:block;object-fit:contain}.art-caption{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.2em;color:#5c6555}
.game-story{padding-right:20px}.catalog-number{font-size:16px;border:1px solid #8c795750;border-radius:50%;padding:5px 10px;margin-right:12px}
.game-story h2{font-size:58px;line-height:1.4;letter-spacing:.18em;margin:12px 0}.game-subtitle{font-size:15px;letter-spacing:.12em;margin:12px 0 24px}.story-copy{font-size:14px;line-height:2.15;color:var(--muted);letter-spacing:.08em}
.game-facts{display:flex;gap:14px;font-size:11px;color:var(--muted);margin:24px 0 18px;flex-wrap:wrap}.game-facts span+span{border-left:1px solid var(--rule);padding-left:14px}
.play-game{background:#354b40;color:#f6f1e4;display:flex;justify-content:space-between;align-items:center;min-height:60px;padding:12px 24px;letter-spacing:.15em;transition:background .2s,transform .2s}.play-game:hover{background:#465f50;transform:translateY(-2px)}.play-game>span:last-child{font-size:23px}.resume-note{font-size:11px;color:var(--muted);min-height:18px;margin:8px 0 0}
.garden-footer{display:flex;justify-content:space-between;gap:18px;padding:28px 0 36px;font-size:11px;letter-spacing:.12em;color:var(--muted)}
.wrap{max-width:1120px;gap:24px;padding:0 36px 40px}.game-nav{grid-column:1/-1;width:100%;display:flex;justify-content:space-between;align-items:center;min-height:80px;border-bottom:1px solid var(--rule);font-size:12px;letter-spacing:.08em}.game-nav a{padding:12px 0}
.wrap header{padding-top:12px}.wrap h1{font-weight:400;font-size:56px;letter-spacing:.2em}.wrap .lead{line-height:2.1;font-size:13px}.wrap .level{border-top:1px solid var(--rule);padding-top:20px;margin-top:28px}.wrap .level b{font-size:22px}.wrap .tools{gap:8px}.icon-btn{border-radius:2px;min-height:44px;font-size:12px;padding:6px 12px}.wrap main{gap:22px}
.tray{min-width:0;width:min(100%,590px);padding:18px;border-radius:5px;background:repeating-linear-gradient(2deg,#ffffff03 0 1px,transparent 1px 7px),linear-gradient(120deg,#67503a,#342b23 60%,#514332);box-shadow:0 30px 45px -26px #352a2580,0 6px 9px -5px #31281d90,inset 0 1px 0 #b2a185,inset 0 0 0 3px #3c3027,inset 0 0 0 4px #9b826240}
.board-wrap{border-radius:2px;padding:9px;background:#272c25;box-shadow:inset 0 2px 6px #0008}.board{border-radius:1px}.tile{filter:drop-shadow(1px 3px 1px #0b191a99)}
.shard{background:radial-gradient(ellipse at 20% 0%,#d6cbb0,transparent 65%),linear-gradient(145deg,#ad9e80,#637166 55%,#314c45);box-shadow:inset 1px 1px 1px #e1ddbd,inset -2px -3px 1px #3c544c;transition:transform .32s cubic-bezier(.25,.8,.25,1)}
.glaze{box-shadow:inset 2px 2px 2px #f7fff299,inset -2px -3px 3px #234a4899;filter:none!important}
.glaze-reflection{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 18% 12%,#fff9 0,transparent 24%),linear-gradient(132deg,#e5fff322,transparent 35%,#092e2a28 75%,#faffdf42);mix-blend-mode:soft-light}
.tile.locked .glaze{filter:saturate(.5) brightness(.86)!important}.lockmark{width:11%;height:11%;background:radial-gradient(circle at 30% 25%,#eee3bd,#a99358 40%,#51412a);box-shadow:0 1px 3px #0009}
.crack{stroke:#234439;stroke-width:2.2}.crack-hi{stroke:#f5f4d599;stroke-width:1.1}.seam{stroke-width:4.1;filter:drop-shadow(.6px 1px .35px #57461c)}.glint{stroke-width:.7;stroke:#fff4c7;opacity:.8}.pool{transform-box:fill-box}.light{opacity:.4}.sheen{border-radius:0}
.bar{padding-top:2px;border-bottom:1px solid var(--rule);padding-bottom:18px}.moves{font-size:12px}.moves strong{font-size:28px}button.ctl{border-radius:2px;min-height:44px;font-size:12px;padding:10px 14px;background:transparent;border:1px solid var(--rule)}button.primary{background:#354b40;color:#f7f1e4;border:0;box-shadow:none}.help{font-size:12px;line-height:2;color:#646956}.done{border-radius:2px}.stamp{border-radius:2px}
@media(min-width:880px){.wrap{grid-template-columns:240px 1fr;gap:36px 70px}.wrap header{position:static;justify-self:stretch}.wrap h1{writing-mode:vertical-rl;font-size:68px;margin:10px 0 30px auto}.wrap .eyebrow{font-size:11px}.wrap main{padding-top:18px}.tray{width:min(100%,590px)}}
@media(max-width:700px){.garden{padding:0 24px}.garden-nav{height:74px;font-size:10px;gap:10px}.garden-nav a span{margin-left:6px}.garden-intro{padding:44px 0 28px}.garden-intro .eyebrow{font-size:10px;margin-bottom:18px}.garden-intro h1{font-size:43px;letter-spacing:.08em}.garden-copy{font-size:12px;margin-top:20px}.garden-stem{height:22px;margin-top:19px}.game-card{grid-template-columns:1fr;gap:26px;padding:26px 0}.game-art{max-width:430px;width:100%;justify-self:center;aspect-ratio:1.3}.game-story{padding:0 8px}.game-story h2{font-size:44px;margin:12px 0}.game-story .eyebrow{margin-bottom:12px}.game-subtitle{margin:6px 0 14px}.story-copy{font-size:13px}.game-facts{margin-top:20px}.garden-footer{font-size:10px;letter-spacing:0;flex-wrap:wrap}.wrap{padding:0 18px 30px;gap:18px}.game-nav{min-height:64px;font-size:10px}.wrap header{padding-top:4px}.wrap h1{font-size:40px}.wrap header>.eyebrow{grid-column:1/-1;margin:0 0 8px;font-size:10px}.wrap .lead{font-size:12px;margin-top:12px}.wrap .level{padding-top:12px;margin-top:12px}.wrap .level b{font-size:19px}.wrap .level span{font-size:12px}.wrap .tools{align-self:center}.icon-btn{padding:5px 9px;font-size:11px}.tray{padding:12px}.board-wrap{padding:6px}.bar{gap:8px}.done{gap:10px;padding:12px}.done-title{font-size:17px}.stamp{width:40px;height:40px;font-size:25px}.done-note{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* 庭は一画面に収める。器の絵が残りの高さに合わせて伸び縮みし、文字と「器をつなぐ」は常に見える。
   極端に背の低い画面（横向きのスマホなど）だけ、従来どおりスクロールにする。 */
.garden{height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;overflow:hidden}
.garden-nav{height:72px}
.garden-intro{padding:26px 0 18px}
.garden-intro .eyebrow{margin-bottom:12px}
.garden-intro h1{font-size:clamp(40px,5vw,64px);line-height:1.25}
.garden-copy{margin-top:12px;line-height:1.9}
.garden-stem{display:none}
.game-card{min-height:0;padding:22px 0;gap:56px;grid-template-rows:minmax(0,1fr)}
.game-art{aspect-ratio:auto;height:100%;min-height:0}
.game-story{align-self:center}
.game-story h2{font-size:clamp(40px,4.4vw,56px);margin:4px 0}
.game-subtitle{margin:6px 0 14px}
.story-copy{margin:0}
.game-facts{margin:16px 0 14px}
.garden-footer{padding:16px 0 20px}
/* オープニングの後に見出しへ移すフォーカスは読み上げ用。枠は出さない */
#garden-title:focus{outline:none}
@media(max-width:700px){
  .garden-nav{height:54px}
  .garden-intro{padding:14px 0 8px}
  .garden-intro .eyebrow{margin-bottom:6px}
  .garden-intro h1{font-size:clamp(30px,9.5vw,40px)}
  .garden-copy{margin-top:6px;line-height:1.8}
  .game-card{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:14px;padding:10px 0 14px}
  .game-art{max-width:none;aspect-ratio:auto;justify-self:stretch}
  .art-caption{bottom:10px}
  .game-story{padding:0 4px}
  .game-story .eyebrow{margin-bottom:2px}
  .catalog-number{font-size:13px;padding:3px 8px;margin-right:8px}
  .game-story h2{font-size:34px;margin:0}
  .game-subtitle{font-size:13px;margin:2px 0 8px}
  .story-copy{display:none}
  .game-facts{margin:0 0 10px}
  .play-game{min-height:52px}
  .resume-note{margin-top:6px}
  .garden-footer{display:none}
}
/* 縦長のタブレットは、器の絵が細長くならないよう縦に積む */
@media(min-width:701px) and (max-width:1100px) and (orientation:portrait){
  .game-card{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:22px}
  .game-story{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:end;padding:0}
  .game-story>.eyebrow,.game-story>h2,.game-story>.game-subtitle{grid-column:1}
  .story-copy{grid-column:2;grid-row:1/4;align-self:center}
  .game-facts,.play-game,.resume-note{grid-column:1/-1}
}
@media(max-height:760px) and (min-width:701px){.story-copy{display:none}.garden-copy{display:none}}
@media(max-height:640px) and (max-width:700px){.garden-copy{display:none}.art-caption{display:none}}
@media(max-height:520px){.garden{height:auto;overflow:visible;display:block}.game-art{height:auto;aspect-ratio:1.3}.story-copy,.garden-copy{display:block}}
/* 遊びのスライド。選んだ一枚だけを見せ、下の切り替えで世界観ごと入れ替える */
.slides{min-height:0;display:grid;scroll-margin-top:20px}
.slides>.game-card{min-height:0;height:100%}
.slide-ctl{display:flex;justify-content:center;align-items:center;gap:4px;padding:8px 0 4px}
.slide-dot{font:inherit;font-size:12px;letter-spacing:.14em;color:var(--muted);background:none;border:0;border-bottom:1px solid transparent;min-height:44px;padding:0 12px;cursor:pointer;transition:color .3s,border-color .3s}
.slide-dot span{margin-right:6px}
.slide-dot[aria-current="true"]{color:var(--ink);border-bottom-color:currentColor}
.slide-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);background:none;color:var(--ink);font:inherit;font-size:20px;line-height:1;cursor:pointer}
.slide-dot:focus-visible,.slide-arrow:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.game-card.enter-next{animation:slide-in-next .5s cubic-bezier(.2,.7,.2,1)}
.game-card.enter-prev{animation:slide-in-prev .5s cubic-bezier(.2,.7,.2,1)}
@keyframes slide-in-next{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes slide-in-prev{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
body{transition:background-color .6s ease,color .6s ease}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:700px){.slide-ctl{padding:2px 0 6px;gap:0}.slide-dot{font-size:11px;padding:0 6px;white-space:nowrap;letter-spacing:.06em}.slide-dot span{display:none}.slide-arrow{width:40px;height:40px;flex:none}.game-card{padding-bottom:8px}}
@media(max-height:520px){.slides{display:block}.slides>.game-card{height:auto}}
/* ── ゲーム画面は、どの遊びでも一画面に収める（スクロールしない） ──
   上から：戻る / 見出し（名前・遊び方・音・面・手ほどき）/ 盤面（残りの高さで伸縮）/ 手数と操作。
   完成すると、手数と操作の場所に完成表示が入れ替わる（高さは変わらない）。 */
.game-screen{position:relative;z-index:1;height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:hidden;display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:8px 56px;max-width:1080px;margin:0 auto;padding:0 20px 12px!important;align-content:stretch;justify-items:stretch}
.game-screen[hidden]{display:none!important}
.game-screen>.game-nav{min-height:52px!important;grid-column:1/-1}
.game-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;width:min(100%,620px)!important;justify-self:center;padding:0!important;position:static!important;margin:0}
.game-head h1{grid-row:1;grid-column:1;font-size:32px!important;line-height:1.25;margin:0!important;writing-mode:horizontal-tb!important;letter-spacing:.2em}
.game-head .tools,.game-head .hz-tools,.game-head .kg-tools,.game-head .kj-tools,.game-head .cm-tools,.game-head .g-tools{grid-row:1;grid-column:2;display:flex;gap:8px;margin:0!important}
.game-head .level,.game-head .hz-level,.game-head .kg-level,.game-head .kj-level,.game-head .cm-level,.game-head .g-level{grid-row:2;grid-column:1/-1;margin:0!important;padding:0!important;border:0!important;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.coach{grid-column:1/-1;margin:6px 0 0;font-size:13px;line-height:1.7;padding:8px 12px;border-radius:10px;border:1px solid var(--rule);background:color-mix(in srgb,var(--btn) 50%,transparent);color:var(--ink)}
.coach[hidden]{display:none}
.game-screen>main{align-self:stretch!important;display:grid!important;grid-template-rows:minmax(0,1fr) auto;align-items:stretch!important;justify-items:stretch!important;gap:10px;min-height:0;width:min(100%,620px)!important;justify-self:center;padding:0!important;margin:0}
.stage{container-type:size;min-height:0;min-width:0;display:grid;place-items:center}
.foot{display:grid;align-items:center;min-height:60px}
.foot>*{grid-area:1/1}
.foot:has(.show)>:not(.show){visibility:hidden}
.foot .bar,.foot .hz-bar{width:100%!important;border-bottom:0!important;padding:0!important;margin:0}
.foot .done,.foot .hz-done{width:100%!important;margin:0}
.game-screen .tray{width:min(100cqw,100cqh)!important;min-width:0!important}
/* 遊び方の案内 */
.howto{width:min(92vw,460px);max-height:86dvh;overflow:auto;border:1px solid var(--rule);border-radius:16px;padding:22px 22px 18px;background:var(--bg);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.howto::backdrop{background:rgba(10,12,20,.55)}
.howto h2{margin:0 0 12px;font-size:20px;letter-spacing:.12em}
.howto ul{margin:0 0 18px;padding-left:1.2em;font-size:14px;line-height:1.9}
.howto li+li{margin-top:4px}
.howto [data-close]{width:100%}
/* 手ほどき：次に触る場所をそっと光らせる */
.tile.hint::after{content:"";position:absolute;inset:-3px;border-radius:6px;border:2px solid #f3d68a;box-shadow:0 0 14px rgba(243,214,138,.9);pointer-events:none;z-index:2;animation:hint-glow 1.3s ease-in-out infinite}
@keyframes hint-glow{0%,100%{opacity:.45}50%{opacity:1}}
@media(min-width:900px){
  .game-screen{grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);padding-bottom:20px!important}
  .game-head{grid-template-columns:1fr!important;width:auto!important;justify-self:end;align-self:start;align-content:start;justify-items:end;padding-top:16px!important;gap:10px}
  .game-head h1,.game-head .tools,.game-head .hz-tools,.game-head .kg-tools,.game-head .kj-tools,.game-head .cm-tools,.game-head .g-tools,.game-head .level,.game-head .hz-level,.game-head .kg-level,.game-head .kj-level,.game-head .cm-level,.game-head .g-level,.coach{grid-row:auto;grid-column:auto}
  /* 縦書き：1文字ずつ折り返して縦に積む（writing-mode はグリッドの中で高さが縮むため使わない） */
  .game-head h1{writing-mode:horizontal-tb!important;width:1.15em;line-height:1.18!important;word-break:break-all;text-align:center;letter-spacing:0!important;align-self:start;font-size:60px!important;margin:0 0 10px!important}
  .game-head .level,.game-head .hz-level,.game-head .kg-level,.game-head .kj-level,.game-head .cm-level,.game-head .g-level{flex-direction:column;align-items:flex-end;gap:2px}
  .coach{max-width:200px;justify-self:stretch}
  .game-screen>main{width:100%!important}
}
@media(max-width:700px){
  .game-screen{padding:0 12px 10px!important;gap:6px}
  .game-screen>.game-nav{min-height:46px!important}
  .game-head h1{font-size:26px!important;letter-spacing:.14em}
  .game-head .level b,.game-head .hz-level b,.game-head .kg-level b,.game-head .kj-level b,.game-head .cm-level b,.game-head .g-level b{font-size:17px!important}
  .game-head .level span,.game-head .hz-level span,.game-head .kg-level span,.game-head .kj-level span,.game-head .cm-level span,.game-head .g-level span{font-size:11px!important}
  .game-head .icon-btn,.game-head .hz-btn,.game-head .kg-btn,.game-head .kj-btn,.game-head .cm-btn,.game-head .g-btn{padding:4px 10px!important;font-size:11px!important;min-height:36px!important}
  .coach{font-size:12px;padding:6px 10px;margin-top:4px}
  .foot{min-height:52px}
}
/* 新しい遊びで共通に使う部品（g-）。色は各世界の変数で決まる */
.g-tools{display:flex;gap:8px}
.g-level b{font-size:21px;letter-spacing:.14em}
.g-level span{font-size:13px;color:var(--muted)}
.g-btn{font:inherit;font-size:13px;letter-spacing:.06em;color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:999px;min-height:44px;padding:8px 16px;cursor:pointer}
.g-btn:disabled{opacity:.45;cursor:default}
.g-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.g-bar{display:flex;align-items:center;gap:14px}
.g-stat{font-size:13px;color:var(--muted);letter-spacing:.06em}
.g-stat strong{font-size:22px;font-weight:600;color:var(--ink);margin-left:6px;font-variant-numeric:tabular-nums}
.g-stat:last-of-type{margin-right:auto}
.g-done{display:none;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--rule);border-radius:12px}
.g-done.show{display:flex;animation:g-rise .5s ease}
.g-done>div:nth-child(2){flex:1;min-width:0}
.g-done-title{margin:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-done-note{margin:2px 0 0;font-size:13px;color:var(--muted)}
.g-seal{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;font-weight:700}
@keyframes g-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#garden ~ .game-screen h1:focus{outline:none}
@media(max-width:700px){.g-bar{gap:10px}.g-stat{font-size:12px}.g-stat strong{font-size:19px}.g-done{gap:10px;padding:8px 12px}.g-seal{width:38px;height:38px}.g-done-title{font-size:15px}}
.slide-dots{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);padding:0 8px}
.slide-dots::-webkit-scrollbar{display:none}
.slide-dot{flex:none}
.slide-arrow{flex:none}
.garden{grid-template-columns:minmax(0,1fr)}.slides{min-width:0;grid-template-columns:minmax(0,1fr)}