/* ころりこ。試作(1枚の HTML)の <style> をそのまま移した(足したのは 末尾の「ことば」だけ) */
/* えらんで つなぐ: 6枚の しかけカードから1つ選ぶと、コースの先に1つつながる。玉は 最後の通し(▶)まで 転がさない */
:root{--ink:#2b3155;--ink2:#6a7096;--card:#ffffff;--card2:#f3f6fc;--edge:#dfe5f3;--gold:#ffc83a;--gold2:#ffdf6e;--coral:#ff6f61;--bg:#eef3fb;
  /* 枠の 影: 硬い ベージュの 下影を やめ、青みの ぼかし + 細い 下影(look.md) */
  --lift:0 2px 0 #2b315512,0 6px 16px #2b31551f;--lift-lo:0 1px 0 #2b315512,0 3px 8px #2b31551a;--glass:#ffffffeb;
  /* 外の書体は読まない(依存ゼロ・オフライン)。端末に入っている丸い書体から順に */
  --font:"Hiragino Maru Gothic ProN","Hiragino Maru Gothic Pro","M PLUS Rounded 1c","Rounded Mplus 1c","BIZ UDGothic","Arial Rounded MT Bold",system-ui,sans-serif}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--card:#fbfcff;--card2:#eef2fa;--edge:#d4dbec;--bg:#dfe8f6}}
:root[data-theme="dark"]{--card:#fbfcff;--card2:#eef2fa;--edge:#d4dbec;--bg:#dfe8f6}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block}
#top{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;
  padding:calc(env(safe-area-inset-top) + 10px) 12px 0;pointer-events:none}
#top .grp{display:flex;gap:10px}
.tb{pointer-events:auto;position:relative;min-width:64px;height:64px;border:0;border-radius:22px;background:var(--glass);
  box-shadow:var(--lift);font:800 28px/1 var(--font);color:var(--ink);
  display:flex;align-items:center;justify-content:center;gap:4px;padding:0 12px;overflow:hidden}
/* ながおしの 字は 🧹 の 上に 置く(横に 並べると 長い 言語で 上の 段が 画面から 出る ← 2026-10-18 の 実測。pl 360px / 320px) */
#reset{flex-direction:column;gap:0;padding:0 6px}
.tb small{font-size:11px;color:var(--ink2);line-height:1.1;max-width:56px;text-align:center;overflow-wrap:anywhere}
.tb:disabled{opacity:.35}
.tb[hidden]{display:none}
#opts.eye{visibility:hidden}
#eye.on{background:#fff6d6;box-shadow:0 0 0 4px var(--gold),var(--lift)}
#eye.pulse{animation:eyep 0.9s ease-in-out 3}
#replay.pulse{animation:eyep 0.9s ease-in-out 0.45s 1}/* 板が 落ち切るのを 待ってから(落ちる 板と 目を 取り合わない) */
@keyframes eyep{50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){#eye.pulse,#replay.pulse{animation:none}}
.tb:active{transform:translateY(2px);box-shadow:var(--lift-lo)}
#reset .fill{position:absolute;left:0;bottom:0;height:6px;width:0;background:linear-gradient(90deg,#ff9a8c,var(--coral))}
#reset.hold .fill{width:100%;transition:width 1.3s linear}
#cnt{pointer-events:none;align-self:center;font-weight:800;font-size:15px;color:var(--ink);background:var(--glass);border-radius:999px;padding:3px 9px;white-space:nowrap;box-shadow:var(--lift-lo);font-variant-numeric:tabular-nums}
#cnt:empty{display:none}
#opts,#done{position:fixed;left:0;right:0;bottom:0;display:flex;gap:12px;justify-content:center;
  padding:12px 12px calc(env(safe-area-inset-bottom) + 14px)}
#opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:640px;margin:0 auto}
#opts[hidden],#done[hidden]{display:none}
.card{min-width:0;height:min(29vw,150px);border-radius:24px;border:4px solid #fff;
  background:linear-gradient(var(--card) 40%,var(--card2));box-shadow:var(--lift);
  display:flex;flex-direction:column;align-items:stretch;padding:4px 4px 6px;font:inherit;color:var(--ink);
  transition:opacity .2s,transform .2s}
.card canvas{flex:1 1 0;min-height:0;width:100%;display:block;pointer-events:none}
.card span{font-size:clamp(17px,4.6vw,25px);font-weight:800;line-height:1.2;pointer-events:none}
.card.ride{border-color:#8fd0ff;background:linear-gradient(#f2faff 40%,#d6efff)}
.card span.long{font-size:clamp(14px,3.7vw,21px)}
.card.goal{border-color:var(--gold);background:linear-gradient(#fffbe8 30%,#ffeba6)}
.card{position:relative}
.card i.cat{position:absolute;left:7px;top:5px;min-width:26px;height:26px;border-radius:13px;font:900 18px/26px var(--font);font-style:normal;color:#fff;text-align:center;pointer-events:none;box-shadow:0 2px 4px #2b315526}
.cat.same{background:#9b8cff}.cat.up{background:#ff8a3b}.cat.down{background:#4aa3ff}.cat.right,.cat.left{background:#3cc47c}
.card:active{transform:translateY(3px)}
#opts.busy .card{opacity:.3;transform:scale(.94);pointer-events:none}
#opts.nudge:not(.busy) .card{animation:nudge 1.6s ease-in-out infinite}
#opts.nudge .card:nth-child(2){animation-delay:.2s}
#opts.nudge .card:nth-child(3){animation-delay:.4s}
@keyframes nudge{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-8px)}90%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){#opts.nudge .card{animation:none}}
#done{align-items:center;flex-wrap:wrap}
#themes{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 84px);margin:0 auto;max-width:640px;background:var(--glass);border-radius:26px;
  box-shadow:var(--lift);padding:10px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;z-index:5}
#themes[hidden]{display:none}
#themes button{width:78px;height:86px;border:3px solid #fff;border-radius:18px;padding:0;font:800 13px/1.1 var(--font);color:var(--ink);
  background:#fff;box-shadow:var(--lift-lo);display:flex;flex-direction:column;overflow:hidden}
#themes button i{flex:1;display:block}
#themes button b{flex:0 0 22px;white-space:nowrap;letter-spacing:-.06em;font-size:12px;display:flex;align-items:center;justify-content:center}
#themes button.on{border-color:var(--gold)}
#themes small{width:100%;text-align:center;font-size:11px;opacity:.6}
#done h2{width:100%;margin:0 0 4px;text-align:center;font-size:36px;font-weight:900;color:var(--coral);
  -webkit-text-stroke:7px #fff;paint-order:stroke fill;text-shadow:0 4px 12px #2b315533}
#done button{flex:1 1 0;max-width:240px;height:76px;border:0;border-radius:24px;font:800 22px/1.2 var(--font);
  color:var(--ink);background:var(--glass);box-shadow:var(--lift)}
#done button.main{background:linear-gradient(var(--gold2),var(--gold));min-height:80px}
#done button:active,#viewbar button:active,.sh-back:active,.sh-bgm:active,.lang-item:active,.lang-close:active{transform:translateY(2px);box-shadow:var(--lift-lo)}
#done{flex-wrap:wrap}#done button{flex:1 1 40%;height:64px;font-size:20px}
#done button.kept{background:#dcf6ea}
/* リンクで おくる(share.md 4.1): 遊びの 4つより 目立たせない 1行。ながおしの 帯は 🧹 と 同じ */
#done #share{flex:1 1 100%;max-width:none;height:48px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;
  font:700 15px/1.2 var(--font);color:var(--ink2);background:#ffffff99;box-shadow:none;padding:0 12px}
#share small{font-size:11px;color:var(--ink2)}#share span{min-width:0;overflow-wrap:anywhere}#share b{font-weight:700}
#share .fill{position:absolute;left:0;bottom:0;height:6px;width:0;background:linear-gradient(90deg,#ff9a8c,var(--coral))}
#share.hold .fill{width:100%;transition:width 1.3s linear}
#shareUrl{flex:1 1 100%;min-width:0;height:40px;box-sizing:border-box;border:2px solid var(--edge);border-radius:12px;padding:0 10px;font:14px var(--font);color:var(--ink);background:#fff;user-select:text;-webkit-user-select:text}
#shareUrl[hidden],#done #share[hidden]{display:none}
#shareNote{flex:1 1 100%;margin:0;text-align:center;font-size:14px;line-height:1.3;color:var(--ink)}#shareNote:empty{display:none}
.sh-msg{max-width:760px;margin:0 auto 12px;text-align:center;font-size:14px;line-height:1.4;color:var(--ink2);background:var(--glass);border-radius:16px;padding:8px 12px;box-shadow:var(--lift-lo)}.sh-msg:empty{display:none}
/* 語の かたまり(ui.js の sayLine)。語の 途中では 割らず、1行より 長い ときだけ 中で 割る */
#shareNote .w,.sh-msg .w{display:inline-block;max-width:100%;overflow-wrap:anywhere}
#viewbar{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 14px);margin:0 auto;max-width:520px;display:flex;gap:10px;align-items:center;
  background:var(--glass);border-radius:24px;padding:8px 8px 8px 16px;box-shadow:var(--lift);font-weight:800;font-size:18px;z-index:4}
#viewbar[hidden]{display:none}
#rpick{position:fixed;left:16px;right:16px;top:50%;transform:translateY(-50%);margin:0 auto;max-width:440px;background:var(--glass);border-radius:30px;padding:18px 14px;
  box-shadow:0 2px 0 #2b315512,0 14px 36px #2b315533;text-align:center;font-size:22px;z-index:6}
#rpick[hidden],#rtoast[hidden],#rank[hidden]{display:none}
#rpick div{display:flex;justify-content:center;gap:12px;margin-top:14px}
#rpick button{width:76px;height:auto;aspect-ratio:1;flex:0 1 76px;min-width:0;border-radius:50%;border:4px solid #fff;box-shadow:0 3px 0 #2b315514,0 6px 14px #2b315533}
#rpick button:nth-child(1){background:radial-gradient(circle at 35% 35%,#ffd0d8,#ff5577 45%,#c41d45)}
#rpick button:nth-child(2){background:radial-gradient(circle at 35% 35%,#d0e6ff,#3d8bff 45%,#1d4fc4)}
#rpick button:nth-child(3){background:radial-gradient(circle at 35% 35%,#fff3c0,#ffcc22 45%,#d49a00)}
#rpick button:nth-child(4){background:radial-gradient(circle at 35% 35%,#d4f7d6,#3cc45a 45%,#1d8a36)}
#rank,#rtoast div{width:100%;display:flex;justify-content:center;gap:10px;margin-bottom:4px}
.rk{display:flex;align-items:center;gap:3px;font-size:20px;font-weight:800;background:var(--glass);border-radius:999px;padding:3px 9px 3px 4px;box-shadow:var(--lift-lo)}
.rk i{width:26px;height:26px;border-radius:50%;display:block}
.rk.me{outline:3px solid var(--gold)}
#rtoast{position:fixed;left:16px;right:16px;top:calc(env(safe-area-inset-top) + 90px);margin:0 auto;max-width:440px;text-align:center;background:var(--glass);border-radius:24px;padding:10px;box-shadow:var(--lift);z-index:5;font-size:20px}
#viewbar span{flex:1;min-width:0}
#viewbar button{height:56px;min-width:96px;border:0;border-radius:18px;background:linear-gradient(var(--gold2),var(--gold));font:800 20px var(--font);color:var(--ink);box-shadow:var(--lift-lo)}
/* たなの 地: 冷たい 白に パステルの にじみ 3つ(画像は 使わない) */
#shelf{position:fixed;inset:0;z-index:8;overflow:auto;
  background:radial-gradient(circle at 12% 8%,#ffdfe6 0,#ffdfe600 38vmax),radial-gradient(circle at 95% 30%,#d6eeff 0,#d6eeff00 42vmax),
    radial-gradient(circle at 30% 100%,#d9f6ea 0,#d9f6ea00 48vmax),#f6f8fd;
  padding:calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 14px) calc(env(safe-area-inset-bottom) + 14px) calc(env(safe-area-inset-left) + 14px);box-sizing:border-box}
#shelf[hidden]{display:none}
.sh-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:760px;margin:0 auto 12px}
/* 題字は ボタンの 段の 下に 1段 とる(14 言語: 題字と ことば・おんがく の ボタンが 1段に 入らない ← 2026-10-18 の 実測で ja も 390 幅で 66px はみ出した)。
   長い 1語でも 折り返す(minmax と 同じ 考え: 割れない 1語が 段ごと 画面の 外へ 出ない) */
.sh-top h1{order:9;flex:1 1 100%;min-width:0;margin:0;overflow-wrap:anywhere;line-height:1.2;font-size:clamp(19px,5.4vw,30px);font-weight:900;letter-spacing:.02em;text-align:center;color:var(--ink)}
.sh-top #lang{margin-left:auto}
.sh-back,.sh-bgm{height:60px;min-width:60px;border:0;border-radius:20px;background:var(--glass);box-shadow:var(--lift);font:800 26px/1 var(--font);color:var(--ink);padding:0 12px}
.sh-back[hidden]{visibility:hidden;display:block}
/* 入口ページへ もどる 口(たなの 一段目だけ。site-home.md)。**題字の 段の 右端**(y 82〜)に 置く ——
   左上は 次の 段の もどる の 席、上の 段の 空き(x 86〜150)は 遊び画面の 🏠(たなへ もどる)の 席で、
   続けて 押した 指が アプリの 外へ 出る。上の 段に 足すと ことば が 🏠 の 席へ ずれる。
   題字は 左にも 同じ 70px を 空けて まんなかに 保つ。タブレットの 横(幅 960 以上)だけは 上の 段の 右の 角(末尾の @media) */
#site-home{order:10;display:flex;align-items:center;justify-content:center;box-sizing:border-box;text-decoration:none}#site-home[hidden]{display:none}#site-home svg{display:block}
#site-home:not([hidden])~h1{flex-basis:calc(100% - 70px);box-sizing:border-box;padding-left:70px}
.sh-bgm{display:flex;align-items:center;gap:6px;font-size:16px}.sh-bgm i{font-style:normal;font-size:26px}
.sh-bgm.off{opacity:.8;background:#eceff6}
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(42vw,170px),1fr));gap:14px;max-width:760px;margin:0 auto}
.sh-grid.big{grid-template-columns:repeat(auto-fit,minmax(min(80vw,260px),1fr))}
.tile{position:relative;aspect-ratio:1;border:4px solid #fff;border-radius:28px;background:linear-gradient(#fff 50%,var(--card2));box-shadow:var(--lift);padding:0;overflow:hidden;
  font:800 18px/1.2 var(--font);color:var(--ink);display:flex;flex-direction:column}
.sh-grid.big .tile{aspect-ratio:auto;height:min(34vh,220px);min-height:150px}
/* ぶたいの えらび(つくる 5・レース 3)は 子どもが 必ず 通る 道なので、スクロール なしで 全部 見せる(coding/testing.md「縦に流す一覧に置かない」)。
   縦は 2列・3段で 高さを 画面から、横は 1段に ならべる(--n = タイルの 数。ui.js が 入れる) */
.sh-grid.places{grid-template-columns:repeat(2,minmax(0,1fr))}.sh-grid.places[data-n="3"]{grid-template-columns:minmax(0,1fr)}
/* 名前は 語の 途中で 割らない(かなの 1字だけ 次の 行へ 出ない ← 568x320。はみ出す ときは ui.js の fitTiles が 字を 小さくする) */
.sh-grid.places .tile b{word-break:keep-all}
.sh-grid.places .tile{aspect-ratio:auto;height:clamp(104px,calc((100vh - 190px)/3 - 14px),190px);height:clamp(104px,calc((100dvh - 190px)/3 - 14px),190px)}
@media (orientation:landscape){.sh-grid.places,.sh-grid.places[data-n]{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}
  .sh-grid.places .tile{height:clamp(104px,calc(100vh - 190px),200px);height:clamp(104px,calc(100dvh - 190px),200px)}}
.tile:active{transform:translateY(3px);box-shadow:var(--lift-lo)}
.tile i{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:clamp(36px,11vmin,64px)}
.tile img{flex:1;min-height:0;width:100%;object-fit:cover;display:block}
.tile b{flex:0 0 auto;padding:6px 4px 8px;text-align:center}
.tile em{font-style:normal;font-size:13px;color:var(--ink2);padding:0 6px 8px;text-align:center}
.tile.new{border-color:#fff;background:linear-gradient(150deg,#fff3b8,#ffd25a)}
.tile.new i{font-size:clamp(50px,15vmin,84px);color:#2b3155;-webkit-text-stroke:3px #fff;paint-order:stroke fill;text-shadow:0 3px 10px #e0950044}
.tile .badge{position:absolute;left:8px;top:8px;font-size:22px;background:var(--glass);border-radius:12px;padding:1px 5px;box-shadow:var(--lift-lo)}
.tile.wip{border-color:#8fd0ff}
.tile[data-tile=build]{background:linear-gradient(150deg,#ecfbf4,#c8efdf)}
.tile[data-tile=race]{background:linear-gradient(150deg,#eef6ff,#cfe5ff)}
.sh-cr{display:block;text-align:center;font-size:11px;color:var(--ink2);margin-top:14px;padding:0 12px;overflow-wrap:anywhere}
#themes h3{width:100%;margin:6px 0 0;text-align:center;font-size:15px}
#themes button.alb{width:96px;height:96px;padding:0;background:#fff}
#themes button.alb img{width:100%;height:100%;object-fit:cover;display:block}
#themes p{width:100%;margin:0;text-align:center;font-size:13px;opacity:.7}
@media (orientation:landscape){
  #opts,#done{left:auto;top:calc(env(safe-area-inset-top) + 86px);width:min(36vw,330px);flex-direction:column;justify-content:flex-start;
    padding:0 calc(env(safe-area-inset-right) + 12px) calc(env(safe-area-inset-bottom) + 12px) 0}
  #opts{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));margin:0;max-width:none;align-content:stretch}
  .card{height:auto;min-height:0;padding:3px 3px 4px}
  .card span,.card span.long{font-size:clamp(13px,4.4vh,19px)}
  #done{flex-direction:row;align-content:flex-start;gap:10px}
  #done button{flex:1 1 40%;max-width:none;width:auto;height:64px;font-size:18px}
  #done h2{font-size:28px}
}
/* ===== ことば(js/lang.js)。ことばが 1つの うちは ボタンごと 出ない ===== */
#lang[hidden]{display:none}
.lang-menu{position:fixed;inset:0;z-index:20;background:#2b31555c;display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px)}
.lang-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,520px);max-height:100%;overflow:auto;
  background:var(--glass);border-radius:26px;padding:12px;box-shadow:0 14px 36px #2b315540}
@media (orientation:landscape){.lang-grid{grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,760px)}}
.lang-item,.lang-close{min-height:56px;border:3px solid #fff;border-radius:18px;background:#fff;box-shadow:var(--lift-lo);
  font:800 18px/1.2 var(--font);color:var(--ink);overflow-wrap:anywhere;padding:4px 8px}
.lang-item.on{border-color:var(--gold)}
.lang-close{background:linear-gradient(var(--gold2),var(--gold))}
/* 選んでいる 札は 色(枠)だけでなく ✓ の 形でも 示す */
.lang-item.on::before{content:'✓ ';color:#d98a00}
/* 幅 370px 未満では かず(n / 60)を ボタンの 段の 下へ 出す(ボタン 4つ + かず が 1段に 入らず、右はしの 🧹 が 画面から 出た
   ← 2026-10-18 の 実測。ことばに よらない: ja も 320 / 360 幅で 出ていた) */
@media (max-width:369.98px){#cnt{position:absolute;left:12px;top:calc(100% + 6px)}}
/* タブレットの 横(幅 960・高さ 640 以上。#1627): 760px の 枠の まま だと 中身が 画面の 上 半分に 寄る。
   枠を 1120px へ 広げ、タイルの 高さを 画面から とる。ぶたい 5つは 3+2 の 2段(下の 段は まんなか)。
   家の 口は ボタンの 段の 右の 角(この 幅なら ことば は 遊び画面の 🏠 の 席へ ずれない)。小さい 字 11px は 14px へ。
   スマホの 縦・横・低い 横(高さ 640 未満)には 当たらない */
@media (orientation:landscape) and (min-width:960px) and (min-height:640px){
  .sh-top{max-width:none}
  .sh-grid,.sh-msg{max-width:1120px}
  #site-home{order:8}
  #site-home:not([hidden])~h1{flex-basis:100%;padding-left:0}
  .sh-grid.big .tile{height:clamp(220px,calc(100dvh - 250px),480px)}
  /* 作品の ある たな: 列の 数(--cols)× 段の 数(--rows。ui.js)から 正方形の 大きさを とり、まんなかに 並べる(作品が 少ないと 左に 寄った) */
  .sh-grid.saved{--s:clamp(120px,min(calc((100dvh - 230px)/var(--rows,3) - 14px),calc((min(100vw - 28px,1120px) - 14px*(var(--cols,5) - 1))/var(--cols,5))),440px);
    display:flex;flex-wrap:wrap;justify-content:center;max-width:calc(var(--s)*var(--cols,5) + 14px*(var(--cols,5) - 1))}
  .sh-grid.saved .tile{flex:0 0 var(--s);width:var(--s);height:var(--s)}
  .tile b{font-size:26px}
  .tile em{font-size:17px}
  .sh-grid.big .tile i{font-size:clamp(64px,20vmin,160px)}
  .sh-grid.saved .tile i{font-size:calc(var(--s)*.4)}
  .sh-grid.saved .tile b{font-size:min(26px,calc(var(--s)*.16))}
  .sh-grid.places .tile i{font-size:clamp(64px,19vmin,160px)}
  .sh-grid.places,.sh-grid.places[data-n]{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}
  .sh-grid.places .tile{height:min(calc(100dvh - 230px),560px)}
  .sh-grid.places[data-n="5"]{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sh-grid.places[data-n="5"] .tile{grid-column:span 2;height:calc((100dvh - 214px)/2 - 14px)}
  .sh-grid.places[data-n="5"] .tile:nth-child(4){grid-column:2/span 2}
  .sh-cr{font-size:14px}
  .tb small,#share small{font-size:14px}
  #reset{min-width:84px}.tb small{max-width:76px}
}