/* ARIMASU or IMASU? Room（シミュレーション）のページ。サイトの style.css のあとに読む。
   スマホで遊ぶのが前提：遊ぶのに使うもの（文・舞台・家具・置くもの）は1画面に収め、連打しても拡大しない（touch-action）。
   色は本編・サムネイルと同じ：います＝オレンジ、あります＝青 */
.ai{--imasu:#EC8534;--arimasu:#3470C4;--place:#2E8B57;--cream:#FFFBF0;
  width:min(100%,560px);margin:0 auto;padding:6px 8px 14px;display:flex;flex-direction:column;gap:6px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ai button{font-family:var(--font);touch-action:manipulation}

.ai-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ai-chip{display:inline-flex;align-items:center;gap:2px;height:36px;padding:0 12px 0 6px;border:0;border-radius:18px;background:var(--cream);
  color:var(--ink);box-shadow:0 1px 4px rgba(90,60,10,.22);font:800 14px/1 var(--font);text-decoration:none;cursor:pointer}
.ai-chip svg{width:20px;height:20px;fill:var(--ink)}
.ai-sound{width:36px;padding:0;justify-content:center}
.ai-sound .off,.ai-sound[aria-pressed="true"] .on{display:none}
.ai-sound[aria-pressed="true"] .off{display:block}
.ai-modes{display:flex;padding:3px;border-radius:20px;background:#EADFC8}
.ai-mode{min-width:76px;height:32px;border:0;border-radius:16px;background:transparent;color:var(--ink);font:800 15px/1 var(--font);cursor:pointer}
.ai-mode[aria-pressed="true"]{background:var(--pink);color:#fff;box-shadow:0 1px 4px rgba(90,60,10,.3)}

/* 文のカード */
.ai-sent{position:relative;min-height:96px;padding:8px 48px 8px 12px;border-radius:16px;background:#fff;box-shadow:0 2px 8px rgba(90,60,10,.15);text-align:center}
.ai-task{margin:0 0 2px;font:800 12px/1.2 var(--font);color:var(--pink);letter-spacing:.04em;text-transform:uppercase}
.ai-ja{margin:0;font:900 clamp(19px,5.6vw,26px)/1.35 var(--font-ja,var(--font));color:var(--ink)}
.ai-ro{margin:2px 0 0;font:800 clamp(11px,3.1vw,14px)/1.3 var(--font);letter-spacing:.06em;color:var(--ink-soft)}
.ai-en{margin:2px 0 0;font:700 clamp(13px,3.6vw,16px)/1.3 var(--font);color:var(--ink)}
.ai-en.hide{visibility:hidden}
.ai-ja .p{color:var(--place)}
.ai-ja .nw{white-space:nowrap}
.ai-ja .v{display:inline-block;padding:0 6px;border-radius:8px;color:#fff;cursor:pointer}
.ai-ja .v.imasu{background:var(--imasu)}
.ai-ja .v.arimasu{background:var(--arimasu)}
.ai-ja .v.q{background:#C9BBA3;min-width:3.4em}
.ai-ja .v.pop{animation:ai-pop .45s ease-out}
.ai-ja .dim{color:#B9AC97}
@keyframes ai-pop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.ai-say{position:absolute;right:8px;top:50%;width:36px;height:36px;margin-top:-18px;border:0;border-radius:50%;background:var(--pink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.ai-say svg{width:20px;height:20px;fill:#fff}
.ai-say[hidden]{display:none}

/* 舞台（1000×860 の座標を % で置く） */
.ai-stage{position:relative;width:100%;aspect-ratio:1000/860;border-radius:16px;overflow:hidden;background:#EFE3C8 center/cover;
  box-shadow:inset 0 0 0 1px rgba(90,60,10,.12);-webkit-user-select:none;user-select:none;touch-action:none}
.ai-world{position:absolute;inset:0}
.ai-obj{position:absolute;pointer-events:none;transform-origin:50% 100%;transition:left .28s cubic-bezier(.3,1.4,.5,1),top .28s cubic-bezier(.3,1.4,.5,1),width .28s,height .28s}
.ai-obj img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(70,45,10,.25))}
.ai-obj.anchor img{filter:drop-shadow(0 6px 5px rgba(70,45,10,.28))}
.ai-obj.item{pointer-events:auto;cursor:grab}
.ai-obj.item.alive img{animation:ai-wiggle 1.3s ease-in-out infinite;transform-origin:50% 100%}
.ai-obj.item.drop img{animation:ai-land .4s ease-out}
@keyframes ai-wiggle{0%,100%{transform:rotate(0) scaleY(1)}25%{transform:rotate(-3deg) scaleY(1.02)}75%{transform:rotate(3deg) scaleY(.99)}}
@keyframes ai-land{0%{transform:translateY(-14%) scale(1.05)}70%{transform:translateY(2%) scale(.97,1.03)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.ai-obj.item.alive img,.ai-obj.item.drop img,.ai-ja .v.pop{animation:none}}
.ai-obj.ghost{z-index:50;opacity:.9;transition:none;pointer-events:none}
.ai-obj.ghost img{animation:none}

/* 置ける場所（押せる丸。光って脈打つ） */
.ai-spot{position:absolute;z-index:40;width:16%;aspect-ratio:1;margin:-8% 0 0 -8%;border:0;border-radius:50%;background:transparent;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center}
.ai-spot span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:56%;padding:5px 7px 4px;border-radius:14px;white-space:nowrap;
  background:rgba(255,255,255,.88);border:2.5px dashed var(--place);color:var(--place);font:900 clamp(11px,3.4vw,16px)/1 var(--font-ja,var(--font));
  box-shadow:0 0 0 0 rgba(46,139,87,.5);animation:ai-glow 1.4s ease-in-out infinite}
.ai-spot small{font:800 clamp(7px,1.9vw,9px)/1 var(--font);margin-top:2px;letter-spacing:.04em}
.ai-spot.on span{background:var(--place);color:#fff;border-style:solid;transform:scale(1.15)}
.ai-spot.here span{opacity:.35;animation:none}
.ai-spot:active span{transform:scale(.9)}
.ai-stage.dragging .ai-spot span{opacity:1}
@keyframes ai-glow{0%,100%{box-shadow:0 0 0 0 rgba(46,139,87,.45)}50%{box-shadow:0 0 0 7px rgba(46,139,87,0)}}
@media (prefers-reduced-motion:reduce){.ai-spot span{animation:none}}
.ai-stage.quiet .ai-spot{display:none}

.ai-why{position:absolute;left:3%;top:3%;z-index:45;max-width:62%;padding:6px 10px;border-radius:12px;background:rgba(255,251,240,.95);
  box-shadow:0 2px 6px rgba(90,60,10,.2);font:800 clamp(11px,3.2vw,14px)/1.35 var(--font);color:var(--ink)}
.ai-why b.i{color:var(--imasu)}.ai-why b.a{color:var(--arimasu)}
.ai-why.ok{border:2px solid #3BA55C}.ai-why.ng{border:2px solid #D84545}
.ai-why[hidden]{display:none}

/* 指の見本：トレイからつくえへ */
.ai-hint{position:absolute;z-index:46;left:30%;top:78%;display:flex;align-items:center;gap:4px;pointer-events:none;animation:ai-drag 2.2s ease-in-out infinite}
.ai-hint b{padding:3px 8px;border-radius:10px;background:var(--pink);color:#fff;font:900 13px/1 var(--font)}
.ai-finger{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.95);border:3px solid var(--pink);box-shadow:0 0 0 6px rgba(224,82,122,.25)}
.ai-hint[hidden]{display:none}
@keyframes ai-drag{0%{transform:translate(0,40%);opacity:0}15%{opacity:1}60%{transform:translate(55%,-210%)}85%{opacity:1}100%{transform:translate(55%,-210%);opacity:0}}
@media (prefers-reduced-motion:reduce){.ai-hint{animation:none}}

.ai-cover{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(255,251,240,.85);font:800 16px var(--font);color:var(--ink)}
.ai-cover[hidden]{display:none}

/* 下の段：家具・置くもの・クイズの答え */
.ai-dock{display:flex;flex-direction:column;gap:6px}
.ai-anchors{display:flex;gap:6px;justify-content:center}
.ai-anc{flex:1;max-width:150px;height:44px;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;border:2px solid transparent;border-radius:12px;
  background:var(--cream);color:var(--ink);font:900 15px/1 var(--font-ja,var(--font));cursor:pointer;box-shadow:0 1px 3px rgba(90,60,10,.18)}
.ai-anc img{height:30px;width:auto;max-width:44px;object-fit:contain}
.ai-anc span{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.ai-anc small{font:800 9px/1 var(--font);color:var(--ink-soft);letter-spacing:.05em}
.ai-anc[aria-pressed="true"]{border-color:var(--place);background:#E7F4EC}
.ai-anc:disabled{opacity:.45}
.ai-tray{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:6px;border-radius:14px;background:#EADFC8}
.ai-it{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;height:72px;padding:4px 0 3px;border:0;border-radius:10px;
  background:#fff;cursor:grab;touch-action:none;box-shadow:0 2px 0 rgba(90,60,10,.18)}
.ai-it img{max-width:86%;max-height:44px;object-fit:contain;pointer-events:none}
.ai-it span{font:900 11px/1 var(--font-ja,var(--font));color:var(--ink);pointer-events:none}
.ai-it:active,.ai-it.on{transform:translateY(2px);box-shadow:0 0 0 3px var(--pink)}
.ai-it.used{opacity:.4}
.ai-tray.pulse .ai-it:not(.used){animation:ai-tray 1.6s ease-in-out infinite}
@keyframes ai-tray{0%,100%{box-shadow:0 2px 0 rgba(90,60,10,.18)}50%{box-shadow:0 0 0 3px rgba(224,82,122,.55)}}
@media (prefers-reduced-motion:reduce){.ai-tray.pulse .ai-it{animation:none}}
.ai-verbs{display:flex;gap:10px;justify-content:center}
.ai-verbs[hidden]{display:none}
.ai-verb{flex:1;max-width:220px;height:64px;border:0;border-radius:16px;color:#fff;font:900 24px/1 var(--font-ja,var(--font));cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.ai-verb small{font:800 11px/1 var(--font);letter-spacing:.08em;opacity:.9}
.ai-verb[data-verb="imasu"]{background:var(--imasu)}
.ai-verb[data-verb="arimasu"]{background:var(--arimasu)}
.ai-verb:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.ai-verb:disabled{opacity:.5}
.ai-end{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0}
.ai-end[hidden]{display:none}
.ai-score{margin:0;font:900 22px/1.2 var(--font);color:var(--ink)}
.ai-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ai-btn{min-width:130px;height:44px;padding:0 18px;border:0;border-radius:22px;background:var(--pink);color:#fff;font:800 16px/1 var(--font);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;box-shadow:0 2px 6px rgba(90,60,10,.3)}
.ai-btn-sub{background:var(--cream);color:var(--ink)}
.ai[data-mode="quiz"] .ai-hint{display:none}

.ai-rule{margin:2px 0 0;padding:7px 10px;border-radius:12px;background:var(--cream);text-align:center;font:800 13px/1.5 var(--font);color:var(--ink)}
.ai-rule .g{white-space:nowrap}
.ai-rule b{font-family:var(--font-ja,var(--font));font-size:15px}
.ai-rule .i{color:var(--imasu)}.ai-rule .a{color:var(--arimasu)}
.ai-rule .sep{display:inline-block;width:1px;height:12px;margin:0 6px;background:#C9BBA3;vertical-align:middle}
.ai-note{margin:2px 4px 0;font-size:12.5px;line-height:1.6;color:var(--ink-soft);text-align:center}
.ai :focus-visible{outline:3px solid var(--gen);outline-offset:2px}

/* 遊びに出る日本語の一覧 */
.ai-words{margin:6px 0 0;padding:10px 12px;border-radius:14px;background:#fff;box-shadow:0 1px 4px rgba(90,60,10,.12)}
.ai-words h2{margin:0 0 6px;font-size:16px}
.ai-words dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 10px;margin:0}
.ai-words dl div{display:flex;align-items:baseline;gap:6px}
.ai-words dt{font:900 16px/1.3 "Zen Maru Gothic",var(--font);color:var(--ink);white-space:nowrap}
.ai-words dd{margin:0;font-size:12px;line-height:1.3;color:var(--ink-soft)}
.ai-pattern{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-soft)}
.ai-pattern [lang=ja]{font:900 15px "Zen Maru Gothic",var(--font);color:var(--ink)}
.ai-pattern br+span{display:none}
.ai [hidden]{display:none!important}

/* スマホの最適化（2026-10-27 オーナー「スマホで最適化して公開して」）
   舞台は画面の高さに合わせて縮める（ブラウザのバーで高さが減っても、文・舞台・家具・置くものが1画面に収まる）。
   長押しのメニュー・文字の選択・引っぱっての再読み込みを止める */
.ai{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.ai-words,.ai-note{-webkit-user-select:text;user-select:text}
.ai-stage{width:min(100%,calc((100vh - 300px)*1000/860));margin:0 auto;overscroll-behavior:contain}
@supports (height:100dvh){.ai-stage{width:min(100%,calc((100dvh - 300px)*1000/860))}}
.ai-stage{min-width:min(100%,260px)}
.ai img{-webkit-user-drag:none}
@media (max-height:720px){
  .ai{gap:5px;padding-top:4px}
  .ai-chip,.ai-sound{height:32px}.ai-sound{width:32px}
  .ai-mode{height:28px}
  .ai-sent{min-height:0;padding:6px 44px 6px 10px}
  .ai-ja{font-size:clamp(17px,5vw,22px);line-height:1.3}
  .ai-ro{font-size:11px}.ai-en{font-size:13px}
  .ai-anc{height:38px}.ai-anc img{height:24px}
  .ai-it{height:62px}.ai-it img{max-height:36px}
  .ai-verb{height:56px;font-size:21px}
}
@media (max-height:600px){.ai-stage{width:min(100%,calc((100dvh - 270px)*1000/860))}}
/* 横向きのスマホ：舞台を左、文と下の段を右に */
@media (orientation:landscape) and (max-height:500px){
  .ai{width:min(100%,900px);display:grid;grid-template-columns:auto 1fr;grid-template-areas:"top top" "stage sent" "stage dock" "rule rule";align-items:start;column-gap:10px}
  .ai-top{grid-area:top}.ai-sent{grid-area:sent}.ai-dock{grid-area:dock}.ai-rule{grid-area:rule}
  .ai-stage{grid-area:stage;width:calc((100dvh - 60px)*1000/860);min-width:0}
  .ai-words,.ai-note{grid-column:1/-1}
}

/* 指の端末のガイド：舞台の下の真ん中で、下の段（置くもの）をトントンと指す。TAP! の札（2026-10-27） */
.ai-hint.tap{left:50%;top:auto;bottom:3%;flex-direction:column;gap:3px;transform:translateX(-50%);animation:none}
.ai-hint.tap .ai-finger{order:2;animation:ai-tap 1s ease-in-out infinite}
.ai-hint.tap b{order:1;font-size:15px;padding:4px 12px}
.ai-hint.tap::after{content:"";order:3;width:0;height:0;border:8px solid transparent;border-top:10px solid var(--pink);margin-top:-2px;animation:ai-tap 1s ease-in-out infinite}
@keyframes ai-tap{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(6px) scale(.86)}}
@media (prefers-reduced-motion:reduce){.ai-hint.tap .ai-finger,.ai-hint.tap::after{animation:none}}
.ai-why small{display:block;margin-top:2px;font-size:.9em;color:var(--ink-soft)}