*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;background:#0b0f1a;font-family:"Trebuchet MS",system-ui,sans-serif;color:#f6ecd2;touch-action:none;position:fixed;inset:0}
#game{position:fixed;left:0;top:0;display:block}
#hud{position:fixed;top:0;left:0;right:0;height:34px;display:flex;align-items:center;gap:5px;padding:0 8px;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));
background:linear-gradient(#2a1d12ee,#1a120bdd);border-bottom:2px solid #c99a4b;box-shadow:0 3px 10px #0008;z-index:5;font-size:14px;white-space:nowrap}
.res{display:flex;align-items:center;gap:3px;background:#0006;border:1px solid #c99a4b55;border-radius:14px;padding:2px 8px 2px 3px;min-width:58px;font-weight:bold;flex:0 0 auto}
.res img{width:20px;height:20px}
#age{margin-left:auto;color:#ffd98a;font-weight:bold;text-shadow:0 1px 2px #000;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
#clock{background:#0006;border-radius:10px;padding:2px 7px;font-variant-numeric:tabular-nums;flex:0 0 auto}
.hb{flex:0 0 auto;width:30px;height:26px;padding:0;font-size:14px;color:#fff;background:linear-gradient(#5b4128,#3a2816);border:1.5px solid #c99a4b;border-radius:8px}
#mini{position:fixed;right:max(8px,env(safe-area-inset-right));top:40px;width:176px;height:92px;border:2px solid #c99a4b;border-radius:8px;background:#0b0f1a;z-index:5;box-shadow:0 3px 10px #0008}
#side{position:fixed;left:max(8px,env(safe-area-inset-left));top:42px;display:flex;flex-direction:column;gap:6px;z-index:5}
#side button,.pbtn{font-family:inherit;color:#f6ecd2;background:linear-gradient(#5b4128,#3a2816);border:2px solid #c99a4b;border-radius:10px;box-shadow:0 2px 6px #0009,inset 0 1px 0 #fff3;cursor:pointer}
#side button{width:52px;height:44px;font-size:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;padding:0}
#side button small{font-size:9px;margin-top:2px}
#side button.on{background:linear-gradient(#2f7a3a,#1d4d24)}
#panel{position:fixed;left:50%;transform:translateX(-50%);bottom:max(4px,env(safe-area-inset-bottom));min-height:62px;max-width:calc(100% - 16px);display:flex;align-items:center;gap:5px;padding:4px 7px;
background:linear-gradient(#2a1d12ee,#1a120bee);border:2px solid #c99a4b;border-radius:12px;z-index:5;box-shadow:0 -2px 12px #0008}
#panel .info{width:128px;flex:0 0 128px;font-size:11.5px;line-height:1.25;overflow:hidden}
#panel .info b{font-size:13px;color:#ffd98a;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:6px;background:#400;border-radius:3px;overflow:hidden;margin-top:3px;width:118px}.bar i{display:block;height:100%;background:linear-gradient(#7f6,#3a2)}
.bar.r i{background:linear-gradient(#ffe38a,#c98a2a)}
.pbtn{width:56px;height:56px;padding:2px 1px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;position:relative;flex:0 0 auto;overflow:hidden}
.pbtn img.ic{width:34px;height:26px;object-fit:contain}
.pbtn .l{display:block;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}
.pbtn .c{display:flex;gap:2px;justify-content:center;font-size:8.5px;color:#ffe9b0;line-height:1;white-space:nowrap}
.pbtn .c img{width:8px;height:8px;vertical-align:middle}
.pbtn:disabled{filter:grayscale(1) brightness(.6)}
.pbtn.sm{width:40px;height:56px;font-size:16px}
.pbtn.sm .l{font-size:8.5px}
.pbtn.chip{width:30px;height:30px;padding:0}
.pbtn.chip img{width:24px;height:24px}
.pbtn.on{background:linear-gradient(#2f7a3a,#1d4d24)}
.pbtn.wide{width:auto;padding:4px 10px;font-size:13px;height:44px;white-space:nowrap}
.pbtn.ok{background:linear-gradient(#2f7a3a,#1d4d24)}.pbtn.no{background:linear-gradient(#8a2c22,#561a14)}
.qwrap{display:flex;gap:3px;flex-wrap:wrap;max-width:100px}
.qbar{width:118px;height:6px;background:#0008;border-radius:4px;overflow:hidden;margin-top:3px}.qbar i{display:block;height:100%;background:linear-gradient(90deg,#ffd27a,#ff9c3a);width:0}
.qbadge{position:absolute;top:1px;right:2px;background:#c33;border-radius:8px;padding:0 4px;font-size:10px}
#toast{position:fixed;top:44px;left:50%;transform:translateX(-50%);background:#000a;padding:5px 14px;border-radius:14px;font-size:13px;opacity:0;transition:opacity .3s;z-index:6;pointer-events:none;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(#0004,#000c);z-index:10}
#rotate{z-index:20;background:#0b0f1a}
.hidden{display:none!important}
.card{text-align:center;padding:14px 24px;background:linear-gradient(#2a1d12f2,#140d07f2);border:2px solid #c99a4b;border-radius:18px;box-shadow:0 10px 40px #000c;max-width:94vw;max-height:96vh;overflow:auto}
.card h1{margin:2px 0;font-size:34px;letter-spacing:1px;background:linear-gradient(#fff3c4,#e8a93a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 2px #000)}
.sub{margin:2px 0 8px;color:#e9d6a8}
.row{display:flex;gap:8px;justify-content:center;align-items:center;margin:6px 0;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:8px;align-items:stretch;margin-top:8px}
.row label{font-size:13px}
#seed{width:72px;font:inherit;font-size:13px;padding:4px 6px;border-radius:8px;border:1px solid #c99a4b;background:#0008;color:#fff;user-select:text;-webkit-user-select:text}
.opt{font-family:inherit;font-size:13px;padding:6px 12px;color:#f6ecd2;background:#0006;border:1.5px solid #c99a4b88;border-radius:10px;cursor:pointer;white-space:nowrap}
.opt.on{background:linear-gradient(#c99a4b,#8a6420);color:#fff;border-color:#ffd98a}
.big{font-family:inherit;font-size:19px;padding:8px 30px;color:#fff;background:linear-gradient(#3a9a48,#1f5e29);border:2px solid #ffd98a;border-radius:14px;box-shadow:0 4px 14px #000a;cursor:pointer;white-space:nowrap}
.big.alt{background:linear-gradient(#5b4128,#3a2816)}.big.no{background:linear-gradient(#8a2c22,#561a14)}
.help{margin-top:8px;font-size:11px;line-height:1.45;color:#d8c69c}
.crest{width:48px;height:48px;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a8,#d89a2e 55%,#7a4a12);box-shadow:0 0 24px #ffb84a88}
.phone{width:40px;height:66px;margin:6px auto 10px;border:3px solid #ffd98a;border-radius:8px;animation:rot 2s ease-in-out infinite}
@keyframes rot{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (max-height:420px){#hud{height:30px;font-size:12.5px}.res{min-width:50px;padding-right:6px}.res img{width:17px;height:17px}#mini{top:34px;width:150px;height:78px}#side{top:36px}#side button{width:46px;height:38px}.pbtn{width:52px;height:52px}.pbtn.sm{height:52px}#panel{min-height:56px}.card h1{font-size:26px}.help{font-size:10px}.big{font-size:16px;padding:6px 22px}.crest{display:none}}
@media (max-width:760px){#hud{font-size:12px;gap:3px}.res{min-width:46px}#age{font-size:11px}}

#fsprompt{z-index:21;background:#0b0f1acc}
.big.sm2{font-size:15px;padding:7px 16px}
#iostip{position:fixed;z-index:30;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(520px,92vw);box-sizing:border-box;background:linear-gradient(#4a3420,#2c1e10);border:2px solid #ffd98a;border-radius:14px;padding:10px 38px 10px 14px;font-size:13.5px;line-height:1.35;box-shadow:0 6px 20px #000b;display:flex;flex-direction:column;gap:3px}
#iostip.hidden{display:none}
#iostip .shr{display:inline-block;border:1px solid #ffd98a;border-radius:4px;padding:0 4px}
#ios-x{position:absolute;right:6px;top:6px;width:28px;height:28px;border-radius:8px;border:1.5px solid #c99a4b;background:#3a2816;color:#fff;font-size:14px;padding:0}
#panel .info .st{display:block;font-size:10px;line-height:1.2;color:#c8f0a8;white-space:normal;overflow-wrap:anywhere}
#panel .info .st:empty{display:none}
.pbtn .c.c3{flex-wrap:wrap;max-width:100%;row-gap:0;column-gap:3px}
.pbtn:has(.c3) img.ic{height:18px}
.pbtn:has(.c3) .l{font-size:8.5px;line-height:1.05}
.pbtn:has(.c3) .c{font-size:8px}
@media (max-height:420px){.pbtn:has(.c3) img.ic{height:14px}.pbtn:has(.c3){padding-top:1px;padding-bottom:1px}}
/* v5: breder paneel, AoE-kosten, tooltips */
#panel{width:calc(100% - 16px);max-width:1040px;box-sizing:border-box;justify-content:flex-start;gap:4px}
#panel .info{width:150px;flex:0 0 150px}
.pbtn{flex:1 1 64px;min-width:46px;max-width:92px;width:auto}
.pbtn.sm{flex:0 1 46px;min-width:38px;max-width:52px;width:auto}
.pbtn.chip{flex:0 0 30px;min-width:30px}
.pbtn.wide{flex:0 0 auto;max-width:none}
.pbtn img.ic{width:38px}
.pbtn .c{font-size:9.5px;gap:3px}.pbtn .c img{width:10px;height:10px}
.pbtn .c .no,.pbtn .c span.no{color:#ff6a5a;font-weight:bold}
.pbtn.dis{filter:grayscale(.75) brightness(.72);cursor:not-allowed}
.pbtn.dis .c .no{color:#ff6a5a;filter:saturate(3) brightness(1.4)}
.pbtn.on{box-shadow:0 0 0 2px #ffd98a,0 0 10px #ffd98a}
#tip{position:fixed;z-index:40;display:none;pointer-events:none;max-width:240px;background:linear-gradient(#3e2c18f4,#22170cf4);border:1.5px solid #ffd98a;border-radius:9px;padding:6px 9px;font-size:12px;line-height:1.35;color:#f6ecd2;box-shadow:0 4px 14px #000b}
#tip b{color:#ffd98a;display:block;font-size:13px}
#tip .tr{display:flex;gap:5px;align-items:center}#tip .tr img{width:13px;height:13px}
#tip .tr.no,#tip .no{color:#ff6a5a}
#tip .ds{color:#c8f0a8;margin-top:2px}
@media (min-width:1000px){#panel .info{width:190px;flex-basis:190px}.pbtn{height:62px}.pbtn.sm{height:62px}}
@media (max-height:420px){#panel .info{width:132px;flex-basis:132px}.pbtn{min-width:44px}}
.pbtn>*{flex-shrink:0}.pbtn .l{min-height:1.1em}
@media (max-height:420px){.pbtn:has(.c3) img.ic{height:12px}.pbtn:has(.c3) .c{font-size:8px}.pbtn:has(.c3) .c img{width:8px;height:8px}}
/* v6: adaptief knoppenraster */
#panel .btns{display:flex;flex-wrap:wrap;gap:4px;align-items:center;align-content:center;flex:1 1 auto;min-width:0}
#panel .btns .pbtn{flex:0 0 auto;width:var(--bw,64px);min-width:0;max-width:none;height:var(--bh,56px)}
#panel .btns .pbtn.wide{width:auto;height:44px;padding:4px 10px}
#panel .btns .pbtn.chip{width:30px;height:30px}
#panel .btns.two .pbtn:not(.wide):not(.chip) img.ic{height:16px}
#panel .btns .pbtn .l{font-size:10px}
#panel .pcost{display:flex;gap:6px;align-items:center;font-size:13px;color:#ffe9b0;padding:0 6px;white-space:nowrap}
#panel .pcost img{width:14px;height:14px;vertical-align:-2px;margin-right:2px}
#panel .pcost .no{color:#ff6a5a;font-weight:bold}
@media (max-height:440px){#panel .info{width:118px;flex-basis:118px}#panel .btns .pbtn.wide{height:40px;font-size:12px;padding:3px 8px}}
#panel .btns.two .pbtn:not(.wide):not(.chip){padding-top:1px;padding-bottom:1px}
#panel .btns.two .pbtn:not(.wide):not(.chip) img.ic{height:13px}
#panel .btns.two .pbtn .l{line-height:1.05}
/* v7: tegen-info en afbreken */
#cinfo{position:absolute;left:8px;bottom:calc(100% + 4px);display:flex;gap:10px;flex-wrap:wrap;max-width:calc(100% - 16px);background:linear-gradient(#3e2c18ee,#22170cee);border:1.5px solid #c99a4b;border-radius:8px;padding:3px 9px;font-size:11.5px;line-height:1.3;pointer-events:none;box-shadow:0 2px 8px #0008}
#cinfo .cs,#tip .cs{color:#9df08a}#cinfo .cz,#tip .cz{color:#ff9a7a}
@media (max-height:440px){#cinfo{font-size:10px;padding:2px 7px}}
#panel .info .pport{float:left;width:30px;height:30px;margin:0 4px 0 0;border-radius:5px;background:rgba(0,0,0,.3);border:1px solid rgba(255,217,138,.5);object-fit:cover}