:root{--touch-scale:1;--touch-inset:16px;--touch-lift:18px;color-scheme:dark}*{box-sizing:border-box}body{font-family:Trebuchet MS,Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #6fa58b;background:#244f3e;color:#fff8da;border-radius:12px;min-height:46px;padding:11px 18px;font-weight:700}button:hover,button:focus-visible{background:#376c51;outline:3px solid #ffe388;outline-offset:2px}button:disabled{opacity:.5;cursor:wait}.primary{background:#ffd23f;color:#163423;border-color:#ffd23f}h1{font-size:clamp(32px,5vw,58px);line-height:1.02;letter-spacing:-2px;margin:12px 0 22px}h1 em{font-style:normal;color:#ffd23f}h2{font-size:23px;margin:10px 0}p{line-height:1.55}.eyebrow{color:#9edcb4;font-size:12px;text-transform:uppercase;letter-spacing:2px;font-weight:bold}.lede,.large{font-size:20px;max-width:700px}.muted,small{color:#c2d3c7;font-size:13px;line-height:1.5}label{display:block;font-weight:700;margin:15px 0}label small{display:block;font-weight:normal;margin-top:6px}input:not([type=checkbox]),select{display:block;width:100%;padding:12px;background:#102e24;border:1px solid #82ab92;border-radius:8px;color:white;margin-top:7px}input[type=range]{padding:0;accent-color:#ffd23f;height:28px}input[type=checkbox]{accent-color:#ffd23f;width:22px;height:22px;margin-right:12px}.check{display:flex;align-items:center}.buttonRow{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0}.homeGrid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px}.homeGrid aside{border-left:1px solid #52725b;padding-left:35px}.homeGrid .primary{display:block;width:100%;margin:14px 0}.homeGrid>div>button{width:100%}#overlay{position:absolute;inset:0;z-index:20;background:rgba(3,20,15,.83);display:flex;align-items:center;justify-content:center;padding:24px;touch-action:pan-y}#overlay[hidden]{display:none}#panel{background:linear-gradient(130deg,#204b36,#102b25);border:1px solid #597852;border-radius:24px;padding:30px 38px;width:min(100%,1080px);max-height:96%;overflow:auto;box-shadow:0 20px 80px #0009;color:#fff8e4;touch-action:pan-y;user-select:text}#leaders{padding:0;list-style:none;display:grid;gap:6px;margin-top:18px}#leaders li{display:flex;gap:14px;align-items:center;background:#ffffff08;border-radius:9px;padding:8px 12px;font-size:14px}#leaders .rank{width:25px;color:#a8cdb2}#leaders li>span:nth-child(2){flex:1}#leaders small{display:block;font-size:10px;text-transform:capitalize}#leaders .champion{padding:18px 12px;background:#ffd23f;color:#173b2a;font-size:19px}#leaders .champion small,#leaders .champion .rank{color:#325b32}.settingsGrid{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.cards article{background:#ffffff09;border-radius:12px;padding:14px}.cards h2{font-size:18px}.cards p{font-size:14px}#hudTools{position:absolute;right:12px;top:10px;display:flex;gap:7px;z-index:5}#hudTools[hidden],#score[hidden],#tip[hidden]{display:none}#score{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:#112e24e8;padding:8px 16px;border-radius:20px;color:#fff0b9;font-size:12px;pointer-events:none}#tip{position:absolute;top:90px;left:50%;transform:translateX(-50%);width:min(85%,740px);text-align:center;background:#123327ef;color:#fff2ca;padding:12px 20px;border-radius:12px;border:1px solid #78944e;pointer-events:none;font-size:15px}#landscape{display:none;position:absolute;z-index:30;bottom:0;left:0;right:0;background:#ffd23f;color:#143a2a;text-align:center;font-size:12px;padding:8px;margin:0;pointer-events:none}.tb{transform:scale(var(--touch-scale));transform-origin:bottom center;min-height:0;padding:0}#tl{left:var(--touch-inset);bottom:var(--touch-lift)}#tr{left:calc(var(--touch-inset) + 84px);bottom:var(--touch-lift)}#td{left:calc(var(--touch-inset) + 42px);bottom:calc(var(--touch-lift) + 78px)}#tu{left:calc(var(--touch-inset) + 124px);bottom:calc(var(--touch-lift) + 78px);font-size:12px}#tj{right:var(--touch-inset);bottom:var(--touch-lift)}#tx{right:calc(var(--touch-inset) + 92px);bottom:var(--touch-lift)}#ts{right:var(--touch-inset);bottom:calc(var(--touch-lift) + 96px)}#tm{right:calc(var(--touch-inset) + 76px);bottom:calc(var(--touch-lift) + 96px)}.touchPreview{font-size:calc(20px * var(--touch-scale));padding:20px var(--touch-inset);text-align:center;background:#163525;border-radius:12px;margin-bottom:15px}.badge{color:#ffe47c}#status{color:#ffe6a0}@media(max-width:700px){#overlay{padding:10px}#panel{padding:22px;border-radius:16px}.homeGrid{grid-template-columns:1fr;gap:20px}.homeGrid aside{border-left:0;padding-left:0;border-top:1px solid #52725b;padding-top:16px}.settingsGrid,.cards{grid-template-columns:1fr}h1{font-size:36px}#tip{font-size:12px;top:70px}}@media(orientation:portrait) and (pointer:coarse){#landscape{display:block}}@media(max-height:500px){#overlay{padding:8px}#panel{padding:18px 26px}h1{font-size:34px;margin:6px 0 12px}.homeGrid{gap:26px}.eyebrow{margin:6px 0}#tip{top:55px;padding:8px;font-size:12px}}
#touch[hidden]{display:none}#hudTools{top:78px}body.touch[data-scene="play"] #hudTools{display:none}body.touch #score{bottom:8px;max-width:45%;font-size:10px;text-align:center}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffe388;outline-offset:3px}

/* 6.0 creature journal thumbnails */
.cards article{display:grid;grid-template-columns:110px 1fr;column-gap:12px;align-items:center}
.cards article .thumb{grid-row:span 2;width:110px;height:76px;background:#0b2a1d55;border-radius:10px}
.cards article h2,.cards article p{grid-column:2;margin:2px 0}
.cards article.locked .thumb{filter:brightness(0) opacity(.35)}

/* 6.3 creature field guide and pre-stage warnings: bigger pictures, Met badge, boss cards */
.cards article{grid-template-columns:150px 1fr}
.cards article .thumb{width:150px;height:104px;background:radial-gradient(circle at 50% 60%,#ffffff1a,#0b2a1d66 70%)}
.cards article.boss{background:#ff4f8b14;border:1px solid #ff4f8b40}
.cards .met{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:#7cffb2;color:#103d2c;font-size:11px;font-weight:900;vertical-align:middle;letter-spacing:.5px;text-transform:uppercase}
.guideHead{margin:22px 0 10px;font-size:20px;color:#ff9fc2}
#panel .lede{margin:4px 0 14px}
.warnCards{margin-bottom:16px}
#panel > button.primary{margin-top:14px;min-width:160px}
@media (max-width:640px){.cards article{grid-template-columns:110px 1fr}.cards article .thumb{width:110px;height:76px}}