/* ちしきワールド — 3Dボクセル世界のUI（設計正本: docs/world-design.md） */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #0b1030; }
body { font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif; -webkit-user-select: none; user-select: none; touch-action: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#world-root { position: fixed; inset: 0; }
.w-loading { color: #fff; text-align: center; margin-top: 40vh; font-weight: 700; }

#world-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ── 画面中央クロスヘア（PC時のみ表示） ── */
.w-cross { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: none; opacity: .7; display: none; }
.w-cross::before, .w-cross::after { content: ''; position: absolute; background: #fff; border-radius: 2px; box-shadow: 0 0 3px rgba(0,0,0,.6); }
.w-cross::before { left: 8px; top: 0; width: 2px; height: 18px; }
.w-cross::after { left: 0; top: 8px; width: 18px; height: 2px; }
body.pc-mode .w-cross { display: block; }

/* ── 上バー ── */
.w-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: calc(6px + env(safe-area-inset-top)) 10px 6px; background: linear-gradient(rgba(10,16,40,.55), rgba(10,16,40,0)); z-index: 20; }
.w-top .w-btn { flex: none; }
.w-title { color: #fff; font-weight: 900; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,.7); white-space: nowrap; }
.w-lv { flex: 1; min-width: 60px; max-width: 220px; }
.w-lv .lv-label { color: #ffe98a; font-size: 12px; font-weight: 900; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.w-lv .lv-bar { height: 8px; background: rgba(255,255,255,.25); border-radius: 6px; overflow: hidden; margin-top: 2px; }
.w-lv .lv-fill { height: 100%; background: linear-gradient(90deg, #ffd34e, #ff9d3c); border-radius: 6px; transition: width .3s; }

/* ── 共通ボタン ── */
.w-btn { appearance: none; border: none; border-radius: 14px; background: rgba(20,28,60,.72); color: #fff; font-family: inherit; font-weight: 900; font-size: 15px; padding: 9px 13px; box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18); cursor: pointer; touch-action: manipulation; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.w-btn:active { transform: translateY(2px); box-shadow: 0 0 3px rgba(0,0,0,.35); }
.w-btn.on { background: #ffd34e; color: #4a3000; }

/* ── クエストトラッカー・時計 ── */
.w-quest { position: absolute; top: calc(62px + env(safe-area-inset-top)); left: 10px; z-index: 18; appearance: none; border: none; background: rgba(20,28,60,.8); color: #ffe98a; font-family: inherit; font-weight: 900; font-size: 13px; padding: 8px 14px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.35); cursor: pointer; max-width: 74vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-quest:active { transform: translateY(2px); }
.w-clock { font-size: 17px; flex: none; }

/* ── NPC会話・クエスト詳細 ── */
.w-npc-line { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid #e4dcc8; border-radius: 14px; padding: 10px; margin: 6px 0; }
.w-npc-line h2 { margin: 0 0 6px; }
.w-npc-face { width: 64px; height: 64px; image-rendering: pixelated; flex: none; background: #dcebff; border-radius: 12px; }
.w-reward { font-weight: 900; color: #8a6d00; background: #fff3cf; border-radius: 10px; padding: 8px 10px; }
.w-reward-next { font-weight: 900; color: #2a5aa0; }
.w-quest-detail { background: #fff; border: 1px solid #e4dcc8; border-radius: 14px; padding: 10px 12px; line-height: 1.9; }
body.theme-ritsu .w-npc-line .q-text { font-size: 20px; }

/* ── 下HUD: ホットバー＋モード ── */
.w-bottom { position: absolute; left: 0; right: 0; bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 20; pointer-events: none; }
.w-bottom > * { pointer-events: auto; }
.w-modebar { display: flex; gap: 8px; }
.w-modebar .w-btn { opacity: .62; }
.w-modebar .w-btn.on { opacity: 1; }
.w-hotbar { display: flex; gap: 4px; background: rgba(10,16,40,.55); padding: 5px; border-radius: 14px; max-width: 96vw; overflow-x: auto; }
.w-slot { width: 46px; height: 46px; border-radius: 10px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); position: relative; flex: none; padding: 0; cursor: pointer; }
.w-slot canvas { width: 100%; height: 100%; border-radius: 8px; image-rendering: pixelated; display: block; }
.w-slot .cnt { position: absolute; right: 2px; bottom: 1px; color: #fff; font-size: 11px; font-weight: 900; text-shadow: 0 1px 2px #000; }
.w-slot.sel { border-color: #ffd34e; box-shadow: 0 0 8px rgba(255,211,78,.8); }
.w-slot.empty { opacity: .35; }

/* ── タッチ操作: ジョイスティック＋ジャンプ ── */
.w-stick { position: absolute; left: 18px; bottom: calc(86px + env(safe-area-inset-bottom)); width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.3); z-index: 15; display: none; }
.w-stick .knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.w-jump { position: absolute; right: 20px; bottom: calc(96px + env(safe-area-inset-bottom)); width: 74px; height: 74px; border-radius: 50%; font-size: 26px; z-index: 15; display: none; }
body.touch-mode .w-stick, body.touch-mode .w-jump { display: block; }

/* ── モーダル（クイズ・ずかん・あそびかた） ── */
.w-modal-wrap { position: fixed; inset: 0; background: rgba(8,12,30,.66); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 14px; }
.w-modal { background: #fff9ec; border-radius: 20px; max-width: 520px; width: 100%; max-height: 86vh; overflow-y: auto; padding: 18px 16px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.w-modal h2 { margin: 0 0 10px; font-size: 19px; color: #4a3000; }
.w-modal .q-text { font-size: 19px; font-weight: 700; color: #33302e; margin: 8px 0 14px; line-height: 1.7; }
body.theme-ritsu .w-modal .q-text { font-size: 22px; }
.w-modal .q-img { text-align: center; margin: 6px 0 12px; }
.w-modal .q-img img { width: 130px; border-radius: 8px; border: 1px solid #d8cfb8; background: #fff; }
.w-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.w-choices.col1 { grid-template-columns: 1fr; }
.w-choice { appearance: none; border: 2px solid #d8cfb8; border-radius: 14px; background: #fff; font-family: inherit; font-size: 17px; font-weight: 700; color: #33302e; padding: 12px 10px; min-height: 56px; cursor: pointer; line-height: 1.5; }
body.theme-ritsu .w-choice { font-size: 20px; }
.w-choice:active { transform: translateY(2px); }
.w-choice.ok { background: #d9f3c8; border-color: #5db04f; }
.w-choice.ng { background: #ffe1e1; border-color: #e07070; }
.w-choice:disabled { opacity: .55; }
.w-feedback { margin-top: 12px; font-weight: 900; font-size: 17px; min-height: 24px; }
.w-feedback.good { color: #2a7a1e; }
.w-feedback.bad { color: #b0483c; }
body.theme-ritsu .w-feedback { font-size: 20px; }
.w-hint { margin-top: 8px; padding: 8px 10px; background: #fff3cf; border-radius: 10px; color: #6b5200; font-size: 14px; }
.w-modal .w-btn-row { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }
.w-modal .w-btn { background: #5db04f; }
.w-modal .w-btn.ghost { background: #b7b0a0; }

/* ずかん */
.w-zukan-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0; }
.w-zukan-cell { text-align: center; background: #fff; border-radius: 12px; padding: 8px 2px; border: 1px solid #e4dcc8; }
.w-zukan-cell .em { font-size: 26px; }
.w-zukan-cell .nm { font-size: 11px; color: #6b6250; font-weight: 700; }
.w-zukan-cell .ct { font-size: 15px; font-weight: 900; color: #33302e; }
.w-rank-box { margin-top: 10px; background: #fff; border-radius: 12px; padding: 10px; border: 1px solid #e4dcc8; font-size: 14px; color: #33302e; }
.w-rank-box .rank-title { font-weight: 900; margin-bottom: 4px; }
.w-rank-box .rank-row.me { color: #2a7a1e; font-weight: 900; }

/* あそびかた・kid選択・フォールバック */
.w-help-card { text-align: center; }
.w-help-card .big { font-size: 44px; margin: 8px 0; }
.w-help-card p { font-size: 16px; line-height: 1.9; color: #33302e; }
.w-kidpick { display: flex; gap: 12px; justify-content: center; margin: 16px 0; }
.w-kidpick a { display: block; text-decoration: none; background: #fff; border: 2px solid #d8cfb8; border-radius: 16px; padding: 18px 22px; font-size: 18px; font-weight: 900; color: #33302e; }
.w-kidpick a:active { transform: translateY(2px); }

/* 演出: とったよトースト・かけら */
.w-toast { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); background: rgba(20,28,60,.9); color: #fff; font-weight: 900; padding: 10px 18px; border-radius: 999px; z-index: 60; font-size: 16px; box-shadow: 0 4px 14px rgba(0,0,0,.4); animation: w-toast-pop 1.8s ease forwards; pointer-events: none; white-space: nowrap; }
@keyframes w-toast-pop { 0% { opacity: 0; transform: translate(-50%, 10px); } 12% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px); } }
.w-frag { position: fixed; width: 10px; height: 10px; z-index: 45; pointer-events: none; animation: w-frag-fly .7s ease-out forwards; image-rendering: pixelated; }
@keyframes w-frag-fly { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(180deg); } }
@media (prefers-reduced-motion: reduce) {
  .w-frag { display: none; }
  .w-toast { animation-duration: 2.4s; }
}

/* 水中の色かぶせ */
.w-under { position: absolute; inset: 0; background: rgba(40,110,200,.35); z-index: 10; pointer-events: none; display: none; }

/* ── 小さい画面（スマホ）向け調整 ── */
@media (max-width: 480px) {
  .w-title { font-size: 12px; }
  .w-lv { max-width: 130px; }
  .w-btn { font-size: 14px; padding: 7px 10px; }
  .w-quest { font-size: 12px; top: calc(58px + env(safe-area-inset-top)); }
  .w-slot { width: 40px; height: 40px; }
  .w-stick { width: 104px; height: 104px; bottom: calc(78px + env(safe-area-inset-bottom)); }
  .w-jump { width: 64px; height: 64px; bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (max-height: 420px) { /* スマホ横持ち */
  .w-quest { top: calc(54px + env(safe-area-inset-top)); }
  .w-bottom { bottom: 4px; }
  .w-stick { bottom: 64px; }
  .w-jump { bottom: 72px; }
}