:root{
  --bg:#fff8ee; --ink:#3b3028; --card:#ffffff;
  --accent:#ff8a3d; --accent2:#4aa3ff; --ok:#3fc06d; --accent3:#b46fe0;
  --guide:#e2d9cd; --guide2:#c9bdae; --accent4:#2bb3a3;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;height:100dvh;margin:0;overflow:hidden;overscroll-behavior:none;touch-action:none}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Hiragino Maru Gothic ProN","Rounded Mplus 1c",-apple-system,"Noto Sans JP",sans-serif;
  user-select:none; -webkit-user-select:none;
}
#app{display:flex;height:100%;width:100%;gap:1.2vmin;padding:1.4vmin}

/* ---- 左（横向き）／上（縦向き）: お題パネル ---- */
#side{
  flex:0 0 26%; display:flex; flex-direction:column; gap:1.2vmin;
  min-width:0;
}
.panel{
  background:var(--card); border-radius:3vmin; box-shadow:0 .6vmin 0 #e8dfd2;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
#target{flex:1; position:relative; cursor:pointer; min-height:0}
#targetNum{
  font-size:min(26vmin,34vh); line-height:1; font-weight:800; color:var(--accent);
  letter-spacing:-.02em; text-align:center; width:100%;
}
#targetDots{display:grid;grid-template-columns:repeat(5,auto);gap:1.1vmin;justify-content:center;margin-top:2vmin}
.dot{width:2.6vmin;height:2.6vmin;border-radius:50%;background:var(--accent2);opacity:.85}
#speak{
  position:absolute; right:2vmin; top:2vmin; width:9vmin; height:9vmin; border-radius:50%;
  border:none; background:#fff0e0; font-size:4.6vmin; display:grid; place-items:center;
}
#speak:active{transform:scale(.92)}

#stars{
  flex:0 0 auto; padding:1.4vmin; font-size:4.2vmin; letter-spacing:.3vmin;
  min-height:9vmin; flex-direction:row; flex-wrap:wrap; gap:.4vmin; overflow:hidden;
  line-height:1.25; word-break:break-all;
}
#stars{gap:1.2vmin}
#stars .starIcon{font-size:5.4vmin;line-height:1}
#stars .starNum{font-size:5.4vmin;font-weight:800;color:#e0a92b;font-variant-numeric:tabular-nums}
#stars.zero{opacity:.3}

/* ---- 右（横向き）／下（縦向き）: キャンバス ---- */
#stage{flex:1; position:relative; min-width:0}
#board{width:100%;height:100%;display:block;border-radius:3vmin;background:var(--card);box-shadow:0 .6vmin 0 #e8dfd2}

#nav{
  position:absolute; left:0; right:0; bottom:1.6vmin;
  display:flex; justify-content:center; align-items:center; gap:2.2vmin; pointer-events:none;
}
#nav button{
  pointer-events:auto; border:none; border-radius:50%; width:11vmin; height:11vmin;
  font-size:5vmin; background:#fff; box-shadow:0 .6vmin 0 #e0d5c6; display:grid; place-items:center;
}
#nav button:active{transform:translateY(.5vmin);box-shadow:0 .1vmin 0 #e0d5c6}
#again{font-size:4.4vmin}

/* ---- ごほうび ---- */
#reward{
  position:fixed; inset:0; display:none; place-items:center; pointer-events:none; z-index:10;
}
#reward.on{display:grid}
#rewardText{
  font-size:6vmin; font-weight:800; color:#fff;
  background:var(--ok); padding:1.6vmin 4vmin; border-radius:4vmin;
  box-shadow:0 .8vmin 0 rgba(0,0,0,.12);
  animation:pop .5s cubic-bezier(.2,1.6,.4,1);
}
@keyframes pop{0%{transform:scale(.2) rotate(-12deg);opacity:0}60%{transform:scale(1.15) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:9;display:block}

/* ---- 縦向き ---- */
@media (orientation:portrait){
  #app{flex-direction:column}
  #side{flex:0 0 26%; flex-direction:row}
  #target{flex:1}
  #targetNum{font-size:min(18vh,30vmin)}
  #stars{flex:0 0 22%; flex-direction:column; align-content:flex-start; writing-mode:horizontal-tb}
}

#nav button.hint{
  background:var(--ok); color:#fff;
  animation:nudge 1s ease-in-out infinite;
}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2vmin)}}
@media (prefers-reduced-motion:reduce){#nav button.hint{animation:none}}

/* ===== モード切り替え ===== */
#modes{display:flex;gap:1.2vmin;flex:0 0 auto}
#modes button{
  flex:1; border:none; border-radius:2.4vmin; padding:1.6vmin 0;
  font-size:3.4vmin; font-weight:800; color:#a2917c; background:#f6efe4;
  box-shadow:0 .5vmin 0 #e8dfd2; font-family:inherit;
}
#modes button.on{background:var(--accent);color:#fff;box-shadow:0 .5vmin 0 #e07a33}

/* ===== えらぶモード ===== */
#bigSpeak{display:none;border:none;background:var(--accent2);color:#fff;
  width:26vmin;height:26vmin;border-radius:50%;font-size:12vmin;
  box-shadow:0 1vmin 0 #3a86d6;place-items:center}
#bigSpeak:active{transform:translateY(.6vmin);box-shadow:0 .4vmin 0 #3a86d6}

#quiz{display:none;position:absolute;inset:0;padding:3vmin;
  align-items:center;justify-content:center}
#qChoices{display:flex;flex-wrap:wrap;gap:3vmin;align-items:center;justify-content:center;width:100%;max-width:78vmin;margin:0 auto}
.choice{
  border:none;border-radius:4vmin;background:#fff;color:var(--accent);
  box-shadow:0 1vmin 0 #e8dfd2; font-family:inherit; font-weight:800;
  min-width:22vmin;min-height:26vmin;padding:1vmin 3vmin;
  font-size:16vmin;line-height:1; display:grid;place-items:center;
}
.choice:active{transform:translateY(.6vmin);box-shadow:0 .4vmin 0 #e8dfd2}
.choice.wrong{animation:shake .4s;background:#f3ece2;color:#b6a892}
.choice.right{background:var(--ok);color:#fff;box-shadow:0 1vmin 0 #34a35c}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-1.6vmin)}
  50%{transform:translateX(1.4vmin)}80%{transform:translateX(-.8vmin)}}
@media (prefers-reduced-motion:reduce){.choice.wrong{animation:none}}

/* 「えらぶ」のときは答えになる数字を隠す */
body.quiz #targetNum{display:none}
body.quiz #speak{display:none}
body.quiz #board,body.quiz #nav{display:none}
body.quiz #quiz{display:flex}
body.quiz.qsound #targetDots{display:none}
body.quiz.qsound #bigSpeak{display:grid}
body.quiz.qdots #targetDots{gap:2vmin;margin-top:0}
body.quiz.qdots .dot{width:5vmin;height:5vmin}

/* 縦持ちのときは、モード切り替えを1行目に独立させる */
@media (orientation:portrait){
  #side{flex:0 0 32%; flex-wrap:wrap; align-content:flex-start}
  #modes{flex:0 0 100%; order:-1}
  #modes button{font-size:4.2vmin;padding:2vmin 0}
  #target{flex:1 1 62%}
  #stars{flex:1 1 30%; min-width:0}
}
@media (orientation:portrait){
  #bigSpeak{width:17vmin;height:17vmin;font-size:8vmin}
}

/* えらぶモードの「数える」問題は、枠で囲って対象をはっきりさせる */
body.quiz.qdots #targetDots{
  background:#eaf4ff; border-radius:4vmin; padding:3vmin 3.4vmin;
  box-shadow:inset 0 0 0 .5vmin #d3e7fb;
}

/* ===== おみせやさん ===== */
#modes button{font-size:3vmin}
#orderItem{display:none;font-size:11vmin;line-height:1;margin-top:1vmin}
body.shop #orderItem{display:block}
body.shop #targetNum{display:block;font-size:min(20vmin,26vh)}
body.shop #targetDots{display:none}
body.shop #speak{display:none}
body.shop #bigSpeak{display:none}
body.shop #board,body.shop #nav{display:none}
body.shop #shop{display:flex}

#shop{display:none;position:absolute;inset:0;flex-direction:column;gap:1.6vmin;padding:2vmin}
#shelf{
  flex:1 1 54%; min-height:0; display:flex;flex-wrap:wrap;align-content:flex-start;
  gap:1.4vmin; padding:2vmin;
  background:#fffaf2; border-radius:3vmin;
  box-shadow:inset 0 0 0 .5vmin #efe3d2;
}
#basketWrap{flex:0 0 40%;display:flex;gap:2vmin;align-items:stretch;min-height:0}
#basket{
  flex:1; display:flex;flex-wrap:wrap;align-content:flex-start;gap:1.4vmin;
  padding:2vmin 2vmin 2.6vmin; border-radius:2vmin 2vmin 5vmin 5vmin; min-height:0;
  background:repeating-linear-gradient(45deg,#e4b887 0 1.4vmin,#d8a874 1.4vmin 2.8vmin);
  box-shadow:inset 0 0 0 .7vmin #b98a56, 0 .8vmin 0 #b98a56;
  overflow:auto;
}
#basket.over{box-shadow:inset 0 0 0 1.2vmin var(--ok), 0 .8vmin 0 #b98a56}
#done{
  flex:0 0 24%; border:none;border-radius:3vmin;font-family:inherit;font-weight:800;
  font-size:5vmin;color:#fff;background:var(--ok);box-shadow:0 1vmin 0 #34a35c;
}
#done:active{transform:translateY(.6vmin);box-shadow:0 .4vmin 0 #34a35c}
#done:disabled{opacity:.45}

.goods{
  position:relative;
  font-size:8.5vmin;line-height:1;width:12vmin;height:12vmin;
  display:grid;place-items:center;border-radius:2.4vmin;background:#fff;
  box-shadow:0 .5vmin 0 #e8dfd2; touch-action:none; user-select:none;
}
#basket .goods{background:rgba(255,255,255,.92)}
.goods.dragging{position:fixed;z-index:50;box-shadow:0 1.6vmin 2vmin rgba(0,0,0,.25);transform:scale(1.15)}
.goods.counting{background:var(--ok);transform:scale(1.2)}
@media (prefers-reduced-motion:reduce){.goods.counting{transform:none}}
.goods.counting::after{
  content:attr(data-count);
  position:absolute; top:-1.6vmin; right:-1.6vmin; z-index:1;
  min-width:6.2vmin; height:6.2vmin; padding:0 .6vmin; box-sizing:border-box;
  border-radius:50%; background:#fff; color:#2f8f52;
  font-family:inherit; font-size:4.4vmin; font-weight:800;
  line-height:6.2vmin; text-align:center;
  box-shadow:0 .4vmin 0 rgba(0,0,0,.18);
}

@media (orientation:portrait){
  body.shop #targetNum{font-size:14vh}
  #orderItem{font-size:9vh}
  #shelf{flex:1 1 46%}
  #basketWrap{flex:0 0 44%}
  .goods{width:15vmin;height:15vmin;font-size:10vmin}
}

/* ===== くらべる ===== */
#compare{display:none;position:absolute;inset:0;align-items:center;justify-content:center;padding:3vmin}
#cmpRow{display:flex;gap:4vmin;align-items:center;justify-content:center;width:100%}
.cmpCard{
  position:relative; overflow:visible;
  border:none;border-radius:4vmin;background:#fff;color:var(--accent3);
  box-shadow:0 1vmin 0 #e8dfd2; font-family:inherit; font-weight:800;
  flex:1 1 0; max-width:34vmin; min-height:34vmin;padding:2vmin;
  line-height:1; display:grid;place-items:center;
}
.cmpCard:active{transform:translateY(.6vmin);box-shadow:0 .4vmin 0 #e8dfd2}
.cmpCard.wrong{animation:shake .4s;background:#f3ece2;color:#b6a892}
.cmpCard.right{background:var(--ok);color:#fff;box-shadow:0 1vmin 0 #34a35c}
.cmpNumBig{font-size:16vmin;line-height:1}
.cmpIll{display:grid;gap:.8vmin;place-items:center;place-content:center;
        max-width:100%;max-height:100%;overflow:hidden}
.cmpIll span{font-size:5.6vmin;line-height:1}
/* 横に何個ならぶかで字の大きさを変える（10個でも枠に収める） */
.cmpIll.c3 span{font-size:5.2vmin}
.cmpIll.c4 span{font-size:4.4vmin}
.cmpIll.c5 span{font-size:3.8vmin}

/* 絵がいくつか、という数字。正解したときと、2回まちがえたときだけ出す */
.cmpBadge{
  position:absolute; bottom:-2.2vmin; left:50%; transform:translateX(-50%);
  min-width:8vmin; height:8vmin; padding:0 1vmin; box-sizing:border-box;
  border-radius:4vmin; background:var(--accent3); color:#fff;
  font-size:5vmin; font-weight:800; line-height:8vmin; text-align:center;
  box-shadow:0 .5vmin 0 rgba(0,0,0,.18);
  opacity:0; visibility:hidden; transition:opacity .25s;
}
.cmpCard.show-num .cmpBadge{opacity:1; visibility:visible}

/* 問題の合図。文字が読めなくても「どっちを えらぶか」が絵で分かるようにする */
#cmpAsk{display:none; align-items:center; justify-content:center; gap:3.4vmin; width:100%}
.cmpAskSide{
  display:grid; gap:1vmin; place-content:center;
  padding:2.4vmin; border-radius:3vmin;
  background:#f3ece2; border:.9vmin solid transparent; opacity:.4;
}
.cmpAskSide.many{grid-template-columns:repeat(3,auto)}
.cmpAskSide.few {grid-template-columns:repeat(1,auto)}
.cmpAskSide i{display:block; width:3.2vmin; height:3.2vmin; border-radius:50%; background:#b6a892}
body.cbig   .cmpAskSide.many,
body.csmall .cmpAskSide.few{
  opacity:1; background:#fff; border-color:var(--accent3);
  animation:askPulse 1.5s ease-in-out infinite;
}
body.cbig   .cmpAskSide.many i,
body.csmall .cmpAskSide.few  i{background:var(--accent3)}
@keyframes askPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.cmpAskSide{animation:none!important}}

body.compare #targetDots,body.compare #orderItem,body.compare #targetNum{display:none}
body.compare #cmpAsk{display:flex}
body.compare #speak{display:none}
body.compare #bigSpeak{display:none}
body.compare #board,body.compare #nav{display:none}
body.compare #compare{display:flex}

@media (orientation:portrait){
  .cmpCard{min-height:26vmin}
  .cmpNumBig{font-size:13vmin}
  .cmpIll span{font-size:4.6vmin}
  .cmpIll.c3 span{font-size:4.3vmin}
  .cmpIll.c4 span{font-size:3.7vmin}
  .cmpIll.c5 span{font-size:3.2vmin}
  .cmpAskSide i{width:2.6vmin;height:2.6vmin}
}

/* ===== ホーム画面 ===== */
#home{
  display:none; position:fixed; inset:0; z-index:20; background:var(--bg);
  flex-direction:column; align-items:center; justify-content:center;
  gap:3vmin; padding:3vmin;
}
body.home #home{display:flex}
body.home #app{display:none}

#homeTitle{margin:0;font-size:6vmin;font-weight:800;color:#a2917c;letter-spacing:.3vmin}

#homeCards{
  display:flex; gap:3vmin; width:100%; max-width:160vmin;
  align-items:stretch; justify-content:center;
}
.hcard{
  flex:1 1 0; min-width:0; border:none; border-radius:5vmin;
  font-family:inherit; color:#fff; padding:4vmin 2vmin;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4vmin;
}
.hcard .hicon{font-size:13vmin;line-height:1}
.hcard .hlabel{font-size:5.4vmin;font-weight:800;line-height:1}
.hcard[data-mode=write]{background:var(--accent); box-shadow:0 1.4vmin 0 #e07a33}
.hcard[data-mode=quiz]{background:var(--accent2);box-shadow:0 1.4vmin 0 #3a86d6}
.hcard[data-mode=shop]{background:var(--ok);     box-shadow:0 1.4vmin 0 #34a35c}
.hcard[data-mode=compare]{background:var(--accent3);box-shadow:0 1.4vmin 0 #8a4bbd}
.hcard:active{transform:translateY(.8vmin)}
.hcard[data-mode=write]:active{box-shadow:0 .6vmin 0 #e07a33}
.hcard[data-mode=quiz]:active {box-shadow:0 .6vmin 0 #3a86d6}
.hcard[data-mode=shop]:active {box-shadow:0 .6vmin 0 #34a35c}
.hcard[data-mode=compare]:active{box-shadow:0 .6vmin 0 #8a4bbd}

#homeSpeak{
  border:none; background:#fff0e0; width:12vmin; height:12vmin; border-radius:50%;
  font-size:6vmin; display:grid; place-items:center; box-shadow:0 .6vmin 0 #e8dfd2;
}
#homeSpeak:active{transform:translateY(.5vmin);box-shadow:0 .1vmin 0 #e8dfd2}

@media (orientation:portrait){
  #homeCards{flex-direction:column; max-width:none}
  .hcard{flex-direction:row; gap:5vmin; padding:2.2vmin 4vmin; justify-content:flex-start}
  .hcard .hicon{font-size:9vmin}
  .hcard .hlabel{font-size:6.4vmin}
  #homeTitle{font-size:6vmin}
}

/* ===== おうちボタン（各モード） ===== */
#modes{justify-content:flex-start}
#modes #homeBtn{
  flex:0 0 auto; width:11vmin; height:11vmin; padding:0; border-radius:50%;
  border:none; background:#f6efe4; color:inherit; font-size:5.4vmin;
  display:grid; place-items:center; box-shadow:0 .5vmin 0 #e8dfd2;
}
#modes #homeBtn:active{transform:translateY(.5vmin);box-shadow:0 .1vmin 0 #e8dfd2}
#modes #drawBackBtn{
  display:none; flex:0 0 auto; width:11vmin; height:11vmin; padding:0; border-radius:50%;
  border:none; background:#f6efe4; color:inherit; font-size:5vmin;
  place-items:center; box-shadow:0 .5vmin 0 #e8dfd2;
}
#modes #drawBackBtn:active{transform:translateY(.5vmin);box-shadow:0 .1vmin 0 #e8dfd2}
body.draw:not(.drawmenu) #modes #drawBackBtn{display:grid}

.hcard[data-mode=draw]{background:var(--accent4); box-shadow:0 1.4vmin 0 #1f8c80}
.hcard[data-mode=draw]:active{box-shadow:0 .6vmin 0 #1f8c80}

/* ===== じゅんばん ===== */
#order{display:none;position:absolute;inset:0;align-items:center;justify-content:center;padding:3vmin}
#ordRow{display:flex;gap:3vmin;align-items:center;justify-content:center;
  width:100%;max-width:120vmin}
.ordCard{
  position:relative; overflow:visible;
  border:none;border-radius:4vmin;background:#fff;color:var(--accent2);
  box-shadow:0 1vmin 0 #e8dfd2; font-family:inherit; font-weight:800;
  flex:1 1 0; min-width:0; max-width:26vmin; min-height:32vmin; padding:2vmin;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2vmin;
}
body.odesc .ordCard{color:var(--accent)}
.ordCard:active{transform:translateY(.6vmin);box-shadow:0 .4vmin 0 #e8dfd2}
.ordNum{font-size:14vmin;line-height:1}
.ordNum.wide{font-size:10.5vmin}
.ordDots{display:grid;gap:.9vmin;justify-content:center;justify-items:center}
.ordDots i{display:block;width:2.6vmin;height:2.6vmin;border-radius:50%;background:var(--accent2);opacity:.85}
body.odesc .ordDots i{background:var(--accent)}
/* 選び終わったカード：緑になって、何番目に選んだかのバッジが出る */
.ordCard.done{background:var(--ok);color:#fff;box-shadow:0 1vmin 0 #34a35c}
.ordCard.done .ordDots i{background:#fff;opacity:.95}
.ordCard.wrong{animation:shake .4s;background:#f3ece2;color:#b6a892}
/* 2回まちがえたら、次に押すカードが光る */
.ordCard.hintOn{box-shadow:0 1vmin 0 #e8dfd2, 0 0 0 1vmin #ffd23d; animation:askPulse 1.2s ease-in-out infinite}
/* 答え合わせで読み上げているカード */
.ordCard.reading{transform:scale(1.1)}
@media (prefers-reduced-motion:reduce){
  .ordCard.wrong,.ordCard.hintOn{animation:none}
  .ordCard.reading{transform:none}
}
.ordBadge{
  position:absolute; top:-2vmin; left:-2vmin;
  min-width:7.4vmin; height:7.4vmin; padding:0 .8vmin; box-sizing:border-box;
  border-radius:50%; background:#fff; color:#2f8f52;
  font-size:4.4vmin; font-weight:800; line-height:7.4vmin; text-align:center;
  box-shadow:0 .5vmin 0 rgba(0,0,0,.18);
  opacity:0; visibility:hidden; transition:opacity .2s;
}
.ordCard.done .ordBadge{opacity:1; visibility:visible}

/* 出題の合図。棒の高さが向き、下の数字がタップする順番を表す */
#ordAsk{display:none; align-items:flex-end; justify-content:center; gap:2vmin; width:100%}
.ordAskCol{display:flex; flex-direction:column; align-items:center; gap:.8vmin}
.ordAskCol i{display:block; width:5.4vmin; border-radius:1.2vmin; background:var(--accent2)}
.ordAskCol b{font-size:4.2vmin; color:#a2917c; line-height:1}
body.odesc .ordAskCol i{background:var(--accent)}

body.order #targetDots,body.order #orderItem,body.order #targetNum{display:none}
body.order #ordAsk{display:flex}
body.order #speak{display:none}
body.order #bigSpeak{display:none}
body.order #board,body.order #nav{display:none}
body.order #order{display:flex}

@media (orientation:portrait){
  .ordCard{max-width:21vmin;min-height:25vmin}
  .ordNum{font-size:11vmin}
  .ordNum.wide{font-size:8.5vmin}
  .ordDots i{width:2.2vmin;height:2.2vmin}
  .ordAskCol i{width:4.2vmin}
}

/* ホームのカードが5枚になったので、はみ出さないように折り返す（3枚＋2枚） */
#homeCards{flex-wrap:wrap}
.hcard{flex:0 1 30%; min-width:30vmin}
.hcard[data-mode=order]{background:#ff6b9d; box-shadow:0 1.4vmin 0 #d94f7c}
.hcard[data-mode=order]:active{box-shadow:0 .6vmin 0 #d94f7c}
@media (orientation:portrait){
  #homeCards{flex-wrap:nowrap; gap:2vmin}
  .hcard{flex:1 1 auto; min-width:0; padding:1.8vmin 4vmin}
  .hcard .hicon{font-size:7.5vmin}
  .hcard .hlabel{font-size:5.4vmin}
}

/* ===== なんこかな（※むずかしい） ===== */
#nanko{display:none;position:absolute;inset:0;flex-direction:column;gap:2vmin;padding:2.5vmin;
  align-items:center;justify-content:center}
#nkItems{display:grid;gap:1.4vmin;justify-content:center;justify-items:center;
  background:#fffaf2;border-radius:3vmin;padding:2.4vmin;box-shadow:inset 0 0 0 .5vmin #efe3d2}
#nkItems .goods{width:14vmin;height:14vmin;font-size:10vmin}
#nkChoices{display:flex;gap:3vmin;align-items:center;justify-content:center;flex-wrap:wrap}
.nkChoice{
  border:none;border-radius:3.4vmin;background:#fff;color:#e0648f;
  box-shadow:0 1vmin 0 #e8dfd2;font-family:inherit;font-weight:800;
  min-width:18vmin;min-height:18vmin;padding:1vmin 2vmin;
  font-size:11vmin;line-height:1;display:grid;place-items:center;
}
.nkChoice:active{transform:translateY(.6vmin);box-shadow:0 .4vmin 0 #e8dfd2}
.nkChoice.wrong{animation:shake .4s;background:#f3ece2;color:#b6a892}
.nkChoice.right{background:var(--ok);color:#fff;box-shadow:0 1vmin 0 #34a35c}
.nkChoice:disabled{opacity:.5}
@media (prefers-reduced-motion:reduce){.nkChoice.wrong{animation:none}}

/* お題パネル側の小さな品物（書いているあいだ、何を数えたか見えるように） */
#nkSide{display:none;grid-template-columns:repeat(5,auto);gap:.8vmin;justify-content:center;
        margin:1.5vmin 1.5vmin 2.2vmin;max-width:calc(100% - 3vmin);overflow:hidden}
#nkSide .goods{width:6.5vmin;height:6.5vmin;font-size:4.6vmin;border-radius:1.4vmin;box-shadow:0 .3vmin 0 #e8dfd2}

body.nanko #targetDots,body.nanko #orderItem{display:none}
body.nanko #targetNum{display:block;font-size:min(20vmin,26vh)}
body.nanko #speak{display:none}
body.nanko #bigSpeak{display:none}
body.nanko #board,body.nanko #nav{display:none}
body.nanko #nanko{display:flex}
/* なぞり書きの画面に切り替わったとき */
body.nanko.nkwrite #nanko{display:none}
/* フリー書き（お手本なし）。「できた」で答え合わせ */
#nav #nkDone{display:none; width:auto!important; min-width:20vmin; border-radius:6vmin!important;
        font-family:inherit; font-weight:800; font-size:4.4vmin!important; color:#fff;
        background:var(--ok)!important; box-shadow:0 .6vmin 0 #34a35c!important; padding:0 3vmin}
body.nanko.nkfree #nav #nkDone{display:grid}
body.nanko.nkfree #targetNum{color:var(--guide2)}
#board.shakeit{animation:shake .4s}
@media (prefers-reduced-motion:reduce){#board.shakeit{animation:none}}
body.nanko.nkwrite #board{display:block}
body.nanko.nkwrite #nav{display:flex}
body.nanko.nkwrite #prev,body.nanko.nkwrite #next{display:none}
body.nanko.nkwrite #nkSide{display:grid}

/* ホームの「※むずかしい」 */
.hnote{font-size:3.2vmin;font-weight:800;line-height:1;opacity:.85;margin-top:.4vmin}
.hcard[data-mode=nanko]{background:#7a8ff0; box-shadow:0 1.4vmin 0 #5a6dcb}
.hcard[data-mode=nanko]:active{box-shadow:0 .6vmin 0 #5a6dcb}

@media (orientation:portrait){
  .nkChoice{min-width:15vmin;min-height:15vmin;font-size:9vmin}
  #nkItems .goods{width:13vmin;height:13vmin;font-size:9vmin}
  #nkItems{gap:1vmin;padding:1.8vmin}
  #nkSide .goods{width:5.5vmin;height:5.5vmin;font-size:3.8vmin}
  .hnote{font-size:3vmin}
}

/* ===== おえかき ===== */
body.draw #target,body.draw #stars{display:none}
body.draw #side{flex:0 0 auto}
body.draw #board,body.draw #nav{display:none}
body.draw.drawcanvas #board{display:block}

/* --- モードえらび（じゆうがき／ぬりえ） --- */
#drawMenu{display:none;position:absolute;inset:0;align-items:center;justify-content:center;gap:4vmin;padding:4vmin;flex-wrap:wrap}
body.draw.drawmenu #drawMenu{display:flex}
.dmCard{
  flex:0 1 34vmin; min-width:26vmin; border:none; border-radius:5vmin;
  font-family:inherit; color:#fff; padding:5vmin 2vmin;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.8vmin;
}
.dmCard .hicon{font-size:15vmin;line-height:1}
.dmCard .hlabel{font-size:5.6vmin;font-weight:800;line-height:1}
.dmCard:active{transform:translateY(.8vmin)}
.dmCard[data-drawmode=free]{background:var(--accent2); box-shadow:0 1.4vmin 0 #3a86d6}
.dmCard[data-drawmode=free]:active{box-shadow:0 .6vmin 0 #3a86d6}
.dmCard[data-drawmode=color]{background:#f0a83d; box-shadow:0 1.4vmin 0 #c98527}
.dmCard[data-drawmode=color]:active{box-shadow:0 .6vmin 0 #c98527}

/* --- ぬりえ：えらぶ画面 --- */
#colorPicker{display:none;position:absolute;inset:0;padding:2vmin 2.4vmin;overflow:auto}
body.draw.drawpicker #colorPicker{display:block}
.pickerGroupLabel{font-size:3.6vmin;font-weight:800;color:#a2917c;margin:1.6vmin 0 1vmin}
.pickerGroup{display:flex;flex-wrap:wrap;gap:2vmin;justify-content:flex-start}
.picThumb{
  border:none;border-radius:3vmin;background:#fff;box-shadow:0 .7vmin 0 #e8dfd2;
  width:19vmin;height:19vmin;padding:1vmin;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.4vmin;font-family:inherit;
}
.picThumb:active{transform:translateY(.5vmin);box-shadow:0 .2vmin 0 #e8dfd2}
.picThumb svg{width:100%;flex:1;min-height:0}
.picThumb span{font-size:2.6vmin;color:#a2917c;font-weight:800;line-height:1}
.picThumb .cpic{fill:#a99e8e;stroke:none}
.picThumb .cpic .dot{fill:#a99e8e;stroke:none}

/* --- 描く本体：色ぬりのお手本（キャンバスの下に敷く線画） --- */
/* あとから塗った線がお手本より上に来るよう、z-index を負にしてキャンバスの下に沈める */
#picOverlay{display:none;position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:-1}
body.draw.drawcanvas.drawcolor #picOverlay{display:block}
/* お手本が下にあるので、その上のキャンバスは背景を透明にして透けて見えるようにする */
body.draw.drawcanvas.drawcolor #board{background:transparent}
/* なぞって塗るので、お手本の線は薄い色にする */
#picOverlay .cpic{fill:#c7bfb2;stroke:none}
#picOverlay .cpic .dot{fill:#c7bfb2;stroke:none}

/* --- 道具バー（色・ふとさ・けしごむ・ぜんぶけす） --- */
#drawTools{
  display:none; position:absolute; left:0; right:0; bottom:1.4vmin;
  flex-direction:column; align-items:center; gap:1.2vmin; pointer-events:none;
}
body.draw.drawcanvas #drawTools{display:flex}
#colorRow{
  pointer-events:auto; display:flex; gap:1.4vmin; padding:1.2vmin 1.8vmin;
  background:#fff; border-radius:6vmin; box-shadow:0 .6vmin 0 #e8dfd2; overflow-x:auto; max-width:92vw;
}
.colorBtn{
  flex:0 0 auto; width:7.4vmin; height:7.4vmin; border-radius:50%;
  border:.6vmin solid #fff; box-shadow:0 0 0 .35vmin #e8dfd2;
}
.colorBtn.on{box-shadow:0 0 0 .5vmin #3b3028}
#toolRow{
  pointer-events:auto; display:flex; align-items:center; gap:1.4vmin;
  padding:1.2vmin 1.8vmin; background:#fff; border-radius:6vmin; box-shadow:0 .6vmin 0 #e8dfd2;
}
.sizeBtn{
  border:none;background:#f6efe4;border-radius:50%;width:8.4vmin;height:8.4vmin;
  display:grid;place-items:center;box-shadow:inset 0 0 0 .3vmin #e8dfd2;
}
.sizeBtn i{display:block;border-radius:50%;background:#7a6a56}
.sizeBtn[data-size=s] i{width:2vmin;height:2vmin}
.sizeBtn[data-size=m] i{width:3.6vmin;height:3.6vmin}
.sizeBtn[data-size=l] i{width:5.4vmin;height:5.4vmin}
.sizeBtn.on{background:var(--accent2)}
.sizeBtn.on i{background:#fff}
#eraserBtn,#clearBtn{
  border:none;border-radius:50%;width:8.4vmin;height:8.4vmin;font-size:4.2vmin;
  background:#f6efe4;display:grid;place-items:center;box-shadow:inset 0 0 0 .3vmin #e8dfd2;
}
#eraserBtn.on{background:var(--accent);color:#fff}
#eraserBtn:active,#clearBtn:active,.sizeBtn:active,.colorBtn:active{transform:translateY(.4vmin)}

/* 横持ちは道具を1列に並べて、絵の場所を広くとる */
@media (orientation:landscape){
  body.draw.drawcanvas #drawTools{flex-direction:row;justify-content:center;flex-wrap:wrap}
}
@media (orientation:portrait){
  .dmCard{flex:0 1 40vmin;padding:4vmin 2vmin}
  .picThumb{width:24vmin;height:24vmin}
  #colorRow{max-width:88vw}
}