* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }
body { font-family:'Hiragino Maru Gothic ProN','BIZ UDPGothic',sans-serif; background:#fff7e6; color:#4a3b2a;
  width:100vw; height:100vh; overflow:hidden; }
.screen { position:fixed; inset:0; display:none; flex-direction:column; overflow-y:auto; }
.screen.active { display:flex; animation:screenIn .38s cubic-bezier(.22,1,.36,1); }
@keyframes screenIn { from { opacity:0; transform:translateY(26px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }

/* ===== ボタン ===== */
.btn-big { padding:16px 48px; font-size:clamp(1.2rem,4vw,1.7rem); border:none; border-radius:50px;
  background:linear-gradient(135deg,#ffb03a,#ff7e5f); color:#fff; font-weight:bold; cursor:pointer;
  box-shadow:0 6px 0 #d95f3f; transition:transform .08s, box-shadow .08s; }
.btn-big:active { transform:translateY(4px); box-shadow:0 2px 0 #d95f3f; }
.btn-small { margin-top:12px; padding:10px 26px; font-size:1rem; border:2px solid #c9a25a; border-radius:50px;
  background:transparent; color:#a2795a; cursor:pointer; }
.chip-btn { padding:10px 18px; border:none; border-radius:40px; background:#fff; color:#e0722f; font-weight:bold;
  font-size:clamp(.85rem,2.5vw,1.05rem); box-shadow:0 3px 0 #f0c48a; cursor:pointer; }
.chip-btn:active { transform:translateY(2px); box-shadow:0 1px 0 #f0c48a; }
.back-btn { padding:8px 18px; border:none; border-radius:40px; background:#fff; color:#7a6a55; font-weight:bold;
  box-shadow:0 3px 0 #e5d3b3; cursor:pointer; font-size:1rem; }

/* ===== 共通ナビ ===== */
#global-nav { position:fixed; top:10px; right:12px; z-index:500; display:none; gap:8px; }
#global-nav .chip-btn { font-size:clamp(.75rem,2vw,.95rem); padding:8px 14px; }

/* プロフィール画面のもどる */
.profiles-back { position:absolute; top:14px; left:14px; }

/* ===== プロフィール・なまえ・相方 ===== */
#screen-profiles, #screen-name, #screen-pick, #screen-settings {
  background:linear-gradient(160deg,#ffe0a3,#ffd6e8); align-items:center; justify-content:center; }
.pick-box { text-align:center; padding:24px; max-width:900px; }
.pick-box h1 { font-size:clamp(1.6rem,5vw,2.6rem); color:#e0722f; margin-bottom:6px; }
.pick-sub { color:#a2795a; margin-bottom:22px; font-size:clamp(.95rem,3vw,1.2rem); }
#pick-list, #profile-list { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.pick-card { width:130px; background:#fff; border-radius:20px; padding:12px; box-shadow:0 6px 14px rgba(0,0,0,.12);
  cursor:pointer; transition:transform .12s; border:4px solid transparent; }
.pick-card:active { transform:scale(.94); }
.pick-card:hover { border-color:#ffb03a; }
.pick-card img { width:100%; height:110px; object-fit:contain; }
.pick-card span { display:block; margin-top:6px; font-weight:bold; font-size:.95rem; }
.profile-card { position:relative; }
.profile-card small { display:block; color:#e0722f; font-size:.75rem; margin-top:2px; }
.profile-del { position:absolute; top:-8px; right:-8px; width:30px; height:30px; border-radius:50%;
  border:none; background:#fff; color:#d9534f; font-weight:bold; font-size:.95rem;
  box-shadow:0 2px 6px rgba(0,0,0,.2); cursor:pointer; }
.profile-del:active { transform:scale(.85); }
.profile-noimg { width:100%; height:110px; display:flex; align-items:center; justify-content:center; font-size:3rem; }
.name-field { padding:14px 20px; border-radius:16px; border:3px solid #f0c48a; background:#fff; color:#4a3b2a;
  font-size:1.4rem; width:min(300px,80vw); text-align:center; margin-bottom:20px; font-family:inherit;
  -webkit-user-select:text; user-select:text; }
.name-field:focus { outline:none; border-color:#ffb03a; }

/* ===== 通知せってい ===== */
.settings-box { max-width:520px; }
.set-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:12px 0; align-items:center; }
.set-row label { font-size:1.05rem; color:#4a3b2a; cursor:pointer; }
.set-fields { display:none; }
.set-input { font-size:1rem; text-align:left; width:min(420px,84vw); margin-bottom:10px; }
.set-hint { font-size:.8rem; color:#a2795a; margin-top:6px; }

/* ===== ホーム（しまマップ）===== */
#screen-home { background:#3ba8d8; padding:0; overflow:hidden; }
#home-top { padding:12px 14px; position:relative; z-index:20; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:rgba(255,255,255,.92); }
#buddy-corner { display:flex; align-items:center; gap:10px; background:#fff; border-radius:50px; padding:6px 18px 6px 6px;
  box-shadow:0 4px 10px rgba(0,0,0,.1); margin-right:auto; }
#buddy-img { width:56px; height:56px; object-fit:contain; border-radius:50%; background:#fff3dc; animation:idleBob 2.2s ease-in-out infinite; }
#buddy-info { display:flex; flex-direction:column; }
#buddy-name { font-weight:bold; }
#buddy-level { font-size:.8rem; color:#e0722f; }
#island-map { position:relative; flex:1; overflow:hidden; }
#sea-bg { position:absolute; inset:0; width:100%; height:100%; }
/* さりげない環境アニメ：波2層・雲・きらめき */
.sea-wa { animation:seaDrift 13s ease-in-out infinite; }
.sea-wb { animation:seaDrift 21s ease-in-out infinite reverse; }
@keyframes seaDrift { 0%,100%{transform:translateX(0);} 50%{transform:translateX(2.5px);} }
.sea-clouds { animation:cloudDrift 46s ease-in-out infinite alternate; }
@keyframes cloudDrift { from{transform:translateX(-4px);} to{transform:translateX(7px);} }
.sea-spark circle { animation:sparkTwinkle 3.6s ease-in-out infinite; opacity:.2; }
.sea-spark circle:nth-child(2){ animation-delay:.8s; }
.sea-spark circle:nth-child(3){ animation-delay:1.6s; }
.sea-spark circle:nth-child(4){ animation-delay:2.4s; }
.sea-spark circle:nth-child(5){ animation-delay:3.1s; }
@keyframes sparkTwinkle { 0%,100%{opacity:.12;} 50%{opacity:.85;} }

.island { position:absolute; width:clamp(140px,17vw,210px); transform:translate(-50%,-50%);
  cursor:pointer; text-align:center; animation:islandIn .5s backwards;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1); filter:drop-shadow(0 6px 8px rgba(20,80,120,.18)); }
.island:hover { transform:translate(-50%,-52%) scale(1.05); }
.island:active { transform:translate(-50%,-50%) scale(.94); }
.island svg { width:100%; display:block; }
/* 木の看板 */
.is-label { position:absolute; left:50%; bottom:2%; transform:translateX(-50%);
  background:linear-gradient(#c9954f,#b5824a); border:2.5px solid #96683a; border-radius:9px;
  padding:2px 14px 3px; font-weight:bold; font-size:clamp(.8rem,1.6vw,1.05rem); color:#fff8ec;
  white-space:nowrap; box-shadow:0 3px 6px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3);
  text-shadow:0 1px 2px rgba(90,50,10,.5); }
.is-prog { position:absolute; right:6%; top:2%; font-size:1.1rem;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
@keyframes islandIn { from{opacity:0; transform:translate(-50%,-30%) scale(.6);} to{opacity:1; transform:translate(-50%,-50%) scale(1);} }

#buddy-boat { position:absolute; left:46%; top:44%; width:clamp(110px,13vw,160px);
  transform:translate(-50%,-50%); animation:boatRock 4.2s ease-in-out infinite; z-index:10; pointer-events:none;
  filter:drop-shadow(0 5px 7px rgba(20,80,120,.2)); }
#buddy-boat svg { width:100%; display:block; }
#boat-buddy { position:absolute; left:50%; bottom:30%; transform:translateX(-50%); width:44%;
  object-fit:contain; filter:drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
@keyframes boatRock { 0%,100%{transform:translate(-50%,-50%) rotate(-1.6deg);} 50%{transform:translate(-50%,-51%) rotate(1.6deg);} }
@keyframes idleBob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6%);} }

/* マップの主人公＆ついてくる相方（ドット絵） */
.pxchar { position:absolute; pointer-events:none; z-index:12;
  transform:translate(-50%,-88%); filter:drop-shadow(0 3px 3px rgba(0,30,60,.35)); }
#hero-cv { width:72px; height:auto; }
#follow-cv { width:34px; height:auto; z-index:11; opacity:.97; }
/* 親からのメッセージ吹き出し（主人公の頭上・普段は非表示） */
#boat-speech { position:absolute; transform:translate(-50%,-100%) scale(.8);
  background:#fff; border-radius:16px; padding:10px 18px; font-size:clamp(.85rem,2vw,1.05rem);
  font-weight:bold; color:#4a3b2a; box-shadow:0 4px 12px rgba(0,0,0,.2);
  width:max-content; max-width:min(70vw,360px); text-align:center; line-height:1.4;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; z-index:40; }
#boat-speech::after { content:""; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
  border:8px solid transparent; border-top-color:#fff; border-bottom:0; }
#boat-speech.show-msg { opacity:1; transform:translate(-50%,-100%) scale(1); }

/* じぶんえらび */
.avatar-card { width:110px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.avatar-cv { width:72px; height:96px; image-rendering:pixelated; }

/* ===== ステージ選択（すごろく道）===== */
.map-top { display:flex; align-items:center; gap:14px; padding:14px; padding-right:min(46vw,300px);
  background:rgba(255,255,255,.92); box-shadow:0 2px 8px rgba(0,0,0,.06); z-index:5; }
.map-top h2 { color:#e0722f; font-size:clamp(1.2rem,4vw,1.7rem); }
#map-teacher { width:52px; height:52px; object-fit:contain; animation:idleBob 2.4s ease-in-out infinite; }
#screen-map { background:linear-gradient(160deg,#8fce6a,#5cb85c); }
#stage-road { position:relative; flex:1; min-height:340px; }
#road-svg { position:absolute; inset:0; width:100%; height:100%; }
.stage-node { position:absolute; transform:translate(-50%,-50%); text-align:center; cursor:pointer;
  animation:nodeIn .45s backwards; transition:transform .12s; z-index:5; }
.stage-node:hover { transform:translate(-50%,-50%) scale(1.08); }
.stage-node:active { transform:translate(-50%,-50%) scale(.92); }
.sn-circle { width:clamp(52px,6.5vw,72px); height:clamp(52px,6.5vw,72px); border-radius:50%;
  background:#fff; border:5px solid #f2a93b; display:flex; align-items:center; justify-content:center;
  font-size:clamp(1.3rem,2.8vw,1.8rem); font-weight:bold; color:#e0722f; margin:0 auto;
  box-shadow:0 5px 0 #c9862a, 0 8px 16px rgba(0,0,0,.2); }
.stage-node.cleared .sn-circle { background:#fff6d8; border-color:#ffd200; box-shadow:0 5px 0 #d9ae00, 0 8px 16px rgba(0,0,0,.2); }
.stage-node.tier1 .sn-circle { border-color:#8a4fc4; color:#8a4fc4; box-shadow:0 5px 0 #6a3a9a, 0 8px 16px rgba(0,0,0,.2); }
.stage-node.tier2 .sn-circle { border-color:#e0407a; color:#e0407a; box-shadow:0 5px 0 #b02858, 0 8px 16px rgba(0,0,0,.2); }
.stage-node.tier1.cleared .sn-circle, .stage-node.tier2.cleared .sn-circle { border-color:#ffd200; color:#e0722f; box-shadow:0 5px 0 #d9ae00, 0 8px 16px rgba(0,0,0,.2); }
.stage-node.locked { filter:grayscale(1); opacity:.55; cursor:not-allowed; }
.stage-node.locked .sn-circle { background:#e8e8e8; border-color:#aaa; color:#888; box-shadow:0 5px 0 #999, 0 8px 16px rgba(0,0,0,.15); }
.stage-node.shake { animation:lockShake .35s ease; }
@keyframes lockShake { 0%,100%{ transform:translate(-50%,-50%);} 25%{ transform:translate(calc(-50% - 6px),-50%);} 75%{ transform:translate(calc(-50% + 6px),-50%);} }
.sn-title { margin-top:6px; background:rgba(255,255,255,.95); border-radius:14px; padding:3px 12px;
  font-size:clamp(.7rem,1.4vw,.9rem); font-weight:bold; color:#4a3b2a; white-space:nowrap;
  box-shadow:0 2px 5px rgba(0,0,0,.12); }
.sn-stars { margin-top:2px; font-size:.85rem; min-height:1.1em; text-shadow:0 1px 2px rgba(0,0,0,.2); }
@keyframes nodeIn { from{opacity:0; transform:translate(-50%,-20%) scale(.5);} to{opacity:1; transform:translate(-50%,-50%) scale(1);} }

/* ===== プレイ ===== */
#screen-play { background:linear-gradient(160deg,#eaf6ff,#f3ecff); }
.play-top { display:flex; align-items:center; gap:12px; padding:12px; padding-right:min(46vw,300px);
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.06); }
#play-progress { flex:1; font-size:1.1rem; font-weight:bold; color:#5a8ac0; text-align:center; }
#play-teacher { width:52px; height:52px; object-fit:contain; transition:transform .2s; order:1; }
#play-progress { order:2; }
#play-teacher.cheer { animation:cheerJump .55s; }
@keyframes cheerJump {
  0%{transform:translateY(0) rotate(0);} 30%{transform:translateY(-16px) rotate(-8deg);}
  55%{transform:translateY(0) rotate(6deg);} 75%{transform:translateY(-7px) rotate(0);} 100%{transform:translateY(0);}
}
#play-area { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:20px; overflow:hidden; }
#play-area:has(.pz-wrap){ gap:8px; padding:8px; justify-content:flex-start; }
#play-speech { text-align:center; min-height:2em; font-size:1.3rem; font-weight:bold; color:#e0722f; padding:10px; }
.q-prompt { font-size:clamp(1.2rem,4vw,1.9rem); font-weight:bold; text-align:center; color:#3a5a7a; }
.q-big-char { font-size:clamp(4rem,18vw,8rem); font-weight:bold; color:#3a5a7a; line-height:1;
  background:#fff; border-radius:24px; padding:10px 36px; box-shadow:0 6px 16px rgba(0,0,0,.12); }
.choices { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.choice { min-width:100px; min-height:100px; padding:14px 22px; background:#fff; border-radius:20px;
  font-size:clamp(1.8rem,7vw,3.2rem); font-weight:bold; cursor:pointer; box-shadow:0 6px 0 #cdd8e6;
  display:flex; align-items:center; justify-content:center; transition:transform .1s, box-shadow .1s; border:4px solid transparent; }
.choice:active { transform:translateY(4px); box-shadow:0 2px 0 #cdd8e6; }
.choice.correct { border-color:#4ade80; background:#eaffef; animation:pop .3s; }
.choice.wrong { border-color:#ff8a8a; animation:shake .35s; }
.choice svg { width:80px; height:80px; }
@keyframes pop { 0%{transform:scale(1);}50%{transform:scale(1.15);}100%{transform:scale(1);} }
@keyframes shake { 0%,100%{transform:translateX(0);}25%{transform:translateX(-7px);}75%{transform:translateX(7px);} }
.count-field { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:560px; background:#fff;
  border-radius:20px; padding:16px; box-shadow:0 6px 16px rgba(0,0,0,.1); }
.count-field svg { width:52px; height:52px; }
.eq-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; }
.eq-group { display:flex; gap:5px; flex-wrap:wrap; max-width:300px; background:#fff; border-radius:16px; padding:10px; box-shadow:0 4px 12px rgba(0,0,0,.1); justify-content:center; }
.eq-group svg { width:42px; height:42px; }
.eq-op { font-size:2.4rem; font-weight:bold; color:#5a8ac0; }
.hole-q { border:4px dashed #ffb03a; color:#ffb03a; }

/* なぞり書き */
.trace-wrap { position:relative; background:#fff; border-radius:24px; box-shadow:0 6px 16px rgba(0,0,0,.12); touch-action:none; }
.trace-actions { display:flex; gap:14px; justify-content:center; }
.trace-btn { padding:12px 28px; border:none; border-radius:40px; font-size:1.1rem; font-weight:bold; cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.15); }
.trace-clear { background:#fff; color:#7a6a55; box-shadow:0 4px 0 #e5d3b3; }
.trace-done { background:linear-gradient(135deg,#ffb03a,#ff7e5f); color:#fff; box-shadow:0 4px 0 #d95f3f; }
.word-row { display:flex; gap:8px; justify-content:center; }
.word-char { width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; font-weight:bold; background:#fff; border-radius:12px; color:#c7d2e0;
  box-shadow:0 3px 8px rgba(0,0,0,.08); border:3px solid transparent; }
.word-char.now { color:#3a5a7a; border-color:#ffb03a; animation:pop .4s; }
.word-char.done { color:#4ade80; background:#eaffef; }
.word-popup { position:fixed; inset:0; z-index:900; background:rgba(255,244,214,.94);
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; }
.word-popup.show { opacity:1; }
.wp-inner { text-align:center; animation:wpJump .6s; }
.wp-inner img { width:200px; height:200px; object-fit:contain; }
.wp-icon svg { width:180px; height:180px; }
.wp-bubble { margin-top:10px; background:#fff; border-radius:20px; padding:14px 26px;
  font-size:1.4rem; font-weight:bold; color:#e0722f; box-shadow:0 6px 16px rgba(0,0,0,.12); }
@keyframes wpJump { 0%{transform:scale(.3) translateY(80px);opacity:0;} 60%{transform:scale(1.15);} 100%{transform:scale(1);opacity:1;} }

/* じゅんばん */
.seq-row { background:#fff; border-radius:20px; padding:12px 16px; box-shadow:0 5px 14px rgba(0,0,0,.1); }
.seq-item { width:54px; height:54px; display:flex; align-items:center; justify-content:center; }
.seq-item svg { width:100%; height:100%; }
.seq-q { font-size:2.2rem; font-weight:bold; color:#ffb03a; background:#fff7e6; border-radius:12px; border:3px dashed #ffb03a; }
.seq-q.now { border-color:#ff5a3c; color:#ff5a3c; background:#fff0ec; animation:holePulse 1s ease-in-out infinite; }
@keyframes holePulse { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.12);} }
.seq-filled { background:#eefbe8; border-radius:12px; border:3px solid #7fd07f; }
.seq-num { font-size:2rem; font-weight:bold; color:#4a3b2a; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; }
.choice .seq-num { font-size:2.4rem; }
.pick-big { width:130px; height:130px; }
.pick-big svg, .pick-big img { width:100%; height:100%; }

/* グループわけ */
.sort-zones { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.sort-zone { width:min(280px,42vw); min-height:150px; background:#fff; border-radius:20px; border:4px dashed #b9cbe0;
  padding:8px; transition:border-color .2s, background .2s; }
.sort-zone.sz-wrong { border-color:#ff8a8a; background:#fff0f0; animation:shake .35s; }
.sz-label { text-align:center; font-weight:bold; color:#5a8ac0; font-size:1.1rem; margin-bottom:6px; }
.sz-items { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.sz-items .sort-chip { width:56px; height:56px; }
.sort-tray { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; min-height:80px; }
.sort-chip { width:72px; height:72px; background:#fff; border-radius:16px; padding:6px; cursor:grab;
  box-shadow:0 4px 0 #cdd8e6; touch-action:none; display:flex; align-items:center; justify-content:center; }
.sort-chip svg, .sort-chip img { width:100%; height:100%; object-fit:contain; pointer-events:none; }
.sort-chip.dragging { box-shadow:0 10px 24px rgba(0,0,0,.3); transform:scale(1.15); }

/* ぬりえ（フリーハンド） */
.nurie-stage { position:relative; border-radius:20px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.15); touch-action:none; background:#fff; }
.nurie-stage canvas { display:block; touch-action:none; }
.nurie-lines { position:absolute; inset:0; pointer-events:none; }
.nurie-lines svg { width:100%; height:100%; display:block; }
.nurie-lines .nr { fill:none !important; }   /* 塗りはキャンバス側、線画だけ上に残す */
.palette { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.palette-big { gap:6px; max-width:min(560px,92vw); }
.palette-big .pal-swatch { width:32px; height:32px; border-width:3px; }
.pal-swatch { width:44px; height:44px; border-radius:50%; cursor:pointer; border:4px solid #fff;
  box-shadow:0 3px 8px rgba(0,0,0,.2); transition:transform .12s; }
.pal-swatch.on { transform:scale(1.25); border-color:#3a5a7a; }
.pal-eraser { background-image:linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%),linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%) !important; background-size:12px 12px !important; background-position:0 0,6px 6px !important; }
.brush-row { display:flex; gap:10px; justify-content:center; }
.brush-btn { display:flex; align-items:center; gap:6px; padding:8px 16px; border:3px solid transparent;
  border-radius:30px; background:#fff; color:#5a8ac0; font-weight:bold; font-size:.95rem;
  box-shadow:0 3px 0 #cdd8e6; cursor:pointer; }
.brush-btn.on { border-color:#ffb03a; }
.brush-dot { display:inline-block; border-radius:50%; background:#5a8ac0; }
.eraser-btn.on-eraser { border-color:#e86a9a; background:#ffe8f0; color:#e05a8a; }

/* すごろく道の おてがみボタン（番号とは別枠） */
.letter-fab { position:absolute; right:18px; bottom:18px; z-index:10;
  padding:14px 26px; border:none; border-radius:50px; font-family:inherit;
  background:linear-gradient(135deg,#ff8fb0,#ff6a8a); color:#fff; font-weight:bold;
  font-size:clamp(1rem,2.6vw,1.25rem); cursor:pointer;
  box-shadow:0 5px 0 #d84a6a, 0 8px 18px rgba(0,0,0,.25);
  animation:idleBob 2.8s ease-in-out infinite; }
.letter-fab:active { transform:translateY(4px); box-shadow:0 1px 0 #d84a6a; }

/* ぬりえの おくるボタン */
.trace-send { background:linear-gradient(135deg,#ff8fb0,#ff6a8a); color:#fff; box-shadow:0 4px 0 #d84a6a; }

/* 🧩 パズル（ガチ仕様：答えなし・ジグソーカット） */
.pz-board { position:relative; background:#e8ecf4; border-radius:10px; overflow:visible;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.15), 0 6px 16px rgba(0,0,0,.12);
  border:4px solid #9aa8d0; }
/* 横ならびレイアウト（左：おてほん＋盤面／右：ピーストレイ）＝スクロールなし */
.pz-wrap { display:flex; gap:12px; align-items:flex-start; justify-content:center; width:100%; }
.pz-left { display:flex; flex-direction:column; align-items:center; gap:6px; }
.pz-count { font-weight:bold; color:#5a6a88; font-size:.95rem; }
.pz-refbox { display:flex; align-items:center; gap:6px;
  background:#fff; border-radius:12px; padding:5px 8px; box-shadow:0 3px 8px rgba(0,0,0,.12); }
.pz-refbox small { font-weight:bold; color:#7a6a55; font-size:.72rem; }
.pz-refbox canvas { border-radius:6px; display:block; }
.pz-tray { display:flex; flex-wrap:wrap; gap:4px; align-content:flex-start; justify-content:center;
  background:rgba(255,255,255,.65); border-radius:16px; padding:8px; overflow:hidden; }
.pz-piece { cursor:grab; touch-action:none;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.pz-piece.drag { filter:drop-shadow(0 12px 20px rgba(0,0,0,.4)); }

/* 💌 おてがみ */
.letter-wordrow { min-height:58px; flex-wrap:wrap; max-width:92vw; }
.letter-hint { color:#a2b4c8; font-size:1rem; font-weight:bold; align-self:center; }
.letter-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr));
  gap:6px; max-width:min(640px,94vw); width:100%; }
.letter-key { aspect-ratio:1; border:none; border-radius:12px; background:#fff; color:#3a5a7a;
  font-size:clamp(1.1rem,3vw,1.5rem); font-weight:bold; cursor:pointer;
  box-shadow:0 3px 0 #cdd8e6; font-family:inherit; transition:transform .08s; }
.letter-key:active { transform:translateY(2px); box-shadow:0 1px 0 #cdd8e6; background:#fff3dc; }
.letter-preview img { max-width:min(560px,90vw); max-height:44vh; border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.18); }

/* ===== ごほうび・経験値 ===== */
#screen-reward { background:radial-gradient(circle at 50% 35%,#fff0b8,#ffd9b0); align-items:center; justify-content:center; }
.reward-box { text-align:center; padding:30px; animation:fadeUp .5s; display:flex; flex-direction:column; align-items:center; gap:12px; }
#reward-stars { font-size:3rem; letter-spacing:6px; }
#reward-title { font-size:clamp(2rem,6vw,3rem); color:#e0722f; }
#reward-sticker { width:140px; height:140px; background:#fff; border-radius:24px; box-shadow:0 8px 20px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center; animation:stampIn .5s .2s backwards; }
#reward-sticker img { width:82%; height:82%; object-fit:contain; }
#reward-comment { font-size:1.2rem; font-weight:bold; color:#a2795a; }
@keyframes stampIn { 0%{transform:scale(2) rotate(-20deg);opacity:0;}100%{transform:scale(1) rotate(0);opacity:1;} }
#xp-wrap { width:min(340px,80vw); }
#xp-label { font-size:.95rem; font-weight:bold; color:#a2795a; margin-bottom:6px; text-align:center; }
#xp-bar { height:22px; background:#fff; border-radius:20px; box-shadow:inset 0 2px 5px rgba(0,0,0,.12); overflow:hidden; }
#xp-fill { height:100%; width:0; border-radius:20px; background:linear-gradient(90deg,#ffd200,#ffb03a); }
#xp-fill.full { animation:xpGlow .6s infinite alternate; }
@keyframes xpGlow { from{filter:brightness(1);} to{filter:brightness(1.35);} }

/* ===== レベルアップ・ガチャ ===== */
.fx-overlay { position:fixed; inset:0; z-index:950; background:rgba(70,40,10,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; animation:screenIn .3s; }
.lvup-inner { background:linear-gradient(160deg,#fff8e8,#ffe9c8); border-radius:28px; padding:28px 36px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
  box-shadow:0 16px 50px rgba(0,0,0,.35); animation:lvupPop .5s cubic-bezier(.34,1.56,.64,1); max-width:88vw; }
@keyframes lvupPop { from{transform:scale(.5); opacity:0;} to{transform:scale(1); opacity:1;} }
.lvup-title { font-size:clamp(1.8rem,6vw,2.8rem); font-weight:bold; color:#e0722f; text-shadow:0 2px 0 #fff; }
.lvup-num { font-size:clamp(1.3rem,4vw,1.8rem); font-weight:bold; color:#c9862a;
  background:#fff; border-radius:30px; padding:4px 24px; box-shadow:0 3px 8px rgba(0,0,0,.1); }
.lvup-rank { font-size:1.1rem; font-weight:bold; color:#3fa64a; background:#eaffef; border-radius:20px; padding:4px 18px; }
.lvup-buddy { height:120px; object-fit:contain; animation:cheerJump .7s .3s 2; }
.lvup-msg { font-size:1.05rem; font-weight:bold; color:#a2795a; }
.lvup-burst { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.lvup-burst span { position:absolute; left:50%; top:50%; font-size:1.8rem; animation:burstFly 1.4s ease-out forwards; }
.lvup-burst span:nth-child(1){ --bx:-38vw; --by:-32vh; } .lvup-burst span:nth-child(2){ --bx:34vw; --by:-38vh; }
.lvup-burst span:nth-child(3){ --bx:-44vw; --by:10vh; }  .lvup-burst span:nth-child(4){ --bx:42vw; --by:14vh; }
.lvup-burst span:nth-child(5){ --bx:-20vw; --by:-42vh; } .lvup-burst span:nth-child(6){ --bx:16vw; --by:36vh; }
.lvup-burst span:nth-child(7){ --bx:-32vw; --by:34vh; }  .lvup-burst span:nth-child(8){ --bx:44vw; --by:-14vh; }
.lvup-burst span:nth-child(9){ --bx:8vw; --by:-30vh; }   .lvup-burst span:nth-child(10){ --bx:-8vw; --by:40vh; }
@keyframes burstFly { 0%{ transform:translate(0,0) scale(.4) rotate(0); opacity:1; } 100%{ transform:translate(var(--bx),var(--by)) scale(1.3) rotate(300deg); opacity:0; } }
.cand-row { display:flex; gap:12px; font-size:2rem; background:#fff; border-radius:16px; padding:8px 20px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.08); }

/* レアガチャ カットイン */
.cutin { position:fixed; inset:0; z-index:960; overflow:hidden;
  background:linear-gradient(135deg,#ff9a9e,#fad0c4,#ffd1ff,#a1c4fd,#c2ffd8);
  background-size:300% 300%; animation:rainbowShift 1.2s linear infinite;
  display:flex; align-items:center; justify-content:center; transition:opacity .4s; }
.cutin.out { opacity:0; }
@keyframes rainbowShift { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
.cutin-rays { position:absolute; left:50%; top:50%; width:200vmax; height:200vmax;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(rgba(255,255,255,.35) 0 12deg, transparent 12deg 24deg);
  animation:raysSpin 5s linear infinite; }
@keyframes raysSpin { to{ transform:translate(-50%,-50%) rotate(360deg); } }
.cutin-band { position:relative; width:110%; padding:22px 0; background:rgba(255,255,255,.92);
  transform:skewY(-4deg); box-shadow:0 0 40px rgba(255,210,0,.8);
  display:flex; align-items:center; justify-content:center; gap:20px;
  animation:bandIn .45s cubic-bezier(.22,1.4,.36,1); }
@keyframes bandIn { from{transform:skewY(-4deg) translateX(-110vw);} to{transform:skewY(-4deg) translateX(0);} }
.cutin-buddy { height:110px; object-fit:contain; animation:cheerJump .6s .3s 2; }
.cutin-text { font-size:clamp(1.8rem,6vw,3rem); font-weight:bold; color:#e0722f;
  text-shadow:0 2px 0 #fff, 0 0 18px rgba(255,210,0,.8); text-align:center; line-height:1.2; }
.cutin-text small { font-size:.5em; color:#a2795a; }
.cutin-stars { position:absolute; inset:0; pointer-events:none; }
.cutin-stars span { position:absolute; left:50%; top:55%; font-size:1.6rem; animation:burstFly 1.6s ease-out infinite; }
.cutin-stars span:nth-child(1){ --bx:-40vw; --by:-26vh; } .cutin-stars span:nth-child(2){ --bx:38vw; --by:-30vh; animation-delay:.2s; }
.cutin-stars span:nth-child(3){ --bx:-30vw; --by:26vh; animation-delay:.4s; } .cutin-stars span:nth-child(4){ --bx:34vw; --by:24vh; animation-delay:.1s; }
.cutin-stars span:nth-child(5){ --bx:-16vw; --by:-36vh; animation-delay:.5s; } .cutin-stars span:nth-child(6){ --bx:14vw; --by:32vh; animation-delay:.3s; }
.cutin-stars span:nth-child(7){ --bx:-44vw; --by:6vh; animation-delay:.6s; } .cutin-stars span:nth-child(8){ --bx:44vw; --by:-4vh; animation-delay:.7s; }

/* シールえらび（散らばった裏向きシール） */
.st-field { position:relative; width:min(420px,78vw); height:min(260px,40vh);
  background:#fff; border-radius:20px; box-shadow:inset 0 2px 8px rgba(0,0,0,.1); overflow:hidden; }
.st-back { position:absolute; width:74px; height:74px; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 35% 30%, #ffe27a, #ffb03a); border:4px solid #fff;
  box-shadow:0 4px 10px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; transform:rotate(var(--rot,0deg));
  animation:stIn .4s backwards, stWiggle 1.6s .5s ease-in-out infinite; }
.st-back:active { transform:rotate(var(--rot)) scale(.9); }
.st-back.open { animation:giftOpen .6s cubic-bezier(.34,1.56,.64,1); background:#fff; z-index:5;
  width:110px; height:110px; }
.st-back.open img { width:88%; height:88%; object-fit:contain; }
.st-back.lose { opacity:.25; filter:grayscale(1); animation:none; pointer-events:none; }
@keyframes stIn { from{opacity:0; transform:rotate(var(--rot)) scale(.3);} to{opacity:1; transform:rotate(var(--rot)) scale(1);} }
@keyframes stWiggle { 0%,100%{margin-top:0;} 50%{margin-top:-6px;} }

/* 背景シールガチャ（カプセル） */
.cap-row { display:flex; gap:20px; margin:10px 0; }
.capsule { width:76px; height:76px; border-radius:50%; cursor:pointer; border:4px solid #fff;
  box-shadow:0 5px 12px rgba(0,0,0,.3), inset 0 -4px 8px rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center;
  animation:boxWiggle 1.2s ease-in-out infinite; position:relative; }
.capsule::after { content:""; position:absolute; top:12%; left:18%; width:26%; height:18%;
  background:rgba(255,255,255,.7); border-radius:50%; }
.capsule:nth-child(2){ animation-delay:.15s; } .capsule:nth-child(3){ animation-delay:.3s; } .capsule:nth-child(4){ animation-delay:.45s; }
.capsule:active { transform:scale(.9); }
.capsule.open { animation:giftOpen .6s cubic-bezier(.34,1.56,.64,1); width:104px; height:104px; overflow:hidden; }
.capsule.open::after { display:none; }
.capsule.open svg { width:100%; height:100%; border-radius:50%; }
.cap-emoji { font-size:2.2rem; animation:giftOpen .6s; }
.capsule.lose { opacity:.25; filter:grayscale(1); animation:none; pointer-events:none; }
.box-msg { font-size:1.15rem; font-weight:bold; color:#a2795a; min-height:1.5em; max-width:70vw; }
.box-row { display:flex; gap:22px; margin:8px 0; }
.gift-box { font-size:clamp(3rem,9vw,4.5rem); cursor:pointer; transition:transform .15s, opacity .3s, filter .3s;
  animation:boxWiggle 1.1s ease-in-out infinite; }
.gift-box:nth-child(2){ animation-delay:.2s; } .gift-box:nth-child(3){ animation-delay:.4s; }
.gift-box:active { transform:scale(.9); }
.gift-box.open { animation:giftOpen .6s cubic-bezier(.34,1.56,.64,1); }
.gift-box.lose { opacity:.25; filter:grayscale(1); animation:none; pointer-events:none; }
.gift-item { display:inline-block; animation:giftOpen .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes boxWiggle { 0%,100%{transform:rotate(0);} 20%{transform:rotate(-7deg);} 40%{transform:rotate(7deg);} 60%{transform:rotate(0);} }
@keyframes giftOpen { 0%{transform:scale(.4) rotate(-15deg);} 60%{transform:scale(1.35) rotate(6deg);} 100%{transform:scale(1.15) rotate(0);} }

/* ===== シールずかん（本）===== */
#screen-stickers { background:linear-gradient(160deg,#e8dcc8,#d8c8a8); align-items:center; }
#book-area { display:flex; align-items:center; gap:10px; margin:16px 0 4px; }
.page-btn { width:52px; height:52px; border-radius:50%; border:none; background:#fff; color:#a2795a;
  font-size:1.3rem; font-weight:bold; box-shadow:0 4px 0 #c9b490; cursor:pointer; }
.page-btn:active { transform:translateY(3px); box-shadow:0 1px 0 #c9b490; }
#book-frame { position:relative; }
#book-page { position:relative; width:min(560px,74vw); aspect-ratio:4/3; border-radius:6px 18px 18px 6px;
  box-shadow:0 10px 26px rgba(0,0,0,.25), inset 12px 0 18px -12px rgba(0,0,0,.3);
  overflow:hidden; transition:transform .16s; transform-origin:left center; border-left:8px solid #a8845a; }
#book-page.flip-r { animation:flipR .32s; }
#book-page.flip-l { animation:flipL .32s; }
@keyframes flipR { 0%{transform:perspective(900px) rotateY(0);} 50%{transform:perspective(900px) rotateY(-28deg);} 100%{transform:perspective(900px) rotateY(0);} }
@keyframes flipL { 0%{transform:perspective(900px) rotateY(0);} 50%{transform:perspective(900px) rotateY(18deg);} 100%{transform:perspective(900px) rotateY(0);} }
#page-bg { position:absolute; inset:0; }
#page-bg svg { width:100%; height:100%; display:block; }
#page-stickers { position:absolute; inset:0; z-index:2; }
#page-num { text-align:center; margin-top:8px; font-weight:bold; color:#7a6a55; font-size:.95rem; }
#bg-select { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding:0 14px; }
.bg-swatch { position:relative; width:76px; height:54px; border-radius:12px; cursor:pointer; border:3px solid #fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15); overflow:hidden; background:#fffdf4; }
.bg-swatch svg { position:absolute; inset:0; width:100%; height:100%; }
.bg-swatch.on { border-color:#ffb03a; transform:scale(1.08); }
.bg-swatch small { position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.9); border-radius:8px; padding:0 6px; font-size:.65rem; color:#4a3b2a; font-weight:bold; white-space:nowrap; }

/* ===== おへや ===== */
#screen-buddyroom { background:linear-gradient(160deg,#e7f6ff,#f6ecff); align-items:center; }
#room-wrap { position:relative; width:min(600px,96vw); aspect-ratio:4/3; margin:16px 0 6px;
  border-radius:20px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.15); transition:width .5s; }
/* GB/GBAポケモンの部屋式：上に壁の帯、下に広いタイル床 */
#room-wall { position:absolute; left:0; right:0; top:0; height:30%; background:#fdf3e0; }
#room-wall::after { content:""; position:absolute; left:0; right:0; bottom:0; height:12%;
  background:rgba(120,90,60,.4); }   /* 巾木 */
#room-floor { position:absolute; left:0; right:0; bottom:0; height:70%;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 2px, transparent 2px 44px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 44px),
    #edd2a8; }
#br-buddy { position:absolute; left:50%; bottom:8%; transform:translateX(-50%);
  height:38%; width:auto; image-rendering:pixelated;   /* ドット絵表示 */
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.25)); animation:idleBob 2.6s ease-in-out infinite; z-index:3; }
#room-things { position:absolute; inset:0; z-index:5; }
#br-level { font-size:1.05rem; font-weight:bold; color:#e0722f; text-align:center; padding:0 10px; }

/* うごかせるオブジェクト共通 */
.board-obj { position:absolute; transform:translate(-50%,-50%) translateZ(0); cursor:grab; touch-action:none;
  will-change:left,top; -webkit-user-drag:none;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.22)); }
img.board-obj { object-fit:contain; }
div.board-obj svg { width:100%; height:auto; display:block; }
.board-obj.sel { outline:4px dashed #ffb03a; outline-offset:4px; border-radius:12px; z-index:20; }
.obj-tools { display:flex; gap:10px; margin-top:10px; visibility:hidden; justify-content:center; }
.tool-btn { padding:10px 18px; border:none; border-radius:30px; background:#fff; color:#e0722f;
  font-weight:bold; font-size:1rem; box-shadow:0 3px 0 #f0c48a; cursor:pointer; }
.tool-btn:active { transform:translateY(2px); box-shadow:0 1px 0 #f0c48a; }
.tool-del { color:#d9534f; }

/* トレイ・アイテムボックス */
.br-h3 { margin:12px 8px 8px; color:#7a6a55; text-align:center; font-size:.98rem; }
#sticker-tray, #book-tray { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding:0 16px 20px; max-width:640px; }
.tray-sticker { position:relative; width:60px; height:60px; background:#fff; border-radius:14px; padding:5px;
  box-shadow:0 3px 0 #d0e4f0; cursor:pointer; transition:transform .12s; }
.tray-sticker:active { transform:scale(.9); }
.tray-sticker img { width:100%; height:100%; object-fit:contain; }
.tray-sticker.empty { opacity:.4; filter:grayscale(.7); }
.tray-sticker.shake { animation:shake .35s; }
.tk-count { position:absolute; bottom:-6px; right:-6px; background:#ff7e5f; color:#fff;
  border-radius:20px; padding:1px 7px; font-size:.68rem; font-weight:bold;
  border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.tray-empty { color:#7a8aa0; font-size:.9rem; }

/* ぜんぶのシールずかん */
#screen-zukanlist { background:#fff7e6; }
#zukan-count { margin-left:auto; font-weight:bold; color:#e0722f; font-size:clamp(.85rem,2.4vw,1.05rem); white-space:nowrap; }
#zukan-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:12px; padding:18px; }
.zk-cell { position:relative; aspect-ratio:1; background:#fff; border-radius:16px; padding:8px;
  box-shadow:0 4px 10px rgba(0,0,0,.08); }
.zk-cell img { width:100%; height:100%; object-fit:contain; }
.zk-locked { background:#efe8da; box-shadow:inset 0 0 0 3px #e0d4bc; }
.zk-locked img { filter:brightness(0) opacity(.55); }   /* 未所持は黒シルエット */
#item-box { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding:0 16px; max-width:680px; }
.box-item { width:86px; background:#fff; border-radius:14px; padding:8px 4px; text-align:center; cursor:pointer;
  box-shadow:0 3px 0 #e5d3b3; border:3px solid transparent; transition:transform .12s; }
.box-item:active { transform:scale(.92); }
.box-item.on { border-color:#ffb03a; background:#fff8e8; }
.bi-emoji { font-size:1.8rem; display:block; }
.box-item small { font-size:.62rem; color:#7a6a55; font-weight:bold; line-height:1.2; display:block; margin-top:2px; }

/* ステップ移動ボタン（すごろく道の左右） */
.step-fab { position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  padding:14px 18px; border:none; border-radius:20px; font-family:inherit;
  background:linear-gradient(135deg,#8a6ae0,#6a4ac0); color:#fff; font-weight:bold;
  font-size:clamp(.85rem,2.2vw,1.05rem); line-height:1.3; cursor:pointer;
  box-shadow:0 5px 0 #4a3290, 0 8px 18px rgba(0,0,0,.25);
  animation:idleBob 2.4s ease-in-out infinite; }
.step-fab:active { transform:translateY(calc(-50% + 4px)); box-shadow:0 1px 0 #4a3290; }
.step-fab-r { right:12px; }
.step-fab-l { left:12px; background:linear-gradient(135deg,#9aa8c0,#7a8aa8); box-shadow:0 5px 0 #5a6a88, 0 8px 18px rgba(0,0,0,.2); animation:none; }
.step-fab-l:active { box-shadow:0 1px 0 #5a6a88; }

/* きょうのボーナスステージ */
.stage-node.bonus .sn-circle { border-color:#ff9a2a; box-shadow:0 5px 0 #d97a10, 0 0 18px rgba(255,180,40,.8); }
.sn-bonus { position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  background:#ff9a2a; color:#fff; font-size:.72rem; font-weight:bold;
  border-radius:12px; padding:1px 8px; white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.25); animation:idleBob 1.6s ease-in-out infinite; }

/* おてがみボタンの未読バッジ */
.chip-btn { position:relative; }
.chip-badge { position:absolute; top:-7px; right:-7px; min-width:22px; height:22px;
  background:#ff4d6d; color:#fff; border-radius:20px; font-size:.75rem; font-weight:bold;
  display:flex; align-items:center; justify-content:center; padding:0 5px;
  border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.25); }

/* おてがみ受信ばこ */
#screen-letters { background:linear-gradient(160deg,#fff2d6,#ffe4ec); }
#letters-list { display:flex; flex-direction:column; gap:12px; padding:18px; max-width:560px; margin:0 auto; width:100%; }
.letter-card { background:#fffdf4; border-radius:16px; padding:14px 18px;
  border:2px solid #f0d8b0; box-shadow:0 4px 10px rgba(0,0,0,.08); }
.letter-card.unread { border-color:#ff9ab0; background:#fff5f8; }
.lc-head { font-weight:bold; color:#e0722f; margin-bottom:6px; font-size:.95rem; }
.lc-new { background:#ff4d6d; color:#fff; border-radius:10px; padding:1px 8px; font-size:.7rem; margin-left:6px; }
.lc-text { font-size:1.15rem; font-weight:bold; color:#4a3b2a; line-height:1.6; }
.lc-date { text-align:right; font-size:.75rem; color:#b09a80; margin-top:6px; }

/* ===== びじゅつかん ===== */
#screen-gallery { background:linear-gradient(160deg,#f3e9d8,#efe0f6); align-items:center; }
#gallery-wrap { position:relative; width:min(600px,96vw); aspect-ratio:4/3; margin:16px 0 6px;
  border-radius:20px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.18); transition:width .5s; }
#gallery-wall { position:absolute; left:0; right:0; top:0; height:70%; background:#efe4cf;
  background-image:linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, transparent 1px 120px); }
#gallery-wall::after { content:""; position:absolute; left:0; right:0; bottom:0; height:6%;
  background:rgba(120,90,60,.35); }
#gallery-floor { position:absolute; left:0; right:0; bottom:0; height:30%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 36px),
    #b98a5a; }
#gallery-frames { position:absolute; inset:0; }
/* 額縁：高さを固定し、幅は なかみの えの ひ に あわせて じどう */
.gallery-frame { position:absolute; transform:translate(-50%,-50%);
  height:clamp(84px,23%,150px); box-sizing:border-box;
  background:#8a6a4a; border-radius:5px; padding:7px;
  box-shadow:0 5px 10px rgba(0,0,0,.35), inset 0 0 0 3px #c9a25a;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .12s; }
/* からの額縁は 縦長プレースホルダ */
.gallery-frame:not(.filled) { aspect-ratio:4/5; }
.gallery-frame.filled { background:#7a5636; box-shadow:0 6px 12px rgba(0,0,0,.4), inset 0 0 0 3px #d9b56a; }
.gallery-frame:active { transform:translate(-50%,-50%) scale(.94); }
/* 絵は 高さいっぱい・幅は じぜんの ひ（額縁が えに ぴったり） */
.gallery-frame.filled img { height:100%; width:auto; display:block; background:#fff; border-radius:2px; }
.frame-empty { color:rgba(255,255,255,.5); font-size:1.6rem; font-weight:bold; }
#gallery-level { font-size:1.05rem; font-weight:bold; color:#8a4fc4; text-align:center; padding:0 10px; }
#gallery-items { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding:0 16px 20px; max-width:680px; }
.gallery-item { width:70px; height:70px; background:#fff; border-radius:12px; padding:4px; cursor:pointer;
  box-shadow:0 3px 0 #d8c4e8; transition:transform .12s; border:3px solid transparent; }
.gallery-item:active { transform:scale(.92); }
.gallery-item img { width:100%; height:100%; object-fit:contain; border-radius:6px; background:#fff; }
.gallery-item.used { border-color:#8a4fc4; opacity:.55; }
.gallery-item { touch-action:none; }
/* えらばれた がくぶち */
.gallery-frame.sel { outline:4px dashed #ffb03a; outline-offset:3px; }
/* ドラッグ中のゴースト */
.gallery-ghost { position:fixed; width:90px; height:90px; z-index:999; pointer-events:none;
  background:#fff; border-radius:12px; padding:4px; box-shadow:0 12px 26px rgba(0,0,0,.35);
  border:3px solid #ffb03a; }
.gallery-ghost img { width:100%; height:100%; object-fit:contain; }

/* モーダル共通（がくぶちに かざる え えらび） */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:900;
  display:none; align-items:center; justify-content:center; }
.modal.show { display:flex; animation:screenIn .2s; }
.modal-inner { background:#fff; border-radius:20px; padding:20px; max-width:min(560px,92vw);
  max-height:80vh; overflow-y:auto; text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.3); }
.modal-inner h3 { color:#7a5a3a; margin-bottom:12px; }
#frame-pick-list { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:14px; max-width:520px; }
.frame-pick-item { width:64px; height:64px; border-radius:10px; padding:3px; cursor:pointer;
  box-shadow:0 3px 0 #e5d3b3; transition:transform .1s; }
.frame-pick-item:active { transform:scale(.92); }
.frame-pick-item img { width:100%; height:100%; object-fit:cover; border-radius:6px; }

@keyframes fadeUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }

/* =========================================
   おみせ（🪙コインで こうかん）
   ========================================= */
.chip-badge.coin { background:#ffd24a; color:#7a5410; }

#wallet { display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg,#fff3cf,#ffe1a0); border:3px solid #e8b73a;
  border-radius:18px; padding:12px 18px; margin:0 auto 12px; max-width:560px; width:94%;
  box-shadow:0 4px 12px rgba(0,0,0,.1); }
.wallet-label { font-weight:bold; color:#8a6127; font-size:.9rem; }
#wallet-coin { font-size:1.9rem; font-weight:bold; color:#c98a1a; }

#goal-box { max-width:560px; width:94%; margin:0 auto 12px; background:#fff; border-radius:16px;
  padding:10px 16px; box-shadow:0 3px 10px rgba(0,0,0,.08); }
.goal-head { font-weight:bold; color:#e0722f; font-size:.95rem; margin-bottom:6px; }
.goal-bar { height:16px; background:#f0e6d6; border-radius:8px; overflow:hidden; }
#goal-fill { height:100%; width:0; border-radius:8px; transition:width .5s ease;
  background:linear-gradient(90deg,#ffd24a,#ff9a3a); }
.goal-left { text-align:right; font-weight:bold; color:#c98a1a; font-size:.9rem; margin-top:4px; }

#shop-list { max-width:560px; width:94%; margin:0 auto; }
.shop-item { display:flex; align-items:center; gap:12px; background:#fff; border-radius:18px;
  padding:12px 14px; margin-bottom:10px; box-shadow:0 3px 10px rgba(0,0,0,.08);
  border:3px solid transparent; }
.shop-item.cant { opacity:.72; background:#f6f2ec; cursor:pointer; }
.si-emoji { font-size:2.2rem; flex:0 0 auto; }
.si-body { flex:1; min-width:0; }
.si-name { font-weight:bold; color:#4a3b2a; font-size:1.05rem; }
.si-desc { font-size:.78rem; color:#a2795a; line-height:1.4; }
.si-right { flex:0 0 auto; text-align:center; }
.si-price { font-weight:bold; color:#c98a1a; font-size:1.15rem; }
.si-buy { margin-top:4px; padding:12px 20px; min-height:46px; border:none; border-radius:12px; cursor:pointer;
  font-family:inherit; font-weight:bold; color:#fff; font-size:1.05rem;
  background:linear-gradient(135deg,#7ed957,#3fa64a); box-shadow:0 4px 0 #2f8038; }
.si-buy:active { transform:translateY(3px); box-shadow:none; }
.si-left { margin-top:4px; font-size:.78rem; color:#a2795a; font-weight:bold; }
.si-sold { margin-top:4px; font-size:.78rem; color:#999; font-weight:bold; }

#ticket-box { max-width:560px; width:94%; margin:16px auto 0; }
#ticket-box h3 { color:#e0722f; font-size:1rem; margin-bottom:8px; }
.ticket { display:flex; align-items:center; gap:10px; background:#fff6e0; border:3px dashed #e8b73a;
  border-radius:14px; padding:10px 14px; margin-bottom:8px; }
.tk-emoji { font-size:1.8rem; }
.tk-name { flex:1; font-weight:bold; color:#8a6127; display:flex; flex-direction:column; }
.tk-name small { font-weight:normal; font-size:.72rem; color:#b09a80; }
.tk-use { padding:8px 14px; border:none; border-radius:11px; font-family:inherit; font-weight:bold;
  color:#fff; cursor:pointer; background:linear-gradient(135deg,#ffb03a,#ff7e5f); box-shadow:0 4px 0 #d9642f; }
.tk-use:active { transform:translateY(3px); box-shadow:none; }
.ticket-note { font-size:.78rem; color:#a2795a; text-align:center; }

.pick-note { text-align:center; color:#a2795a; font-weight:bold; margin-bottom:10px; }
#shoppick-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px;
  max-width:620px; width:94%; margin:0 auto; padding-bottom:20px; }
.sp-cell { background:#fff; border-radius:12px; padding:6px; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.08); }
.sp-cell img { width:100%; display:block; }
.sp-cell:active { transform:scale(.94); }

.get-emoji { font-size:4.5rem; margin:10px 0; }

/* おへや：おなじ かぐは 1つだけ */
.bi-placed { display:block; font-size:.66rem; color:#3fa64a; font-weight:bold; }
.box-item.shake { animation:biShake .4s; }
@keyframes biShake { 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }

/* せってい：1日のシール上限 */
.set-hr { border:none; border-top:2px dashed #f0d6b0; margin:16px 0 12px; }
.set-cap label { font-weight:bold; color:#c2703a; display:flex; align-items:center; gap:8px;
  justify-content:center; flex-wrap:wrap; }
.cap-input { width:90px; text-align:center; margin:0; }

/* =========================================
   きょうの おしごと（デイリータスク）
   ========================================= */
.chip-badge.task { background:#7ec8f0; color:#134a63; }

#daily-head { max-width:560px; width:94%; margin:0 auto 12px; background:#fff; border-radius:18px;
  padding:14px 18px; box-shadow:0 4px 12px rgba(0,0,0,.08); text-align:center; }
#daily-count { font-size:1.1rem; font-weight:bold; color:#4a3b2a; margin-bottom:8px; }
#daily-count b { font-size:2rem; color:#e0722f; }
.daily-bar { height:18px; background:#f0e6d6; border-radius:9px; overflow:hidden; }
#daily-fill { height:100%; width:0; border-radius:9px; transition:width .5s ease;
  background:linear-gradient(90deg,#8fe0a8,#3fa64a); }
.daily-note { font-size:.8rem; color:#a2795a; margin-top:8px; }

#daily-list { max-width:560px; width:94%; margin:0 auto; padding-bottom:24px; }
.daily-item { display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px;
  padding:12px 14px; margin-bottom:8px; box-shadow:0 3px 8px rgba(0,0,0,.07); cursor:pointer; }
.daily-item.done { background:#eef7ee; opacity:.75; cursor:default; }
.daily-item:not(.done):active { transform:scale(.98); }
.di-check { font-size:1.4rem; }
.di-body { flex:1; display:flex; flex-direction:column; min-width:0; }
.di-body b { color:#4a3b2a; font-size:1rem; }
.di-body small { color:#a2795a; font-size:.75rem; }
.di-coin { font-size:.85rem; font-weight:bold; color:#c98a1a; white-space:nowrap; }
.daily-item.done .di-coin { color:#3fa64a; }

/* マップ上の「きょうの おしごと」バッジ */
.stage-node.task .sn-circle { box-shadow:0 5px 0 #2f8fbf, 0 0 0 5px #bfe8fa, 0 8px 16px rgba(0,0,0,.2); }
.sn-task { position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,#7ec8f0,#3f9fd6); color:#fff; font-weight:bold; font-size:.7rem;
  padding:3px 9px; border-radius:20px; white-space:nowrap; box-shadow:0 3px 6px rgba(0,0,0,.25);
  animation:taskBob 1.8s ease-in-out infinite; }
@keyframes taskBob { 50% { transform:translateX(-50%) translateY(-3px); } }

/* =========================================
   おてがみ：おくったもの と おへんじを ひとまとまりで
   ========================================= */
.thread { background:rgba(255,255,255,.55); border-radius:20px; padding:12px;
  margin:0 auto 14px; max-width:520px; width:94%; }
.thread.unread { box-shadow:0 0 0 3px #ffb03a; }
.th-mine { background:#fff; border-radius:14px; padding:10px; box-shadow:0 3px 8px rgba(0,0,0,.08); }
.th-head { font-weight:bold; color:#3fa64a; font-size:.88rem; display:flex; justify-content:space-between;
  align-items:center; gap:8px; margin-bottom:6px; }
.th-date { color:#b09a80; font-weight:normal; font-size:.75rem; }
.th-img { width:100%; border-radius:10px; display:block; border:2px solid #f0e0c0; }
.th-replies { padding-left:14px; margin-top:8px; border-left:4px solid #ffd9a8; }
.th-replies .letter-card { margin-bottom:6px; }
.th-wait { color:#a2795a; font-size:.82rem; padding:6px 2px; }
.th-orphan-head { max-width:520px; width:94%; margin:16px auto 8px; font-weight:bold; color:#e0722f; }