@font-face{font-family:MC;src:url(/fonts/Monocraft.ttf)}
@font-face{font-family:MC;src:url(/fonts/Monocraft-Bold.ttf);font-weight:700}
@font-face{font-family:MC;src:url(/fonts/Monocraft-Italic.ttf);font-style:italic}
html,body{margin:0;height:100%;overflow:hidden;background:#8fc4f0;font-family:MC,monospace;-webkit-font-smoothing:none;user-select:none}
canvas{display:block}
#ov{position:fixed;inset:0;pointer-events:none;z-index:2}
#hud{position:fixed;inset:0;pointer-events:none;z-index:3}
#hud .mcbar,#hud .inv,#hud button{pointer-events:auto}
.sh{text-shadow:2px 2px 0 #3f3f3f;color:#fff}
/* name tag */
.tag{position:absolute;transform:translate(-50%,-100%);background:rgba(0,0,0,.42);color:#fff;font-size:13px;padding:1px 4px 0;white-space:nowrap}
/* tooltip (speech / thought) */
.tip{position:absolute;transform:translate(-50%,-100%);max-width:320px;background:rgba(16,0,16,.95);color:#fff;font-size:14px;line-height:1.35;padding:6px 8px;
 border:2px solid transparent;border-image:linear-gradient(#5000ff,#28007f) 1;text-shadow:2px 2px 0 #3f3f3f}
/* boss bar */
#boss{position:absolute;top:12px;left:50%;transform:translateX(-50%);text-align:center;color:#fff;font-size:16px;text-shadow:2px 2px 0 #3f3f3f}
#boss .bar{width:364px;height:10px;margin:5px auto 0;background:#4a0e4a;border:2px solid #1a001a;position:relative}
#boss .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(#ff7aff,#c427c4)}
/* chat */
#chat{position:absolute;left:10px;bottom:64px;width:620px;font-size:15px;line-height:1.45;color:#fff}
#chat div{background:rgba(0,0,0,.45);padding:2px 6px;text-shadow:2px 2px 0 #3f3f3f;animation:fade 30s forwards}
@keyframes fade{0%,85%{opacity:1}100%{opacity:0}}
.c-red{color:#ff5555}.c-blue{color:#5555ff}.c-gold{color:#ffaa00}.c-yellow{color:#ffff55}.c-gray{color:#aaaaaa}.c-green{color:#55ff55}.c-aqua{color:#55ffff}.c-purple{color:#ff55ff}.c-white{color:#fff}
/* minecraft buttons */
.mcbar{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:6px;align-items:center}
.mcbtn{font-family:MC,monospace;font-size:14px;color:#e0e0e0;text-shadow:2px 2px 0 #3f3f3f;background:#6f6f6f;border:2px solid #000;box-shadow:inset 2px 2px 0 #aaa,inset -2px -3px 0 #555;padding:6px 12px;cursor:pointer}
.mcbtn:hover{background:#7b84b8;box-shadow:inset 2px 2px 0 #bcc4f0,inset -2px -3px 0 #59609a;color:#ffffa0}
.mcbtn.on{color:#ffff55}
.sep{width:10px}
/* inventory window */
.inv{position:absolute;background:#c6c6c6;padding:8px 10px 10px;border:3px solid;border-color:#fff #555 #555 #fff;box-shadow:0 0 0 3px #000;color:#3f3f3f;font-size:14px}
.inv h2{margin:0 0 2px;font-size:16px;font-weight:700;color:#3f3f3f}.inv .m{font-size:12px;color:#555}
.slots{display:flex;gap:4px;margin:6px 0;flex-wrap:wrap}.slot{position:relative;width:40px;height:40px;background:#8b8b8b;border:2px solid;border-color:#373737 #fff #fff #373737}
.slot img{position:absolute;left:4px;top:4px;width:32px;height:32px;image-rendering:pixelated}
.slot b{position:absolute;right:2px;bottom:0;color:#fff;font-size:13px;text-shadow:2px 2px 0 #3f3f3f}
#inspect{left:14px;top:168px;width:360px;max-height:calc(100vh - 360px);overflow:auto;z-index:4}   /* left side, under the kingdom cards; the menu rail owns the right */
/* the admin view: every kingdom, its focus and numbers */
#kpanel{left:12px;top:12px;width:360px;max-height:46vh;overflow:auto;padding:6px 8px}
#kpanel h2{font-size:15px;margin:0 0 4px}
.krow{display:grid;grid-template-columns:14px 1fr auto;gap:6px;align-items:center;padding:4px 4px;border-bottom:2px solid #8b8b8b;cursor:pointer;font-size:13px}
.krow:hover{background:#b4b4b4}.krow .sw{width:12px;height:12px;border:1px solid #000}.krow .nm{font-weight:700}
.krow .st{font-size:11px;color:#444}.goal{font-size:11px;font-weight:700;padding:1px 5px;border:1px solid #000;color:#fff;text-shadow:1px 1px 0 #3f3f3f;white-space:nowrap}
.g-War{background:#b02e26}.g-Defend{background:#a05a2c}.g-Food{background:#5e7c16}.g-Prepare{background:#8932b8}.g-Power{background:#3c44aa}.g-Build{background:#835432}.g-Expand{background:#169c9c}.g-Grow{background:#474f52}.g-Fallen{background:#1d1d21}
/* key events: the big moments, click to fly there */
#keyev{position:absolute;right:72px;bottom:64px;width:360px;display:flex;flex-direction:column;gap:6px;pointer-events:auto}
.kev{background:rgba(16,0,16,.94);border:2px solid transparent;border-image:linear-gradient(#5000ff,#28007f) 1;color:#fff;font-size:13px;padding:6px 8px;text-shadow:2px 2px 0 #3f3f3f;cursor:pointer;animation:kevin .3s ease-out}
.kev b{display:block;font-size:11px;color:#ffff55;letter-spacing:.5px}.kev:hover{filter:brightness(1.25)}
@keyframes kevin{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.bars{display:flex;align-items:flex-end;gap:1px;height:40px;margin:4px 0;background:#8b8b8b;padding:2px;border:2px solid;border-color:#373737 #fff #fff #373737}
.bars i{flex:1;background:#55ff55;min-width:1px}
.hearts{font-size:15px;letter-spacing:1px;line-height:0;display:flex;gap:0}.hearts{padding:4px 0 2px 6px}.hearts .pip{width:32px;height:32px;margin:-9px -7px;image-rendering:pixelated}.hearts .h{color:#e02020}.hearts .e{color:#555}.hunger .h{color:#c08040}
.inv .row{margin:3px 0}.inv .k{color:#555}.inv .x{position:absolute;right:6px;top:4px;cursor:pointer;font-weight:700}
.inv .life{font-size:12px;color:#444;max-height:140px;overflow:auto;margin-top:4px;border-top:2px solid #8b8b8b;padding-top:4px}
/* the Create New World menu: dirt background like Minecraft's menus */
#setup{position:fixed;inset:0;z-index:10;overflow:auto;background:linear-gradient(rgba(10,8,20,.25),rgba(10,8,20,.45)),url(/game/assets/ui/bg_town.png) center/cover fixed}   /* Astra's dusk kingdom */
#setup:before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:-1}
#setup .menu{max-width:1500px;margin:0 auto;padding:22px 18px 40px;position:relative}
#setup h1{text-align:center;color:#fff;font-size:30px;text-shadow:3px 3px 0 #3f3f3f;margin:0 0 14px}
#setup .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}#setup .center{justify-content:center}
#setup .mcbtn.big{font-size:20px;padding:12px 60px}
.mcinput{font-family:MC,monospace;font-size:14px;color:#fff;background:#000;border:2px solid #a0a0a0;padding:6px 8px;width:160px}
#setup .kings{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:16px}
#setup .kcard{background:rgba(0,0,0,.45);border:2px solid #555;padding:10px 12px}
#setup .kname{display:flex;gap:8px;align-items:center;margin-bottom:8px;font-size:22px}#setup .kname .mcinput{flex:1;width:auto;min-width:0}
.mcslider{display:block;position:relative;height:32px;margin:6px 0;background:#000;border:2px solid #a0a0a0}
.mcslider input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.mcslider span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;text-shadow:2px 2px 0 #3f3f3f;pointer-events:none;
 background:linear-gradient(90deg,#6f6f6f 0,#6f6f6f var(--p,50%),#000 var(--p,50%))}

/* simple HUD */
#chat{width:440px;font-size:13px}
#chat div{animation:fade 12s forwards}
#chat div:nth-last-child(n+5){display:none}
body.fullLog #chat{max-height:50vh;overflow:auto;pointer-events:auto;background:rgba(0,0,0,.35)}
body.fullLog #chat div{display:block;animation:none}
#keyev{width:300px}
.kev{font-size:12px}
#menu{position:absolute;right:14px;bottom:60px;display:flex;flex-direction:column;gap:5px;padding:8px;min-width:170px;pointer-events:auto;z-index:20}
#menu .mcbtn{width:100%}
#menu #seedText{font-size:11px;text-align:center;margin-top:2px}
body.noui #hud > *:not(#ov), body.noui #fxpanel{display:none !important}

/* AI kings */
#council{position:absolute;left:50%;top:118px;transform:translateX(-50%);background:rgba(16,0,16,.92);border:2px solid #5000ff;color:#fff;padding:8px 18px;font-size:16px;text-align:center;text-shadow:2px 2px 0 #3f3f3f;z-index:15}
#council small{color:#aaa;font-size:12px}
#council{max-width:440px;box-sizing:border-box}   /* top middle, under the year and rivalry bars, between the kingdom cards (at 50% +- 228px): clear of the story captions at the bottom left */
#council .dots::after{content:'...';animation:dots 1.2s steps(4) infinite;display:inline-block;width:1.4em;overflow:hidden;vertical-align:bottom}
@keyframes dots{0%{width:0}100%{width:1.4em}}
.tag .speech{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-6px);width:max-content;max-width:280px;white-space:normal;background:#fff;color:#222;text-shadow:none;padding:5px 8px;font-size:12px;line-height:1.3;border:2px solid #222}
.tag .speech::after{content:'';position:absolute;left:50%;top:100%;border:6px solid transparent;border-top-color:#222;transform:translateX(-50%)}

#setup .ruler{display:flex;align-items:center;gap:6px;margin:4px 0}
#setup .ruler select{flex:1;min-width:0}
#setup .persona{width:100%;box-sizing:border-box;margin:2px 0 6px;font-size:12px}
#setup .aiwrap{flex-wrap:wrap;gap:6px}
#setup #promptIn{width:min(760px,90vw);resize:vertical;font-family:inherit}

/* loading screen: Minecraft-style dirt, title, step text and a green progress bar */
#loading{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;
  background:linear-gradient(rgba(10,8,20,.35),rgba(10,8,20,.6)),url(/game/assets/ui/bg_town.png) center/cover;transition:opacity .6s}
#loading.done{opacity:0;pointer-events:none}
#loading .lt{font-size:30px;text-shadow:3px 3px 0 #3f3f3f}
#loading .ls{font-size:16px;color:#ddd;text-shadow:2px 2px 0 #3f3f3f}
#loading .lbar{width:min(420px,80vw);height:12px;border:2px solid #000;background:#3a3a3a;box-shadow:inset 0 0 0 2px #808080}
#loading .lbar i{display:block;height:100%;width:0;background:#80ff20;box-shadow:inset 0 -3px 0 #4caa10;transition:width .25s}
#loading .lh{position:absolute;bottom:40px;font-size:13px;color:#ffff55;text-shadow:2px 2px 0 #3f3f3f}

/* menu rail (option A): icon slots on the right edge, a panel slides out beside them */
#rail{position:absolute;right:4px;top:90px;display:flex;flex-direction:column;gap:5px;background:rgba(74,77,80,.85);padding:7px 6px;border:3px solid #1a1a1a;box-shadow:inset 2px 2px 0 #7a7e82,inset -2px -2px 0 #2c2e30;pointer-events:auto;z-index:20}
#rail .slot{width:42px;height:42px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:#3a3c3f;border:2px solid #111;box-shadow:inset 2px 2px 0 #5a5d60,inset -2px -2px 0 #222;cursor:pointer}
#rail .slot:hover{background:#4a4d50}
#rail{transition:transform .45s cubic-bezier(.3,1.3,.5,1),opacity .3s}#rail.hid{transform:translateX(calc(100% + 10px));opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(.6,0,.8,.4) .12s,opacity .3s .3s}
#rail .slot{transition:transform .3s cubic-bezier(.3,1.5,.5,1) calc(var(--i,0) * 35ms),opacity .25s calc(var(--i,0) * 35ms)}#rail.hid .slot{transform:translateX(40px) scale(.6);opacity:0}
#railTab{position:absolute;right:4px;top:62px;width:64px;height:24px;box-sizing:border-box;background:#4a4d50;border:3px solid #1a1a1a;box-shadow:inset 2px 2px 0 #7a7e82,inset -2px -2px 0 #2c2e30;color:#f2c14e;font-size:13px;line-height:18px;text-align:center;
 cursor:pointer;pointer-events:auto;z-index:21;text-shadow:1px 1px 0 #000;user-select:none;transition:width .3s}#railTab:hover{color:#fff;background:#5a5d60}
#railTab.hid{width:30px}
body.noui #railTab{display:none!important}
#rail .slot.gs{margin-top:9px}#rail .slot.gs::before{content:'';position:absolute;left:-2px;right:-2px;top:-10px;height:3px;background:#2c2e30;box-shadow:0 1px 0 #7a7e82}   /* carved groove between groups */
#rail .slot{position:relative}#rail .slot:hover::after{content:attr(data-name);position:absolute;right:52px;top:50%;transform:translateY(-50%);white-space:nowrap;background:rgba(16,0,16,.92);color:#fff;font-size:13px;padding:4px 8px;text-shadow:2px 2px 0 #3f3f3f;pointer-events:none}   /* the group's name beside its icon */
#railPanel .rhelp{display:block}#railPanel .rhelp b{font-size:13px;color:#3f3f3f}#railPanel .rhelp small{font-size:11px;color:#555;line-height:1.35}
#rail .slot.on{border-color:#f2c14e;box-shadow:inset 0 0 0 2px #8a6a10,0 0 8px rgba(242,193,78,.5)}
#rail .slot img{position:static;width:28px;height:28px;image-rendering:pixelated;pointer-events:none}
#railPanel{position:absolute;right:74px;top:160px;width:340px;max-height:calc(100vh - 240px);overflow:auto;background:#c6c6c6;border:3px solid #000;box-shadow:inset 3px 3px 0 #fff,inset -3px -3px 0 #555;padding:10px 12px;color:#3f3f3f;pointer-events:auto;z-index:20}
#railPanel h3{margin:0 0 8px;font-size:16px;color:#3f3f3f}
#railPanel .rrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0;font-size:13px}
#railPanel .rrow small{display:block;font-size:10px;color:#666;margin-top:2px}
#railPanel .rbtn{flex:none;min-width:96px;width:auto !important;font-size:12px;padding:4px 8px}
#railPanel .rseed{font-size:11px;color:#555;margin-top:8px;text-align:right}
body.noui #rail,body.noui #railPanel{display:none !important}
/* villager window: portrait, rename, follow / eyes */
#inspect .phead{display:flex;gap:10px;align-items:flex-start}
#inspect .portrait{width:64px;height:64px;image-rendering:pixelated;border:2px solid #000;box-shadow:inset 0 0 0 2px #fff;flex:none}
#inspect .ren{cursor:pointer;color:#555;font-size:13px}#inspect .ren:hover{color:#000}
#inspect .pbtns{display:flex;gap:4px;margin-top:4px}#inspect .pbtns .mcbtn{font-size:11px;padding:3px 6px}
body.eyes #ctrl:after{content:'First-person view: Esc to leave';position:absolute;left:50%;bottom:44px;transform:translateX(-50%);white-space:nowrap;color:#fff;text-shadow:2px 2px 0 #3f3f3f;font-size:13px}
#inspect .statg{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
#inspect .statg span{display:inline-flex;align-items:center;gap:3px;background:rgba(0,0,0,.18);padding:2px 5px;font-size:12px}
#inspect .statg img{width:16px;height:16px;image-rendering:pixelated}
/* achievement toasts: above the key events at the bottom right (those stack up to two, about 140px) */
#hud #achToasts{bottom:214px}
/* folding sections in the windows: a header bar with + / -, so a window shows the summary first and the rest on demand */
.inv details.fold{margin:4px 0 0;border-top:2px solid #8b8b8b}
.inv details.fold>summary{list-style:none;cursor:pointer;font-weight:700;font-size:13px;color:#3f3f3f;padding:4px 18px 3px 0;position:relative}
.inv details.fold>summary::-webkit-details-marker{display:none}
.inv details.fold>summary::after{content:'+';position:absolute;right:2px;top:3px;font-size:14px}
.inv details.fold[open]>summary::after{content:'-'}
.inv details.fold>summary:hover{color:#000;background:rgba(255,255,255,.25)}
/* while a menu panel is open on the right, achievement toasts wait out of sight (they would slide in under it) */
body:has(#railPanel:not([style*="display: none"])) #achToasts{visibility:hidden}