/* 삼국쌈기 실시간판: 먹색 바탕에 단청 계열 포인트(쪽빛, 주홍, 황토) */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #14110e; color: #efe6d2;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* 왼쪽 위: 장수 패 */
#card { position: fixed; left: 10px; top: 10px; width: 272px; padding: 10px 12px 9px; background: #18130f;
  border-left: 5px solid #888; border-radius: 4px; font-size: 12px; line-height: 1.45; }
#card .head { display: flex; gap: 10px; align-items: flex-start; }
#card .pframe { position: relative; flex: none; width: 68px; height: 68px; border: 2px solid #5a4632; border-radius: 4px; background: #1a1511; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6); }
#card .pframe canvas#h-face { width: 64px; height: 64px; image-rendering: pixelated; display: block; }
#card .pframe .crest { position: absolute; right: -8px; bottom: -8px; width: 24px; height: 24px; image-rendering: pixelated; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.8)); }
#card .headtx { flex: 1; min-width: 0; }
#card .nmrow { display: flex; align-items: baseline; gap: 6px; }
#card .nm { font-size: 17px; font-weight: 700; letter-spacing: 0.5px; }
#card .herotag { display: none; font-size: 10px; color: #1a1511; background: #ffd98a; padding: 0 5px; border-radius: 2px; font-weight: 700; }
#card .rankrow { display: flex; align-items: center; gap: 5px; margin: 1px 0 3px; }
#card .fname2 { color: #cfc4ad; font-size: 11px; }
#card .fac { display: inline-block; padding: 0 6px; border-radius: 2px; color: #fff; font-size: 11px; font-weight: 700; }
#card .hp { position: relative; height: 13px; background: #3a2e26; border-radius: 2px; overflow: hidden; border: 1px solid #1a1511; }
#card .hp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #3fae6a, #8fe08a); transition: width 0.15s; }
#card .hp i.low { background: linear-gradient(90deg, #b5402a, #ff8a5c); }
#card .hp em { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; opacity: 0.8; animation: tick 0.9s infinite; }
@keyframes tick { 0% { opacity: 0.9; } 50% { opacity: 0.2; } 100% { opacity: 0.9; } }
#card .hp span { position: absolute; right: 4px; top: -1px; font-size: 10px; text-shadow: 0 0 2px #000, 0 0 2px #000; }
#card .merit { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 10px; color: #cfc4ad; }
#card .merit canvas { width: 14px; height: 14px; image-rendering: pixelated; }
#card .merit .mbar { width: 54px; height: 6px; background: #3a2e26; border-radius: 2px; overflow: hidden; flex: none; }
#card .merit .mbar i { display: block; height: 100%; background: linear-gradient(90deg, #c8a35a, #ffd98a); }
#card .row2 { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.08); }
#card .troops { display: flex; align-items: center; gap: 6px; }
#card .troops .tt { display: inline-flex; align-items: center; gap: 1px; }
#card .troops canvas { width: 20px; height: 20px; image-rendering: pixelated; }
#card .troops b { color: #efe6d2; font-size: 12px; }
#card .troops .ttot { color: #ffd98a; font-weight: 700; margin-left: 2px; }
#card .coins { display: flex; align-items: center; gap: 3px; }
#card .coins canvas { width: 16px; height: 16px; image-rendering: pixelated; }
#card .coins b { color: #ffd98a; }
#card .gear { margin-top: 6px; display: flex; gap: 4px; cursor: pointer; }
#card .gear .slot { flex: 1; display: flex; align-items: center; gap: 3px; padding: 2px 3px 2px 2px; background: #2a211a; border: 1px solid #777; border-radius: 3px; font-size: 10px; line-height: 1.15; min-width: 0; }
#card .gear .slot.empty { opacity: 0.6; }
#card .gear .slot canvas { width: 30px; height: 30px; image-rendering: pixelated; background: #1a1511; border-radius: 2px; flex: none; }
#card .gear .slot span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#card .gear .slot small { display: block; font-size: 9px; color: #8c816c; }
#card .gear .bag { flex: none; display: flex; align-items: center; gap: 3px; padding: 2px 5px 2px 3px; background: #2a211a; border: 1px solid #5a4632; border-radius: 3px; font-size: 10px; line-height: 1.15; color: #cfc4ad; }
#card .gear .bag.has { border-color: #c8a35a; color: #ffd98a; }
#card .gear .bag canvas { width: 22px; height: 22px; image-rendering: pixelated; }
#card .gear .bag small { display: block; font-size: 9px; color: #8c816c; }
#card .gear:hover .bag { background: #3a2e26; }
#card .chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; min-height: 0; }
#card .chip { font-size: 10px; padding: 1px 6px; border-radius: 10px; background: #3a2e26; color: #efe6d2; border: 1px solid rgba(255,255,255,0.12); }
#card .chip.ride { background: #4a3a1e; border-color: #c8a35a; color: #ffd98a; }
#card .chip.siege { background: #4a2a1e; border-color: #ff8a5c; color: #ffb38a; }
#card .chip.pers { background: #2a3a1e; border-color: #8fe08a; color: #c8f0a0; }
#card .chip.truce { background: #1e3040; border-color: #5fb7ff; color: #9fe0ff; }
#card .chip.night { background: #1e2240; border-color: #7f8fff; color: #c0c8ff; }
#card .chip.dusk { background: #40281e; border-color: #ff9a4a; color: #ffc08a; }
#card .chip.cap { background: #2a2a1e; border-color: #e7c15a; color: #ffe9a8; }
#card .chip.warn { background: #3a1e1e; border-color: #e68c8c; color: #f0c8c8; }
#card .chip.heal { background: #1e3a24; border-color: #8ce68c; color: #c8f0c0; }
#card .chip .chipEmb { width: 16px; height: 16px; vertical-align: -4px; margin-right: 4px; image-rendering: pixelated; }
#card .chip.dead { background: #3a1a1a; border-color: #ff6b6b; color: #ff9c9c; }
#card .st { margin-top: 4px; color: #9e937e; font-size: 11px; }

/* 오른쪽 위: 판세 */
#board { position: fixed; right: 10px; top: 10px; width: 250px; padding: 8px 10px; background: #18130f;
  border-top: 3px solid #b5402a; border-radius: 4px; font-size: 12px; }
#board .time { font-size: 14px; font-weight: 700; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; }
#board .spd button { background: #3a2e26; color: #efe6d2; border: 0; padding: 2px 6px; margin-left: 2px; border-radius: 2px; cursor: pointer; font-size: 11px; }
#board .spd button.on { background: #b5402a; }
#board .clock { display: flex; align-items: center; gap: 6px; padding: 4px 0 6px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 4px; }
#board .clock canvas { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }
#board .clocktx { width: 74px; line-height: 1.1; }
#board .clocktx b { display: block; font-size: 13px; color: #ffd98a; }
#board .clocktx small { font-size: 10px; color: #cfc4ad; }
#board .dayband { position: relative; flex: 1; height: 8px; border-radius: 4px; overflow: hidden; border: 1px solid #1a1511;
  background: linear-gradient(90deg, #f4e7c0 0%, #f4e7c0 12.5%, #ffd25a 12.5%, #ffd25a 62.5%, #ff9a4a 62.5%, #ff9a4a 68.75%, #2a3570 68.75%, #2a3570 93.75%, #7a5a9a 93.75%, #7a5a9a 100%); }
#board .dayband i { position: absolute; top: -1px; bottom: -1px; width: 3px; background: #fff; box-shadow: 0 0 3px #000; margin-left: -1px; }
.frow { display: flex; align-items: center; gap: 5px; margin: 3px 0; }
.frow.dead { opacity: 0.45; }
.frow .fcrest { width: 18px; height: 18px; image-rendering: pixelated; flex: none; }
.fname { width: 40px; font-weight: 700; }
.fcs { flex: 1; display: flex; gap: 2px; flex-wrap: wrap; }
.fcs .ci { display: inline-block; width: 9px; height: 8px; border-radius: 1px; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.5); position: relative; }
.fcs .ci::before { content: ''; position: absolute; left: 1px; top: -2px; width: 2px; height: 2px; background: inherit; box-shadow: 3px 0 0 currentColor; }
.fnum { width: 20px; text-align: right; font-weight: 700; }
.truce { color: #9fe0ff; margin-top: 4px; }
.inv { color: #c9b6ff; margin-top: 2px; font-size: 11px; }

/* 행장(인벤토리) */
.overlay.inv { background: rgba(8, 6, 5, 0.72); z-index: 25; align-items: center; }
.invpanel { width: 940px; max-width: 97vw; max-height: 94vh; overflow: auto; background: #1e1711; border: 2px solid #c8a35a; border-radius: 6px; padding: 12px 16px 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.invhead { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #3a2e26; padding-bottom: 8px; margin-bottom: 10px; }
.invhead h2 { margin: 0; font-size: 20px; color: #f3d48a; letter-spacing: 2px; }
.invtip { flex: 1; font-size: 11px; color: #8c816c; }
.invclose { background: #3a2e26; color: #efe6d2; border: 1px solid #5a4632; padding: 4px 12px; border-radius: 3px; cursor: pointer; font-family: inherit; }
.invbody { display: flex; gap: 14px; }
.invcol { background: #161109; border: 1px solid #3a2e26; border-radius: 4px; padding: 10px; }
.invleft { width: 250px; flex: none; }
.invmid { width: 250px; flex: none; }
.invright { flex: 1; min-width: 0; }
.invcol h4 { margin: 0 0 8px; font-size: 12px; color: #c8a35a; letter-spacing: 1px; }
.invleft .pframe { position: relative; width: 100px; height: 100px; margin: 0 auto 6px; border: 3px solid #5a4632; border-radius: 4px; background: #1a1511; }
.invleft .pframe canvas { width: 96px; height: 96px; image-rendering: pixelated; display: block; }
.invleft .pframe .crest { position: absolute; right: -12px; bottom: -12px; width: 28px; height: 28px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.8)); }
.pinfo h3 { margin: 6px 0 2px; text-align: center; font-size: 18px; }
.pinfo h3 em { font-style: normal; font-size: 10px; color: #1a1511; background: #ffd98a; padding: 0 5px; border-radius: 2px; vertical-align: 3px; }
.pinfo .rank { text-align: center; color: #fff; font-size: 11px; font-weight: 700; padding: 1px 0; border-radius: 2px; margin-bottom: 6px; }
.pinfo .mrow { font-size: 11px; color: #cfc4ad; margin: 3px 0; }
.pinfo .mrow .stb { margin-top: 2px; }
.stb { height: 6px; background: #3a2e26; border-radius: 2px; overflow: hidden; }
.stb i { display: block; height: 100%; }
.pinfo .derived { font-size: 10px; color: #9e937e; margin: 6px 0 4px; line-height: 1.4; }
.pinfo .stats .stl { display: flex; align-items: center; gap: 6px; font-size: 11px; margin: 2px 0; }
.pinfo .stats .stl span { width: 28px; color: #cfc4ad; }
.pinfo .stats .stl .stb { flex: 1; }
.pinfo .stats .stl b { width: 24px; text-align: right; }
.invleft .troops { margin-top: 8px; border-top: 1px solid #3a2e26; padding-top: 6px; }
.invleft .troops h4 { margin-bottom: 4px; }
.invleft .trow { display: flex; align-items: center; gap: 6px; font-size: 11px; margin: 2px 0; }
.invleft .trow canvas { width: 28px; height: 28px; image-rendering: pixelated; }
.invleft .trow span { width: 56px; }
.invleft .trow b { width: 20px; text-align: right; color: #ffd98a; }
.invleft .trow small { color: #8c816c; font-size: 10px; }
.eslot { display: flex; align-items: center; gap: 10px; padding: 6px; margin-bottom: 8px; background: #221b15; border: 2px solid #4a3a2e; border-radius: 4px; }
.eslot.empty { opacity: 0.75; }
.eslot canvas { width: 64px; height: 64px; image-rendering: pixelated; background: #1a1511; border-radius: 3px; flex: none; }
.eslot .etx { min-width: 0; font-size: 11px; line-height: 1.35; }
.eslot .etx small { display: block; color: #8c816c; font-size: 10px; }
.eslot .etx b { display: block; font-size: 13px; }
.eslot .etx span { display: block; color: #cfc4ad; font-size: 10px; }
.invmid .money { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; }
.invmid .money canvas { width: 22px; height: 22px; image-rendering: pixelated; }
.invmid .money b { color: #ffd98a; }
.invmid .money small { color: #8c816c; font-size: 10px; }
.invmid .merchant { margin-top: 6px; font-size: 10px; padding: 4px 6px; border-radius: 3px; line-height: 1.4; }
.invmid .merchant.on { background: #243a24; color: #c8f0a0; }
.invmid .merchant.off { background: #2a221c; color: #9e937e; }
.invbagtitle { font-size: 12px; color: #c8a35a; letter-spacing: 1px; margin-bottom: 8px; }
.invbagtitle b { color: #ffd98a; }
.invgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bslot { position: relative; aspect-ratio: 1; background: #221b15; border: 2px solid #3a2e26; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bslot.empty { background: #1a1410; }
.bslot:hover { background: #2e241c; }
.bslot.sel { outline: 2px solid #ffd98a; outline-offset: 1px; background: #33281f; }
.bslot canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.bslot i { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; border-radius: 2px; }
.bslot em { position: absolute; right: 4px; top: 2px; font-style: normal; font-size: 12px; color: #8fe08a; font-weight: 700; }
.invdetail { margin-top: 10px; min-height: 72px; background: #221b15; border: 1px solid #3a2e26; border-radius: 4px; padding: 8px 10px; font-size: 11px; line-height: 1.5; }
.invdetail .dname { font-size: 14px; font-weight: 700; }
.invdetail .dkind { color: #9e937e; font-size: 10px; }
.invdetail .ddesc { color: #cfc4ad; }
.invdetail .ddiff span { margin-right: 8px; font-weight: 700; }
.invdetail .ddiff .up { color: #8fe08a; }
.invdetail .ddiff .down { color: #ff8a7a; }
.invdetail .ddiff .same { color: #8c816c; font-weight: 400; }
.invdetail .dempty { color: #8c816c; }
.invacts { display: flex; gap: 6px; margin-top: 8px; }
.invacts button { flex: 1; background: #33281f; color: #efe6d2; border: 1px solid #5a4632; border-radius: 3px; padding: 7px 4px; cursor: pointer; font-family: inherit; font-size: 12px; }
.invacts button:hover { background: #46362a; }
.invacts button b { color: #ffd98a; margin-right: 4px; }
.invacts button.warn { border-color: #7a3a2a; }
.invacts button:disabled { opacity: 0.4; cursor: default; }

/* 왼쪽 아래: 미니맵 */
#miniwrap { position: fixed; left: 10px; bottom: 10px; padding: 4px; background: rgba(24, 19, 15, 0.86); border-radius: 4px; border-bottom: 3px solid #2c6e7f; }
#mini { display: block; width: 160px; height: 200px; image-rendering: pixelated; }
#legend { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 6px; margin-top: 4px; font-size: 10px; color: #cfc4ad; }
#legend div { display: flex; align-items: center; gap: 3px; }
#legend canvas { width: 18px; height: 18px; image-rendering: pixelated; }

/* 오른쪽 아래: 기록 */
#log { position: fixed; right: 10px; bottom: 10px; width: 360px; max-width: 46vw; padding: 6px 10px; background: rgba(24, 19, 15, 0.78);
  border-radius: 4px; font-size: 12px; line-height: 1.45; pointer-events: none; }
#log span { color: #8c816c; font-size: 10px; }

/* 가운데 아래: 상호작용 안내 */
#hint { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); padding: 6px 14px; background: rgba(181, 64, 42, 0.92);
  color: #fff; border-radius: 3px; font-weight: 700; font-size: 13px; display: none; pointer-events: none; }

/* 메뉴 */
#menu { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 460px; max-width: 94vw; padding: 14px 16px;
  background: #221b15; border: 2px solid #c8a35a; border-radius: 6px; display: none; z-index: 20; }
#menu h3 { margin: 0 0 4px; color: #ffd98a; }
#menu .mcoins { color: #cfc4ad; font-size: 12px; margin-bottom: 8px; }
#menu button { display: block; width: 100%; text-align: left; margin: 4px 0; padding: 7px 10px; background: #33281f; color: #efe6d2;
  border: 1px solid #5a4632; border-radius: 3px; cursor: pointer; font-size: 13px; font-family: inherit; }
#menu button:hover { background: #46362a; }
#menu button.poor { opacity: 0.55; }
#menu button b { color: #ffd98a; margin-right: 6px; }
#menu .mfoot { font-size: 11px; color: #8c816c; margin-top: 6px; }

/* 시작, 끝 화면 */
.overlay { position: fixed; inset: 0; background: radial-gradient(circle at 50% 30%, #2b2119, #0f0c0a 75%); display: flex; align-items: center;
  justify-content: center; z-index: 30; overflow: auto; }
.panel { width: 760px; max-width: 96vw; padding: 22px 26px; }
.panel h1 { margin: 0; font-size: 34px; letter-spacing: 2px; color: #f3d48a; }
.panel h1 small { font-size: 14px; color: #b9ab8e; margin-left: 10px; letter-spacing: 0; }
.panel p.lead { color: #cfc4ad; margin: 6px 0 16px; }
.go { background: #b5402a; color: #fff; border: 0; padding: 10px 28px; font-size: 16px; font-weight: 700; border-radius: 3px; cursor: pointer; font-family: inherit; }
.keys { margin-top: 14px; font-size: 12px; color: #a99d86; line-height: 1.7; }
.keys kbd { background: #33281f; border: 1px solid #5a4632; border-radius: 3px; padding: 0 5px; color: #efe6d2; }
.timeline { max-height: 240px; overflow: auto; font-size: 12px; color: #cfc4ad; background: #1a1511; padding: 8px 10px; border-radius: 4px; margin: 10px 0; }

/* 시작 화면 */
#start { display: block; background: #0e0b09; }
#startbg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#start .sv { position: relative; max-width: 1180px; margin: 0; padding: 30px 40px 20px 6vw; min-height: 100%; display: flex; flex-direction: column; gap: 18px; }
.shead .logo { display: flex; align-items: baseline; gap: 14px; }
.shead .lg-han { font-size: 22px; color: #b5402a; letter-spacing: 6px; border: 2px solid #b5402a; padding: 2px 6px 2px 10px; border-radius: 3px; font-weight: 700; }
.shead h1 { margin: 0; font-size: 54px; letter-spacing: 6px; color: #f3d48a; text-shadow: 0 3px 0 #5a3a12, 0 0 24px rgba(243,212,138,0.18); }
.shead .tag { margin: 8px 0 0; max-width: 640px; color: #d8ccb2; font-size: 15px; line-height: 1.6; }
.steptitle { font-size: 13px; color: #c8a35a; letter-spacing: 1px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.steptitle b { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: #c8a35a; color: #1a1410; font-size: 12px; }
.steptitle small { color: #7d725f; letter-spacing: 0; }
#start .facs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 900px; }
#start .fcard { position: relative; padding: 12px 14px 12px; background: linear-gradient(180deg, rgba(34,27,21,0.96), rgba(22,17,13,0.96)); border: 2px solid #3a2e26; border-top: 5px solid var(--fc); border-radius: 6px;
  cursor: pointer; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; outline: none; }
#start .fcard:hover { transform: translateY(-2px); border-color: #5a4632; border-top-color: var(--fc); }
#start .fcard.sel { border-color: var(--fl); border-top-color: var(--fc); box-shadow: 0 0 0 1px var(--fc), 0 8px 28px rgba(0,0,0,0.5), inset 0 0 40px color-mix(in srgb, var(--fc) 18%, transparent); transform: translateY(-3px); }
#start .fcard.sel::after { content: '선택'; position: absolute; top: -12px; right: 12px; background: var(--fc); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.ftop { display: flex; align-items: center; gap: 10px; }
.ftop .crest { width: 36px; height: 36px; image-rendering: pixelated; flex: none; }
.ftop .ftt { flex: 1; min-width: 0; }
.ftop h2 { margin: 0; font-size: 22px; color: var(--fl); letter-spacing: 2px; }
.ftop .fsub { font-size: 11px; color: #a99d86; }
.ftop .han { font-size: 30px; color: var(--fc); opacity: 0.85; font-weight: 700; }
.ftop .fkey { position: absolute; top: 8px; left: -9px; width: 18px; height: 18px; font-size: 11px; display: flex; align-items: center; justify-content: center; background: #33281f; border: 1px solid #5a4632; border-radius: 3px; color: #cfc4ad; }
.faces { display: flex; gap: 10px; margin: 10px 0 8px; align-items: flex-start; }
.faces .lord { flex: none; text-align: center; }
.faces .lord canvas { width: 84px; height: 84px; image-rendering: pixelated; border: 2px solid var(--fc); border-radius: 4px; display: block; }
.faces .lord span { display: block; font-size: 11px; color: #ffd98a; margin-top: 3px; }
.faces .heroes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 4px; flex: 1; }
.faces .hf { text-align: center; }
.faces .hf canvas { width: 40px; height: 40px; image-rendering: pixelated; border: 1px solid #3a2e26; border-radius: 3px; display: block; margin: 0 auto; }
.faces .hf span { display: block; font-size: 10px; color: #cfc4ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.traits { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px dashed #3a2e26; font-size: 12px; color: #cfc4ad; line-height: 1.55; }
.traits b { color: var(--fl); margin-right: 3px; }
.fbot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.fbot .units { display: flex; gap: 2px; }
.fbot .units canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.fbot .diff { display: flex; align-items: center; gap: 3px; font-size: 11px; color: #cfc4ad; }
.fbot .diff small { color: #7d725f; margin-right: 2px; }
.fbot .diff i { width: 8px; height: 8px; border-radius: 2px; background: #3a2e26; display: inline-block; }
.fbot .diff i.on { background: var(--fc); box-shadow: 0 0 0 1px var(--fl); }
.fbot .diff b { margin-left: 4px; color: #efe6d2; }
.optrow { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #cfc4ad; }
.seg { display: inline-flex; background: #1a1410; border: 1px solid #4a3a2e; border-radius: 4px; padding: 2px; }
.seg button { background: transparent; color: #cfc4ad; border: 0; padding: 5px 11px; font-size: 13px; border-radius: 3px; cursor: pointer; font-family: inherit; }
.seg button:hover { background: #2a211a; }
.seg button.on { background: #c8a35a; color: #1a1410; font-weight: 700; }
#start .go { --fc: #b5402a; margin-left: auto; display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 28px; font-size: 18px; letter-spacing: 1px; background: var(--fc); border-radius: 5px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.45), 0 0 0 2px rgba(255,255,255,0.12) inset; transition: transform 0.08s, filter 0.12s; }
#start .go:hover { filter: brightness(1.12); }
#start .go:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.45); }
#start .go kbd { font-size: 11px; font-family: inherit; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.3); padding: 1px 6px; border-radius: 3px; font-weight: 400; }
.howto, .setup, .shead { max-width: 900px; }
.keysgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.keysgrid .k { background: rgba(26,20,16,0.88); border: 1px solid #3a2e26; border-radius: 5px; padding: 8px 8px 7px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.keysgrid .kc { min-width: 26px; height: 26px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; background: #efe6d2; color: #1a1410; font-weight: 700; border-radius: 4px; box-shadow: 0 3px 0 #8c816c; font-size: 14px; }
.keysgrid .kc.arrows { display: inline-grid; grid-template-columns: repeat(4, 16px); gap: 2px; background: none; box-shadow: none; padding: 0; }
.keysgrid .kc.arrows i { font-style: normal; height: 20px; display: flex; align-items: center; justify-content: center; background: #efe6d2; color: #1a1410; border-radius: 3px; box-shadow: 0 2px 0 #8c816c; font-size: 11px; }
.keysgrid .k b { font-size: 13px; color: #efe6d2; margin-top: 3px; }
.keysgrid .k small { font-size: 10.5px; color: #8c816c; line-height: 1.35; }
.rules { margin-top: 10px; background: rgba(26,20,16,0.88); border: 1px solid #3a2e26; border-radius: 5px; padding: 8px 12px; font-size: 12.5px; color: #cfc4ad; }
.rules summary { cursor: pointer; color: #c8a35a; font-weight: 700; }
.rules ol { margin: 8px 0 2px; padding-left: 20px; line-height: 1.6; }
.rules li b { color: #efe6d2; }
.sfoot { margin-top: auto; font-size: 11px; color: #5f5547; }
@media (max-width: 980px) {
  #start .sv { padding: 22px 16px; }
  .shead h1 { font-size: 40px; }
  #start .facs { grid-template-columns: 1fr; }
  .keysgrid { grid-template-columns: repeat(3, 1fr); }
  #start .go { margin-left: 0; width: 100%; justify-content: center; }
}

/* 모바일 가상 패드 */
#pad { display: none; position: fixed; inset: auto 0 0 0; height: 0; z-index: 15; }
#stick { position: fixed; left: 24px; bottom: 230px; width: 130px; height: 130px; border-radius: 50%; background: rgba(239, 230, 210, 0.12);
  border: 2px solid rgba(239, 230, 210, 0.35); touch-action: none; }
#knob { position: absolute; left: 40px; top: 40px; width: 50px; height: 50px; border-radius: 50%; background: rgba(243, 212, 138, 0.6); }
.pbtn { position: fixed; width: 64px; height: 64px; border-radius: 50%; background: rgba(181, 64, 42, 0.55); color: #fff; font-size: 22px;
  font-weight: 700; display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; border: 2px solid rgba(255,255,255,0.4); }
.pbtn.on { background: rgba(255, 140, 90, 0.85); }
#btn-z { right: 24px; bottom: 250px; }
#btn-x { right: 98px; bottom: 210px; background: rgba(44, 110, 127, 0.6); }
#btn-c { right: 40px; bottom: 330px; background: rgba(200, 160, 42, 0.6); }
#btn-i { right: 118px; bottom: 300px; width: 48px; height: 48px; font-size: 16px; background: rgba(90, 70, 50, 0.7); }

@media (max-width: 720px) {
  #card { width: 214px; font-size: 11px; }
  #card .st, #card .chips, #card .merit span { display: none; }
  #card .gear .slot span, #card .gear .bag span { display: none; }
  #card .pframe { width: 52px; height: 52px; } #card .pframe canvas#h-face { width: 48px; height: 48px; }
  #legend { display: none; }
  #board { width: 190px; }
  #board .clocktx { width: 60px; }
  .invbody { flex-direction: column; } .invleft, .invmid { width: auto; }
  #log { width: 52vw; font-size: 11px; bottom: 10px; }
  #mini { width: 110px; height: 138px; }
}


/* 일시정지, 저장, 점수판, 교실 (v4) */
#pausewrap { position: fixed; inset: 0; z-index: 25; display: none; background: rgba(8, 6, 4, 0.72); align-items: center; justify-content: center; }
#pausewrap .pbox { width: 560px; max-width: 94vw; background: #1f1813; border: 2px solid #f3d48a; border-radius: 6px; padding: 16px 20px; color: #efe6d2; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
#pausewrap h2 { margin: 0 0 4px; color: #f3d48a; font-size: 22px; letter-spacing: 1px; }
#pausewrap .psub { color: #a99d86; font-size: 12px; margin-bottom: 12px; }
#pausewrap .slots { display: grid; gap: 8px; }
#pausewrap .slot { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; background: #2a211a; border: 1px solid #4a3a2c; border-radius: 4px; padding: 8px 10px; }
#pausewrap .slot.auto { border-color: #6b5a3a; }
#pausewrap .slot b { color: #ffd98a; }
#pausewrap .slot small { color: #a99d86; display: block; font-size: 11px; margin-top: 2px; }
#pausewrap .slot button { background: #33281f; color: #efe6d2; border: 1px solid #5a4632; border-radius: 3px; padding: 5px 10px; cursor: pointer; font-family: inherit; }
#pausewrap .slot button:hover { background: #46362a; }
#pausewrap .slot button:disabled { opacity: 0.4; cursor: default; }
#pausewrap .prow { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
#pausewrap .prow button { background: #33281f; color: #efe6d2; border: 1px solid #5a4632; border-radius: 3px; padding: 7px 14px; cursor: pointer; font-family: inherit; }
#pausewrap .prow button.go { background: #b5402a; border-color: #b5402a; color: #fff; }
.score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; margin: 10px 0; font-size: 13px; }
.score div { background: #1a1511; padding: 6px 10px; border-radius: 4px; }
.score div span { display: block; color: #a99d86; font-size: 11px; }
.score div b { color: #ffd98a; font-size: 15px; }
.score div b.big { font-size: 24px; color: #f3d48a; }
.sboard { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sboard .lst { font-size: 12px; color: #cfc4ad; background: #1a1511; padding: 8px 10px; border-radius: 4px; max-height: 180px; overflow: auto; }
.sboard .lst h4 { margin: 0 0 4px; color: #ffd98a; font-size: 12px; }
.sboard .lst div { padding: 1px 0; }
#spark { width: 100%; height: 90px; background: #1a1511; border-radius: 4px; display: block; }
.top10 { font-size: 12px; color: #cfc4ad; }
.top10 div { display: grid; grid-template-columns: 24px 1fr 60px 80px 120px; gap: 6px; padding: 2px 0; border-bottom: 1px solid #2a211a; }
.top10 div.me { color: #ffd98a; }
.notes { font-size: 12px; color: #e8dcc0; background: #1f1a12; border-left: 3px solid #f3d48a; padding: 8px 12px; margin: 8px 0; line-height: 1.6; }
.notes b { color: #ffd98a; }
#toast { position: fixed; left: 50%; top: 86px; transform: translateX(-50%); z-index: 22; max-width: 640px; padding: 8px 16px; background: rgba(31, 24, 19, 0.94); border: 1px solid #f3d48a; border-radius: 4px; color: #efe6d2; font-size: 13px; display: none; }
#toast b { color: #ffd98a; margin-right: 6px; }
.opt .seg button.cls { }
.resume { background: #2b5f3a !important; }
@media (max-width: 720px) { .score { grid-template-columns: repeat(2, 1fr); } .sboard { grid-template-columns: 1fr; } }

/* 온라인 순위 */
.top10.online .orow { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; flex-wrap: wrap; }
.top10.online input { background: #1a1511; color: #f1e6cf; border: 1px solid #5a4a38; border-radius: 6px; padding: 6px 8px; font-size: 14px; width: 160px; }
.top10.online .go.small { padding: 6px 12px; font-size: 14px; }
.top10.online .ok { color: #9be39b; font-weight: 700; }
.top10.online .omsg { color: #a99d86; font-size: 13px; }

/* ===== 9차(C): 좁은 창, 모바일 패드, 시작 화면 온라인 순위 ===== */
/* 시작 화면 순위 단추와 패널 */
.rankbtn { background: #241c16; color: #f3d48a; border: 1px solid #6b5a3a; border-radius: 4px; padding: 9px 14px; font-size: 14px; cursor: pointer; font-family: inherit; }
.rankbtn:hover { background: #33281f; }
#rankwrap { position: fixed; inset: 0; z-index: 40; display: none; background: rgba(8, 6, 4, 0.76); align-items: center; justify-content: center; padding: 10px; }
#rankwrap .rbox { width: 640px; max-width: 100%; max-height: 92vh; overflow: auto; background: #1f1813; border: 2px solid #f3d48a; border-radius: 6px; padding: 14px 18px; color: #efe6d2; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
#rankwrap .rhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#rankwrap .rhead h2 { margin: 0; color: #f3d48a; font-size: 20px; flex: 1; }
#rankwrap .rsub { color: #a99d86; font-size: 12px; margin: 8px 0 10px; }
#rankwrap .top10 h4 { margin: 0 0 6px; color: #ffd98a; font-size: 13px; }
#rankwrap .top10 h4 small { color: #8c816c; font-weight: 400; }
.top10 .omsg { display: block; border: 0; color: #a99d86; padding: 8px 0; }
.top10 .omsg button { margin-left: 8px; background: #33281f; color: #efe6d2; border: 1px solid #5a4632; border-radius: 3px; padding: 3px 10px; cursor: pointer; font-family: inherit; }
.top10.online .orow { display: flex; grid-template-columns: none; border: 0; }

/* 점수판은 위에서부터 보이게(내용이 길면 위가 잘리던 문제) */
#end { align-items: flex-start; }
#end .panel { margin: auto; }

/* 모바일 가상 패드 추가 단추 */
#btn-p { right: 128px; bottom: 362px; width: 44px; height: 44px; font-size: 15px; background: rgba(60, 50, 40, 0.75); }
#btn-i { right: 112px; bottom: 296px; }
.pbtn.yn { display: none; width: 84px; height: 52px; border-radius: 10px; font-size: 17px; bottom: auto; top: 46%; }
#btn-y { right: 24px; background: rgba(46, 125, 60, 0.85); }
#btn-n { right: 120px; background: rgba(120, 60, 50, 0.85); }
#btn-duel { display: none; position: fixed; left: 8vw; right: 8vw; bottom: 18px; height: 26vh; min-height: 120px; border-radius: 16px; background: rgba(255, 217, 138, 0.14); border: 2px dashed rgba(255, 217, 138, 0.6); color: #ffe9b0; font-size: 20px; font-weight: 700; align-items: center; justify-content: center; touch-action: none; user-select: none; z-index: 27; }
#btn-duel { display: none; }
#pad.duel #btn-duel { display: flex !important; }
#btn-duel.on { background: rgba(255, 217, 138, 0.38); }
#pad.duel #stick, #pad.duel #btn-x, #pad.duel #btn-c, #pad.duel #btn-i { opacity: 0.25; pointer-events: none; }
#pad.hidden { display: none !important; }

/* 행장: 600~900px 은 두 단(장수 | 장착과 가방), 가방이 스크롤 없이 보이게 */
@media (max-width: 900px) {
  .invpanel { width: 97vw; max-height: 96vh; padding: 8px 10px 10px; }
  .invhead { padding-bottom: 6px; margin-bottom: 8px; }
  .invhead h2 { font-size: 17px; }
  .invtip { font-size: 10px; }
  .invbody { display: grid; grid-template-columns: minmax(200px, 0.85fr) 1.15fr; grid-template-areas: "left mid" "left right"; gap: 8px; flex-direction: initial; }
  .invleft { grid-area: left; width: auto; }
  .invmid { grid-area: mid; width: auto; }
  .invright { grid-area: right; }
  .invcol { padding: 7px 8px; }
  .invleft .pframe { width: 76px; height: 76px; } .invleft .pframe canvas { width: 72px; height: 72px; }
  .pinfo h3 { font-size: 15px; margin-top: 4px; }
  .invmid h4 { display: none; }
  .invmid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: start; }
  .invmid .eslot { flex-direction: column; text-align: center; margin: 0; padding: 4px; gap: 3px; }
  .invmid .eslot canvas { width: 40px; height: 40px; }
  .invmid .eslot .etx span { display: none; }
  .invmid .eslot .etx b { font-size: 12px; }
  .invmid .money, .invmid .merchant { grid-column: 1 / -1; margin-top: 0; }
  .invgrid { grid-template-columns: repeat(6, 1fr); gap: 5px; }
  .bslot canvas { width: 36px; height: 36px; }
  .invdetail { margin-top: 6px; min-height: 56px; padding: 6px 8px; }
  .invacts { margin-top: 6px; }
  .invacts button { padding: 9px 4px; }
}
/* 600px 아래(휴대폰): 한 단. 장착 다음에 바로 가방, 장수 정보는 맨 아래 */
@media (max-width: 600px) {
  .overlay.inv { align-items: flex-start; }
  .invpanel { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; border-width: 0 0 2px; padding: 8px; }
  .invtip { display: none; }
  .invbody { grid-template-columns: 1fr; grid-template-areas: "mid" "right" "left"; }
  .invgrid { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .bslot canvas { width: 32px; height: 32px; }
  .invleft .pframe { width: 64px; height: 64px; } .invleft .pframe canvas { width: 60px; height: 60px; }
  .invmid .eslot canvas { width: 36px; height: 36px; }
  .invacts button { padding: 11px 4px; font-size: 13px; }
}

/* 멈춤, 저장 창 */
@media (max-width: 600px) {
  #pausewrap { align-items: flex-start; overflow: auto; }
  #pausewrap .pbox { max-width: 100vw; width: 100vw; border-radius: 0; border-width: 0 0 2px; padding: 12px; }
  #pausewrap .slot { grid-template-columns: 1fr auto; }
  #pausewrap .slot > div { grid-column: 1 / -1; }
  #pausewrap .slot button { padding: 8px 12px; }
  #pausewrap .slot > span { display: none; }
}

/* 점수판 */
@media (max-width: 700px) {
  .panel { padding: 14px 12px; }
  .panel h1 { font-size: 24px; }
  .panel h1 small { display: block; margin: 4px 0 0; font-size: 12px; }
  .score { gap: 6px; font-size: 12px; }
  .score div b { font-size: 13px; } .score div b.big { font-size: 20px; }
  .top10 div { grid-template-columns: 20px 1fr 48px 70px; gap: 4px; }
  .top10 div span:nth-child(5) { display: none; }
  .top10.online input { width: 130px; font-size: 16px; }
  .timeline { max-height: 160px; }
}

/* 시작 화면 휴대폰 */
@media (max-width: 600px) {
  #start .sv { padding: 16px 12px; gap: 12px; }
  .shead h1 { font-size: 32px; }
  .shead .tag { font-size: 13px; }
  .optrow { gap: 10px; }
  .opt { flex-wrap: wrap; }
  .keysgrid { grid-template-columns: repeat(2, 1fr); }
  .rankbtn { width: 100%; }
}

/* 휴대폰 상단 HUD: 상태창과 판세가 겹치지 않게 */
@media (max-width: 480px) {
  #card { left: 6px; top: 6px; width: 178px; padding: 6px 8px; }
  #card .gear .slot, #card .gear .bag { padding: 2px; }
  #board { right: 6px; top: 6px; width: 182px; padding: 6px 7px; }
  #board .time { font-size: 12px; flex-wrap: wrap; gap: 2px; }
  #board .spd button { padding: 2px 4px; font-size: 10px; margin-left: 1px; }
  #board .clocktx { width: 52px; }
  #mini { width: 96px; height: 120px; }
  #log { width: 56vw; max-height: 22vh; overflow: hidden; }
}
#pad.duel { z-index: 28; }
@media (max-width: 480px) {
  #card .row2 { font-size: 11px; white-space: nowrap; }
  #card .row2 .coins canvas { display: none; }
}

/* 통합: 좁은 화면에서 소리 단추가 행장, 패드를 가리지 않게 */
@media (max-width: 720px) {
  #srt-sound-btn { bottom: auto !important; top: 6px !important; right: 6px !important; padding: 2px 8px !important; font-size: 11px !important; opacity: 0.8; }
}

/* 로고 타이틀 (logo.js) */
.shead .logo { display: block; }
#logoCv { display: block; image-rendering: pixelated; image-rendering: crisp-edges; max-width: 100%; margin: -4px 0 0 -6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 명장: 기술 단추, 등장 카드, 도감 ---------- */
#btn-v { right: 168px; bottom: 236px; width: 52px; height: 52px; font-size: 20px; background: rgba(160, 60, 40, 0.75); }
#pad.duel #btn-v { opacity: 0.25; pointer-events: none; }
.hskill { position: fixed; left: 262px; bottom: 18px; z-index: 6; display: none; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: rgba(22, 17, 13, 0.92); border: 1px solid #4a3b2c; border-radius: 34px; cursor: pointer; user-select: none; }
.hskill.ready { border-color: #c9a14a; box-shadow: 0 0 12px rgba(255, 210, 122, 0.35); }
.hsk-ic { width: 48px; height: 48px; image-rendering: pixelated; }
.hsk-tx { display: flex; flex-direction: column; line-height: 1.25; font-size: 12px; color: #cfc4ad; }
.hsk-tx b { color: #ffe6a8; font-size: 14px; } .hsk-tx b.dim { color: #8f8270; }
.hsk-tx i { font-style: normal; color: #9fd3a0; font-size: 11px; }
.hsk-tx kbd { background: #3a2e22; border: 1px solid #6a573f; border-radius: 4px; padding: 0 4px; font-size: 11px; color: #ffe6a8; }
@media (max-width: 720px) { .hskill { left: auto; right: 8px; bottom: auto; top: 118px; padding: 4px 8px 4px 4px; } .hsk-ic { width: 36px; height: 36px; } .hsk-tx { font-size: 10px; } .hsk-tx b { font-size: 12px; } }

.harrive { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.25), rgba(0,0,0,0.75)); transition: opacity 0.18s; }
.harrive.on { opacity: 1; pointer-events: auto; }
.hcard { display: flex; gap: 22px; align-items: center; max-width: min(760px, 92vw); padding: 22px 26px; background: linear-gradient(180deg, #2a2119, #18120d); border: 2px solid #c9a14a; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); transform: scale(0.92); transition: transform 0.25s cubic-bezier(.2,1.4,.4,1); }
.harrive.on .hcard { transform: scale(1); }
.hcard.f0 { border-color: #c8576c; } .hcard.f1 { border-color: #4d9fbd; } .hcard.f2 { border-color: #d4ad4f; }
.hc-face { position: relative; flex: none; }
.hc-face .hface { width: 160px; height: 160px; image-rendering: pixelated; border-radius: 8px; border: 2px solid rgba(255,255,255,0.15); display: block; }
.hc-stamp { position: absolute; right: -22px; bottom: -18px; width: 72px; height: 72px; image-rendering: pixelated; animation: hcStamp 0.55s 0.15s both cubic-bezier(.2,1.6,.4,1); }
@keyframes hcStamp { 0% { transform: scale(2.2) rotate(-12deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }
.hc-tx { color: #e8dcc2; min-width: 0; }
.hc-kicker { font-size: 13px; color: #c9b48a; letter-spacing: 1px; }
.hc-name { font-size: 46px; font-weight: 800; line-height: 1.1; margin: 4px 0 2px; text-shadow: 0 2px 0 #000; }
.hc-title { font-size: 17px; color: #ffe6a8; margin-bottom: 8px; }
.hc-memo { font-size: 14px; line-height: 1.5; color: #d6cab0; } .hc-memo small { color: #8f8270; }
.hc-skill { margin-top: 10px; padding: 8px 10px; background: rgba(255,210,122,0.08); border-left: 3px solid #c9a14a; font-size: 15px; color: #ffe6a8; }
.hc-skill span { display: block; font-size: 12.5px; color: #cfc4ad; margin-top: 2px; }
.hc-skill kbd, .cx-skill kbd { background: #3a2e22; border: 1px solid #6a573f; border-radius: 4px; padding: 0 5px; }
.hc-skip { margin-top: 10px; font-size: 11px; color: #8f8270; }
@media (max-width: 600px) { .hcard { flex-direction: column; text-align: center; padding: 16px; gap: 12px; } .hc-face .hface { width: 112px; height: 112px; } .hc-stamp { width: 52px; height: 52px; right: -14px; bottom: -10px; } .hc-name { font-size: 32px; } .hc-memo { font-size: 12.5px; } }

.overlay.codex { position: fixed; inset: 0; z-index: 40; align-items: center; justify-content: center; background: rgba(8,6,4,0.78); }
.cx-panel { width: min(1180px, 96vw); max-height: 92vh; overflow: auto; background: #1a1410; border: 1px solid #5a4a38; border-radius: 12px; padding: 16px 18px 20px; color: #e8dcc2; }
.cx-head { display: flex; align-items: center; gap: 14px; } .cx-head h2 { margin: 0; color: #ffe6a8; font-size: 24px; }
.cx-prog { font-size: 16px; color: #cfc4ad; } .cx-prog b { color: #ffd27a; font-size: 22px; }
.cx-head .invclose { margin-left: auto; }
.cx-sub { font-size: 12.5px; color: #a99d86; margin: 6px 0 10px; }
.cx-sec { margin-top: 12px; }
.cx-fh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; } .cx-fh canvas { image-rendering: pixelated; }
.cx-fbar { display: inline-block; width: 120px; height: 6px; background: #2c241c; border-radius: 3px; overflow: hidden; } .cx-fbar b { display: block; height: 100%; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.cx-card { display: flex; gap: 12px; padding: 10px; background: #221a14; border: 1px solid #3a2e22; border-radius: 10px; outline: none; }
.cx-card:focus { border-color: #c9a14a; }
.cx-card .hface { width: 96px; height: 96px; flex: none; image-rendering: pixelated; border-radius: 6px; background: #15100c; }
.cx-card.known.f0 { border-color: #7a3442; } .cx-card.known.f1 { border-color: #2f6577; } .cx-card.known.f2 { border-color: #7f6730; }
.cx-card.unknown { opacity: 0.85; }
.cx-tx { min-width: 0; font-size: 12px; color: #cfc4ad; }
.cx-name { font-size: 17px; font-weight: 700; color: #fff0cc; } .cx-name.q { color: #7d6c55; letter-spacing: 2px; }
.cx-name em { font-style: normal; font-size: 10.5px; padding: 1px 5px; border-radius: 8px; margin-left: 4px; vertical-align: 2px; }
.cx-name em.b1 { background: #3d5a2e; color: #d9f5c4; } .cx-name em.b2 { background: #5a2e2e; color: #f5d0c4; }
.cx-title { color: #ffd27a; margin: 1px 0 4px; }
.cx-bars div { display: flex; align-items: center; gap: 5px; height: 12px; } .cx-bars span { width: 26px; font-size: 10.5px; color: #a99d86; }
.cx-bars i { flex: 1; height: 4px; background: #2c241c; border-radius: 2px; overflow: hidden; } .cx-bars i b { display: block; height: 100%; } .cx-bars em { font-style: normal; width: 20px; text-align: right; font-size: 10.5px; }
.cx-skill { margin-top: 4px; color: #e8dcc2; } .cx-skill b { color: #ffe6a8; } .cx-skill.dim { color: #8f8270; }
.cx-memo { margin-top: 4px; color: #b9ad94; line-height: 1.45; }
.cx-rec { margin-top: 4px; color: #9fd3a0; font-size: 11px; }
.cx-hint { margin-top: 6px; color: #a99d86; line-height: 1.45; }
@media (max-width: 600px) { .cx-panel { padding: 12px 10px; max-height: 94vh; } .cx-grid { grid-template-columns: 1fr; } .cx-card .hface { width: 72px; height: 72px; } .cx-head h2 { font-size: 20px; } }
.invskill { margin: 0 0 8px; padding: 6px 8px; border-left: 3px solid #c9a14a; background: rgba(255,210,122,0.07); font-size: 12.5px; color: #e8dcc2; }
.invskill b { color: #ffd27a; } .invskill .d { color: #b9ad94; font-size: 11.5px; margin-top: 2px; } .invskill.dim { color: #8f8270; border-color: #4a3b2c; }
.invskill kbd { background: #3a2e22; border: 1px solid #6a573f; border-radius: 4px; padding: 0 4px; font-size: 11px; color: #ffe6a8; }

/* ===== 10차 모바일 QA: 조이스틱과 단추를 화면 아래 모서리로, 세로와 가로 배치 분리 ===== */
/* 공통(패드가 켜진 기기): 단추는 아래쪽 모서리에 붙여 화면 가운데 내 장수를 가리지 않게 */
@media (max-width: 1000px), (max-height: 560px) {
  #stick { left: calc(14px + env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom)); width: 124px; height: 124px; }
  #knob { left: 37px; top: 37px; }
  #btn-z { right: calc(16px + env(safe-area-inset-right)); bottom: calc(40px + env(safe-area-inset-bottom)); width: 68px; height: 68px; }
  #btn-x { right: calc(94px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
  #btn-c { right: calc(28px + env(safe-area-inset-right)); bottom: calc(122px + env(safe-area-inset-bottom)); width: 54px; height: 54px; font-size: 19px; }
  #btn-v { right: calc(100px + env(safe-area-inset-right)); bottom: calc(96px + env(safe-area-inset-bottom)); width: 52px; height: 52px; }
  #btn-i { right: calc(160px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); width: 42px; height: 42px; font-size: 15px; }
  #btn-p { right: calc(162px + env(safe-area-inset-right)); bottom: calc(74px + env(safe-area-inset-bottom)); width: 38px; height: 38px; font-size: 13px; }
  #btn-y, #btn-n { bottom: calc(200px + env(safe-area-inset-bottom)) !important; }
  #srt-sound-btn { top: auto !important; right: auto !important; left: 50% !important; transform: translateX(-50%); bottom: calc(4px + env(safe-area-inset-bottom)) !important; padding: 2px 8px !important; font-size: 11px !important; opacity: 0.75; }
}

/* 세로 모드 폰 */
@media (max-width: 600px) and (orientation: portrait) {
  #legend { display: none !important; }
  #miniwrap { left: 6px !important; right: auto !important; bottom: auto !important; top: 176px !important; width: auto !important; height: auto !important; padding: 3px !important; }
  #miniwrap canvas, #mini { width: 76px !important; height: 95px !important; }
  #hskill { left: auto !important; right: 6px !important; bottom: auto !important; top: 152px !important; transform: scale(0.9); transform-origin: top right; }
  #log { left: auto !important; right: 6px !important; bottom: auto !important; top: 206px !important; width: 58vw !important; max-height: 48px !important; overflow: hidden !important; font-size: 10.5px !important; padding: 4px 7px !important; opacity: 0.88; }
}

/* 가로 모드 폰 (높이가 낮은 화면) */
@media (max-height: 560px) and (orientation: landscape) {
  #card { transform: scale(0.72); transform-origin: top left; left: calc(6px + env(safe-area-inset-left)) !important; top: 6px !important; }
  #board { transform: scale(0.72); transform-origin: top right; right: calc(6px + env(safe-area-inset-right)) !important; top: 6px !important; }
  #legend { display: none !important; }
  #miniwrap { left: 50% !important; right: auto !important; top: 6px !important; bottom: auto !important; transform: translateX(-50%); width: auto !important; height: auto !important; padding: 3px !important; }
  #miniwrap canvas, #mini { width: 72px !important; height: 90px !important; }
  #hskill { left: calc(6px + env(safe-area-inset-left)) !important; right: auto !important; bottom: auto !important; top: 168px !important; transform: scale(0.82); transform-origin: top left; }
  #log { left: 160px !important; right: 230px !important; width: auto !important; bottom: calc(26px + env(safe-area-inset-bottom)) !important; top: auto !important; max-height: 40px !important; overflow: hidden !important; font-size: 10.5px !important; padding: 3px 7px !important; opacity: 0.85; }
  #stick { width: 112px; height: 112px; }
  #knob { left: 31px; top: 31px; }
  #btn-duel { height: 34vh; }
}
@media (max-width: 600px) and (orientation: portrait) {
  #hint { bottom: calc(158px + env(safe-area-inset-bottom)) !important; font-size: 13px; padding: 5px 12px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  #hint { bottom: auto !important; top: 112px !important; font-size: 13px; padding: 4px 12px; }
}

/* 패드 기술 단추: 문양 + 쿨다운 */
#btn-v { padding: 0; overflow: hidden; background: rgba(30, 24, 18, 0.78) !important; border-color: rgba(255, 217, 138, 0.55); }
#btn-v .pskill-cv { width: 100%; height: 100%; image-rendering: pixelated; display: block; pointer-events: none; }
#btn-v .pskill-t { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; }
#btn-v.ready { box-shadow: 0 0 12px rgba(255, 217, 138, 0.75); animation: pskillPulse 1.4s ease-in-out infinite; }
#btn-v.active { box-shadow: 0 0 16px rgba(255, 255, 255, 0.9); }
#btn-v.noskill { display: none !important; }
@keyframes pskillPulse { 0%, 100% { box-shadow: 0 0 6px rgba(255, 217, 138, 0.5); } 50% { box-shadow: 0 0 16px rgba(255, 217, 138, 0.95); } }

/* ===== 11차 자동 전투 ===== */
#autobar { display: none; position: fixed; z-index: 16; top: 10px; left: 50%; transform: translateX(-50%); align-items: center; gap: 6px; flex-wrap: wrap; max-width: 360px; }
#autobar button { font: inherit; font-size: 13px; font-weight: 700; color: #efe6d2; background: rgba(24, 19, 15, 0.88); border: 1px solid rgba(255, 217, 138, 0.45); border-radius: 16px; padding: 6px 12px; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; min-height: 32px; }
#autobar #btn-auto.on { background: linear-gradient(180deg, #c8a35a, #8f6a2a); color: #1a1511; border-color: #ffd98a; box-shadow: 0 0 10px rgba(255, 217, 138, 0.6); }
#autobar #btn-automode { font-weight: 600; font-size: 12px; padding: 6px 10px; }
#autochip { font-size: 11.5px; color: #cfc4ad; background: rgba(24, 19, 15, 0.72); border-radius: 10px; padding: 3px 8px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#autochip.on { color: #ffe9b0; border: 1px solid rgba(255, 217, 138, 0.35); }
@media (max-width: 600px) and (orientation: portrait) {
  #autobar { top: 290px; left: 6px; transform: none; max-width: 200px; gap: 4px; }
  #autobar button { font-size: 12px; padding: 5px 10px; min-height: 30px; }
  #autochip { max-width: 190px; font-size: 10.5px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  #autobar { top: 224px; left: calc(6px + env(safe-area-inset-left)); transform: none; max-width: 240px; gap: 4px; }
  #autobar button { font-size: 12px; padding: 4px 10px; min-height: 28px; }
  #autochip { max-width: 150px; font-size: 10.5px; }
}

/* 12차: 가로 화면에서 상태 칩은 한 줄만(넘치면 잘림), 상태창이 기술 칸을 밀어내지 않게 */
@media (max-height: 560px) and (orientation: landscape) {
  #card .chips { flex-wrap: nowrap !important; overflow: hidden; max-height: 18px; }
  #card .chip { white-space: nowrap; flex: none; }
}
@media (max-width: 600px) and (orientation: portrait) {
  #card .chips { flex-wrap: nowrap !important; overflow: hidden; max-height: 18px; }
  #card .chip { white-space: nowrap; flex: none; }
}

/* 14차 UI UX QA: 입력 구분, 터치 크기, 좁은 화면과 대화창 */
button:focus-visible, [role="button"]:focus-visible, summary:focus-visible { outline: 3px solid #ffe39b; outline-offset: 3px; }
#pausewrap .pbox { max-height: 94dvh; overflow-y: auto; }
.invhead, .cx-head { position: sticky; top: 0; z-index: 2; background: #1e1711; }
.touch-ui #btn-z, .touch-ui #btn-x, .touch-ui #btn-c { font-size: 14px; font-weight: 700; }
.touch-ui #btn-x { font-size: 12px; }
.touch-ui #btn-i, .touch-ui #btn-p { width: 44px; height: 44px; font-size: 12px; }
.touch-ui #autobar button { min-height: 44px; min-width: 54px; }
.touch-ui .seg button, .touch-ui .invclose, .touch-ui .rankbtn,
.touch-ui #pausewrap button, .touch-ui .invacts button { min-height: 44px; }
@media (max-width: 600px) and (orientation: portrait) {
  #card { width: calc(50vw - 12px); }
  #board { width: calc(50vw - 12px); }
  #start .fcard { padding: 8px 10px; }
  #start .fcard .faces { display: none; }
  #start .fcard:not(.sel) .traits, #start .fcard:not(.sel) .fbot { display: none; }
  #start .fcard .traits { margin: 6px 0; font-size: 11px; }
  #start .fcard .fsub { font-size: 10px; }
  #start .facs { gap: 9px; }
  #btn-i, #btn-p { right: calc(164px + env(safe-area-inset-right)); }
}
@media (prefers-reduced-motion: reduce) { #btn-v.ready { animation: none; } }

#start .fcard:focus-visible { outline: 3px solid #ffe39b; outline-offset: 3px; }

@media (max-width: 600px) and (orientation: portrait) {
  #card .row2 { flex-wrap: wrap; row-gap: 3px; }
  #card .troops { width: 100%; gap: 3px; }
  #card .coins { margin-left: auto; }
}

/* 15차 모바일 HUD 표시 설정. 복원 버튼과 조작부는 숨김 대상에서 제외. */
.mobile-hud-hidden { display: none !important; }
#hud-settings-btn { --hud-safe-left: env(safe-area-inset-left, 0px); --hud-safe-right: env(safe-area-inset-right, 0px); --hud-safe-top: env(safe-area-inset-top, 0px); --hud-safe-bottom: env(safe-area-inset-bottom, 0px); position: fixed; z-index: 18; width: 88px; min-height: 44px; padding: 5px 8px; border: 1px solid #c8a35a; border-radius: 12px; background: rgba(24,19,15,.94); color: #ffe4ae; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; touch-action: manipulation; }
#hud-settings-btn[hidden], #hud-settings-panel[hidden] { display: none !important; }
#hud-settings-panel { position: fixed; z-index: 22; box-sizing: border-box; padding: 12px; border: 1px solid #c8a35a; border-radius: 12px; background: rgba(24,19,15,.98); color: #efe6d2; box-shadow: 0 8px 30px #0009; max-height: calc(100dvh - 16px); overflow-y: auto; }
#hud-settings-panel p { font-size: 11px; color: #cfc4ad; margin: 8px 0; }
.hud-settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#hud-settings-panel button { min-height: 44px; min-width: 44px; border: 1px solid #685537; border-radius: 8px; color: #efe6d2; background: #30261b; font: inherit; font-size: 13px; cursor: pointer; touch-action: manipulation; }
.hud-settings-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hud-settings-options button { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; padding:5px; }
.hud-settings-options strong { font-size:10px; color:#b0a692; }
.hud-settings-options [aria-pressed="true"] { border-color:#c8a35a!important; background:#46351d!important; }
.hud-settings-options [aria-pressed="true"] strong { color:#ffe4ae; }
.hud-settings-all { display:flex; gap:6px; margin-top:8px; }
.hud-settings-all button { flex:1; }

#hud-settings-backdrop { position: fixed; inset: 0; z-index: 21; background: rgba(0,0,0,.3); touch-action: none; }
#hud-settings-backdrop[hidden] { display:none !important; }

/* 17차 출진 카드: 새 판 시작 때 내 장수 능력치와 병사 */
#startcard { position: fixed; inset: 0; z-index: 45; display: none; align-items: center; justify-content: center; padding: 10px; background: rgba(8, 6, 4, 0.78); opacity: 0; transition: opacity 0.18s; cursor: pointer; }
#startcard.on { opacity: 1; }
#startcard .sc-box { width: min(560px, 96vw); max-height: 94dvh; overflow-y: auto; background: linear-gradient(180deg, #2a2119, #18120d); border: 2px solid var(--fc); border-radius: 12px; padding: 16px 18px 14px; color: #e8dcc2; box-shadow: 0 10px 40px rgba(0,0,0,0.6); transform: scale(0.96); transition: transform 0.22s cubic-bezier(.2,1.4,.4,1); }
#startcard.on .sc-box { transform: scale(1); }
.sc-head { display: flex; gap: 16px; align-items: center; }
.sc-face { position: relative; flex: none; }
.sc-face canvas:first-child { width: 112px; height: 112px; image-rendering: pixelated; border: 2px solid var(--fc); border-radius: 8px; display: block; background: #15100c; }
.sc-face .sc-emb { position: absolute; right: -14px; bottom: -12px; width: 40px; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 1px 2px #000); }
.sc-ht { min-width: 0; }
.sc-kick { font-size: 12px; letter-spacing: 3px; color: #c9b48a; }
.sc-name { font-size: 32px; font-weight: 800; line-height: 1.15; color: var(--fl); text-shadow: 0 2px 0 #000; }
.sc-name em { font-style: normal; font-size: 12px; color: #1a1511; background: #ffd98a; padding: 1px 6px; border-radius: 3px; vertical-align: 6px; }
.sc-sub { font-size: 13px; color: #cfc4ad; margin-top: 2px; }
.sc-fac { display: inline-block; background: var(--fc); color: #fff; font-weight: 700; padding: 0 7px; border-radius: 3px; font-size: 12px; }
.sc-sum { margin-top: 6px; font-size: 13px; color: #cfc4ad; } .sc-sum b { color: #ffd98a; font-size: 18px; } .sc-sum small { color: #8f8270; }
.sc-stats { margin-top: 14px; display: grid; gap: 6px; }
.sc-row { display: grid; grid-template-columns: 34px 1fr 28px 22px; grid-template-areas: "lab bar val gd" ". eff eff eff"; align-items: center; column-gap: 8px; row-gap: 1px; }
.sc-row.dim { opacity: 0.75; }
.sc-lab { grid-area: lab; font-size: 13px; color: #cfc4ad; }
.sc-bar { grid-area: bar; height: 8px; background: #2c241c; border-radius: 4px; overflow: hidden; } .sc-bar b { display: block; height: 100%; border-radius: 4px; }
.sc-val { grid-area: val; text-align: right; font-weight: 700; font-size: 14px; }
.sc-gd { grid-area: gd; text-align: center; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 1px 0; }
.sc-gd.g3 { background: #5a4a1e; color: #ffe08a; } .sc-gd.g2 { background: #3a3326; color: #d8ccb0; } .sc-gd.g1 { background: #2a2420; color: #9b8f7a; }
.sc-eff { grid-area: eff; font-size: 11px; color: #a99d86; }
.sc-tip { margin-top: 10px; padding: 7px 10px; border-left: 3px solid var(--fc); background: rgba(255, 210, 122, 0.06); font-size: 13px; color: #ffe6a8; }
.sc-troops { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; }
.sc-tl { color: #c9b48a; font-size: 12px; }
.sc-tt { display: inline-flex; align-items: center; gap: 3px; } .sc-tt canvas { width: 28px; height: 28px; image-rendering: pixelated; }
.sc-cap { margin-left: auto; color: #cfc4ad; } .sc-cap b { color: #ffd98a; font-size: 16px; }
.sc-meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: #cfc4ad; } .sc-meta b { color: #ffd98a; } .sc-meta small { color: #8f8270; font-size: 11px; }
.sc-skill { margin-top: 8px; padding: 7px 10px; background: rgba(255,210,122,0.08); border-left: 3px solid #c9a14a; font-size: 14px; color: #ffe6a8; }
.sc-skill span { display: block; font-size: 12px; color: #cfc4ad; margin-top: 2px; }
.sc-skill kbd { background: #3a2e22; border: 1px solid #6a573f; border-radius: 4px; padding: 0 5px; font-size: 11px; }
.sc-foot { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.sc-go { min-height: 44px; padding: 8px 26px; font: inherit; font-size: 17px; font-weight: 800; color: #fff; background: var(--fc); border: 0; border-radius: 6px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,0.45); }
.sc-hint { flex: 1; min-width: 150px; font-size: 11.5px; color: #a99d86; }
.sc-prog { display: block; height: 3px; margin-top: 5px; background: #2c241c; border-radius: 2px; overflow: hidden; } .sc-prog b { display: block; height: 100%; width: 0; background: var(--fl); }
.sc-skip { font-size: 11.5px; color: #8f8270; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; cursor: pointer; }
@media (max-width: 600px) {
  #startcard .sc-box { padding: 12px 12px 10px; }
  .sc-head { gap: 12px; }
  .sc-face canvas:first-child { width: 80px; height: 80px; }
  .sc-face .sc-emb { width: 30px; height: 30px; right: -10px; bottom: -8px; }
  .sc-name { font-size: 24px; }
  .sc-stats { margin-top: 10px; gap: 4px; }
  .sc-go { width: 100%; }
}
@media (max-height: 560px) and (orientation: landscape) {
  #startcard .sc-box { width: min(760px, 96vw); padding: 10px 14px; }
  .sc-face canvas:first-child { width: 72px; height: 72px; }
  .sc-name { font-size: 22px; }
  .sc-stats { grid-template-columns: 1fr 1fr; column-gap: 18px; margin-top: 8px; }
  .sc-foot { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { #startcard, #startcard .sc-box { transition: none; } }

body.sc-open #srt-sound-btn, body.sc-open #hud-settings-btn { visibility: hidden; }

/* ===================== 20차: 고정 칸 배치 =====================
 * 화면 모드(body.lay-desk, lay-port, lay-land, lay-tab)마다 모든 HUD와 조작 단추의 자리를 미리 정한다.
 * 상태창과 판세는 높이가 고정이라 내용(칩, 숫자, 맹약 줄)이 바뀌어도 아래 칸이 밀리지 않는다.
 * 화면 설정으로 숨긴 패널은 자리만 비고 다른 칸은 그대로다. 위치를 주기적으로 다시 계산하는 코드는 없다.
 * 잠깐 뜨는 것(안내 문구, 도움말, 일기토 수락과 거절, 역사 메모)은 전용 칸을 쓴다. */
:root { --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); }

/* 공통: 내용 길이에 따라 크기가 변하지 않게 */
body[class*="lay-"] #card { overflow: hidden !important; box-sizing: border-box !important; }
body[class*="lay-"] #card .nmrow, body[class*="lay-"] #card .rankrow { white-space: nowrap; overflow: hidden; }
body[class*="lay-"] #card .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body[class*="lay-"] #card .chips { display: flex !important; flex-wrap: nowrap !important; overflow: hidden !important; height: 18px !important; max-height: 18px !important; min-height: 18px !important; }
body[class*="lay-"] #card .chip { white-space: nowrap; flex: none; }
body[class*="lay-"] #card .st { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 16px; }
body[class*="lay-"] #card .coins b { display: inline-block; min-width: 5.5em; text-align: right; }
body[class*="lay-"] #board { overflow: hidden !important; box-sizing: border-box !important; }
body[class*="lay-"] #h-facs { height: 84px; overflow: hidden; }
body[class*="lay-"] #h-facs .truce, body[class*="lay-"] #h-facs .inv { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[class*="lay-"] #log { overflow: hidden !important; box-sizing: border-box !important; display: flex !important; flex-direction: column; justify-content: flex-end; max-height: none !important; }
body[class*="lay-"] #log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
body[class*="lay-"] #hskill { box-sizing: border-box !important; overflow: hidden !important; transform: none !important; }
body[class*="lay-"] .hsk-tx { min-width: 0; } body[class*="lay-"] .hsk-tx > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[class*="lay-"] #autobar { flex-wrap: nowrap !important; max-width: none !important; gap: 4px !important; transform: none; }
body[class*="lay-"] #btn-auto { width: 72px !important; min-width: 0 !important; padding: 0 !important; text-align: center; flex: none; }
body[class*="lay-"] #btn-automode { width: 96px !important; min-width: 0 !important; padding: 0 !important; text-align: center; flex: none; white-space: nowrap; }
body[class*="lay-"] #autochip { flex: none; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none !important; }
body[class*="lay-"] #hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; z-index: 14; transform: translateX(-50%) !important; }
body.tip-on #hint { visibility: hidden !important; }
#tip { display: none; position: fixed; z-index: 14; left: 50%; transform: translateX(-50%); box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 6px 14px; background: rgba(31, 24, 19, 0.95); border: 1px solid #f3d48a; border-radius: 6px; color: #efe6d2; font-size: 13px; font-weight: 600; pointer-events: none; }
#tip kbd { background: #3a2e22; border: 1px solid #6a573f; border-radius: 4px; padding: 0 5px; margin: 0 2px; color: #ffe6a8; font-family: inherit; font-size: 12px; }
body.tip-on #tip { display: block; }
#srt-sound-btn { z-index: 17 !important; box-sizing: border-box !important; }
#hud-settings-btn { box-sizing: border-box !important; }

/* ---------- PC (패드 없음) ---------- */
body.lay-desk #card { left: 10px !important; top: 10px !important; width: 272px !important; height: 216px !important; }
body.lay-desk #board { right: 10px !important; top: 10px !important; width: 250px !important; height: 168px !important; }
body.lay-desk #autobar { top: 10px !important; left: 50% !important; transform: translateX(-50%) !important; }
body.lay-desk #autobar button { height: 34px !important; min-height: 0 !important; }
body.lay-desk #autochip { width: 168px; }
body.lay-desk #hint, body.lay-desk #tip { top: 54px !important; bottom: auto !important; left: 50% !important; max-width: min(460px, calc(100vw - 580px)) !important; }
body.lay-desk #toast { top: 96px !important; max-width: min(560px, calc(100vw - 580px)) !important; }
body.lay-desk #miniwrap { left: 10px !important; bottom: 10px !important; top: auto !important; right: auto !important; }
body.lay-desk #hskill { left: 190px !important; bottom: 10px !important; top: auto !important; right: auto !important; width: 230px !important; height: 62px !important; }
body.lay-desk #log { right: 10px !important; bottom: 50px !important; top: auto !important; width: min(360px, calc(100vw - 460px)) !important; height: 112px !important; }
body.lay-desk #srt-sound-btn { right: 10px !important; bottom: 10px !important; top: auto !important; left: auto !important; transform: none !important; height: 32px !important; }

/* ---------- 휴대폰 세로 ---------- */
body.lay-port #card { left: calc(6px + var(--sl)) !important; top: calc(6px + var(--st)) !important; width: calc(50% - 9px - var(--sl)) !important; height: 182px !important; padding: 6px 8px !important; transform: none !important; }
body.lay-port #card .chips, body.lay-port #card .st, body.lay-port #card .merit span { display: none !important; }
body.lay-port #card .row2 { flex-wrap: wrap !important; row-gap: 2px; white-space: nowrap; }
body.lay-port #card .troops { width: 100%; gap: 3px; }
body.lay-port #card .coins { margin-left: auto; }
body.lay-port #board { right: calc(6px + var(--sr)) !important; top: calc(6px + var(--st)) !important; width: calc(50% - 9px - var(--sr)) !important; height: 182px !important; padding: 6px 7px !important; transform: none !important; }
body.lay-port #miniwrap { left: calc(6px + var(--sl)) !important; top: calc(194px + var(--st)) !important; bottom: auto !important; right: auto !important; transform: none !important; padding: 3px !important; }
body.lay-port #miniwrap canvas, body.lay-port #mini { width: 76px !important; height: 95px !important; }
body.lay-port #autobar { left: calc(6px + var(--sl)) !important; top: calc(304px + var(--st)) !important; width: 172px; flex-wrap: wrap !important; }
body.lay-port #autobar button { height: 44px !important; min-height: 44px !important; }
body.lay-port #autochip { width: 172px; height: 20px; font-size: 11px !important; line-height: 14px; }
body.lay-port #hud-settings-btn { right: calc(80px + var(--sr)) !important; left: auto !important; top: calc(332px + var(--st)) !important; width: 96px !important; height: 44px !important; }
body.lay-port #srt-sound-btn { right: calc(6px + var(--sr)) !important; left: auto !important; top: calc(332px + var(--st)) !important; bottom: auto !important; transform: none !important; width: 70px !important; height: 44px !important; font-size: 13px !important; padding: 0 !important; }
body.lay-port #hskill { right: calc(6px + var(--sr)) !important; left: auto !important; top: calc(194px + var(--st)) !important; bottom: auto !important; width: calc(50% - 9px - var(--sr)) !important; height: 48px !important; padding: 4px 8px 4px 4px !important; }
body.lay-port #log { right: calc(6px + var(--sr)) !important; left: auto !important; top: calc(248px + var(--st)) !important; bottom: auto !important; width: calc(50% - 9px - var(--sr)) !important; height: 78px !important; font-size: 11px !important; padding: 4px 7px !important; }
body.lay-port #hint, body.lay-port #tip { bottom: calc(186px + var(--sb)) !important; top: auto !important; left: 50% !important; max-width: calc(100% - 24px) !important; height: 34px; line-height: 22px; font-size: 13px !important; padding: 6px 12px !important; }
body.lay-port #toast { top: calc(6px + var(--st)) !important; left: 6px !important; right: 6px !important; transform: none !important; max-width: none !important; }
body.lay-port #btn-y, body.lay-port #btn-n { bottom: calc(186px + var(--sb)) !important; top: auto !important; width: 96px !important; height: 44px !important; }
body.lay-port #btn-n { right: auto !important; left: calc(50% - 100px) !important; } body.lay-port #btn-y { right: auto !important; left: calc(50% + 4px) !important; }

/* ---------- 휴대폰 가로 ---------- */
body.lay-land #card { left: calc(6px + var(--sl)) !important; top: calc(6px + var(--st)) !important; width: 272px !important; height: 196px !important; padding: 9px 11px 8px !important; transform: scale(0.72) !important; transform-origin: top left !important; }
body.lay-land #card .st { display: none !important; }
body.lay-land #card .merit span { display: inline !important; }
body.lay-land #card .pframe { width: 68px !important; height: 68px !important; } body.lay-land #card .pframe canvas#h-face { width: 64px !important; height: 64px !important; }
body.lay-land #card .gear .slot span, body.lay-land #card .gear .bag span { display: inline !important; }
body.lay-land #card .row2 { flex-wrap: nowrap !important; }
body.lay-land #board { right: calc(6px + var(--sr)) !important; top: calc(6px + var(--st)) !important; width: 250px !important; height: 170px !important; transform: scale(0.72) !important; transform-origin: top right !important; }
body.lay-land #miniwrap { left: 50% !important; right: auto !important; top: calc(6px + var(--st)) !important; bottom: auto !important; transform: translateX(-50%) !important; padding: 3px !important; }
body.lay-land #miniwrap canvas, body.lay-land #mini { width: 72px !important; height: 90px !important; }
body.lay-land #hskill { left: calc(6px + var(--sl)) !important; right: auto !important; top: calc(153px + var(--st)) !important; bottom: auto !important; width: 164px !important; height: 44px !important; padding: 2px 8px 2px 2px !important; gap: 6px !important; }
body.lay-land #hskill .hsk-ic { width: 38px !important; height: 38px !important; }
body.lay-land #hskill .hsk-tx { font-size: 10px !important; } body.lay-land #hskill .hsk-tx b { font-size: 12px !important; }
body.lay-land #autobar { left: calc(176px + var(--sl)) !important; top: calc(153px + var(--st)) !important; }
body.lay-land #autobar button { height: 44px !important; min-height: 44px !important; }
body.lay-land #autochip { width: 116px; height: 24px; font-size: 11px !important; line-height: 16px; }
body.lay-land #hud-settings-btn { right: calc(6px + var(--sr)) !important; left: auto !important; top: calc(134px + var(--st)) !important; width: 88px !important; height: 44px !important; }
body.lay-land #srt-sound-btn { right: calc(100px + var(--sr)) !important; left: auto !important; top: calc(134px + var(--st)) !important; bottom: auto !important; transform: none !important; width: 60px !important; height: 44px !important; font-size: 13px !important; padding: 0 !important; }
body.lay-land #log { left: calc(140px + var(--sl)) !important; right: calc(216px + var(--sr)) !important; width: auto !important; top: auto !important; bottom: calc(24px + var(--sb)) !important; height: 52px !important; font-size: 10.5px !important; padding: 3px 7px !important; }
body.lay-land #hint, body.lay-land #tip { top: calc(110px + var(--st)) !important; bottom: auto !important; left: 50% !important; max-width: calc(100% - 420px) !important; height: 32px; line-height: 20px; font-size: 13px !important; padding: 6px 12px !important; }
body.lay-land #toast { top: calc(6px + var(--st)) !important; left: calc(210px + var(--sl)) !important; right: calc(194px + var(--sr)) !important; transform: none !important; max-width: none !important; max-height: 100px; overflow: hidden; }
body.lay-land #btn-y, body.lay-land #btn-n { bottom: calc(86px + var(--sb)) !important; top: auto !important; right: auto !important; width: 84px !important; height: 44px !important; }
body.lay-land #btn-n { left: calc(50% - 90px) !important; } body.lay-land #btn-y { left: calc(50% + 6px) !important; }
body.lay-land #stick { width: 112px !important; height: 112px !important; }
body.lay-land #knob { left: 31px !important; top: 31px !important; }

/* ---------- 태블릿과 큰 터치 화면 ---------- */
body.lay-tab #card { left: calc(10px + var(--sl)) !important; top: calc(10px + var(--st)) !important; width: 272px !important; height: 216px !important; transform: none !important; }
body.lay-tab #card .chips { display: flex !important; } body.lay-tab #card .st { display: block !important; } body.lay-tab #card .merit span { display: inline !important; }
body.lay-tab #card .pframe { width: 68px !important; height: 68px !important; } body.lay-tab #card .pframe canvas#h-face { width: 64px !important; height: 64px !important; }
body.lay-tab #card .gear .slot span, body.lay-tab #card .gear .bag span { display: inline !important; }
body.lay-tab #board { right: calc(10px + var(--sr)) !important; top: calc(10px + var(--st)) !important; width: 250px !important; height: 182px !important; transform: none !important; }
body.lay-tab #miniwrap { left: calc(10px + var(--sl)) !important; top: calc(234px + var(--st)) !important; bottom: auto !important; right: auto !important; transform: none !important; padding: 3px !important; }
body.lay-tab #miniwrap canvas, body.lay-tab #mini { width: 120px !important; height: 150px !important; }
body.lay-tab #autobar { left: calc(10px + var(--sl)) !important; top: calc(400px + var(--st)) !important; }
body.lay-tab #autobar button { height: 44px !important; min-height: 44px !important; }
body.lay-tab #autochip { width: 132px; height: 24px; font-size: 11.5px !important; line-height: 16px; }
body.lay-tab #hud-settings-btn { left: calc(10px + var(--sl)) !important; top: calc(450px + var(--st)) !important; width: 96px !important; height: 44px !important; }
body.lay-tab #srt-sound-btn { left: calc(112px + var(--sl)) !important; top: calc(450px + var(--st)) !important; bottom: auto !important; right: auto !important; transform: none !important; width: 70px !important; height: 44px !important; font-size: 13px !important; padding: 0 !important; }
body.lay-tab #hskill { right: calc(10px + var(--sr)) !important; left: auto !important; top: calc(198px + var(--st)) !important; bottom: auto !important; width: 250px !important; height: 62px !important; }
body.lay-tab #log { right: calc(10px + var(--sr)) !important; left: auto !important; top: calc(266px + var(--st)) !important; bottom: auto !important; width: 250px !important; height: 112px !important; max-width: none !important; }
body.lay-tab #hint, body.lay-tab #tip { bottom: calc(190px + var(--sb)) !important; top: auto !important; left: 50% !important; max-width: min(520px, calc(100% - 40px)) !important; height: 34px; line-height: 22px; }
body.lay-tab #toast { top: calc(10px + var(--st)) !important; left: 50% !important; transform: translateX(-50%) !important; max-width: min(520px, calc(100% - 40px)) !important; }
body.lay-tab #btn-y, body.lay-tab #btn-n { bottom: calc(190px + var(--sb)) !important; top: auto !important; width: 96px !important; height: 44px !important; }
body.lay-tab #btn-n { right: auto !important; left: calc(50% - 100px) !important; } body.lay-tab #btn-y { right: auto !important; left: calc(50% + 4px) !important; }

/* 터치 공통: 범례 숨김, 배속은 지금 배속 단추 하나(누르면 다음 배속), 조작 단추 자리 */
body.lay-port #legend, body.lay-land #legend, body.lay-tab #legend { display: none !important; }
body.lay-port #spd button:not(.on), body.lay-land #spd button:not(.on), body.lay-tab #spd button:not(.on) { display: none !important; }
body.lay-port #spd button.on, body.lay-land #spd button.on, body.lay-tab #spd button.on { min-width: 52px; height: 30px; font-size: 13px !important; padding: 0 8px !important; margin: 0 !important; }
body.lay-port #board .time { flex-wrap: nowrap !important; font-size: 12px !important; }
body.lay-port #board .clocktx { width: 52px !important; }
body.lay-port #stick, body.lay-tab #stick { left: calc(14px + var(--sl)) !important; bottom: calc(18px + var(--sb)) !important; width: 124px !important; height: 124px !important; }
body.lay-port #knob, body.lay-tab #knob { left: 37px !important; top: 37px !important; }
body.lay-land #stick { left: calc(14px + var(--sl)) !important; bottom: calc(18px + var(--sb)) !important; }
body.lay-port #btn-z, body.lay-land #btn-z, body.lay-tab #btn-z { right: calc(16px + var(--sr)) !important; bottom: calc(40px + var(--sb)) !important; width: 68px !important; height: 68px !important; }
body.lay-port #btn-x, body.lay-land #btn-x, body.lay-tab #btn-x { right: calc(94px + var(--sr)) !important; bottom: calc(16px + var(--sb)) !important; width: 64px !important; height: 64px !important; }
body.lay-port #btn-c, body.lay-land #btn-c, body.lay-tab #btn-c { right: calc(28px + var(--sr)) !important; bottom: calc(122px + var(--sb)) !important; width: 54px !important; height: 54px !important; }
body.lay-port #btn-v, body.lay-land #btn-v, body.lay-tab #btn-v { right: calc(100px + var(--sr)) !important; bottom: calc(96px + var(--sb)) !important; width: 52px !important; height: 52px !important; }
body.lay-port #btn-i, body.lay-land #btn-i, body.lay-tab #btn-i { right: calc(164px + var(--sr)) !important; bottom: calc(22px + var(--sb)) !important; width: 44px !important; height: 44px !important; }
body.lay-port #btn-p, body.lay-land #btn-p, body.lay-tab #btn-p { right: calc(164px + var(--sr)) !important; bottom: calc(74px + var(--sb)) !important; width: 44px !important; height: 44px !important; }

/* 상점과 책사 메뉴: 터치 화면에서는 조작 단추를 가리지 않는 칸에만 연다. 뒤쪽은 어둡게, 패드는 위로 */
body.menu-open:not(.lay-desk)::after { content: ''; position: fixed; inset: 0; background: rgba(8, 6, 4, 0.5); z-index: 19; }
body.menu-open:not(.lay-desk) #pad { z-index: 21 !important; }
body.lay-port #menu { left: calc(8px + var(--sl)) !important; right: calc(8px + var(--sr)) !important; top: calc(120px + var(--st)) !important; bottom: calc(196px + var(--sb)) !important; width: auto !important; max-width: none !important; transform: none !important; overflow: auto !important; }
body.lay-land #menu { left: calc(140px + var(--sl)) !important; right: calc(216px + var(--sr)) !important; top: calc(8px + var(--st)) !important; bottom: calc(8px + var(--sb)) !important; width: auto !important; max-width: none !important; transform: none !important; overflow: auto !important; }
body.lay-tab #menu { top: 50% !important; max-height: calc(100% - 420px) !important; overflow: auto !important; }

/* ===================== 20차: 조작 안내 ===================== */
#tut { display: none; position: fixed; inset: 0; z-index: 60; pointer-events: none; }
#tut-dim { position: fixed; left: 0; top: 0; pointer-events: none; }
#tut-coach { position: fixed; z-index: 62; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; overflow: auto;
  padding: 12px 14px; background: #1f1813; border: 2px solid #f3d48a; border-radius: 10px; color: #efe6d2; box-shadow: 0 8px 28px rgba(0,0,0,0.6); font-size: 14px; line-height: 1.5; }
#tut-coach .tut-head { display: flex; align-items: baseline; gap: 8px; font-size: 16px; color: #ffe4ae; }
#tut-coach .tut-head small { color: #cfc4ad; font-size: 12px; }
#tut-coach .tut-n { font-size: 12px; font-weight: 700; color: #1a1511; background: #ffd98a; border-radius: 10px; padding: 0 8px; }
#tut-coach p { margin: 4px 0 0; font-size: 14px; color: #efe6d2; }
#tut-coach p.tut-note { font-size: 12.5px; color: #cfc4ad; }
#tut-coach kbd { display: inline-block; min-width: 20px; text-align: center; background: #efe6d2; color: #1a1410; border-radius: 4px; box-shadow: 0 2px 0 #8c816c; padding: 0 5px; margin: 0 2px; font: 700 12px/18px inherit; font-family: inherit; }
#tut-coach .tut-btns { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
#tut-coach button { min-height: 36px; padding: 0 16px; border-radius: 8px; border: 1px solid #685537; background: #30261b; color: #efe6d2; font: inherit; font-size: 14px; cursor: pointer; }
#tut-coach button.pri { background: #b5402a; border-color: #ff9a6c; color: #fff; font-weight: 700; }
#tut-coach button.ghost { margin-right: auto; background: transparent; border-color: transparent; color: #cfc4ad; text-decoration: underline; }
#tut-coach button:disabled { opacity: 0.4; cursor: default; }
body.touch-ui #tut-coach button { min-height: 44px; min-width: 64px; }
#tut-coach.lay-land { flex-direction: row; align-items: center; padding: 8px 12px; }
#tut-coach.lay-land .tut-body { flex: 1; min-width: 0; }
#tut-coach.lay-land p { font-size: 13px; }
#tut-coach.lay-land .tut-btns { flex-wrap: nowrap; }
.tut-ring { position: fixed; z-index: 61; box-sizing: border-box; border: 3px solid #ffd98a; border-radius: 12px; box-shadow: 0 0 0 4px rgba(255, 217, 138, 0.25); pointer-events: none; animation: tutPulse 1.3s ease-in-out infinite; }
@keyframes tutPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255,217,138,0.2); } 50% { box-shadow: 0 0 0 8px rgba(255,217,138,0.45); } }
#tut-ptr { display: none; position: fixed; left: 0; top: 0; z-index: 59; width: 48px; text-align: center; color: #1a1511; font: 700 12px/20px inherit; font-family: inherit; pointer-events: none; }
#tut-ptr { background: #ffd98a; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
#tut-ptr::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -7px; border: 7px solid transparent; border-top-color: #ffd98a; border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .tut-ring { animation: none; } }
/* 출진 카드 첫 방문 단추 */
.sc-foot.sc-first { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.sc-foot.sc-first .sc-go { flex: 1 1 180px; }
.sc-foot.sc-first .sc-now { flex: 0 1 auto; min-height: 44px; padding: 8px 18px; border-radius: 6px; border: 1px solid #6a573f; background: transparent; color: #efe6d2; font: inherit; font-size: 15px; cursor: pointer; }
.sc-foot.sc-first .sc-hint { flex-basis: 100%; }
#tutbtn.on { border-color: #ffd98a; color: #ffd98a; }

/* 일기토 도전이 오면 안내 문구 자리를 수락과 거절 단추가 쓴다 */
body.offer-on #hint, body.offer-on #tip { visibility: hidden !important; }
/* 터치 화면 소리 단추는 다른 단추와 같은 모양 */
body.lay-port #srt-sound-btn, body.lay-land #srt-sound-btn, body.lay-tab #srt-sound-btn { background: rgba(24, 19, 15, 0.9) !important; border: 1px solid rgba(255, 217, 138, 0.45) !important; border-radius: 12px !important; color: #efe6d2 !important; opacity: 1 !important; font-family: inherit !important; }
body.lay-land #spd button.on { height: 26px !important; }
body.lay-land #board .time { height: 26px; }
body.lay-land #board { padding-top: 6px !important; padding-bottom: 4px !important; }
body[class*="lay-"] #autochip { border: 1px solid transparent; }
body.lay-desk #autochip { height: 24px; line-height: 16px; }
body[class*="lay-"] #autochip.on { border-color: rgba(255, 217, 138, 0.35); }

/* 20차 보정: 이동, 공격, 상호작용 연습 중에는 아직 배우지 않은 HUD를 잠시 숨겨 전장과 안내 화살표를 가리지 않게 한다(자리는 그대로 비워 둔다) */
body.tut-practice #autobar, body.tut-practice #log, body.tut-practice #hud-settings-btn, body.tut-practice #srt-sound-btn { visibility: hidden !important; }

/* 한국어 안내 문장은 단어 중간에서 끊지 않는다 */
#tut-coach, #startcard, #tip, #hint, #toast, .hcard, #hud-settings-panel { word-break: keep-all; overflow-wrap: anywhere; }

/* 30성판 나라별 특성 */
#start .fcard .traits li.fm b { color: #9fe0ff; }
.sc-fm { margin-top: 8px; padding: 6px 10px; border-left: 3px solid #4d9fbd; background: rgba(95,183,255,0.07); font-size: 12.5px; color: #e8dcc2; }
.sc-fm > div { margin-top: 3px; } .sc-fm b { color: #9fe0ff; } .sc-fm small { display: block; color: #8f8270; font-size: 11px; }

/* 3부 캠페인 */
#start .fcard.ai-only { opacity: 0.45; filter: grayscale(0.6); cursor: not-allowed; }
.campnote { max-width: 900px; padding: 10px 14px; border: 1px solid #c8a35a; border-radius: 6px; background: rgba(40,30,18,0.9); color: #efe6d2; font-size: 13px; line-height: 1.6; word-break: keep-all; }
.campnote b { color: #ffd98a; margin-right: 6px; }
.campnext { margin: 10px 0; padding: 10px 14px; border: 1px solid #c8a35a; border-radius: 6px; background: rgba(40,30,18,0.9); word-break: keep-all; }
.campnext h4 { margin: 0 0 4px; color: #ffd98a; } .campnext p { margin: 0 0 8px; font-size: 13px; color: #cfc4ad; }

/* 지도별 순위 탭 */
.top10 .bhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.top10 .bhead h4 { margin: 0; flex: 1; }
.seg.mapseg button, #rank-maps button { font-size: 12px; }

/* 시작 화면 닉네임 */
.nickopt input { width: 170px; background: #120e0b; border: 1px solid #5a4a36; border-radius: 4px; color: #efe6d2; padding: 6px 8px; font: inherit; font-size: 14px; }
.nickopt input:focus { outline: none; border-color: #f3d48a; }
.nicknote { margin: 8px 0 0; font-size: 12px; color: #a99d86; }
.nicknote a { color: #cfc4ad; }

/* 화면 설정으로 숨긴 칸: 화면 모드별 배치 규칙(display 지정)보다 우선 */
html body #card.mobile-hud-hidden, html body #board.mobile-hud-hidden, html body #miniwrap.mobile-hud-hidden, html body #log.mobile-hud-hidden, html body #hskill.mobile-hud-hidden { display: none !important; }

/* 휴대폰: 홈 화면에 추가 안내 */
.a2hs { margin: 10px 0 0; padding: 10px 12px; border: 1px solid #c8a35a; border-radius: 8px; background: rgba(40,30,18,.92); color: #efe6d2; font-size: 13px; line-height: 1.6; word-break: keep-all; }
.a2hs[hidden] { display: none; }
.a2hs b { color: #ffd98a; margin-right: 4px; }
.a2hs button { display: block; margin-top: 8px; min-height: 40px; padding: 0 16px; border: 1px solid #c8a35a; border-radius: 6px; background: #3a2c1a; color: #ffe4ae; font: inherit; font-weight: 700; }