/* Tutorial presentation uses the game's existing sprites, fog and action camera. */
dialog.guide-dialog { width:min(1010px,calc(100vw - 24px)); padding:20px; }
.guide-session[hidden],.guide-chooser[hidden],.guide-primary[hidden],.guide-controls button[hidden] { display:none; }
.guide-progress-line { display:flex; align-items:center; gap:16px; margin:0 0 12px; }
.guide-chapter { margin:0; font-size:.85rem; flex:1; }
.guide-progress-line progress { width:110px; height:6px; accent-color:#6e6035; }
.guide-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr); gap:22px; align-items:start; }
/* Short landscape windows may scroll the dialog, but must keep readable squares. */
.guide-field { min-width:0; width:100%; max-width:max(320px,calc(100dvh - 320px)); justify-self:center; }
.guide-budget { margin:0 0 9px; font-size:.82rem; font-weight:600; line-height:1.5; min-height:2.5em; }
.guide-viewport { border:3px ridge #997747; border-radius:3px; overflow:clip; }
.guide-board { --terrain:url('./assets/terrain/human-citadel-v2.png'); width:100%; margin:0; border:0; transform-origin:0 0; }
.guide-board > .guide-square { aspect-ratio:1; cursor:pointer; touch-action:manipulation; }
.guide-board > .guide-square.home-south { background-color:#27507abb; }
.guide-board > .guide-square.home-north { background-color:#74392db0; }
.guide-board > .guide-square.guide-island { background-color:#6b703994; box-shadow:inset 0 0 0 2px #e4c273; }
.guide-board > .guide-square.guide-required { z-index:4; box-shadow:inset 0 0 0 3px #fff1a7, inset 0 0 16px #ffd56c50; }
.guide-board > .guide-square.guide-actor::after { content:''; position:absolute; inset:3px; width:auto; height:auto; border:2px solid #ffe6a3; border-radius:3px; background:none; }
.guide-board > .guide-square:focus-visible { outline:3px solid #b3f0ff; outline-offset:-3px; z-index:5; }
.guide-coordinate { position:absolute; left:3px; bottom:2px; z-index:5; color:#f2e5c9; font:10px/1 sans-serif; background:#18201dcc; padding:1px; pointer-events:none; }
.guide-key { margin:9px 0 0; font-size:.75rem; line-height:1.4; }
.guide-speaker { display:flex; align-items:center; gap:10px; margin:0 0 12px; font:1rem Georgia,serif; }
.guide-portrait { width:60px; height:60px; flex:none; }
.guide-portrait > .token.portrait { width:60px; height:60px; }
.guide-bubble { padding:16px; border:1px solid #95703e; border-radius:3px 16px 16px 16px; background:#fff0cd8a; position:relative; box-shadow:0 3px 10px #5a3c1615; }
.guide-bubble h3 { margin:0 0 9px; font-size:1.1rem; }
.guide-bubble p { font-size:.94rem; line-height:1.6; margin:0; }
.guide-bubble .guide-prompt { margin:13px 0 0; border-top:1px solid #98774355; padding-top:10px; font-weight:700; line-height:1.4; }
.guide-status { margin:12px 0 0; min-height:2.8em; font-size:.85rem; line-height:1.4; }
.guide-primary { width:100%; min-height:44px; }
.guide-controls { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; padding-top:14px; border-top:1px solid #93723f66; }
.guide-controls .button { min-height:44px; font-size:.82rem; }
.guide-chooser > p { font-size:.94rem; line-height:1.5; }
.guide-completion:empty { display:none; }
.guide-completion { padding:10px 12px; background:#68845328; border-left:3px solid #627a42; }
.guide-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.guide-choice { display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:15px; border:1px solid #92723f; border-radius:4px; text-align:left; color:#49321d; background:#f5e4c066; font:inherit; cursor:pointer; min-height:44px; }
.guide-choice:first-child { grid-column:1 / -1; background:#fff2d099; }
.guide-choice:hover,.guide-choice:focus-visible { background:#fff3d1; outline:2px solid #78613a; }
.guide-choice strong { font:1.15rem Georgia,serif; }
.guide-choice span { font-size:.87rem; line-height:1.4; }
.guide-choice .guide-duration { color:#775737; font-size:.78rem; }
@media(prefers-reduced-motion:no-preference) { .guide-board .guide-required { animation:guide-cue 1.8s ease-in-out infinite; } }
@keyframes guide-cue { 50% { box-shadow:inset 0 0 0 3px #fff7d2,inset 0 0 24px #ffe6a377; } }
@media(max-width:720px) {
  dialog.guide-dialog { padding:12px; width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
  .guide-dialog .dialog-heading { gap:8px; margin-bottom:10px; }
  .guide-dialog .dialog-heading h2 { font-size:1.35rem; }
  .guide-dialog .dialog-heading .button { min-height:44px; padding:7px 10px; font-size:.8rem; }
  .guide-layout { display:flex; flex-direction:column; gap:10px; }
  .guide-field,.guide-conversation { width:100%; max-width:none; }
  .guide-conversation { display:contents; }
  .guide-speaker { display:none; }
  .guide-bubble { order:-1; padding:11px; border-radius:3px 12px 12px 12px; }
  .guide-bubble h3 { font-size:1rem; margin-bottom:5px; }
  .guide-bubble p { font-size:.86rem; line-height:1.45; }
  .guide-bubble .guide-prompt { margin-top:8px; padding-top:7px; }
  .guide-budget { min-height:0; font-size:.76rem; margin-bottom:6px; }
  .guide-status { margin:0; min-height:0; }
  .guide-status:empty { display:none; }
  .guide-controls { margin-top:10px; padding-top:9px; gap:7px; }
  .guide-controls .button { padding:7px 9px; font-size:.75rem; }
  .guide-key { font-size:.68rem; margin-top:5px; }
  .guide-progress-line { margin-bottom:8px; gap:8px; }
  .guide-chapter { font-size:.75rem; }
  .guide-progress-line progress { width:70px; }
  .guide-choices { grid-template-columns:1fr; }
}