.tutorial-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#030a12bd;backdrop-filter:blur(5px);padding:20px;color:#eee2c7}.tutorial-card{width:min(580px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:#111c24;border:1px solid #b99a60;box-shadow:0 20px 80px #000b}.tutorial-art{height:170px;background-position:center 45%;background-size:cover;display:flex;align-items:flex-end;padding:20px 28px 4px}.tutorial-art span{font-size:12px;letter-spacing:5px;color:#ebcf92}.tutorial-copy{padding:20px 28px 25px}.tutorial-progress{color:#a99b80;font-size:11px;letter-spacing:1px}.tutorial-copy h2{font-size:29px;font-weight:400;line-height:1.4;margin:12px 0;outline:0}.tutorial-description{font-size:17px;line-height:1.85;word-break:keep-all;color:#dedbd2}.tutorial-controls{border-left:2px solid #c8a766;background:#ddbc7110;padding:12px 15px;font-size:13px;line-height:1.7;margin:20px 0;color:#edce93}.tutorial-footer{display:flex;align-items:center;justify-content:space-between;gap:14px}.tutorial-footer label{font-size:12px;color:#c7c6bd;cursor:pointer}.tutorial-footer label[hidden]{display:none}.tutorial-footer input{accent-color:#d1b374}.tutorial-footer button{margin-left:auto;border:1px solid #d6bd7f;background:linear-gradient(#c9ab70,#a08147);color:#16191b;font:17px 'YutChronicle',serif;padding:12px 19px;cursor:pointer}.tutorial-note{display:block;font-size:11px;color:#9aa7aa;margin-top:15px}.tutorial-card button:focus-visible,.tutorial-card input:focus-visible{outline:2px solid #fff2b7;outline-offset:4px}@media(max-width:600px){.tutorial-overlay{padding:14px}.tutorial-card{max-height:calc(100dvh - 28px)}.tutorial-art{height:125px;padding:16px 20px 0}.tutorial-copy{padding:18px 20px}.tutorial-copy h2{font-size:24px}.tutorial-description{font-size:15px}.tutorial-footer{flex-wrap:wrap}.tutorial-footer button{font-size:15px}}@media(max-height:600px){.tutorial-art{height:70px}.tutorial-copy{padding:12px 20px}.tutorial-copy h2{font-size:22px;margin:8px 0}.tutorial-description{font-size:14px;line-height:1.6}.tutorial-controls{margin:10px 0;padding:8px 12px}}
#settings #tutorialRepeat{display:inline-block;width:auto;margin:0 0 0 8px;accent-color:#d1b374}
.faction-picker .tutorial-card{width:min(680px,100%)}.faction-options{display:flex;gap:16px;margin:22px 0}.faction-options button{flex:1;min-width:0;overflow:hidden;padding:0 0 16px;background:#162939;border:1px solid #7ea8c4;color:#e5d4ad;font-family:inherit;cursor:pointer}.faction-options button[data-side=H]{background:#39241e;border-color:#c3886a}.faction-options button:hover{filter:brightness(1.2)}.faction-options b{display:block;font-size:25px;font-weight:400;margin:14px 0 6px}.faction-options small{font-size:12px}.faction-art{display:block;height:195px;background-image:url(./assets/title-battle.webp);background-size:auto 250px}.faction-art.scholar{background-position:left center}.faction-art.dokkaebi{background-position:right center}.faction-back{background:transparent;border:0;color:#c2b69c;font:14px inherit;cursor:pointer;padding:8px 0}@media(max-width:600px){.faction-options{gap:10px}.faction-art{height:150px;background-size:auto 205px}.faction-options b{font-size:21px}.faction-options small{font-size:10px}}
.reaction-zone .trigram{display:block;font:30px sans-serif;line-height:1.1;margin-bottom:4px}.reaction-zone>b{font:25px YutChronicle,serif!important}.reaction-zone>small{margin-top:5px}@media(max-width:600px){.reaction-zone .trigram{font-size:24px}.reaction-zone>b{font-size:23px!important}}
.archery-game #miniField{height:250px;background:linear-gradient(#879b99,#c1b691 52%,#52694b 53%,#2f493f)}.archery-target{position:absolute;left:50%;top:50%;width:140px;height:140px;margin:-70px;filter:drop-shadow(0 5px 3px #0007)}.archery-target svg{width:140px;height:140px;position:relative;z-index:1}.archery-target>i{position:absolute;width:7px;height:95px;left:67px;top:65px;background:#725b3d;transform:rotate(8deg)}.archery-sight{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;border:1px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #1119;z-index:4;pointer-events:none}.archery-sight:before,.archery-sight:after{content:"";position:absolute;background:#fff;box-shadow:0 0 2px #000}.archery-sight:before{width:46px;height:1px;left:-7px;top:16px}.archery-sight:after{height:46px;width:1px;top:-7px;left:16px}.archery-bow{position:absolute;bottom:-105px;left:50%;width:220px;height:155px;margin-left:-110px;border:9px solid #805f35;border-bottom:0;border-radius:50%;box-shadow:0 -2px 0 #d7b575;pointer-events:none}.arrow-impact{position:absolute;left:50%;top:50%;width:5px;height:5px;background:#f4de9a;border-radius:50%;display:none;z-index:5}.arrow-impact.shot{display:block;box-shadow:0 0 12px 4px #fff3b8;animation:arrowLand .25s ease-out}.arrow-impact:after{content:"";position:absolute;width:4px;height:35px;background:#593c25;bottom:0;left:0;transform-origin:bottom;transform:rotate(-35deg)}@keyframes arrowLand{from{scale:4;opacity:0}to{scale:1;opacity:1}}@media(max-width:600px){.archery-game #miniField{height:225px}}
/* In-world lessons: preserve the visible scene; only the compact caption has a scrim. */
.tutorial-overlay.tutorial-ingame{background:transparent;backdrop-filter:none;padding:0;display:block}.tutorial-ingame .tutorial-card{position:absolute;max-height:calc(100dvh - 80px);overflow:auto;background:linear-gradient(135deg,#122333df,#172832c9);border:1px solid #d4bc7b99;border-radius:12px;box-shadow:0 8px 30px #0005;backdrop-filter:blur(3px);animation:guideSlide .2s ease-out}.tutorial-ingame .tutorial-art{display:none}.tutorial-ingame .tutorial-copy{padding:16px 20px}.tutorial-ingame .tutorial-copy h2{font-size:23px;margin:8px 0}.tutorial-ingame .tutorial-description{font-size:15px;line-height:1.65;margin:8px 0}.tutorial-ingame .tutorial-controls{margin:12px 0;padding:8px 10px;font-size:12px;background:#efce7920}.tutorial-ingame .tutorial-footer{gap:8px}.tutorial-ingame .tutorial-footer button{font-size:14px;min-height:44px;padding:9px 14px;border-radius:5px}.tutorial-ingame .tutorial-note{font-size:10px;margin-top:9px}.tutorial-spotlight{position:fixed;border:2px solid #edd28c;border-radius:9px;box-shadow:0 0 18px #efce794d;pointer-events:none}.tutorial-spotlight[hidden]{display:none}@keyframes guideSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-height:500px){.tutorial-ingame .tutorial-copy{padding:10px 15px}.tutorial-ingame .tutorial-description{font-size:13px;line-height:1.4}.tutorial-ingame .tutorial-copy h2{font-size:20px}.tutorial-ingame .tutorial-controls{margin:6px 0}.tutorial-ingame .tutorial-note{display:none}}@media(prefers-reduced-motion:reduce){.tutorial-ingame .tutorial-card{animation:none}}

/* ── 인게임 길잡이 카드 키우기 ──
   폭을 410px 로 못 박아 두니 교실 TV 나 큰 모니터에서 손톱만 하게 보였다.
   폭은 tutorial.mjs 의 place() 가 화면 너비의 30%(420~640px)로 잡고,
   글자는 여기서 키운다. 멀리서 보는 화면이라 본문이 18px 는 돼야 읽힌다. */
.tutorial-ingame .tutorial-copy{padding:20px 24px}
.tutorial-ingame .tutorial-progress{font-size:13px;letter-spacing:1.5px}
.tutorial-ingame .tutorial-copy h2{font-size:27px;margin:10px 0;line-height:1.35}
.tutorial-ingame .tutorial-description{font-size:18px;line-height:1.7;margin:10px 0}
.tutorial-ingame .tutorial-controls{margin:14px 0;padding:11px 14px;font-size:15px;line-height:1.65}
.tutorial-ingame .tutorial-footer button{font-size:17px;min-height:50px;padding:12px 20px}
.tutorial-ingame .tutorial-note{font-size:12px;margin-top:11px}
/* 넓은 화면(교실 TV·큰 모니터)에서는 한 뼘 더 */
@media(min-width:1500px){
  .tutorial-ingame .tutorial-copy{padding:24px 28px}
  .tutorial-ingame .tutorial-copy h2{font-size:31px}
  .tutorial-ingame .tutorial-description{font-size:20px;line-height:1.72}
  .tutorial-ingame .tutorial-controls{font-size:16px}
  .tutorial-ingame .tutorial-footer button{font-size:18px;min-height:54px}
  .tutorial-ingame .tutorial-note{font-size:13px}
}
/* ⚠️ 위 값들이 낮은 화면용 축소 규칙보다 뒤에 있으므로 여기서 다시 줄인다.
   안 그러면 세로 좁은 기기에서 카드가 화면을 덮는다. */
@media(max-height:560px){
  .tutorial-ingame .tutorial-copy{padding:11px 16px}
  .tutorial-ingame .tutorial-copy h2{font-size:21px;margin:6px 0}
  .tutorial-ingame .tutorial-description{font-size:14px;line-height:1.5;margin:6px 0}
  .tutorial-ingame .tutorial-controls{margin:7px 0;padding:7px 10px;font-size:12px}
  .tutorial-ingame .tutorial-footer button{font-size:14px;min-height:42px;padding:8px 13px}
  .tutorial-ingame .tutorial-note{display:none}
}