@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600&family=Cinzel:wght@500;600;700&display=swap');
:root{color-scheme:dark;font-family:'Noto Sans Thai',sans-serif;color:#efe6ce;background:#17201c;font-size:14px}*{box-sizing:border-box}html,body,#game{overscroll-behavior:none}body{margin:0;overflow:hidden}#world{width:100%;height:100%;display:block;touch-action:none}#game{height:100dvh;position:relative}header{position:absolute;top:16px;left:20px;right:20px;display:flex;align-items:center;gap:10px;height:70px;background:linear-gradient(110deg,#101b19f5,#16211ee8);border:1px solid #96794c;box-shadow:0 8px 35px #0006;padding:12px 16px}.brand{min-width:240px;border-right:1px solid #635638;padding-right:30px}.brand b{font:600 27px Cinzel,serif;letter-spacing:7px;color:#e3c185}.brand small{display:block;font-size:12px;color:#a49c82;letter-spacing:2px}.resources{display:flex;flex:1;justify-content:space-evenly;gap:15px}.resources span{font-size:21px;color:#d4b77c;white-space:nowrap}.resources b{color:#f3eddc;font:22px Cinzel,serif;margin-left:9px}.resources small{display:block;font-size:12px;color:#a8ac9b;text-align:right}button{font:inherit;background:#24322c;color:#e3d6b5;border:1px solid #716443;border-radius:2px;padding:10px 13px;cursor:pointer}button:hover{background:#405044;border-color:#dec087}button:disabled{opacity:.4;cursor:default}button.active{background:#71603b;border-color:#e5c785}.panel{background:linear-gradient(125deg,#101a18f5,#17221ff2);border:1px solid #897044;box-shadow:0 6px 24px #0005}.mission{position:absolute;top:108px;left:20px;width:270px;padding:20px}.eyebrow{font-size:12px;letter-spacing:1.7px;color:#c1a26b}h1{font-size:23px;font-weight:500;margin:10px 0 5px}p{color:#aeb5a7;line-height:1.8;margin:6px 0}h2{font-size:20px;font-weight:500;margin:4px 0}.rule{height:1px;background:linear-gradient(90deg,#8f7747,transparent);margin:16px 0}.mission label{display:block;margin:10px 0;color:#d8dccb}.enemy{margin-top:22px;font-size:12px;color:#c2a697;display:flex;align-items:center;gap:7px}.enemy i{background:#bd5946;width:6px;height:6px;border-radius:50%}.enemy span{margin-left:auto;color:#b7bba9}footer{position:absolute;bottom:18px;left:20px;right:20px;display:flex;align-items:stretch;gap:12px;pointer-events:none}footer>*{pointer-events:auto}.selection{width:310px;display:flex;gap:16px;padding:17px;align-items:center}.portrait{width:75px;height:90px;border:1px solid #a48852;background:linear-gradient(#214d70,#142932);color:#d8b975;font-size:61px;text-align:center;flex-shrink:0}.selection p{font-size:12px}.health{height:4px;background:#353f34;margin-top:10px}.health i{display:block;background:#9caf69;width:100%;height:100%}.commands{padding:13px 16px;flex:1;max-width:590px}.buttons{display:flex;gap:7px;margin-top:10px}.buttons button{position:relative;flex:1;min-height:81px;padding:6px;font-size:23px}.buttons span{display:block;font-size:12px}.buttons small{display:block;font-size:10px;color:#b8b299}kbd{position:absolute;top:3px;right:5px;font-size:10px;color:#acb49f}.map{margin-left:auto;padding:10px;min-width:230px}.map .eyebrow{margin-bottom:5px;font-size:11px}#minimap{width:210px;height:132px;cursor:crosshair;display:block}#toast{position:absolute;bottom:207px;left:50%;transform:translateX(-50%);padding:9px 22px;background:#12221bcb;border:1px solid #84916a66;border-radius:2px;pointer-events:none;text-align:center;color:#e6e8d8;white-space:nowrap}.view-controls{position:absolute;right:20px;top:108px;display:flex;gap:5px}.view-controls button{font-size:19px;width:43px;padding:7px}#drag{display:none;position:absolute;border:1px solid #d1d89f;background:#d1d89f22;pointer-events:none}dialog{max-width:560px;background:#15231e;color:#e6d8b8;border:1px solid #ad8b50;padding:35px}dialog::backdrop{background:#05110bbb;backdrop-filter:blur(4px)}dialog p{font-size:16px}.close{float:right}#result{position:absolute;inset:0;background:#09150c99;place-items:center}#result:not([hidden]){display:grid}#result .panel{padding:40px;text-align:center;max-width:500px}@media(max-width:950px){header{left:10px;right:10px}.brand{min-width:150px;padding-right:10px}.brand b{font-size:21px;letter-spacing:3px}.brand small{font-size:10px;letter-spacing:0}.resources{gap:5px}.resources span,.resources b{font-size:16px}.resources small{font-size:10px}footer{left:10px;right:10px;gap:7px}.selection{width:230px;padding:10px;gap:8px}.portrait{width:50px;font-size:42px;height:70px}.map{min-width:150px}#minimap{width:130px;height:110px}.commands{padding:10px}.buttons{gap:4px}.buttons span{font-size:11px}.mission{left:10px;width:230px;padding:14px}}@media(max-width:650px){header{height:60px;top:8px;padding:8px}.brand{min-width:90px}.brand b{font-size:16px;letter-spacing:1px}.brand small,.resources small{display:none}.resources span,.resources b{font-size:13px;margin:0}header button{font-size:12px;padding:7px}.mission{top:80px;width:205px;padding:12px}.mission h1{font-size:19px}.mission p,.enemy,.rule{display:none}.mission label{font-size:12px;margin:6px 0}.mission .eyebrow{font-size:10px}.view-controls{top:80px;right:10px}footer{bottom:10px;flex-wrap:wrap}.selection{width:calc(100% - 130px);height:82px}.selection h2{font-size:17px}.portrait{height:55px}.map{min-width:120px;width:120px;height:82px;padding:4px}.map .eyebrow{display:none}#minimap{width:110px;height:72px}.commands{order:3;max-width:none;width:100%}.commands>.eyebrow{display:none}.buttons{margin:0}.buttons button{min-height:66px}.buttons small{font-size:9px}#toast{bottom:204px;font-size:11px;max-width:95%;white-space:normal;width:max-content}.resources{gap:8px}}
header{top:8px;left:10px;right:10px;height:64px}.brand{min-width:195px;padding-right:20px}.brand b{font-size:23px;letter-spacing:5px}.brand small{letter-spacing:1px}.resources span{font-size:16px}.resources b{font-size:20px}.resources small{font-size:11px}.epoch{min-width:80px;text-align:center;border-left:1px solid #665532;padding:0 10px}.epoch b{font:24px Cinzel,serif;color:#d4b678;display:block}.epoch span{font-size:11px}.mission{top:88px;left:10px;width:254px;padding:17px}.team-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #53634444;font-size:13px}.team-row i{width:8px;height:8px;border-radius:1px}.team-row small{margin-left:auto;color:#a9b49e;font-size:11px}.team-row.defeated{opacity:.35;text-decoration:line-through}.enemy{display:block;line-height:1.8}.enemy b{float:right}.view-controls{top:88px;right:10px}footer{bottom:10px;left:10px;right:10px;gap:8px}.selection{width:270px;padding:12px;gap:12px}.selection h2{font-size:18px}.portrait{width:66px;height:87px}.commands{max-width:none;padding:10px 12px}.command-heading{display:flex;align-items:center;gap:6px}.command-heading .eyebrow{margin-right:auto}.command-heading button{font-size:11px;padding:4px 7px}.buttons{flex-wrap:wrap;gap:5px;margin-top:8px;max-height:161px;overflow-y:auto}.buttons button{min-width:66px;flex:1;min-height:67px;max-width:120px;font-size:20px}.buttons span{font-size:11px;white-space:nowrap}.buttons small{font-size:10px}.map{min-width:200px;padding:8px}#minimap{width:190px;height:132px}#toast{bottom:212px;font-size:13px;max-width:75%;white-space:normal;width:max-content}.build-preview{color:#e8ca86}.setup-panel{width:440px;background:linear-gradient(120deg,#111d19f7,#14231ff0);border:1px solid #a4864c;padding:35px;box-shadow:0 25px 100px #000a;position:relative}.setup-panel:before,.setup-panel:after{content:'';position:absolute;width:22px;height:22px;border:2px solid #c8a967;pointer-events:none}.setup-panel:before{top:6px;left:6px;border-right:0;border-bottom:0}.setup-panel:after{bottom:6px;right:6px;border-left:0;border-top:0}#setup{position:absolute;inset:0;display:flex;align-items:center;padding:4vh 5vw;background:linear-gradient(90deg,#08170bd9,transparent 85%);z-index:8}#setup[hidden]{display:none}.setup-panel>h1{font:600 48px Cinzel,serif;letter-spacing:10px;color:#e3c78c;margin:18px 0 0}.setup-sub{font-size:18px;color:#d3d4bc;letter-spacing:1px}.setup-line{height:1px;background:linear-gradient(90deg,#9c7d44,transparent);margin:22px 0}.field-title{font-size:14px;color:#c7b182}#mapChoices{margin-top:12px;display:grid;gap:7px}#civChoices{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px}#civChoices .map-choice{min-height:52px}.map-choice{display:flex;align-items:center;text-align:left;padding:12px 14px;background:#25342a88;border:1px solid #6a715455}.map-choice>b{font:22px Cinzel,serif;color:#8f9878;width:42px}.map-choice span{font-size:16px}.map-choice small{display:block;font-size:11px;color:#a0ac96}.map-choice.selected{background:#4a543477;border-color:#c1a464}.map-choice.selected>b{color:#e2c586}.setup-options{display:flex;gap:14px;margin-top:20px}.setup-options label{flex:1;font-size:12px;color:#b2bd9e}.setup-options select{display:block;width:100%;margin-top:7px;border:1px solid #777251;background:#18281f;color:#eadbb6;padding:9px;font:inherit;font-size:13px}.factions-preview{display:flex;justify-content:space-between;font-size:11px;margin:22px 0;color:#b7c2a9}#startBattle{width:100%;font-size:17px;text-align:left;padding:13px 17px;border:1px solid #e2c583;background:linear-gradient(100deg,#9c7d42,#6e5832);color:#fff2cf}#startBattle span{float:right}.setup-note{font-size:10px;text-align:center;margin-top:12px}.setup-caption{position:absolute;right:6%;bottom:12%;text-align:right;text-shadow:0 2px 10px #000}.setup-caption span{color:#f6e8bd;font-size:24px}.setup-caption p{color:#c5ccb2;font-size:14px}.health i{transition:width .2s}button[aria-pressed=true]{background:#665a33}@media(max-width:1100px){.brand{min-width:150px}.brand b{font-size:20px;letter-spacing:3px}.resources{gap:6px}.resources b{font-size:16px}.resources span{font-size:13px}.selection{width:225px}.portrait{width:48px;font-size:45px;height:68px}.map{min-width:155px}#minimap{width:140px}.buttons button{min-width:62px}.command-heading .eyebrow{display:none}.setup-caption{display:none}}@media(max-width:720px){.epoch{min-width:47px;padding:0 4px}.epoch b{font-size:18px}.brand{min-width:75px;padding-right:4px}.brand b{font-size:13px;letter-spacing:1px}.brand small,.resources small{display:none}.resources{gap:7px}.resources span,.resources b{font-size:11px}header{gap:4px;padding:6px;height:53px}header button{padding:6px;font-size:11px}.mission{top:74px;width:195px;padding:11px}.mission h1{font-size:17px}.team-row{font-size:11px;padding:5px 0}.team-row small{font-size:10px}.mission .enemy{display:none}.view-controls{top:74px}.selection{width:calc(100% - 130px);height:80px}.map{width:122px;min-width:122px;height:80px}#minimap{width:106px;height:63px}.commands{order:3;width:100%;max-width:none;padding:8px}.buttons{max-height:135px}.buttons button{min-width:65px;max-width:none;min-height:58px;font-size:18px}.buttons span{font-size:10px}.command-heading{justify-content:flex-end}.command-heading button{font-size:10px}.selection p{font-size:11px}#toast{bottom:265px;font-size:11px}#setup{padding:15px;justify-content:center}.setup-panel{padding:24px;max-height:96dvh;overflow:auto;width:390px}.setup-panel>h1{font-size:35px}.setup-sub{font-size:15px}.map-choice{padding:10px}.setup-line{margin:15px 0}}
@media(min-width:721px){.buttons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-height:150px}.buttons button{min-width:0;max-width:none;height:70px;min-height:70px;font-size:18px;padding:4px}.buttons span{font-size:10px}.buttons small{font-size:9px;line-height:1.3}.commands{min-width:0}}
.setup-panel{max-height:92dvh;overflow:auto}

#productionQueue{display:flex;gap:6px;margin-top:6px;overflow-x:auto}#productionQueue[hidden]{display:none}.queue-item{font-size:11px;min-width:85px;max-width:140px;color:#dfd4af}.queue-item progress{display:block;width:100%;height:5px;accent-color:#caa45e;margin-top:4px}

/* Compact game HUD; display controls remain reachable with the HUD hidden. */
header{right:auto;max-width:calc(100% - 118px);height:44px;padding:5px 9px;gap:8px;box-shadow:0 3px 14px #0005}
header .brand{display:none}.resources{flex:0;gap:16px;justify-content:flex-start}.resources span{display:flex;align-items:center;font-size:17px;gap:5px}.resources b{font:16px 'Noto Sans Thai',sans-serif;margin:0;font-variant-numeric:tabular-nums}.epoch{display:flex;align-items:center;gap:5px;min-width:0;padding:0 8px}.epoch b{font-size:20px}.epoch span{font-size:12px}header button{height:32px;min-width:32px;padding:3px 8px}
.display-controls{position:absolute;right:10px;top:8px;display:flex;gap:5px;z-index:10}.display-controls button{width:44px;height:44px;padding:4px;font-size:24px;background:#14221ee8}.view-controls{top:62px}
body.hud-hidden header,body.hud-hidden footer,body.hud-hidden .view-controls,body.hud-hidden #toast{visibility:hidden;pointer-events:none}
@media(max-width:650px){header{left:6px;gap:5px;padding:5px;max-width:calc(100% - 108px)}.resources{gap:8px}.resources span{font-size:14px;gap:3px}.resources b{font-size:13px}.epoch{display:none}header button{min-width:26px;width:26px;padding:2px}.display-controls{right:6px}.view-controls{right:6px;top:62px}}
@media(max-width:440px){header{height:auto;min-height:44px;flex-wrap:wrap}.resources{gap:7px}.resources span{font-size:13px}.resources b{font-size:12px}}

/* Status exists only for the selected building; the resource HUD stays compact. */
#productionQueue{scrollbar-width:thin;padding-bottom:3px;max-width:100%}.queue-item{flex:0 0 120px;min-width:0;max-width:none;padding:6px 8px;background:#0c1714a6;border:1px solid #78805b66;border-radius:2px}.queue-item strong,.queue-item span{display:block;white-space:nowrap;font-size:11px}.queue-item span{font-size:10px;color:#b9c0a6;margin-top:3px}.queue-item.active{border-color:#bb9e60;background:#3c3c2477}.queue-item.blocked{border-color:#e5a159}.queue-item.blocked span{color:#f1c087}
#buildingWork{margin-top:8px;padding:7px 9px;background:#0c1714a6;border-left:2px solid #caa45e;font-size:12px}#buildingWork[hidden]{display:none}#buildingWork span{margin-left:10px;font-size:11px;color:#c8c9ad}#buildingWork progress{display:block;width:100%;height:5px;margin-top:5px;accent-color:#caa45e}

/* Title artwork and real alliance setup. */
#setup{background:#0a120e;overflow:hidden}
#titleSlides{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.title-slide{position:absolute;inset:-12% -10%;background:center/cover no-repeat;opacity:0;transform:translateX(-8%) scale(1.14);will-change:transform,opacity}
.title-slide.is-current{z-index:1;opacity:1;animation:title-show 18s linear forwards}
.title-slide.is-entering{z-index:2;transition:opacity .8s linear}
.title-slide.is-leaving{z-index:2}
.title-slide.is-flipped.is-current{animation:title-show-flip 18s linear forwards}
@keyframes title-show{0%{transform:translateX(-8%) scale(1.14)}100%{transform:translateX(6%) scale(1.06)}}
@keyframes title-show-flip{0%{transform:scaleX(-1) translateX(-8%) scale(1.14)}100%{transform:scaleX(-1) translateX(6%) scale(1.06)}}
#setup:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,13,10,.78),rgba(5,13,10,.2) 68%,rgba(5,13,10,.08))}
#setup>.setup-panel,#setup>.title-brand,#setup>.setup-caption{z-index:2}
@media(prefers-reduced-motion:reduce){
.title-slide,.title-slide.is-current,.title-slide.is-leaving,.title-slide.is-entering,.title-slide.is-flipped.is-current{animation:none;transform:none}
.title-slide.is-current{opacity:1}
.title-slide.is-flipped.is-current{transform:scaleX(-1)}
.title-slide.is-entering{transition:opacity .4s linear}
}
.setup-panel{padding:24px 30px;background:linear-gradient(120deg,#111d19ed,#14231fdb)}
.team-setup{margin:16px 0;font-size:12px;border-top:1px solid #a4864c66;padding-top:12px}
.team-heading{color:#e8cf98;margin-bottom:7px;display:flex;justify-content:space-between}.team-heading small,.team-setup>small{color:#bdc1aa;font-size:10px}
.team-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:7px 0}.team-row select{background:#16241e;color:#f0e2c4;border:1px solid #77643f;border-radius:3px;padding:6px;max-width:180px}
.setup-caption{text-shadow:0 2px 8px #000}.setup-panel h1{margin-top:10px}

@media(min-width:721px) and (max-height:850px){
.setup-panel{padding:16px 26px}.setup-panel>h1{font-size:36px;margin:4px 0 0}.setup-sub{font-size:15px;margin:4px 0}.setup-line{margin:12px 0}
#mapChoices{gap:5px;margin-top:6px}#mapChoices button{padding:8px 12px;min-height:0}#civChoices{gap:5px;margin-top:6px}#civChoices .map-choice{min-height:0;padding:8px 10px}.setup-options{margin-top:10px}.team-setup{margin:10px 0;padding-top:8px}.team-row{margin:4px 0}.team-row select{padding:4px}.setup-note{margin:8px 0 0}#startBattle{padding:11px}
}

@media(max-width:720px){.setup-panel{padding:16px 22px}.setup-panel>h1{margin:2px 0;font-size:30px}.setup-sub{margin:3px 0}.setup-line{margin:10px 0}#mapChoices{grid-template-columns:repeat(3,1fr);gap:5px}#civChoices{grid-template-columns:1fr 1fr;gap:5px}.map-choice{padding:8px 5px;display:block}.map-choice>b{display:none}.map-choice small{display:none}.map-choice strong{font-size:12px}.setup-options{margin-top:12px}.team-setup{margin:12px 0}.setup-note{font-size:10px}}

/* THRONES OF SUVARNABHUMI — transparent gold title over the existing key art. */
#setup .game-logo{margin:8px 0 2px;font-size:0;line-height:0;letter-spacing:0} .game-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 5px #0009)}
.title-brand{position:absolute;left:calc(5vw + 480px);right:5vw;top:5vh;text-align:center;pointer-events:none;filter:drop-shadow(0 3px 8px #000b)}
.title-brand img{display:block;width:100%;max-width:760px;height:auto;margin:auto}.title-brand p{color:#f8e6bd;font-size:clamp(16px,1.7vw,25px);letter-spacing:2px;margin:8px 0;font-weight:600;text-shadow:0 2px 5px #000}
@media(min-width:1101px){#setup .game-logo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#setup .setup-sub{display:none}}
@media(max-width:1100px){.title-brand{display:none}#setup .setup-sub{text-align:center;font-size:15px;margin:5px 0 8px}}

body.title-screen header,body.title-screen footer,body.title-screen .display-controls,body.title-screen .view-controls,body.title-screen #toast{visibility:hidden;pointer-events:none}
#loadStatus{font-size:12px;color:#f4dba0;margin-top:10px;line-height:1.6}#loadStatus.load-error{color:#ffb7a2}#setup[aria-busy="true"] #startBattle{opacity:.75;cursor:wait}#setup[aria-busy="true"] select{opacity:.6}