/* Field guidance stays outside the play/input surface. No fullscreen intercept layer. */
.field-guide { position:absolute; z-index:65; top:16px; right:18px; pointer-events:none; }
.field-guide button { pointer-events:auto; cursor:pointer; font-family:Kanit,sans-serif; touch-action:manipulation; }
#field-guide-toggle { min-width:64px; min-height:44px; border:1px solid #927747; border-radius:12px; background:rgba(18,24,25,.94); color:#ffdda0; padding:0 16px; font-size:13px; font-weight:600; box-shadow:0 3px 12px #0004; }
#field-guide-toggle[aria-expanded="true"] { background:#493b21; }
#field-guide-panel { pointer-events:auto; width:300px; margin-top:9px; padding:16px; border:1px solid #ad894c99; border-radius:16px; color:#f5f0e5; background:linear-gradient(135deg,rgba(24,32,34,.98),rgba(12,21,25,.97)); box-shadow:0 12px 30px #0005; }
#field-guide-panel[hidden],#field-guide-action[hidden] { display:none; }
.guide-eyebrow { display:flex; justify-content:space-between; gap:16px; font-size:10px; color:#d9b676; letter-spacing:.025em; }
.guide-count { font-variant-numeric:tabular-nums; }
.guide-title { display:block; margin:7px 0 5px; font-size:19px; font-weight:600; line-height:1.25; }
.guide-copy { margin:0; min-height:36px; font-size:12px; line-height:1.55; color:#d4d9d6; }
.guide-progress { display:flex; gap:5px; margin:12px 0; }
.guide-progress i { height:3px; flex:1; border-radius:3px; background:#536061; }
.guide-progress i.complete { background:#eac784; }
.guide-actions { display:flex; justify-content:space-between; gap:8px; }
.guide-actions button { min-height:36px; padding:6px 12px; font-size:11px; border-radius:8px; border:1px solid #77878366; }
#field-guide-action { background:#e8c482; color:#24241e; font-weight:600; }
#field-guide-dismiss { color:#c3ceca; background:transparent; margin-left:auto; }
.field-guide button:focus-visible { outline:3px solid #ffe0a3; outline-offset:3px; }
body.msx-game-stage .chat-box-log { background:linear-gradient(90deg,rgba(6,14,19,.72),rgba(6,14,19,.45)); }
@media (pointer:coarse) and (max-width:1024px) {
  .field-guide { top:calc(env(safe-area-inset-top) + 8px); right:calc(env(safe-area-inset-right) + 160px); }
  #field-guide-toggle { min-width:54px; padding:0 9px; font-size:11px; }
  #field-guide-panel { position:absolute; top:42px; right:-150px; width:min(290px,calc(100vw - 28px)); padding:12px 14px; }
  .guide-title { font-size:17px; } .guide-copy { font-size:11px; min-height:32px; }
  .guide-progress { margin:9px 0; } .guide-actions button { min-height:40px; }
  body.msx-game-stage .mobile-top-actions button { min-height:44px; }
  #stage-game.mobile-chat-open #field-guide-panel, #stage-game.mobile-menu-open #field-guide-panel { display:none; }
}
@media (orientation:portrait) and (pointer:coarse) and (max-width:1024px) {
  body.msx-game-stage .field-dpad { bottom:calc(env(safe-area-inset-bottom) + 76px); }
  body.msx-game-stage .mobile-combat-controls { bottom:calc(env(safe-area-inset-bottom) + 76px); }
  body.msx-game-stage .game-bottom-bar { width:calc(100vw - 24px); }
  body.msx-game-stage #stage-game.mobile-chat-open .game-bottom-bar { width:calc(100vw - 24px); }
  #field-guide-panel { top:90px; }
}
@media (prefers-reduced-motion:no-preference) {
  #field-guide-panel:not([hidden]) { animation:guide-reveal .18s ease-out; }
  #stage-game[data-guide-step="move"] .pad-left, #stage-game[data-guide-step="move"] .pad-right,
  #stage-game[data-guide-step="jump"] .mobile-action-jump { box-shadow:0 0 0 2px #eac784,0 0 20px #eac78455; }
  @keyframes guide-reveal { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
}
@media (pointer:coarse) and (max-width:1024px) {
  body.msx-game-stage .field-dpad { opacity:1; }
  body.msx-game-stage .field-dpad button { background:rgba(16,26,31,.88); border:1px solid #e1c89399; color:#fff7e7; text-shadow:0 1px 2px #000; box-shadow:0 3px 8px #0004; }
  body.msx-game-stage .field-dpad button.is-down { background:#846631; transform:translateY(1px); }
  body.msx-game-stage .mobile-action-jump { background:rgba(29,75,96,.9); border-color:#93c4d4; }
  body.msx-game-stage .mobile-action-attack { background:rgba(109,50,34,.9); border-color:#d2a189; }
  body.msx-game-stage #stage-game[data-guide-step="move"] .pad-left,
  body.msx-game-stage #stage-game[data-guide-step="move"] .pad-right { outline:2px solid #f3cf85; outline-offset:2px; }
}