:root {
  --ink: #2a1a0c; --parch: #f3e6c4; --parch2: #e8d6a8; --gold: #c99a2a; --gold2: #f5d76e; --wood: #5b3b1d; --wood2: #3d2712;
  --red: #b0302a; --green: #2f8a3a; --blue: #2f6fe0; --bg: #1a130c;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: Spectral, Georgia, serif; }
canvas#map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
h1, h2, h3, h4 { font-family: Cinzel, Georgia, serif; margin: 0 0 6px; }
.pos { color: #2f8a3a; } .neg { color: #c0302a; }
small { opacity: .8; }
a { color: #8a4a10; }

/* buttons */
.btn { font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 13px; color: #fff4d6; background: linear-gradient(#7a5530, #5b3b1d); border: 2px solid #2a1808; border-radius: 6px; padding: 7px 12px; margin: 3px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 #1a0e04; }
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px); }
.btn.gold { background: linear-gradient(#e9c24a, #b8862a); color: #2a1808; }
.btn.red { background: linear-gradient(#c8463a, #8a2420); }
.btn.sm { font-size: 11px; padding: 4px 8px; }
.btn.big { font-size: 17px; padding: 12px 22px; }
.btn:disabled { opacity: .5; cursor: default; }
.x { position: absolute; right: 8px; top: 6px; background: none; border: none; font-size: 18px; cursor: pointer; color: inherit; }

/* loading & start */
#loading { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(#3a2814, #120c06); color: var(--gold2); }
.lbar { width: 320px; height: 12px; border: 2px solid var(--gold); border-radius: 8px; overflow: hidden; margin: 18px; } .lbar i { display: block; height: 100%; width: 0; background: var(--gold2); }
#start { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(30,20,10,.55), rgba(10,6,2,.95)); padding: 16px; overflow: auto; }
.start-card { background: var(--parch); border: 6px double var(--wood); border-radius: 12px; padding: 22px 26px; max-width: 1100px; width: 100%; max-height: 96vh; overflow: auto; box-shadow: 0 20px 60px #000; }
.start-card h1 { font-size: 42px; color: #4a2a0c; text-align: center; letter-spacing: 2px; } .start-card h1 span { color: var(--gold); }
.sub { text-align: center; font-style: italic; margin: 0 0 14px; }
.start-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.realms { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; max-height: 60vh; overflow: auto; padding-right: 4px; }
.realm { display: grid; grid-template-columns: 14px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; text-align: left; background: #fbf3dc; border: 2px solid #c8b080; border-radius: 6px; padding: 6px 8px; cursor: pointer; font-family: inherit; color: inherit; }
.realm i { grid-row: span 2; border-radius: 3px; border: 1px solid #0005; }
.realm small { grid-column: 2; font-size: 11px; }
.realm em { grid-row: 1 / span 2; grid-column: 3; align-self: center; font-style: normal; font-size: 11px; font-weight: 700; }
.realm.on { border-color: var(--gold); background: #fff2c0; box-shadow: 0 0 0 2px var(--gold2); }
.d-Easy { color: #2f8a3a; } .d-Normal { color: #8a6a10; } .d-Hard { color: #c06020; } .d-VeryHard { color: #b0302a; }
.start-info ul { padding-left: 18px; } .start-info li { margin: 6px 0; }
.start-btns { margin-top: 14px; text-align: center; }

/* top bar */
#top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 6px 10px; background: linear-gradient(#4a301a, #2e1d0e); border-bottom: 3px solid var(--gold); color: #fff2cc; flex-wrap: wrap; }
#realm { display: flex; align-items: center; gap: 8px; } #realm b { font-family: Cinzel; display: block; } #realm small { font-size: 12px; }
.crest { width: 14px; height: 34px; border-radius: 2px 2px 7px 7px; border: 1px solid #000; }
#stats { display: flex; gap: 12px; font-size: 14px; } #stats em { font-style: normal; font-size: 12px; }
#menu { display: flex; gap: 2px; flex-wrap: wrap; }
.mbtn { background: rgba(255,255,255,.06); color: #fff2cc; border: 1px solid #ffffff22; border-radius: 5px; padding: 5px 8px; cursor: pointer; font-family: Cinzel; font-size: 12px; }
.mbtn:hover { background: rgba(245,215,110,.25); }
.tright { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#date { font-family: Cinzel; font-weight: 700; min-width: 150px; text-align: right; }
#speed button { background: #2a1808; color: #fff2cc; border: 1px solid #6b4a20; padding: 3px 7px; cursor: pointer; font-size: 11px; }
#speed button.on { background: var(--gold); color: #2a1808; }
#mapmode { background: #2a1808; color: #fff2cc; border: 1px solid #6b4a20; font-family: inherit; }
.av { width: 40px; height: 40px; border-radius: 50%; background: #e8d8b0; border: 2px solid var(--gold); object-fit: cover; flex: none; image-rendering: pixelated; }
.av.big { width: 96px; height: 96px; } .av.sm { width: 24px; height: 24px; vertical-align: middle; margin-right: 4px; }

/* side + log */
#side { position: fixed; left: 10px; top: 70px; width: 300px; z-index: 9; display: none; background: var(--parch); border: 3px solid var(--wood); border-radius: 10px; padding: 12px; box-shadow: 0 8px 24px #0008; max-height: calc(100vh - 90px); overflow: auto; }
#side h3 { font-size: 20px; } #side .sub { text-align: left; font-style: normal; font-weight: 700; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0; font-size: 14px; } .kv b { text-align: right; }
.blds span, .comp span { display: inline-block; background: #e3d09e; border-radius: 4px; padding: 1px 6px; margin: 2px; font-size: 12px; }
.who { display: flex; gap: 8px; align-items: center; margin: 6px 0; font-size: 13px; }
.siege { font-size: 13px; margin: 6px 3px; } .pbar { height: 8px; background: #0003; border-radius: 4px; overflow: hidden; } .pbar i { display: block; height: 100%; background: #e08a20; }
#log { position: fixed; left: 10px; bottom: 10px; width: 420px; max-width: calc(100vw - 20px); z-index: 8; font-size: 12px; color: #fff2cc; background: rgba(30,20,10,.72); border-radius: 8px; padding: 6px 10px; pointer-events: none; }
#log:empty { display: none; }
#log div { margin: 2px 0; } #log i { color: var(--gold2); font-style: normal; margin-right: 4px; }
#tip { position: fixed; z-index: 30; display: none; background: rgba(30,20,10,.92); color: #fff2cc; border: 1px solid var(--gold); padding: 6px 9px; border-radius: 6px; font-size: 13px; pointer-events: none; }
#toasts { position: fixed; right: 12px; top: 74px; z-index: 35; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.toast { background: var(--parch); border: 2px solid var(--wood); border-radius: 8px; padding: 8px 12px; max-width: 360px; box-shadow: 0 6px 16px #0008; transition: opacity .5s, transform .5s; animation: tin .3s; }
.toast.out { opacity: 0; transform: translateX(30px); }
@keyframes tin { from { transform: translateX(40px); opacity: 0; } }

/* modal */
#modal { position: fixed; inset: 0; z-index: 45; display: none; align-items: center; justify-content: center; background: rgba(10,6,2,.6); padding: 12px; }
.mcard { background: var(--parch); border: 4px solid var(--wood); border-radius: 12px; width: 560px; max-width: 100%; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px #000; position: relative; }
.mcard.wide { width: 1000px; }
.mhead { padding: 12px 40px 8px 16px; border-bottom: 2px solid #c8b080; background: linear-gradient(#f7ecd0, #ead7a6); border-radius: 8px 8px 0 0; }
.mbody { padding: 12px 16px; overflow: auto; }
.mfoot { padding: 8px 12px; border-top: 2px solid #c8b080; text-align: right; }
.evt { font-size: 17px; line-height: 1.5; }
.intro { display: flex; gap: 14px; align-items: flex-start; } .intro p { margin: 0 0 8px; }
.hint { font-style: italic; opacity: .85; font-size: 13px; }
.ruler { display: flex; gap: 14px; align-items: flex-start; } .ruler p { margin: 3px 0; }
.st { display: inline-block; background: #ead7a6; border-radius: 4px; padding: 0 5px; margin: 1px; font-size: 12px; font-weight: 600; }
.trait { display: inline-block; background: #5b3b1d; color: #fff2cc; border-radius: 10px; padding: 1px 8px; margin: 1px; font-size: 11px; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; margin: 6px 0 12px; }
.pcard { display: flex; gap: 8px; align-items: center; background: #fbf3dc; border: 1px solid #c8b080; border-radius: 8px; padding: 6px; cursor: pointer; font-size: 13px; }
.pcard:hover { border-color: var(--gold); }
.acts { display: flex; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.council { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.seat { background: #fbf3dc; border: 2px solid #c8b080; border-radius: 10px; padding: 10px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.seat:hover { border-color: var(--gold); } .seat .av { width: 64px; height: 64px; } .seat small { font-size: 11px; } .empty { color: #a00; font-style: italic; padding: 22px 0; }
.budget { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; } .budget div { background: #fbf3dc; border-radius: 8px; padding: 8px; text-align: center; } .budget span { display: block; font-size: 12px; } .budget b { font-size: 20px; }
.pol { background: #fbf3dc; border: 1px solid #c8b080; border-radius: 8px; padding: 8px 10px; margin: 6px 0; } .pol p { margin: 2px 0 6px; font-size: 13px; }
.lv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.lv button { background: #ead7a6; border: 2px solid #c8b080; border-radius: 6px; padding: 5px; cursor: pointer; font-family: Cinzel; font-size: 12px; }
.lv button small { display: block; font-family: Spectral; } .lv button.on { background: var(--gold2); border-color: var(--wood); }
.techs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.tech { text-align: left; background: #fbf3dc; border: 2px solid #c8b080; border-radius: 6px; padding: 6px; cursor: pointer; font-family: inherit; }
.tech small { display: block; font-size: 11px; } .tech.on { border-color: var(--gold); background: #fff2c0; } .tech.done { background: #cfe8c0; }
.diplo { display: grid; grid-template-columns: 240px 1fr; gap: 12px; }
.dlist { max-height: 62vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.dlist button { text-align: left; background: #fbf3dc; border: 1px solid #c8b080; border-radius: 5px; padding: 5px 6px; cursor: pointer; font-family: inherit; font-size: 13px; }
.dlist button.on { background: var(--gold2); } .dlist i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 1px solid #0006; }
.eval { background: #fbf3dc; border: 1px solid #c8b080; border-radius: 8px; padding: 8px 12px; max-width: 360px; } .eval div { display: flex; justify-content: space-between; font-size: 13px; }
.marry { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .marry .pcard { margin: 4px 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl th { text-align: left; border-bottom: 2px solid #c8b080; } .tbl td { border-bottom: 1px solid #e0cc9a; padding: 4px; } .tbl .bl span { margin-right: 4px; }
.warn { background: #f8d0c0; border: 2px solid #b0302a; padding: 8px; border-radius: 8px; }
.war { padding: 4px 0; border-bottom: 1px solid #e0cc9a; }
.chron div { padding: 3px 0; border-bottom: 1px solid #e8d8b0; font-size: 13px; } .chron .imp { font-weight: 600; } .chron i { color: #8a6a10; font-style: normal; margin-right: 6px; }
/* dynasty tree */
.tree { overflow: auto; max-height: 70vh; padding: 10px; }
.tree ul { display: flex; justify-content: center; padding-top: 18px; position: relative; margin: 0; padding-left: 0; }
.tree li { list-style: none; text-align: center; position: relative; padding: 18px 4px 0; }
.tree li::before, .tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid #8a6a40; width: 50%; height: 18px; }
.tree li::after { right: auto; left: 50%; border-left: 2px solid #8a6a40; }
.tree li:only-child::after, .tree li:only-child::before { display: none; } .tree li:only-child { padding-top: 0; }
.tree li:first-child::before, .tree li:last-child::after { border: 0 none; } .tree li:last-child::before { border-right: 2px solid #8a6a40; }
.tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #8a6a40; height: 18px; }
.tree > ul { padding-top: 0; }
.tnode { display: inline-flex; flex-direction: column; align-items: center; background: #fbf3dc; border: 2px solid #c8b080; border-radius: 8px; padding: 6px 8px; cursor: pointer; min-width: 90px; font-size: 12px; }
.tnode.ruler { border-color: var(--gold); background: #fff2c0; } .tnode.dead { opacity: .6; filter: grayscale(.7); }

/* city view */
#cityview { position: fixed; inset: 0; z-index: 20; display: none; background: #000; }
#ccv { width: 100%; height: 100%; display: block; }
.ctop { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(rgba(40,25,12,.95), rgba(40,25,12,.6)); color: #fff2cc; flex-wrap: wrap; }
.ctop h2 { font-size: 24px; margin: 0; } .ctop h2 small { font-size: 14px; color: var(--gold2); } .ctop p { margin: 0; font-size: 13px; }
.cbtns { margin-left: auto; }
.chint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(30,20,10,.8); color: #fff2cc; padding: 5px 12px; border-radius: 8px; font-size: 13px; pointer-events: none; text-align: center; max-width: 90vw; }
.cpanel { position: absolute; right: 12px; top: 80px; width: 360px; max-width: calc(100vw - 24px); max-height: calc(100vh - 140px); overflow: auto; display: none; background: var(--parch); border: 3px solid var(--wood); border-radius: 10px; padding: 12px; box-shadow: 0 8px 30px #000a; }
.cpanel h3 small { font-size: 13px; color: #8a6a10; } .cpanel .sub { font-weight: 700; margin: 8px 3px 2px; width: 100%; }
.cpanel select { width: 100%; margin: 4px 3px; padding: 4px; font-family: inherit; }
.rec { width: 100%; } .recrow { background: #fbf3dc; border: 1px solid #c8b080; border-radius: 6px; padding: 5px; margin: 4px 0; } .recrow small { display: block; font-size: 11px; } .recrow em { color: #a00; font-size: 12px; }

/* battle */
#battle { position: fixed; inset: 0; z-index: 30; display: none; background: #000; --bs: 1; }
#bcv { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); image-rendering: pixelated; }
.binfo { position: absolute; width: 360px; background: #f8f0d8; border: 4px solid #3d2712; border-radius: 12px 12px 12px 30px; padding: 8px 12px 8px 64px; font-size: 13px; box-shadow: 6px 6px 0 #0006; }
.binfo.enemy { left: max(10px, calc(50% - 620px * var(--bs))); top: max(10px, calc(50% - 340px * var(--bs))); }
.binfo.player { right: max(10px, calc(50% - 620px * var(--bs))); bottom: calc(50% - 170px * var(--bs)); border-radius: 30px 12px 12px 12px; }
.bav { position: absolute; left: 6px; top: 8px; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--gold); background: #e8d8b0; image-rendering: pixelated; }
.bnm { font-family: Cinzel; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .blv { color: #8a6a10; }
.bfac { font-size: 11px; opacity: .8; margin-bottom: 2px; }
.brow { display: grid; grid-template-columns: 34px 1fr 54px; align-items: center; gap: 6px; font-size: 11px; } .brow b { color: #c06020; } .brow span { text-align: right; font-weight: 700; }
.bbar { height: 9px; background: #3d2712; border-radius: 5px; padding: 1px; } .bbar i { display: block; height: 100%; border-radius: 4px; transition: width .4s; }
.bcomp span { margin-right: 6px; font-size: 12px; }
.bbottom { position: absolute; left: 50%; bottom: max(6px, calc(50% - 360px * var(--bs))); transform: translateX(-50%); width: min(1280px * var(--bs), 100vw); min-width: min(100vw, 700px); display: grid; grid-template-columns: 1fr 1.25fr; gap: 6px; padding: 0 6px; }
.btext { background: #f8f0d8; border: 4px solid #3d2712; border-radius: 10px; padding: 12px 16px; font-size: 19px; min-height: 110px; font-family: Spectral; box-shadow: 4px 4px 0 #0006; }
.bmenu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: #f8f0d8; border: 4px solid #3d2712; border-radius: 10px; padding: 6px; box-shadow: 4px 4px 0 #0006; transition: opacity .2s; }
.bmenu.off { pointer-events: none; } .bmenu.off > * { opacity: .35; }
.bact { text-align: left; border: 2px solid #3d2712; border-radius: 8px; padding: 5px 8px; cursor: pointer; font-family: inherit; background: #fff8e4; }
.bact b { font-family: Cinzel; font-size: 15px; display: block; } .bact small { font-size: 10.5px; line-height: 1.15; display: block; }
.bact:hover:not(:disabled) { background: #ffe9a0; transform: translateY(-1px); } .bact:disabled { opacity: .45; }
.a-charge { border-left: 8px solid #d84040; } .a-volley { border-left: 8px solid #3fa04a; } .a-wall { border-left: 8px solid #3a7ad8; } .a-duel { border-left: 8px solid #e0a020; } .a-rally { border-left: 8px solid #a060d0; } .a-retreat { border-left: 8px solid #777; }
.bauto { grid-column: span 3; font-size: 12px; text-align: right; }
.bresult { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); }
.bres-card { background: var(--parch); border: 5px double var(--wood); border-radius: 14px; padding: 20px 30px; text-align: center; min-width: 340px; animation: pop .4s; }
.bres-card h2 { font-size: 40px; } .bres-card.win h2 { color: #b8862a; text-shadow: 0 2px 0 #5b3b1d; } .bres-card.lose h2 { color: #8a2420; }
.bres-card table { margin: 8px auto; } .bres-card td, .bres-card th { padding: 3px 12px; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }

@media (max-width: 760px) and (min-height: 541px), (max-width: 760px) and (orientation: portrait) {
  #stats { font-size: 12px; gap: 6px; } #menu { order: 5; width: 100%; } .tright { margin-left: 0; }
  #side { width: calc(100vw - 20px); top: auto; bottom: 10px; max-height: 45vh; }
  #log { display: none; }
  .start-grid, .diplo, .marry { grid-template-columns: 1fr; } .council { grid-template-columns: repeat(2, 1fr); } .budget { grid-template-columns: repeat(2, 1fr); }
  .binfo { width: 250px; font-size: 11px; } .bbottom { grid-template-columns: 1fr; } .btext { min-height: 60px; font-size: 15px; } .bact small { display: none; }
}
/* battle command cards */
.bbottom { grid-template-columns: 1fr 1.9fr; }
.bmenu { display: block; padding: 6px; }
.crow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.srow { display: grid; grid-template-columns: 110px repeat(3, 1fr) 54px; gap: 4px; margin-top: 5px; align-items: stretch; }
.slab { font-family: Cinzel; font-weight: 700; font-size: 12px; display: flex; flex-direction: column; justify-content: center; } .slab small { font-family: Spectral; font-weight: 400; }
.card { position: relative; text-align: center; border: 2px solid #3d2712; border-radius: 9px; padding: 4px 4px 14px; cursor: pointer; font-family: inherit; background: linear-gradient(#fffaf0, #f0e2bd); box-shadow: 0 3px 0 #3d2712; transition: transform .1s; min-height: 92px; }
.card i { font-style: normal; font-size: 22px; display: block; line-height: 1.1; }
.card b { font-family: Cinzel; font-size: 12.5px; display: block; }
.card small { font-size: 9.5px; line-height: 1.1; display: block; opacity: .85; }
.card:hover:not(:disabled) { transform: translateY(-3px); background: linear-gradient(#fff6d8, #f6d77a); }
.card:disabled { filter: grayscale(.8); opacity: .5; cursor: default; }
.card .cdb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(30,20,10,.55); color: #fff; font-weight: 700; font-size: 20px; border-radius: 7px; }
.card .cdb.need { font-size: 11px; }
.card .cdl { position: absolute; bottom: 1px; right: 5px; font-style: normal; font-size: 10px; font-weight: 700; color: #7a4a10; }
.c-charge { border-top: 5px solid #d84040; } .c-volley { border-top: 5px solid #3fa04a; } .c-pierce { border-top: 5px solid #d0a020; } .c-cavalry { border-top: 5px solid #8a5428; } .c-wall { border-top: 5px solid #3a7ad8; } .c-retreat { border-top: 5px solid #777; }
.card.skill { background: linear-gradient(#3a2414, #24160a); color: #ffe9b0; border-color: #c99a2a; min-height: 80px; }
.card.skill .cdl { color: #ffb070; }
.card.skill.ready { box-shadow: 0 0 12px #ff8a2a, 0 3px 0 #000; animation: glowp 1.2s infinite alternate; }
@keyframes glowp { to { box-shadow: 0 0 22px #ffc04a, 0 3px 0 #000; } }
.rg { position: absolute; left: 6px; right: 34px; bottom: 4px; height: 5px; background: #000a; border-radius: 3px; overflow: hidden; } .rg span { display: block; height: 100%; background: linear-gradient(90deg, #c0501a, #ffb030); }
.bauto { grid-column: auto; display: flex; align-items: center; font-size: 11px; }
.bf { font-style: normal; margin-left: 6px; color: #b05010; font-weight: 700; }
.brow b { font-size: 10px; }
@media (max-width: 760px) and (min-height: 541px), (max-width: 760px) and (orientation: portrait) { .crow { grid-template-columns: repeat(3, 1fr); } .srow { grid-template-columns: repeat(3, 1fr); } .slab, .bauto { grid-column: span 3; } .card small { display: none; } .card { min-height: 60px; } }
/* ===== HUD v2: wooden top bar + bottom command dock ===== */
#top { height: auto; min-height: 54px; padding: 5px 12px; gap: 14px; flex-wrap: nowrap; background: linear-gradient(#5b3b1d, #3d2712 60%, #2e1d0e); border-bottom: 3px solid #c99a2a; box-shadow: 0 4px 14px #0008, inset 0 1px 0 #ffffff22; }
#stats span { background: rgba(0,0,0,.28); border: 1px solid #c99a2a55; border-radius: 14px; padding: 3px 10px; white-space: nowrap; }
#stats { flex-wrap: nowrap; overflow: hidden; }
.tright { gap: 6px; }
#speed { display: flex; border: 1px solid #c99a2a; border-radius: 8px; overflow: hidden; }
#speed button { border: none; border-right: 1px solid #6b4a20; padding: 5px 8px; }
#dock { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 11; background: linear-gradient(#5b3b1d, #3d2712); border: 3px solid #c99a2a; border-radius: 18px; padding: 5px 8px; box-shadow: 0 8px 24px #000a, inset 0 1px 0 #ffffff22; max-width: calc(100vw - 20px); }
#menu { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
#menu::-webkit-scrollbar { display: none; }
.mbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; height: 54px; padding: 2px 6px; background: radial-gradient(circle at 50% 30%, #7a5530, #4a301a); border: 2px solid #8a6a30; border-radius: 12px; color: #ffe9b0; transition: transform .12s, border-color .12s; }
.mbtn i { font-style: normal; font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 0 #0008); }
.mbtn span { font-size: 10.5px; margin-top: 3px; font-family: Cinzel; }
.mbtn:hover { transform: translateY(-4px); border-color: #f5d76e; background: radial-gradient(circle at 50% 30%, #9a7040, #5b3b1d); }
.mbtn:active { transform: translateY(0) scale(.95); }
#centerbtn { position: fixed; right: 14px; bottom: 16px; z-index: 11; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #c99a2a; background: radial-gradient(#7a5530, #3d2712); font-size: 22px; cursor: pointer; box-shadow: 0 6px 16px #000a; }
#log { bottom: 90px; }
#side { animation: slidein .25s ease-out; background: linear-gradient(#f8eed4, #ecdcb0); box-shadow: 0 10px 30px #000a, inset 0 0 0 2px #c99a2a; }
@keyframes slidein { from { transform: translateX(-30px); opacity: 0; } }
#modal { backdrop-filter: blur(2px); }
.mcard { animation: pop .22s ease-out; background: linear-gradient(#f8eed4, #ecdcb0); box-shadow: 0 24px 70px #000, inset 0 0 0 2px #c99a2a; }
.mhead { background: linear-gradient(#5b3b1d, #3d2712); color: #ffe9b0; border-bottom: 3px solid #c99a2a; }
.mhead h2 { text-shadow: 0 2px 0 #000; }
.mcard > .mhead .x { color: #ffe9b0; }
.btn { transition: transform .1s, filter .1s; }
.btn:hover { transform: translateY(-1px); }
.toast { background: linear-gradient(#f8eed4, #ecdcb0); box-shadow: 0 6px 18px #000a, inset 0 0 0 2px #c99a2a; }
.ctop { background: linear-gradient(rgba(61,39,18,.96), rgba(61,39,18,.75)); border-bottom: 2px solid #c99a2a; }
.cpanel { animation: slidein2 .25s ease-out; background: linear-gradient(#f8eed4, #ecdcb0); box-shadow: 0 10px 34px #000b, inset 0 0 0 2px #c99a2a; }
@keyframes slidein2 { from { transform: translateX(40px); opacity: 0; } }
.binfo { animation: binfo .5s ease-out; } .binfo.enemy { animation-name: binfo2; }
@keyframes binfo { from { transform: translateX(120%); } } @keyframes binfo2 { from { transform: translateX(-120%); } }

/* ===== Phone layout ===== */
@media (max-width: 760px) and (min-height: 541px), (max-width: 760px) and (orientation: portrait) {
  #top { flex-wrap: wrap; gap: 6px; padding: 4px 8px; }
  #realm small { display: none; } #realm .av { width: 32px; height: 32px; }
  #stats { order: 3; width: 100%; gap: 4px; overflow-x: auto; } #stats span { font-size: 11px; padding: 2px 7px; }
  .tright { margin-left: auto; } #date { min-width: 0; font-size: 12px; } #mapmode { display: none; }
  #speed button { padding: 4px 6px; }
  #dock { left: 0; right: 0; bottom: 0; transform: none; border-radius: 14px 14px 0 0; max-width: none; padding: 4px; border-width: 2px 0 0; }
  .mbtn { min-width: 56px; height: 50px; } .mbtn span { font-size: 9px; }
  #centerbtn { bottom: 74px; right: 10px; width: 44px; height: 44px; }
  #side { left: 6px; right: 6px; width: auto; top: auto; bottom: 66px; max-height: 46vh; border-radius: 14px; }
  #toasts { top: auto; bottom: 120px; left: 8px; right: 8px; align-items: stretch; }
  #modal { padding: 0; } .mcard, .mcard.wide { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .people { grid-template-columns: 1fr; } .lv { grid-template-columns: repeat(2, 1fr); }
  .ruler { flex-direction: column; align-items: center; text-align: center; }
  .ctop h2 { font-size: 18px; } .ctop p { font-size: 11px; } .cbtns .btn { font-size: 11px; padding: 5px 8px; }
  .cpanel { left: 6px; right: 6px; width: auto; top: auto; bottom: 46px; max-height: 50vh; }
  .binfo { width: 46vw; padding: 4px 6px 4px 44px; font-size: 10px; } .bav { width: 36px; height: 36px; }
  .binfo.player { bottom: auto; top: 34vh; }
  .bbottom { grid-template-columns: 1fr; bottom: 0; }
  .btext { min-height: 44px; font-size: 14px; padding: 6px 10px; }
  .crow { grid-template-columns: repeat(3, 1fr); } .card { min-height: 52px; padding: 3px 2px 12px; } .card b { font-size: 10.5px; } .card i { font-size: 18px; }
  .start-card h1 { font-size: 28px; } .start-card { padding: 12px; }
}
#menu { flex-wrap: nowrap; }
@media (max-width: 760px) and (min-height: 541px), (max-width: 760px) and (orientation: portrait) {
  #bcv { top: 0; transform: translate(-50%, 0); }
  .binfo.enemy, .binfo.player { top: calc(var(--ch) + 6px); bottom: auto; left: 4px; right: auto; width: calc(50vw - 8px); border-radius: 10px; }
  .binfo.player { left: auto; right: 4px; }
  .bbottom { width: 100vw; left: 0; transform: none; padding: 0 4px 4px; }
  .bbottom { top: calc(var(--ch) + 120px); bottom: auto; display: flex; flex-direction: column; }
  .bmenu { flex: 1; }
}

/* ===== GBA-style battle HUD ===== */
#battle { font-family: 'Pixelify Sans', 'VT323', monospace; }
#battle .binfo { width: 330px; padding: 6px 14px 6px; background: #f8f8e0; color: #283828; border: 4px solid #405040; border-radius: 16px 4px 16px 4px; box-shadow: inset 0 0 0 2px #c8d0a8, 4px 4px 0 rgba(0,0,0,.35); font-size: 13px; animation: binfo .5s ease-out; }
#battle .binfo.enemy { left: auto; right: max(10px, calc(50% - 625px * var(--bs))); top: max(8px, calc(50% - 352px * var(--bs))); animation-name: binfo; }
#battle .binfo.player { right: max(10px, calc(50% - 625px * var(--bs))); top: auto; bottom: calc(50% - 172px * var(--bs)); animation-name: binfo; }
#battle .bn { display: flex; justify-content: space-between; align-items: baseline; font-size: 23px; letter-spacing: 1px; white-space: nowrap; gap: 8px; } #battle .bn b { overflow: hidden; text-overflow: ellipsis; } #battle .bn .lv { font-size: 18px; }
#battle .bfac { font-size: 11px; opacity: .7; margin: -2px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#battle .hp { display: flex; align-items: center; gap: 6px; } #battle .hp em { font-style: normal; background: #405040; color: #f8c048; font-size: 12px; padding: 0 5px; border-radius: 4px; font-weight: 700; }
#battle .hpb { flex: 1; height: 11px; background: #506050; border: 2px solid #405040; border-radius: 6px; overflow: hidden; } #battle .hpb i { display: block; height: 100%; transition: width .5s steps(12); }
#battle .hpn { text-align: right; font-size: 21px; font-weight: 600; line-height: 1.1; }
#battle .sub { display: flex; justify-content: space-between; font-size: 13px; opacity: .85; }
#battle .rg { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; } #battle .rg em { font-style: normal; color: #2868b8; font-weight: 700; font-size: 11px; } #battle .rgb { flex: 1; height: 6px; background: #30404a; border-radius: 3px; overflow: hidden; } #battle .rgb i { display: block; height: 100%; background: #48a8f8; transition: width .5s; }
#battle .cmp { font-size: 11px; opacity: .75; margin-top: 1px; white-space: nowrap; overflow: hidden; } #battle .cmp span { margin-right: 7px; }
#battle .bbottom { left: 50%; transform: translateX(-50%); bottom: max(0px, calc(50% - 360px * var(--bs))); width: min(1280px * var(--bs), 100vw); min-width: 0; height: max(150px, calc(180px * var(--bs))); display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; padding: 0; background: #1c2228; border-top: 4px solid #0e1216; }
#battle .bmenu { display: flex; flex-direction: column; justify-content: center; gap: 4px; background: #f8f8f0; border: 6px solid #484058; border-radius: 10px; box-shadow: inset 0 0 0 3px #a8a0b8; margin: 8px; padding: 6px 12px; }
#battle .cmds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 10px; }
#battle .cmd { font-family: inherit; font-size: 22px; font-weight: 600; color: #383040; background: none; border: 0; text-align: left; padding: 1px 2px 1px 22px; position: relative; cursor: pointer; white-space: nowrap; letter-spacing: .5px; min-height: 0; box-shadow: none; transform: none; }
#battle .cmd .cur { position: absolute; left: 2px; visibility: hidden; }
#battle .cmd:hover .cur, #battle .cmd:focus .cur { visibility: visible; animation: gbblink .7s steps(2) infinite; } #battle .cmd:focus { outline: none; }
#battle .cmd:disabled { color: #b8b0c0; cursor: default; } #battle .cmd:disabled .cur { visibility: hidden; }
#battle .cmd em { font-style: normal; font-size: 12px; background: #c84838; color: #fff; border-radius: 3px; padding: 0 4px; margin-left: 5px; vertical-align: 3px; }
#battle .sks { display: grid; grid-template-columns: 82px repeat(3, 1fr); gap: 2px 8px; border-top: 2px dashed #c8c0d0; padding-top: 4px; align-items: center; }
#battle .sks .rl { font-size: 13px; color: #c85a1a; font-weight: 700; } #battle .cmd.sk { font-size: 15px; white-space: normal; line-height: 1.1; } #battle .cmd.sk em { background: #e07a20; } #battle .cmd.sk.ready { color: #c84818; animation: gbglow 1s ease-in-out infinite; }
#battle .btextbox { position: relative; background: #3c6a76; border: 6px solid #c05838; border-radius: 10px; box-shadow: inset 0 0 0 3px #284850; margin: 8px 8px 8px 0; }
#battle .btext { background: none; border: 0; box-shadow: none; color: #fff; font-family: inherit; font-size: 28px; line-height: 1.25; padding: 12px 18px; text-shadow: 2px 2px 0 #1c3840; min-height: 0; }
#battle .bauto { position: absolute; right: 10px; bottom: 6px; color: #d8f0f0; font-size: 14px; cursor: pointer; }
#battle .bres-card { font-family: inherit; background: #f8f8e0; color: #283828; border: 6px solid #405040; border-radius: 12px; box-shadow: inset 0 0 0 3px #c8d0a8, 6px 6px 0 rgba(0,0,0,.4); }
#battle .bres-card h2 { font-family: inherit; font-size: 46px; letter-spacing: 2px; } #battle .bres-card .cmd { margin-top: 8px; }
@keyframes gbblink { 50% { opacity: 0; } } @keyframes gbglow { 50% { text-shadow: 0 0 8px #ffd060; } }
@media (max-width: 760px) and (min-height: 541px), (max-width: 760px) and (orientation: portrait) {
  #battle .binfo.enemy, #battle .binfo.player { top: calc(var(--ch) + 4px); bottom: auto; width: calc(50vw - 8px); padding: 4px 8px; }
  #battle .binfo.enemy { left: 4px; right: auto; } #battle .binfo.player { right: 4px; left: auto; }
  #battle .bn { font-size: 15px; } #battle .bn .lv { font-size: 12px; } #battle .hpn { font-size: 14px; } #battle .sub { font-size: 10px; } #battle .cmp { display: none; }
  #battle .bbottom { top: calc(var(--ch) + 112px); bottom: auto; height: auto; display: flex; flex-direction: column; left: 0; transform: none; width: 100vw; background: none; border: 0; }
  #battle .btextbox { order: -1; margin: 4px; } #battle .btext { font-size: 18px; padding: 8px 12px; min-height: 52px; }
  #battle .bmenu { margin: 0 4px; } #battle .cmd { font-size: 17px; } #battle .cmd.sk { font-size: 13px; } #battle .sks { grid-template-columns: 1fr 1fr 1fr; } #battle .sks .rl { grid-column: 1 / -1; }
}

img.av,img.av2,.pcard img,.portrait img{image-rendering:pixelated;image-rendering:crisp-edges}

/* ================= Landscape phones (short screens): compact, thumb-friendly layout ================= */
@media (max-height: 540px) and (orientation: landscape) {
  body { font-size: 13px; }
  .btn { padding: 5px 11px; font-size: 13px; min-height: 34px; } .btn.big { padding: 7px 14px; font-size: 15px; } .btn.sm { min-height: 28px; padding: 3px 8px; }
  /* start screen: realm list left, choices and buttons always visible right */
  #start { padding: 4px; }
  .start-card { padding: 8px 12px; max-height: calc(100vh - 8px); border-width: 4px; }
  .start-card h1 { font-size: 20px; letter-spacing: 1px; margin: 0 0 6px; } .start-card .sub { display: none; }
  .start-grid { grid-template-columns: 1.5fr 1fr; gap: 12px; } .start-grid h3 { font-size: 13px; margin: 0 0 4px; }
  .realms { max-height: calc(100vh - 76px); grid-template-columns: 1fr 1fr; gap: 4px; }
  .realm { padding: 4px 8px; min-height: 0; } .realm b { font-size: 13px; } .realm small { font-size: 10px; } .realm em { font-size: 10px; }
  .start-info h3, .start-info ul { display: none; }
  .start-info label { display: block; margin: 0 0 8px; font-size: 12px; }
  .start-btns { display: flex; flex-direction: column; gap: 8px; } .start-btns .btn { width: 100%; white-space: normal; }
  /* top bar: one slim line */
  #top { min-height: 38px; padding: 2px 8px; gap: 8px; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  #realm .av, #realm .crest { width: 30px !important; height: 30px !important; } #realm b { font-size: 13px; } #realm small { display: none; }
  #stats { font-size: 12px; gap: 5px; } #stats span { padding: 1px 7px; } #stats em { display: none; }
  #mapmode { font-size: 11px; padding: 1px 2px; } #date { font-size: 12px; } #speed button { padding: 2px 6px; font-size: 11px; min-width: 26px; }
  /* main menu: a vertical rail of icons on the left */
  #dock { left: max(6px, env(safe-area-inset-left)); top: 46px; bottom: auto; transform: none; border-radius: 12px; padding: 3px; border-width: 2px; }
  #menu { flex-direction: column; overflow-y: auto; max-height: calc(100vh - 58px); gap: 3px; }
  .mbtn { min-width: 44px; width: 44px; height: 40px; padding: 0; } .mbtn span { display: none; } .mbtn i { font-size: 19px; } .mbtn:hover { transform: none; }
  /* actions: a stack of round thumb buttons on the right */
  #walkbtn, #tilebtn, #centerbtn { right: max(10px, env(safe-area-inset-right)) !important; width: 48px !important; height: 48px !important; padding: 0 !important; font-size: 0 !important; border-radius: 50% !important; overflow: hidden; }
  #walkbtn { bottom: 10px !important; } #tilebtn { bottom: 64px !important; } #centerbtn { bottom: 118px !important; font-size: 20px !important; }
  #walkbtn::before { content: '🚶'; font-size: 22px; } #tilebtn::before { content: '🏘'; font-size: 22px; }
  /* side panels and log stay clear of the rail */
  #side { left: 58px; top: 44px; width: min(320px, 46vw); max-height: calc(100vh - 54px); padding: 8px; font-size: 12px; } #side h3 { font-size: 15px; }
  #log { left: 58px; bottom: 8px; width: min(320px, 44vw); font-size: 11px; max-height: 64px; overflow: hidden; }
  #toasts { top: 44px; } .toast { font-size: 12px; padding: 5px 10px; }
  #tip { font-size: 11px; max-width: 46vw; }
  /* dialogs: nearly full screen sheets, slim header, scrolling body, compact footer */
  #modal { padding: 4px; }
  .mcard, .mcard.wide { width: min(820px, 100%); max-height: calc(100vh - 8px); border-width: 3px; }
  .mhead { padding: 5px 40px 4px 10px; } .mhead h2 { font-size: 17px; margin: 0; } .mhead .sub, .mhead p { font-size: 11px; margin: 0; }
  .mcard > .mhead .x, .mcard .x { width: 34px; height: 34px; font-size: 20px; top: 2px; right: 4px; }
  .mbody { padding: 6px 10px; } .mfoot { padding: 4px 8px; } .mfoot .btn { min-height: 30px; }
  .av.big { width: 64px !important; height: 64px !important; } .ruler { gap: 10px; } .ruler h2, .ruler h3 { font-size: 16px; margin: 0; }
  .people, .acts { gap: 6px; } .pcard { padding: 4px 6px; } .acts .btn { flex: 1 1 auto; }
  .intro p { font-size: 13px; margin: 4px 0; }
  /* city / palace / battle headers */
  .ctop { padding: 3px 8px; gap: 6px; } .ctop h2 { font-size: 16px; } .ctop h2 small { font-size: 11px; }
  .ctop p { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
  .cbtns { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; max-width: 52vw; } .cbtns .btn { padding: 3px 8px; font-size: 11px; min-height: 30px; white-space: nowrap; }
  .chint { display: none; }
  /* character creation */
  #charcreate > div { padding: 8px 12px !important; max-height: calc(100vh - 8px) !important; }
  #charcreate h1 { font-size: 18px !important; } #charcreate h1 + p { font-size: 11px; margin: 0 0 6px !important; }
  #charcreate h3 { margin: 6px 0 3px !important; font-size: 13px; }
  #charcreate canvas { width: 96px !important; height: 96px !important; }
  #charcreate > div > div { grid-template-columns: 110px 1fr !important; gap: 10px !important; }
  #charcreate [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; }
  #charcreate [data-bg] { padding: 4px 6px !important; font-size: 12px; } #charcreate [data-bg] small { font-size: 10px; }
  #charcreate input { font-size: 14px !important; padding: 2px 6px !important; width: 130px !important; }
  #charcreate .btn { min-height: 30px; padding: 3px 8px; font-size: 12px; }
}

@media (max-height: 540px) and (orientation: landscape) and (max-width: 860px) {
  .ctop p { display: none; } .cbtns { max-width: 72vw; } .cbtns .btn { font-size: 10px; padding: 3px 6px; }
}
@media (max-height: 400px) and (orientation: landscape) {
  #charcreate [data-bg] small:first-of-type { display: none; } #charcreate [data-bg] br:first-of-type { display: none; }
  #charcreate h1 + p { display: none; } #charcreate canvas { width: 80px !important; height: 80px !important; }
}
/* v48: collapsible quest box and minimap in the walking world */
#twhud { cursor: pointer; pointer-events: auto; }
#twhud .twx { float: right; margin: 0 0 4px 10px; opacity: .75; font-size: 12px; line-height: 1; }
#twhud.mini { padding: 6px 12px !important; max-width: none !important; min-width: 0 !important; font-size: 20px !important; }
#twhud.mini b { font-size: 13px; vertical-align: middle; }
#twmini { cursor: pointer; }
#twminibtn { position: absolute; left: 12px; top: 72px; z-index: 12; width: 46px; height: 46px; border-radius: 8px; border: 3px solid #4a2a12; background: #f3e2b4; font-size: 22px; line-height: 1; display: none; box-shadow: inset 0 -3px 0 #d9b46a, 0 3px 0 #1a0e06; cursor: pointer; padding: 0; }
@media (max-height: 540px) and (orientation: landscape) { #twminibtn { top: 64px; width: 40px; height: 40px; font-size: 19px; } }

@media (min-height: 541px) { #twminibtn { left: auto; top: auto; right: 14px; bottom: 14px; } }
#musicbtn { background: #f3e2b4; color: #3a2410; border: 2px solid #4a2a12; border-radius: 3px; font: bold 15px PixelifyEmb, monospace; height: 28px; cursor: pointer; margin-right: 6px; }
#twride { position: absolute; left: 50%; transform: translateX(-50%); top: 80px; z-index: 13; display: none; font-size: 14px !important; padding: 6px 14px !important; }
@media (max-height: 540px) and (orientation: landscape) { #twride { top: 78px; font-size: 13px !important; padding: 5px 12px !important; } }
/* v54: one pixel typeface everywhere (emoji fall back to the system font) */
*, *::before, *::after { font-family: GameSans, 'Alegreya Sans', 'Segoe UI', sans-serif !important; }
/* v56: holding a finger on the game must never select text, open the copy/share bubble, the iOS magnifier,
   the image "save" menu, pull-to-refresh or zoom */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; touch-action: manipulation; }
canvas, img, button, .btn, #tileworld, #tileworld *, #foe, #foe *, #map, #dock, #top { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; -webkit-user-drag: none; }
#tileworld, #twcv, #foe, canvas#map { touch-action: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
*, *::before, *::after { font-size-adjust: none; }