/* =========================================================
   たまもクエスト ── ファミコン風UI
   ========================================================= */
* { margin:0; padding:0; box-sizing:border-box; }
html,body {
  background:#000;
  font-family:'DotGothic16', 'MS Gothic', monospace;
  color:#fff;
  height:100%;
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
  touch-action:manipulation;
}

#stage {
  position:relative;
  width:min(100vw, 70vh * 480 / 352, 720px);
  aspect-ratio:480/352;
  margin:0 auto;
  top:50%;
  transform:translateY(-50%);
}
#cv {
  width:100%; height:100%;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  display:block;
  background:#000;
}

/* ---------- 共通ウィンドウ（白枠・黒地） ---------- */
.win, #msgwin, #menuwin, #subwin, #choicewin, #namewin, #msgdiagram {
  background:#000;
  border:4px solid #fff;
  border-radius:6px;
  box-shadow:0 0 0 3px #000, inset 0 0 0 1px #000;
  color:#fff;
  padding:10px 12px;
  line-height:1.7;
  font-size:clamp(11px, 2.6vmin, 17px);
}
.hidden { display:none !important; }

/* ---------- マップ名表示 ---------- */
#mapname {
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.8); border:3px solid #fff; border-radius:4px;
  padding:3px 14px; font-size:clamp(10px,2.4vmin,15px);
  animation:mapnamefade 2.2s forwards; pointer-events:none; z-index:30;
}
@keyframes mapnamefade { 0%{opacity:0} 15%{opacity:1} 80%{opacity:1} 100%{opacity:0} }

/* ---------- メッセージウィンドウ ---------- */
#msgwin {
  position:absolute; left:2.5%; right:2.5%; bottom:3%;
  min-height:29%;
  z-index:60;
}
#msgtext { white-space:pre-wrap; min-height:3.4em; }
#msgcursor {
  position:absolute; right:14px; bottom:4px;
  animation:blink .6s steps(1) infinite;
}
@keyframes blink { 50%{opacity:0} }

/* ---------- 図解ボックス（レッスン用） ---------- */
#msgdiagram {
  position:absolute; left:2.5%; right:2.5%; bottom:33%;
  max-height:52%; overflow:auto; z-index:61;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:8px 10px; border-color:#9fd1ff;
}

/* ---------- 図解ウィジェット（共通部品） ---------- */
.diagram-box { display:flex; flex-direction:column; align-items:center; gap:2px; }
/* レッスン説明の図は 大きく 見せる（zoomは 中身を まるごと 拡大する） */
#msgdiagram .diagram-box { zoom:1.7; }
#qbox .diagram-box { zoom:1.35; margin:4px auto; }
@media (max-width:600px) {
  #msgdiagram .diagram-box { zoom:1.3; }
  #qbox .diagram-box { zoom:1.15; }
}
.dg-caption { color:#9fd1ff; font-size:clamp(9px,2.2vmin,13px); margin-top:2px; }

.dg-tape-row { display:flex; gap:2px; margin:2px 0; }
.dg-seg {
  display:flex; align-items:center; justify-content:center;
  border:1px solid #fff; border-radius:3px; color:#000; font-weight:bold;
  font-size:clamp(9px,2.2vmin,13px);
}

.dg-blocks, .dg-share { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.dg-block, .dg-share-box {
  border:2px solid #e0a030; border-radius:4px; padding:2px 5px;
  color:#ffd75e; font-size:clamp(10px,2.6vmin,15px); letter-spacing:1px;
}
.dg-share-rem { color:#ff8fb0; font-size:clamp(9px,2.2vmin,13px); margin-top:3px; }

.dg-place { display:flex; gap:3px; justify-content:center; }
.dg-place-col { text-align:center; border:1px solid #557; border-radius:4px; padding:2px 6px; }
.dg-place-col.hl { border-color:#ffd75e; background:#3a2a00; }
.dg-place-label { color:#9fd1ff; font-size:clamp(8px,2vmin,11px); }
.dg-place-digit { font-size:clamp(14px,3.6vmin,22px); }

.dg-numberline { position:relative; height:36px; margin:14px auto 4px; }
.dg-nl-line { position:absolute; left:0; right:0; top:14px; height:2px; background:#fff; }
.dg-nl-tick { position:absolute; top:8px; width:2px; height:14px; background:#889; }
.dg-nl-tick span {
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  font-size:clamp(8px,2vmin,11px); color:#9fd1ff; white-space:nowrap;
}
.dg-nl-mark { position:absolute; top:8px; width:10px; height:10px; margin-left:-5px; border-radius:50%; }
.dg-nl-jump { position:absolute; top:-10px; height:10px; border-top:2px solid #ffd75e; border-radius:50%; }
.dg-nl-jump span { position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:clamp(8px,2vmin,11px); color:#ffd75e; white-space:nowrap; }

.dg-fracbar { display:flex; gap:2px; }
.dg-frac-seg { width:20px; height:24px; border:1px solid #fff; background:#182430; }
.dg-frac-seg.fill { background:#e0a030; }

.dg-clock { position:relative; width:70px; height:70px; border-radius:50%; border:3px solid #fff; margin:4px auto; }
.dg-clock-num {
  position:absolute; transform:translate(-50%,-50%);
  font-size:9px; color:#9fd1ff;
}
.dg-clock-hand { position:absolute; left:50%; bottom:50%; transform-origin:bottom; background:#fff; }
.dg-clock-hour { width:3px; height:18px; margin-left:-1.5px; }
.dg-clock-min { width:2px; height:26px; margin-left:-1px; background:#ffd75e; }

.dg-ruler { display:flex; flex-direction:column; gap:4px; width:100%; max-width:280px; }
.dg-ruler-row { display:flex; align-items:center; gap:6px; }
.dg-ruler-bar { height:12px; background:#3a6ad0; border:1px solid #fff; border-radius:2px; }
.dg-ruler-row span { font-size:clamp(9px,2.2vmin,13px); }

.dg-areagrid { display:grid; gap:2px; max-width:180px; margin:2px auto; }
.dg-cell { width:14px; height:14px; background:#3a6ad0; border:1px solid #fff; }

.dg-anglewedge { position:relative; width:70px; height:70px; border-radius:50%; border:2px solid #fff; margin:4px auto; }
.dg-angle-center { position:absolute; left:50%; top:50%; width:4px; height:4px; margin:-2px; background:#fff; border-radius:50%; }

.dg-kuku { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; max-width:220px; margin:2px auto; }
.dg-kuku-cell {
  border:1px solid #557; border-radius:4px; padding:2px 4px; text-align:center;
  font-size:clamp(8px,2vmin,11px);
}
.dg-kuku-cell.hl { border-color:#ffd75e; background:#3a2a00; color:#ffd75e; }

.dg-orderflow { display:flex; align-items:center; flex-wrap:wrap; gap:4px; justify-content:center; }
.dg-of-step {
  border:1px solid #9fd1ff; border-radius:5px; padding:3px 8px; text-align:center;
  font-size:clamp(9px,2.2vmin,12px);
}
.dg-of-arrow { color:#ffd75e; }

.dg-money { display:flex; flex-direction:column; gap:3px; align-items:center; }
.dg-coin-row { font-size:clamp(10px,2.4vmin,14px); }
.dg-coin { display:inline-block; border:2px solid #ffd75e; border-radius:50%; padding:2px 8px; color:#ffd75e; }

.dg-tenframe {
  display:grid; grid-template-columns:repeat(5,1fr); gap:3px;
  width:150px; margin:2px auto;
}
.dg-tf-cell { width:26px; height:26px; border:2px solid #9fd1ff; border-radius:4px; }
.dg-tf-cell.fill { background:#ffd75e; border-color:#ffd75e; }

.dg-shape-wrap { position:relative; width:80px; height:80px; margin:4px auto; display:flex; align-items:center; justify-content:center; }
.dg-shape-circle { width:70px; height:70px; border-radius:50%; background:#3a6ad0; border:2px solid #fff; }
.dg-shape-rect { width:74px; height:52px; background:#e0a030; border:2px solid #fff; }
.dg-shape-square { width:62px; height:62px; background:#e0a030; border:2px solid #fff; }
.dg-shape-triangle {
  width:0; height:0;
  border-left:37px solid transparent; border-right:37px solid transparent;
  border-bottom:64px solid #3fae46;
}
.dg-shape-rightmark {
  position:absolute; width:10px; height:10px;
  border-right:2px solid #fff; border-top:2px solid #fff;
  top:calc(50% + 12px); left:calc(50% - 33px);
}

/* ---------- 選択肢 ---------- */
#choicewin {
  position:absolute; right:4%; bottom:34%;
  min-width:30%; max-width:33%; z-index:65; padding:8px 10px;
}
.choice-item { padding:2px 4px 2px 22px; position:relative; cursor:pointer; }
.choice-item.sel::before { content:'▶'; position:absolute; left:2px; }
.choice-item:hover { background:#123; }

/* ---------- タイトル ---------- */
#title {
  position:absolute; inset:0; z-index:100;
  background:linear-gradient(#000 60%, #071428);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2.5%;
  text-align:center;
}
#title h1 {
  font-size:clamp(22px,6.4vmin,44px);
  color:#ffd75e;
  text-shadow:3px 3px 0 #7a3800, 6px 6px 0 #000;
  letter-spacing:.06em;
}
#title .subtitle { color:#9fd1ff; font-size:clamp(10px,2.6vmin,16px); margin-top:-1.5%; }
#title .tama-face { font-size:clamp(28px,8vmin,54px); animation:bob 1.6s ease-in-out infinite; }
@keyframes bob { 50%{transform:translateY(-6px)} }
#title .slot {
  width:76%; max-width:430px;
  border:3px solid #fff; border-radius:5px; background:#000;
  padding:6px 12px; font-size:clamp(11px,2.7vmin,16px);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  cursor:pointer;
}
#title .slot:hover { background:#112; }
#title .slot .slot-sub { color:#8f8; font-size:.85em; }
#title .slot button {
  font-family:inherit; font-size:.85em; color:#fff; background:#333;
  border:2px solid #fff; border-radius:4px; padding:2px 8px; cursor:pointer;
}
#title .slot button:hover { background:#c33; }
#title .ver { color:#666; font-size:clamp(8px,2vmin,12px); }

/* ---------- 名前入力 ---------- */
#namewin {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:78%; max-width:420px; z-index:110; text-align:center;
}
#namewin input {
  font-family:inherit; font-size:1.3em; text-align:center;
  width:70%; margin:10px 0; padding:6px;
  background:#111; color:#ffd75e; border:3px solid #fff; border-radius:4px;
}
#namewin .btn-row { display:flex; gap:10px; justify-content:center; }

/* ---------- 汎用ボタン ---------- */
.fbtn {
  font-family:inherit; font-size:1em; color:#fff; background:#000;
  border:3px solid #fff; border-radius:5px; padding:6px 18px; cursor:pointer;
}
.fbtn:hover, .fbtn:focus { background:#234; }
.fbtn.small { padding:3px 10px; font-size:.85em; }

/* ---------- フィールドメニュー ---------- */
#menuwin {
  position:absolute; right:2.5%; top:4%;
  min-width:34%; z-index:70; padding:8px 10px;
}
#subwin {
  position:absolute; left:2.5%; top:4%;
  width:58%; max-height:88%; overflow-y:auto; z-index:71;
}
.menu-item { padding:3px 4px 3px 24px; position:relative; cursor:pointer; white-space:nowrap; }
.menu-item.sel::before { content:'▶'; position:absolute; left:2px; }
.menu-item:hover { background:#123; }
.menu-item.dim { color:#777; }
#subwin h3 { color:#ffd75e; border-bottom:2px solid #555; margin-bottom:6px; font-size:1em; }
#subwin table { width:100%; border-collapse:collapse; }
#subwin td { padding:1px 4px; }
#subwin td.val { text-align:right; color:#8f8; }
.note-item { border-bottom:1px dashed #444; padding:4px 2px; font-size:.9em; }
.note-item b { color:#ffd75e; }

/* ---------- バトル ---------- */
#battle {
  position:absolute; inset:0; z-index:80;
  display:flex; flex-direction:column;
}
#bt-scene {
  flex:1; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
#bt-scene.bg-field { background:linear-gradient(#0a1a3f 55%, #10381c 55%); }
#bt-scene.bg-cave  { background:linear-gradient(#0a0a12 55%, #221a10 55%); }
#bt-ename {
  position:absolute; top:3%; left:50%; transform:translateX(-50%);
  background:#000; border:3px solid #fff; border-radius:4px;
  padding:2px 16px; font-size:clamp(11px,2.8vmin,17px); z-index:5;
}
#bt-enemy { position:relative; transition:opacity .5s; }
#bt-enemy img, #bt-enemy canvas { image-rendering:pixelated; display:block; }
#bt-enemy.shake { animation:eshake .35s; }
@keyframes eshake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
#bt-enemy.flash { animation:eflash .35s; }
@keyframes eflash { 0%,40%,80%{filter:brightness(4) saturate(0)} 20%,60%,100%{filter:none} }
#bt-enemy.dead { opacity:0; transform:scale(.6) translateY(20px); transition:all .7s; }
#battle.hitme #bt-scene { animation:hshake .4s; }
@keyframes hshake { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-7px,4px)} 50%{transform:translate(6px,-4px)} 75%{transform:translate(-4px,2px)} }

.dmg-float {
  position:absolute; left:50%; top:30%; transform:translateX(-50%);
  font-size:clamp(20px,6vmin,38px); color:#fff; text-shadow:2px 2px 0 #000;
  animation:dmgfloat .9s forwards; pointer-events:none; z-index:6; font-weight:bold;
}
.dmg-float.crit { color:#ffd75e; font-size:clamp(26px,7.5vmin,48px); }
.dmg-float.heal { color:#7cf27c; }
@keyframes dmgfloat { 0%{opacity:0; transform:translate(-50%,10px) scale(.6)} 20%{opacity:1; transform:translate(-50%,-6px) scale(1.15)} 45%{transform:translate(-50%,0) scale(1)} 100%{opacity:0; transform:translate(-50%,-26px)} }

#bt-status {
  position:absolute; top:3%; left:2.5%;
  background:#000; border:3px solid #fff; border-radius:4px;
  padding:4px 10px; font-size:clamp(10px,2.5vmin,15px); z-index:5; line-height:1.5;
}
#bt-status .hpbar { width:110px; height:7px; background:#333; border:1px solid #fff; margin:1px 0 3px; }
#bt-status .hpbar > div { height:100%; background:#3ec53e; transition:width .3s; }
#bt-status .hpbar > div.low { background:#e6b422; }
#bt-status .hpbar > div.danger { background:#e2413d; }

#bt-combo {
  position:absolute; top:3%; right:2.5%; z-index:5; text-align:right;
  font-size:clamp(11px,2.8vmin,17px); color:#ffd75e; text-shadow:2px 2px 0 #000;
}
#bt-combo .fever {
  color:#ff7bcb; animation:feverflash .4s steps(2) infinite; font-size:1.2em;
}
@keyframes feverflash { 50%{color:#ffe066} }

#bt-bottom { display:flex; gap:6px; padding:6px; background:#000; min-height:31%; }
#bt-msg {
  flex:1.6; border:4px solid #fff; border-radius:6px; padding:8px 10px;
  font-size:clamp(11px,2.7vmin,16px); line-height:1.6; white-space:pre-wrap;
}
#bt-cmds {
  flex:1; border:4px solid #fff; border-radius:6px; padding:6px 8px;
  display:grid; grid-template-columns:1fr 1fr; gap:2px 6px; align-content:center;
}
#bt-cmds .bt-cmd {
  font-family:inherit; background:none; border:none; color:#fff; text-align:left;
  font-size:clamp(11px,2.7vmin,16px); padding:3px 2px 3px 20px; position:relative; cursor:pointer;
}
#bt-cmds .bt-cmd.sel::before, #bt-cmds .bt-cmd:hover::before { content:'▶'; position:absolute; left:0; }
#bt-cmds .bt-cmd:disabled { color:#666; }

/* ---------- 問題モーダル ---------- */
#qmodal {
  position:absolute; inset:0; z-index:120;
  background:rgba(0,0,10,.86);
  display:flex; align-items:center; justify-content:center;
}
#qbox {
  width:92%; max-width:520px;
  background:#000; border:4px solid #ffd75e; border-radius:8px;
  padding:10px 14px; text-align:center;
}
#qbox .q-label { color:#9fd1ff; font-size:clamp(10px,2.4vmin,14px); }
#qbox .q-text { font-size:clamp(16px,4.6vmin,28px); margin:6px 0; line-height:1.4; }
#qbox .q-hissan {
  display:inline-block; text-align:right; background:#101820;
  border:2px solid #456; border-radius:6px; padding:6px 18px; margin:2px 0 6px;
  font-size:clamp(18px,5vmin,30px); line-height:1.3; letter-spacing:.15em;
}
#qbox .q-hissan .hs-line { border-top:3px solid #fff; }
#qbox .crit-bar-wrap {
  height:8px; background:#222; border:1px solid #555; border-radius:4px;
  margin:4px auto 8px; width:80%; overflow:hidden;
}
#qbox .crit-bar { height:100%; background:linear-gradient(90deg,#ffd75e,#ff9b3d); width:100%; }
#qbox .crit-bar.run { transition:width 14s linear; width:0%; }
#qbox .crit-label { font-size:clamp(9px,2.2vmin,12px); color:#ffd75e; }
#qbox .ans-display {
  font-size:clamp(20px,5.6vmin,34px); min-height:1.4em; letter-spacing:.1em;
  color:#7cf27c; border-bottom:3px solid #7cf27c; width:60%; margin:0 auto 8px;
}
#qbox .keypad {
  display:grid; grid-template-columns:repeat(6,1fr); gap:5px; max-width:400px; margin:0 auto 6px;
}
#qbox .keypad button {
  font-family:inherit; font-size:clamp(15px,4vmin,24px);
  background:#182430; color:#fff; border:2px solid #557; border-radius:6px;
  padding:6px 0; cursor:pointer;
}
#qbox .keypad button:active { background:#2c4a68; transform:translateY(1px); }
#qbox .keypad .kp-ok { background:#7a3800; border-color:#ffd75e; color:#ffd75e; grid-column:span 2; }
#qbox .keypad .kp-del { background:#402; border-color:#a58; }
#qbox .choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:4px auto 8px; max-width:400px; }
#qbox .choice-grid button {
  font-family:inherit; font-size:clamp(14px,3.8vmin,22px);
  background:#182430; color:#fff; border:2px solid #557; border-radius:6px;
  padding:8px 4px; cursor:pointer;
}
#qbox .hint-row { min-height:1.2em; }
#qbox .hint-btn {
  font-family:inherit; background:none; border:2px solid #9fd1ff; color:#9fd1ff;
  border-radius:5px; padding:2px 12px; cursor:pointer; font-size:clamp(10px,2.5vmin,14px);
}
#qbox .hint-text { color:#9fd1ff; font-size:clamp(10px,2.6vmin,15px); margin-top:4px; }

/* ---------- フェード ---------- */
#fader {
  position:absolute; inset:0; background:#000; opacity:0;
  pointer-events:none; transition:opacity .45s; z-index:90;
}
#fader.on { opacity:1; pointer-events:auto; }

/* ---------- タッチUI ----------
   ゲーム画面と かぶらないよう、画面を寄せて ボタン専用の
   空きスペースを つくる（縦もち＝下の帯／横もち＝左右の帯） */
#touchui { display:none; }
@media (pointer:coarse) {
  html, body { height:100%; }
  #touchui { display:block; }
  #dpad {
    position:fixed; aspect-ratio:1; display:grid;
    grid-template-areas:'. up .' 'left . right' '. down .';
    grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr;
    z-index:200; opacity:.85;
  }
  .dp {
    font-size:min(5.5vw, 26px); background:#222; color:#fff; border:2px solid #888;
    border-radius:10px; touch-action:none;
  }
  #dp-up{grid-area:up} #dp-down{grid-area:down} #dp-left{grid-area:left} #dp-right{grid-area:right}
  #abbtns { position:fixed; display:flex; z-index:200; }
  #abbtns button {
    width:17vw; height:17vw; max-width:90px; max-height:90px;
    border-radius:50%; border:3px solid #888; background:#1a2c48; color:#fff;
    font-family:inherit; font-size:min(6vw, 30px); opacity:.9; touch-action:none;
  }
  #abbtns button span { display:block; font-size:min(2.5vw, 11px); color:#9ab; }
  #btn-a { background:#48321a; }
}

/* 縦もち：画面を上に寄せ、下の帯にボタン */
@media (pointer:coarse) and (orientation:portrait) {
  #stage {
    top:0; transform:none; margin:1vh auto 0;
    width:min(100vw, calc((94vh - 34vw) * 480 / 352), 720px);
  }
  #dpad { left:4vw; bottom:2vh; width:34vw; max-width:170px; }
  #abbtns { right:5vw; bottom:5vh; gap:4vw; align-items:flex-end; }
}

/* 横もち：画面を中央にまとめ、左右の帯にボタン */
@media (pointer:coarse) and (orientation:landscape) {
  #stage {
    top:50%; transform:translateY(-50%);
    width:min(calc(94vw - 2 * min(36vh, 170px)), calc(96vh * 480 / 352), 720px);
  }
  #dpad { left:2vw; top:50%; transform:translateY(-50%); width:36vh; max-width:170px; }
  #abbtns {
    right:3vw; top:50%; transform:translateY(-50%);
    flex-direction:column; gap:3vh; align-items:center;
  }
  #abbtns button { width:17vh; height:17vh; font-size:min(6vh, 30px); }
  #abbtns button span { font-size:min(2.5vh, 11px); }
}