/* Layout: full-screen WebGL world; HUD pinned to corners; panels float centered like carved boards. Single deliberate dark look. */
:root{--css-v:'2.20';
  --peat:#13110e; --bark:#221d18; --panel:rgba(22,19,15,.9); --line:#4b4034; --line2:#6b5a46;
  --bone:#eee5d3; --dim:#a99d89; --ember:#e8893b; --frost:#8fd8cf; --blood:#c8463b; --stam:#e3bf50; --hunger:#c08a4d; --moss:#86a457; --bad:#d0584a;
  --font-d:'Uncial Antiqua', 'Palatino Linotype', Georgia, serif;
  --font-b:'Alegreya Sans', 'Trebuchet MS', 'Segoe UI', sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{background:var(--peat);color:var(--bone);font-family:var(--font-b);font-size:15px;user-select:none;-webkit-user-select:none}
#game{position:fixed;inset:0}
#game canvas{display:block;width:100%;height:100%}
button{font-family:var(--font-b);cursor:pointer}
button:focus-visible{outline:2px solid var(--frost);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none}
#cross{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:rgba(238,229,211,.85);box-shadow:0 0 0 1.5px rgba(0,0,0,.45)}
#cross.aim{width:18px;height:18px;margin:-9px 0 0 -9px;background:transparent;border:2px solid var(--ember)}
#goal{position:absolute;left:16px;top:calc(16px + env(safe-area-inset-top,0px));max-width:300px;padding:10px 14px;background:linear-gradient(90deg,rgba(19,17,14,.85) 65%,rgba(19,17,14,0));border-left:2px solid var(--ember)}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);font-weight:800}
#goalT{font-weight:700;font-size:16px;margin-top:2px;text-wrap:balance}
#goalD{color:var(--dim);font-size:13px;margin-top:2px}
#status{position:absolute;left:16px;top:120px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.chip{font-size:12px;font-weight:700;padding:3px 9px;border-radius:3px;background:rgba(19,17,14,.75);border:1px solid var(--line);display:flex;gap:6px;align-items:center}
.chip b{width:7px;height:7px;border-radius:50%;display:inline-block}
.chip.good b{background:var(--moss)} .chip.bad b{background:var(--bad)} .chip.neu b{background:var(--frost)} .chip.off{opacity:.55;filter:grayscale(1)} .chip.off b{background:#888}   /* v2.09 harmaa tehoste (ovi auki) */
#topright{position:absolute;right:16px;top:calc(16px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#mini{width:150px;height:150px;border-radius:50%;border:2px solid var(--line2);box-shadow:0 0 0 4px rgba(19,17,14,.6)}
#clock{font-size:13px;color:var(--bone);background:rgba(19,17,14,.75);padding:3px 10px;border-radius:3px;font-weight:700}
#clock span{color:var(--dim);font-weight:500}
#bars{position:absolute;left:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px;width:230px}
.bar{position:relative;height:16px;background:rgba(19,17,14,.8);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;width:50%;transition:width .15s}
.bar span{position:absolute;left:8px;top:0;line-height:15px;font-size:11px;font-weight:800;letter-spacing:.06em;text-shadow:0 1px 2px #000}
.bar.hp i{background:linear-gradient(#d65a4c,#9e342b)} .bar.st i{background:linear-gradient(#ecd06b,#b68f2a)} .bar.hu i{background:linear-gradient(#cf9b5d,#8f5f2c)}
.bar.low{animation:pulse .8s infinite alternate}
@keyframes pulse{to{border-color:var(--bad)}}
#hotbar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;gap:5px}
.slot{position:relative;width:52px;height:52px;background:rgba(19,17,14,.78);border:1px solid var(--line);border-radius:3px;background-size:40px 40px;background-position:center;background-repeat:no-repeat}
.slot .k{position:absolute;left:4px;top:2px;font-size:10px;color:var(--dim);font-weight:700}
.slot .n{position:absolute;right:4px;bottom:1px;font-size:12px;font-weight:800;text-shadow:0 1px 2px #000}
.slot .q{position:absolute;right:4px;top:2px;font-size:10px;color:var(--frost);font-weight:800}
.slot.eq{border-color:var(--ember);box-shadow:inset 0 0 0 1px var(--ember)}
#weight{position:absolute;right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));font-size:13px;background:rgba(19,17,14,.75);padding:4px 10px;border-radius:3px}
#weight.over{color:var(--bad);font-weight:800}
#prompt{position:absolute;left:50%;top:58%;transform:translateX(-50%);font-size:15px;font-weight:700;text-shadow:0 1px 3px #000;white-space:nowrap}
#prompt kbd,.kb{display:inline-block;min-width:20px;padding:0 5px;margin-right:6px;border:1px solid var(--dim);border-radius:3px;font-family:var(--font-b);font-size:12px;line-height:18px;text-align:center;background:rgba(19,17,14,.7)}
#msgs{position:absolute;left:16px;bottom:120px;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
#msgs div{font-size:14px;font-weight:600;background:rgba(19,17,14,.7);padding:3px 10px;border-radius:2px;transition:opacity .6s}
#msgs div.loot{color:var(--frost)} #msgs div.warn{color:var(--ember)}
#bossbar{position:absolute;left:50%;top:calc(22px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(520px,70vw);text-align:center}
#bossbar .name{font-family:var(--font-d);font-size:22px;color:var(--frost);text-shadow:0 2px 6px #000}
#bossbar .track{height:12px;margin-top:4px;background:rgba(19,17,14,.85);border:1px solid var(--line2)}
#bossbar i{display:block;height:100%;background:linear-gradient(#9de8e0,#3d9c93);width:100%}
#buildhint{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);font-size:13px;background:rgba(19,17,14,.78);padding:5px 12px;border-radius:3px;white-space:nowrap}
#lockhint{position:absolute;left:50%;top:40%;transform:translateX(-50%);font-weight:800;font-size:16px;background:rgba(19,17,14,.82);border:1px solid var(--ember);padding:8px 16px;border-radius:3px}
#fade{position:fixed;inset:0;background:#000;opacity:0;transition:opacity .35s;pointer-events:none}
#uwTint{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 30%,rgba(10,40,55,.55),rgba(0,6,12,.95))}   /* v2.18 veden alla */
#drownV{position:fixed;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 220px 90px rgba(0,4,10,.95)}
#hurt{position:fixed;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 160px 40px rgba(170,30,20,.75);transition:opacity .3s}
.floater{position:absolute;font-weight:800;font-size:16px;text-shadow:0 1px 3px #000;pointer-events:none;transform:translate(-50%,-50%);white-space:nowrap}
.mobbar{position:absolute;width:56px;transform:translate(-50%,-100%);pointer-events:none}   /* v1.21: pino kasvaa ylöspäin */
.mobbar .rows{display:flex;flex-direction:column;gap:2px}
.mobbar .r{position:relative;height:5px;background:rgba(0,0,0,.6)}
.mobbar .r i{position:absolute;left:0;top:0;bottom:0;display:block}.mobbar .r i.a{background:var(--blood)}.mobbar .r i.b{background:#e8862a}
.mobbar span{position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;white-space:nowrap;text-shadow:0 1px 2px #000}

/* Panels */
.panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--line2);box-shadow:0 20px 60px rgba(0,0,0,.6);padding:18px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow:auto;border-radius:4px}
.panel h2{font-family:var(--font-d);font-weight:400;font-size:24px;margin:0 0 10px;color:var(--bone)}
.panel h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin:0 0 8px}
.close{position:absolute;right:10px;top:10px;background:none;border:1px solid var(--line);color:var(--dim);width:28px;height:28px;border-radius:3px}
/* v1.32 (lista 3, kohta 2): reppu on kiinteän kokoinen – mikään ei liiku tai veny valittaessa/siirrettäessä. Tiedot näkyvät keskisarakkeessa.
   Pienemmällä näytöllä koko paneeli skaalataan (fitInv), ei rivitetä. */
#inv{display:grid;grid-template-columns:451px 300px 320px;gap:18px;width:1089px;height:690px;overflow:hidden;box-sizing:content-box;max-width:none;max-height:none;transform:translate(-50%,-50%) scale(var(--invK,1))}
#inv .invCol{display:flex;flex-direction:column;min-height:0}
#invGrid{height:337px;align-content:start}
#invUp{height:34px;flex:none}
#invSide{flex:1;min-height:0;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
#invSide #effects,#invSide #biomeBox{margin-top:0;max-width:none}
.grid{display:grid;grid-template-columns:repeat(8,52px);gap:5px}
.grid .slot{cursor:pointer}
.grid .slot:hover{border-color:var(--dim)}
.grid .slot.sel{border-color:var(--frost)}
#invHead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
#detail{padding:10px 12px;border:1px solid var(--line);background:rgba(0,0,0,.2);height:100%;box-sizing:border-box;overflow:hidden;margin-top:44px;height:calc(100% - 44px)}
#detail .t{font-family:'Uncial Antiqua',serif;font-size:26px;line-height:1.15;color:#f3e6c4;margin-bottom:2px}
#detail .t .qs{color:var(--frost);font-size:18px}
.props{border-collapse:collapse;font-size:13px;margin:2px 0 8px;width:100%}
.props td{padding:2px 8px 2px 0;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top}.props td:first-child{color:var(--dim);width:46%}
.upPrev{margin:6px 0 10px;padding:8px 10px;border:1px solid rgba(150,200,255,.35);background:rgba(40,60,80,.25);border-radius:3px}
.upPrev .uh{font-weight:800;margin-bottom:4px;color:var(--frost)}.upPrev .arr{color:var(--dim)}.upPrev .props td b{color:#bfe8a0}.upPrev .btn{margin-top:8px}
.btn.on{outline:1px solid var(--frost)}
#detail .s{color:var(--dim);font-size:13px;margin:3px 0 8px}
.btns{display:flex;flex-wrap:wrap;gap:6px}
.btn{background:var(--bark);border:1px solid var(--line2);color:var(--bone);padding:6px 12px;border-radius:3px;font-weight:700;font-size:13px}
.btn:hover{border-color:var(--ember)}
.btn.pri{background:#5a3417;border-color:var(--ember)}
.btn:disabled{opacity:.4;cursor:not-allowed}
#craftList{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;overflow:auto;padding-right:4px}
.rec{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:6px 8px;border:1px solid var(--line);background:rgba(0,0,0,.18)}
.rec.na{opacity:.5}
.rec .ic{width:40px;height:40px;background-size:36px;background-repeat:no-repeat;background-position:center}
.rec .nm{font-weight:700;font-size:14px}
.rec .rq{font-size:12px;color:var(--dim)}
.rec .rq .miss{color:var(--bad)}
#stationLine{font-size:12px;color:var(--dim);margin-bottom:8px}
#build .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;width:min(680px,calc(100vw - 70px))}
.card{text-align:left;background:rgba(0,0,0,.2);border:1px solid var(--line);color:var(--bone);padding:8px 10px;border-radius:3px}
.card:hover{border-color:var(--ember)} .card.na{opacity:.5}
.card .nm{font-weight:800;font-size:14px} .card .rq{font-size:12px;color:var(--dim);margin-top:2px}
.card .tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--frost)}
#chest{display:grid;grid-template-columns:auto auto;gap:22px}
#mapP{padding:12px}
#bigmap{width:min(78vh,calc(100vw - 60px));height:min(78vh,calc(100vw - 60px));display:block;image-rendering:auto}
.legend{display:flex;gap:14px;font-size:12px;color:var(--dim);margin-top:8px;flex-wrap:wrap}

/* Menu */
.screen{position:fixed;inset:0;display:flex;align-items:flex-start;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;justify-content:flex-start;padding-inline:clamp(16px,7vw,110px);background:linear-gradient(90deg,rgba(10,9,7,.88) 0%,rgba(10,9,7,.55) 45%,rgba(10,9,7,0) 75%)}
.screen .inner{max-width:460px;display:flex;flex-direction:column;gap:14px;margin-block:auto;padding-block:28px}
/* Päävalikko vierii hiiren rullalla / kosketuksella, mutta vierityspalkkia ei näytetä */
.screen::-webkit-scrollbar,.setCard::-webkit-scrollbar,#keysBox::-webkit-scrollbar{display:none}
.title{font-family:var(--font-d);font-size:clamp(46px,8vw,86px);line-height:.95;margin:0;color:var(--bone);text-shadow:0 4px 24px rgba(0,0,0,.6)}
.title small{display:block;font-family:var(--font-b);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--ember);font-weight:800;margin-bottom:10px}
.lede{color:#d8cfbd;font-size:16px;line-height:1.5;max-width:42ch;margin:0}
.menuBtns{display:flex;flex-direction:column;gap:8px;align-items:stretch;max-width:300px}
.mbtn{font-size:17px;font-weight:800;text-align:left;padding:11px 16px;background:rgba(34,29,24,.85);border:1px solid var(--line2);color:var(--bone);border-radius:3px;letter-spacing:.02em}
.mbtn:hover{border-color:var(--ember);background:rgba(90,52,23,.6)}
.mbtn small{display:block;font-weight:500;font-size:12px;color:var(--dim)}
.keys{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;color:var(--dim);margin-top:4px}
.keys .kb{color:var(--bone)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
textarea{width:100%;min-height:70px;background:rgba(0,0,0,.35);color:var(--bone);border:1px solid var(--line);font-size:11px;font-family:ui-monospace,monospace;resize:vertical}
.toggle{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim)}
.note{font-size:12px;color:var(--dim)}
#deadS,#winS{justify-content:center;background:rgba(10,9,7,.72);text-align:center}
#deadS .inner,#winS .inner{align-items:center}
@media (max-width:760px){
  .grid{grid-template-columns:repeat(6,46px)} .grid .slot{width:46px;height:46px}
  #hotbar .slot{width:40px;height:40px;background-size:30px}
  #bars{width:150px} #mini{width:100px;height:100px} #goal{max-width:200px}
  #chest{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* Erä 20: puuteemaiset, läpinäkymättömät rakennus-, reppu- ja säilytysvalikot */
#build,#inv,#chest{background:repeating-linear-gradient(180deg,#4a2e18 0,#4a2e18 22px,#3f2713 22px,#3f2713 24px),#47301a;border:3px solid #2a1a0c;box-shadow:inset 0 0 0 2px #6e4a28,0 20px 60px rgba(0,0,0,.7)}
#build .card,#inv .rec{background:#2f1d0e;border:1px solid #6e4a28}
#build .card:hover{border-color:#e8a44a;background:#3a2412}
#build .card.na{opacity:1}
#buildTabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 10px;max-width:min(680px,calc(100vw - 70px))}
.tab{background:#2f1d0e;border:1px solid #6e4a28;color:var(--bone);padding:5px 10px;border-radius:3px;font-weight:700;font-size:13px}
.tab:hover{border-color:#e8a44a}.tab.on{background:#7a4b1c;border-color:#e8a44a;color:#fff}
.mat{display:inline-block;margin:2px 4px 0 0;padding:1px 6px;border-radius:3px;font-size:12px;font-weight:700;background:rgba(0,0,0,.35)}
.mat.ok{color:#cfe8b0}.mat.bad{color:#ff7a68;background:rgba(120,20,10,.45)}
#chestUp,#invUp{margin:8px 0}

/* Erä 21: tilat repun vieressä */
#effects{margin-top:10px;max-width:480px}
#effects .fx{display:flex;flex-direction:column;border-left:3px solid var(--frost);padding:3px 8px;margin:4px 0;background:rgba(0,0,0,.28);font-size:12px;cursor:help}
#effects .fx.bad{border-color:var(--bad)}#effects .fx.good{border-color:var(--moss)}
#effects .fx span{color:var(--dim)}

/* Erä 22: taso, saavutukset, valmistusvälilehdet */
#craftTabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
.devRow{display:flex;flex-direction:column;gap:5px;margin:0 0 12px;min-width:min(420px,calc(100vw - 70px))}.devRow input[type=range]{width:100%}.devBtns{display:flex;flex-wrap:wrap;gap:4px}
.search,input[type=search],input[type=text]{user-select:text;-webkit-user-select:text}
.search{display:block;width:100%;max-width:min(680px,calc(100vw - 70px));box-sizing:border-box;margin:0 0 8px;padding:6px 10px;font:inherit;font-size:14px;color:var(--bone);background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:3px;outline:none}
.search:focus{border-color:var(--frost)}.search::placeholder{color:var(--dim)}
.tab.sug{color:#f3d58a}.tab.sug.on{color:#ffe9b0}
.why{display:inline-block;font-size:11px;font-weight:600;color:#f3d58a;margin:1px 0 2px}.rec .why{display:block;margin:1px 0 0}
#lvlbox{position:absolute;right:16px;bottom:56px;font-size:12px;font-weight:700;color:var(--bone);text-shadow:0 1px 2px #000;display:flex;gap:8px;align-items:center}
#lvlbox .track,#progP .track{display:inline-block;width:90px;height:6px;background:rgba(0,0,0,.5);border-radius:3px;overflow:hidden}
#lvlbox .track i,#progP .track i{display:block;height:100%;background:#e8a44a}
#progP{background:repeating-linear-gradient(180deg,#4a2e18 0,#4a2e18 22px,#3f2713 22px,#3f2713 24px),#47301a;border:3px solid #2a1a0c;box-shadow:inset 0 0 0 2px #6e4a28,0 20px 60px rgba(0,0,0,.7);width:min(820px,calc(100vw - 32px))}
#progP .lv{display:flex;gap:12px;align-items:center;margin-bottom:10px;font-size:18px}#progP .lv .track{width:220px;height:9px}
#progP .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ach{display:flex;flex-direction:column;background:rgba(0,0,0,.28);border-left:3px solid #6e4a28;padding:3px 8px;margin:4px 0;font-size:12px}
.ach.ok{border-color:var(--moss)}.ach.cur{border-color:#e8a44a;background:rgba(232,164,74,.15)}.ach.fut{opacity:.55}
.ach span{color:var(--dim)}.ach em{color:#cfe8b0;font-style:normal}
.msgs .xp,#msgs .xp{color:#e8c070}
@media(max-width:700px){#progP .cols{grid-template-columns:1fr}}

/* Erä 25: terveyspalkin pääkallot */
.mobbar .sk{position:absolute;bottom:calc(100% + 17px);top:auto;left:50%;transform:translateX(-50%);font-size:11px;color:#e8e2d0;letter-spacing:1px;white-space:nowrap;text-shadow:0 1px 2px #000}

/* Erä 27: soihdun palamismittari */
.slot .fu{position:absolute;left:4px;right:4px;bottom:3px;height:4px;background:rgba(0,0,0,.6);border-radius:2px;overflow:hidden}
.slot .fu i{display:block;height:100%;background:#ffa53a}.slot .fu.off i{background:#6a6560}

/* Ilmoituslokki (T) */
#logP{background:repeating-linear-gradient(180deg,#4a2e18 0,#4a2e18 22px,#3f2713 22px,#3f2713 24px),#47301a;border:3px solid #2a1a0c;box-shadow:inset 0 0 0 2px #6e4a28,0 20px 60px rgba(0,0,0,.7);width:min(560px,calc(100vw - 32px))}
#logBody .lg{display:flex;gap:10px;background:rgba(0,0,0,.28);border-left:3px solid #6e4a28;padding:5px 8px;margin:4px 0;font-size:13px}
#logBody .lg .num{color:var(--dim);min-width:38px}#logBody .lg.warn{border-color:var(--bad)}#logBody .lg.loot{border-color:var(--moss)}

/* Päävalikon näppäinlista */
#keysBox{margin-top:12px;width:min(720px,calc(100vw - 40px));background:repeating-linear-gradient(180deg,rgba(74,46,24,.92) 0,rgba(74,46,24,.92) 22px,rgba(63,39,19,.92) 22px,rgba(63,39,19,.92) 24px);border:2px solid #2a1a0c;box-shadow:inset 0 0 0 2px #6e4a28;padding:14px 16px;border-radius:3px;max-width:760px;max-height:none;overflow:visible}
.keysGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.keyCat h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#e8a44a;margin:0 0 6px}
.keyRow{display:flex;gap:10px;align-items:baseline;padding:3px 0;border-bottom:1px solid rgba(0,0,0,.25);font-size:13px}.keyRow .kb{min-width:92px;text-align:center;flex:none}

/* Erä 29: hotbarin valinta, valikko ja asetukset */
#hotbar .slot.hsel{outline:2px solid #e8a44a;outline-offset:1px;box-shadow:0 0 10px rgba(232,164,74,.5)}
.dlg{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:60}
.dlgBox{background:repeating-linear-gradient(180deg,#4a2e18 0,#4a2e18 22px,#3f2713 22px,#3f2713 24px),#47301a;border:3px solid #2a1a0c;box-shadow:inset 0 0 0 2px #6e4a28,0 20px 60px rgba(0,0,0,.7);padding:18px 22px;max-width:min(420px,92vw);font-size:15px}
.setCard{position:relative;margin-top:6px;width:min(760px,calc(100vw - 40px));overflow:visible;background:repeating-linear-gradient(180deg,rgba(74,46,24,.94) 0,rgba(74,46,24,.94) 22px,rgba(63,39,19,.94) 22px,rgba(63,39,19,.94) 24px);border:3px solid #2a1a0c;box-shadow:inset 0 0 0 2px #6e4a28,0 14px 40px rgba(0,0,0,.6);padding:14px 16px;border-radius:3px}
.setCard .close{position:absolute;right:8px;top:8px}
.setTabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 36px 10px 0}
.setGrid{display:flex;flex-direction:column;gap:8px;font-size:14px}.setRow{display:grid;grid-template-columns:minmax(230px,1fr) 180px 1fr;gap:12px;align-items:center;padding:5px 8px;background:rgba(0,0,0,.2);border-radius:3px}.setRow .note{color:#cfc6b0}
.setGrid label{color:var(--bone)}.setGrid select{background:#2f1d0e;color:var(--bone);border:1px solid #6e4a28;padding:4px 8px;border-radius:3px;font:inherit}
.setGrid input[type=range]{width:180px}
.keyRow .kn{flex:1}.kbtn{cursor:pointer;min-width:92px}.kbtn:hover{border-color:#e8a44a;background:#7a4b1c}.kbtn.chg{border-color:#e8a44a;color:#ffd28a}.kb.fixed{opacity:.8}
.mbtn{background:linear-gradient(180deg,rgba(74,46,24,.92),rgba(47,29,14,.92));border:2px solid #2a1a0c;box-shadow:inset 0 0 0 1px #6e4a28;border-radius:4px;transition:transform .1s,box-shadow .1s}
.mbtn:hover{border-color:#2a1a0c;box-shadow:inset 0 0 0 1px #e8a44a,0 0 14px rgba(232,164,74,.25);transform:translateX(3px);background:linear-gradient(180deg,rgba(122,75,28,.95),rgba(74,46,24,.95))}
.title{letter-spacing:.01em}
.title::after{content:"";display:block;height:3px;width:min(300px,60%);margin-top:12px;background:linear-gradient(90deg,#e8a44a,rgba(232,164,74,0))}
#saveMsg{min-height:16px;color:#cfe8b0}

#quest{max-width:250px;text-align:right;background:linear-gradient(270deg,rgba(19,17,14,.85) 60%,rgba(19,17,14,0));padding:8px 12px;border-right:3px solid var(--frost);font-size:13px;line-height:1.3}
#quest .eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--frost);opacity:.85}
#quest .qt{font-weight:800;font-size:15px;color:var(--bone)}
#quest .qd{opacity:.8}
#quest .qh{margin-top:3px;color:#8fd8cf;font-weight:700}
.scrollHint{position:fixed;left:max(3px,calc(clamp(16px,7vw,110px) - 26px));width:12px;height:30px;color:#e8dcc4;opacity:0;pointer-events:none;transition:opacity .6s;z-index:30;filter:drop-shadow(0 1px 1px rgba(0,0,0,.8)) drop-shadow(0 0 3px rgba(0,0,0,.6))}
.scrollHint.up{top:14px}.scrollHint.down{bottom:14px}
.scrollHint.on{opacity:.55;animation:hintPulse 2.6s ease-in-out infinite}
.scrollHint.down.on{animation-name:hintPulseDown}
@keyframes hintPulse{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:.85;transform:translateY(-2px)}}
@keyframes hintPulseDown{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:.85;transform:translateY(2px)}}
@media (max-width:560px){.scrollHint{left:3px}}
/* Asetukset: oletusarvo näkyy vaaleana ja merkinnällä */
.defTag{display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2a2116;background:rgba(240,228,205,.75);vertical-align:1px}
select.isdef{color:#f3ead8;background-color:rgba(120,96,70,.55)}
option.def{color:#fbf3e2;background:#6a4c2c;font-weight:700}
input.isdef{filter:brightness(1.25)}
#mini{pointer-events:auto;cursor:pointer}

/* v0.80: hiiren kursori näkyy aina kuoleman ruudulla */
#deadS,#deadS *{cursor:default}#deadS .mbtn{cursor:pointer}

/* v0.82: uusi alue -ilmoitus (häivytys sisään 1 s, näkyy 3 s, ulos 1,5 s) ja repun biomilaatikko */
#zoneBan{position:fixed;left:50%;top:17%;transform:translateX(-50%);text-align:center;pointer-events:none;opacity:0;transition:opacity 3s ease;z-index:6;text-shadow:0 2px 12px rgba(0,0,0,.85)}
#zoneBan.on{opacity:1;transition:opacity 2.2s ease}
#zoneBan small{display:block;font:600 15px var(--font-b);letter-spacing:.32em;text-transform:uppercase;color:#e8dcc0}
#zoneBan b{display:block;font:400 54px var(--font-d);color:#f4ead2;margin-top:4px}
#zoneBan i{display:block;width:260px;height:2px;margin:8px auto 0;background:linear-gradient(90deg,transparent,var(--ember),transparent)}
#biomeBox{margin-top:10px}#biomeBox h3{margin:0 0 4px}#biomeBox .bRow{display:flex;gap:8px;font-size:13px;line-height:1.35}#biomeBox .bRow span:first-child{min-width:92px;opacity:.7}
#biomeBox .bNote{font-size:12.5px;color:#ffd28a;margin-top:3px}
.devChk{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;font-size:14px}.devChk label{display:flex;gap:6px;align-items:center;cursor:pointer}
/* v0.93 Shift-tietoikkuna */
#itemTip{position:fixed;z-index:60;pointer-events:none;max-width:320px;padding:10px 12px;background:rgba(38,26,16,.96);border:1px solid #8a5a2a;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.5);color:var(--bone)}
#itemTip .t{font:400 20px var(--font-d)}#itemTip .s{font-size:13px;opacity:.85;margin:3px 0 6px}#itemTip .props{width:100%;font-size:13px;border-collapse:collapse}#itemTip .props td{padding:2px 4px;border-top:1px solid rgba(255,255,255,.07)}#itemTip .props td:last-child{text-align:right;font-weight:700}
.devGive{display:flex;gap:6px}.devGive .search{flex:1;min-width:0}.devGive input[type=number]{width:70px;user-select:text}
.devList{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;margin-top:4px}.devIt{display:flex;align-items:center;gap:8px;padding:2px 4px;background:rgba(0,0,0,.18);border-radius:4px}
.devIt .ic{width:28px;height:28px;background-size:cover;flex:none}.devIt .nm{flex:1;font-size:14px}.devIt .btn{padding:3px 10px}

/* v1.08 (lista 2, kohta 1): valitun esineen selkeys, haamukuvake ja kohderuudun vihje */
.grid .slot.sel{border-color:var(--ember);animation:selPulse 1.1s ease-in-out infinite;z-index:2}
@keyframes selPulse{0%,100%{box-shadow:0 0 0 1px var(--ember),0 0 6px rgba(232,164,74,.45);transform:translateY(-1px) scale(1.04)}50%{box-shadow:0 0 0 2px var(--ember),0 0 16px rgba(232,164,74,.85);transform:translateY(-3px) scale(1.08)}}
.grid .slot.tgt{outline:2px dashed var(--frost);outline-offset:-3px}
.grid .slot.tgt::after{content:attr(data-hint);position:absolute;left:0;right:0;bottom:-1px;text-align:center;font-size:10px;font-weight:800;color:#13110e;background:var(--frost);border-radius:0 0 3px 3px;line-height:13px;pointer-events:none}
#ghostIt{position:fixed;display:none;width:40px;height:40px;margin:12px 0 0 12px;background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.55;pointer-events:none;z-index:9999;filter:drop-shadow(0 2px 4px rgba(0,0,0,.7))}
#ghostIt.drag{opacity:.9;margin:-20px 0 0 -20px;width:46px;height:46px}
#detail .selHint{font-size:12px;color:var(--ember);font-weight:700;margin-bottom:4px}

/* v1.12 asetusten väliotsikot ja FPS-näyttö */
.setSub{margin:10px 0 0;font:700 13px 'Alegreya Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);border-bottom:1px solid rgba(232,164,74,.3);padding-bottom:3px}
.setGrid .setSub:first-child{margin-top:0}
#fps{position:fixed;z-index:30;font:800 12px 'Alegreya Sans',sans-serif;padding:1px 6px;background:rgba(19,17,14,.55);border-radius:3px;pointer-events:none;text-shadow:0 1px 2px #000}
#fps.fps_tr{top:2px;right:4px}#fps.fps_tl{top:2px;left:4px}#fps.fps_br{bottom:2px;right:4px}#fps.fps_bl{bottom:2px;left:4px}

/* v1.14 kerran näkyvä vihje ruudun yläkeskellä */
#pcHint{position:fixed;left:50%;top:40px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:8px;padding:7px 14px;background:rgba(19,17,14,.82);
  border:1px solid rgba(232,164,74,.55);border-radius:4px;color:var(--bone);font:600 14px 'Alegreya Sans',sans-serif;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.4);
  animation:pcIn .8s ease-out;transition:opacity 1.5s ease}
#pcHint svg{color:var(--ember);flex:none}#pcHint.fade{opacity:0}#pcHint[hidden]{display:none}
@keyframes pcIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
#menuFade{position:fixed;inset:0;background:#000;opacity:0;transition:opacity .8s ease;pointer-events:none}
.sugH{font:700 12px 'Alegreya Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin:8px 0 2px;border-bottom:1px solid rgba(232,164,74,.3);padding-bottom:2px}
#hudHint{position:absolute;left:16px;top:calc(16px + env(safe-area-inset-top,0px));padding:4px 10px;background:rgba(19,17,14,.6);border-left:2px solid rgba(232,164,74,.6);font-size:11px;color:var(--dim);display:flex;flex-direction:column;line-height:1.3;pointer-events:none}
#hudHint b{color:var(--bone);font-weight:700;font-size:12px}
#cross.aim{transition:border-color .1s}#cross.aim.full::after{content:'';position:absolute;left:50%;top:50%;width:2.8px;height:2.8px;margin:-1.4px 0 0 -1.4px;border-radius:50%;background:#e0483c}
#menuBg{position:fixed;inset:0;width:100%;height:100%;display:none}   /* v1.25 valikon animoitu tausta */
#ghostIt{display:none;font:800 12px 'Alegreya Sans',sans-serif;color:#fff;text-align:right;line-height:1;padding:0 2px 2px 0;box-sizing:border-box;display:none;align-items:flex-end;justify-content:flex-end;text-shadow:0 1px 2px #000}
#ghostIt.half{outline:2px dashed rgba(143,216,207,.85);outline-offset:-2px;border-radius:4px}

/* v1.35 esiasetukset ja profiilit */
.presetBox{border:1px solid var(--line);background:rgba(0,0,0,.22);padding:10px 12px;margin-bottom:12px;border-radius:3px}
.presetHead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}.presetHead b{font-size:15px}
#presetName{font-family:var(--font-d);font-size:22px;color:var(--ember)}#presetName.custom{color:var(--frost)}
#sPreset{width:100%;accent-color:var(--ember)}
.presetTicks{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin:2px 0 6px}.presetTicks span.on{color:var(--ember);font-weight:800}.presetTicks span.def::after{content:' •'}
.profRow{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;padding:6px 8px;margin-top:6px;border:1px solid var(--line);background:rgba(0,0,0,.18)}

/* v1.36 maailmalista */
.worlds{margin-top:6px;display:flex;flex-direction:column;gap:6px;max-width:560px}
.worlds h3{margin:8px 0 2px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.world{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:8px 10px;background:linear-gradient(180deg,rgba(74,46,24,.9),rgba(47,29,14,.9));border:2px solid #2a1a0c;box-shadow:inset 0 0 0 1px #6e4a28;border-radius:4px}
.world.cur{box-shadow:inset 0 0 0 1px #e8a44a,0 0 12px rgba(232,164,74,.25)}
.world .wInfo{display:flex;flex-direction:column;min-width:0}.world .wInfo b{font-size:17px;color:var(--bone)}.world .wInfo span{font-size:12px;color:var(--dim)}
.world .wBtns{display:flex;gap:5px}.world .wBtns .btn{padding:5px 10px}.world input.search{font-size:15px;max-width:240px}
.wNew{display:grid;grid-template-columns:1fr;gap:6px;margin-top:4px;max-width:300px}

/* v1.36 virtuaalinen osoitin (hiiren lukitus pysyy paneelien ajan) */
#vcur{position:fixed;left:0;top:0;width:20px;height:20px;margin:-1px 0 0 -1px;z-index:100000;pointer-events:none;background:no-repeat 0 0/20px 20px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M1 1 L1 16 L5 12 L8 19 L11 18 L8 11 L14 11 Z' fill='%23f3e6c4' stroke='%232a1a0c' stroke-width='1.4' stroke-linejoin='round'/></svg>");filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.grid .slot.vh{border-color:var(--dim)}.btn.vh{border-color:var(--ember)}.card.vh{border-color:var(--ember)}#build .card.vh{border-color:#e8a44a;background:#3a2412}.tab.vh{border-color:#e8a44a}.mbtn.vh{border-color:var(--ember)}.kbtn.vh{border-color:#e8a44a;background:#7a4b1c}
.menuBtns{max-width:560px}.menuBtns>.mbtn,.menuBtns>.note{max-width:300px}.wNew .mbtn{max-width:none}.wNew input.search{max-width:none}
.world .wInfo b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* v1.40 näppäinopasteet */
.pHint{position:absolute;right:46px;top:14px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--dim);opacity:.85;pointer-events:none}
#gameHint{position:absolute;left:16px;bottom:calc(2px + env(safe-area-inset-bottom,0px));font-size:10.5px;font-weight:700;color:rgba(243,230,196,.55);letter-spacing:.05em;pointer-events:none;text-shadow:0 1px 2px #000}
/* v1.40 omat säätimet: liukusäädin ja kytkin; ei fokuskehyksiä */
button:focus,select:focus{outline:none}
.sld{position:relative;height:22px;min-width:160px;cursor:pointer;user-select:none}
.sld .sldT{position:absolute;left:0;right:0;top:9px;height:5px;border-radius:3px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px #6e4a28;display:block}
.sld .sldT b{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#a8622a,#e8a44a)}
.sld s{position:absolute;top:3px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#f3e6c4;border:2px solid #7a4b1c;box-shadow:0 1px 3px rgba(0,0,0,.6);text-decoration:none}
.sld.vh s,.sld:hover s{background:#fff6dc}
.tgl{display:inline-flex;align-items:center;gap:7px;background:rgba(0,0,0,.35);border:1px solid var(--line2);border-radius:12px;padding:3px 10px 3px 4px;color:var(--dim);font-weight:700;font-size:12px;cursor:pointer}
.tgl i{width:26px;height:14px;border-radius:7px;background:#3a2a1c;position:relative;display:inline-block;transition:background .15s}
.tgl i::after{content:'';position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#a99d89;transition:left .15s,background .15s}
.tgl.on{color:var(--bone);border-color:var(--ember)}.tgl.on i{background:#7a4b1c}.tgl.on i::after{left:14px;background:#ffd28a}
.tglRow{display:flex;align-items:center;gap:6px;margin:3px 0;cursor:pointer}
.setRow .tgl{justify-self:start;width:max-content}

/* v1.42 (lista 4, kohta 17): ulottuvuuden ensikäynnin pelottava otsikko – väri ulottuvuuden hehkusta (--rc) */
#realmBan{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;z-index:12;text-align:center;--rc:#e6e0cf;transition:opacity 1.6s ease}
#realmBan.on{opacity:1;transition:opacity .5s ease}
#realmBan .rbVig{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.15) 20%,rgba(0,0,0,.78) 75%);}
#realmBan>*:not(.rbVig){position:relative}
#realmBan small{font:600 16px var(--font-b);letter-spacing:.5em;text-transform:uppercase;color:#d8cdb4;text-shadow:0 2px 10px #000}
#realmBan b{font:400 78px var(--font-d);color:var(--rc);margin:6px 0 2px;text-shadow:0 0 18px var(--rc),0 0 46px var(--rc),0 4px 14px #000}
#realmBan.on b{animation:rbIn 1.6s cubic-bezier(.2,.8,.2,1) both,rbFlick 2.6s 1.6s infinite}
#realmBan i{display:block;width:420px;max-width:80vw;height:2px;background:linear-gradient(90deg,transparent,var(--rc),transparent);box-shadow:0 0 12px var(--rc)}
#realmBan p{font:500 21px var(--font-b);color:#efe6d0;margin:12px 16px 0;text-shadow:0 2px 10px #000;max-width:720px}
#realmBan.on p{animation:rbFade 1.2s 1.1s both}
#realmBan .rbRune{font:400 26px serif;letter-spacing:.6em;color:var(--rc);opacity:.75;text-shadow:0 0 10px var(--rc);margin:14px 0;white-space:nowrap}
#realmBan.on .rbRune{animation:rbRunes 6s linear both}
@keyframes rbIn{0%{opacity:0;transform:scale(1.7);filter:blur(14px);letter-spacing:.4em}60%{opacity:1;filter:blur(0)}75%{transform:scale(.97) translateX(-3px)}82%{transform:scale(1.01) translateX(3px)}100%{transform:scale(1);letter-spacing:.04em}}
@keyframes rbFlick{0%,100%{opacity:1}7%{opacity:.55}9%{opacity:1}48%{opacity:.85}50%{opacity:.35}53%{opacity:1}}
@keyframes rbFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rbRunes{0%{opacity:0;letter-spacing:1.4em}25%{opacity:.8}100%{opacity:.6;letter-spacing:.5em}}
@media (max-width:700px){#realmBan b{font-size:46px}#realmBan p{font-size:17px}}
/* v1.43 (lista 4, kohta 10): latausnäyttö – riimukivi, sumu, kipinät ja säe */
#loadScr{position:fixed;inset:0;z-index:9000;background:radial-gradient(ellipse at 50% 60%,#1d1a16 0%,#0c0b0a 60%,#050404 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;transition:opacity 1.3s ease;color:#e8dcc0}
#loadScr.out{opacity:0;pointer-events:none}
#loadScr .lsCenter{position:relative;width:200px;height:290px}
#loadScr .lsStone{width:200px;height:290px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.8));animation:lsBreath 6s ease-in-out infinite}
#loadScr .lsR{font:700 15px serif;fill:#26241f;text-anchor:middle;transition:fill .5s ease,filter .5s ease}
#loadScr .lsR.on{fill:#ffb35a;filter:drop-shadow(0 0 3px #ff8a2a) drop-shadow(0 0 7px #ff6a1a)}
#loadScr .lsMist{position:absolute;left:-30%;right:-30%;height:46%;bottom:-6%;background:radial-gradient(ellipse at 30% 60%,rgba(190,200,210,.16),transparent 60%),radial-gradient(ellipse at 75% 40%,rgba(170,180,190,.12),transparent 55%);filter:blur(8px);pointer-events:none}
#loadScr .lsMist.m1{animation:lsMist 16s ease-in-out infinite alternate}
#loadScr .lsMist.m2{bottom:8%;opacity:.7;animation:lsMist 23s ease-in-out infinite alternate-reverse}
#loadScr .lsSparks{position:absolute;left:50%;bottom:20px;width:0;height:0}
#loadScr .lsSparks i{position:absolute;left:var(--x);bottom:0;width:3px;height:3px;border-radius:50%;background:#ffc070;box-shadow:0 0 6px #ff8a2a,0 0 12px #ff6a1a;opacity:0;animation:lsSpark var(--t) linear var(--dl) infinite}
#loadScr .lsTitle{font:400 52px var(--font-d);color:#f2e6c8;margin-top:22px;text-shadow:0 0 18px rgba(255,150,60,.35),0 4px 14px #000;letter-spacing:.05em}
#loadScr .lsVerse{font:italic 500 18px var(--font-b);color:#cdbf9f;margin-top:10px;text-align:center;line-height:1.45;opacity:.9;padding:0 16px}
#loadScr .lsBar{width:260px;max-width:70vw;height:3px;background:rgba(255,255,255,.08);margin-top:22px;border-radius:2px;overflow:hidden}
#loadScr .lsBar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8a4a1a,#ffb35a);box-shadow:0 0 8px #ff8a2a;transition:width .35s ease}
#loadScr .lsNote{font:600 12px var(--font-b);letter-spacing:.25em;text-transform:uppercase;color:#8f846e;margin-top:10px}
@keyframes lsBreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes lsRune{0%,100%{opacity:1}50%{opacity:.72}}
@keyframes lsMist{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
@keyframes lsSpark{0%{opacity:0;transform:translate(0,0) scale(1)}10%{opacity:1}100%{opacity:0;transform:translate(calc(var(--x)*-.25),-300px) scale(.4)}}
@media (max-height:560px){#loadScr .lsCenter,#loadScr .lsStone{width:140px;height:203px}#loadScr .lsTitle{font-size:38px;margin-top:10px}}
/* v1.43 (lista 4, kohta 11): uuden maailman intro – otsikko ja kartan nimi */
#introT{position:fixed;inset:0;z-index:13;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center;opacity:0;transition:opacity .8s ease}
#introT.on{opacity:1}#introT.out{opacity:0}
#introT b{font:400 92px var(--font-d);color:#f6ecd2;text-shadow:0 0 30px rgba(255,200,120,.45),0 6px 24px rgba(0,0,0,.7);letter-spacing:.06em}
#introT.on b{animation:inTitle 2.6s cubic-bezier(.2,.8,.2,1) both}
#introT small{font:600 18px var(--font-b);letter-spacing:.45em;text-transform:uppercase;color:#f0e2c2;text-shadow:0 2px 10px #000}
#introT.on small{animation:inSub 1.6s 1.1s ease both}
#introT i{display:block;width:360px;max-width:70vw;height:2px;margin:10px auto;background:linear-gradient(90deg,transparent,#ffb35a,transparent)}
#introT.on i{animation:inLine 1.4s .8s ease both}
#introT .skip{position:absolute;bottom:22px;right:26px;font:600 13px var(--font-b);color:#d8cdb4;opacity:.75;text-shadow:0 1px 6px #000;letter-spacing:.08em}
@keyframes inTitle{0%{opacity:0;transform:translateY(24px) scale(.92);letter-spacing:.4em;filter:blur(10px)}100%{opacity:1;transform:none;letter-spacing:.06em;filter:blur(0)}}
@keyframes inSub{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes inLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:700px){#introT b{font-size:56px}}
/* v1.45: latauksen loppuleimahdus (0,8 s) ja sivujen partikkelit */
#loadScr.done .lsR{fill:#fff4e0;transition:fill .6s ease}
#loadScr.done .lsBar i{background:linear-gradient(90deg,#ffd9a0,#fff6e6);box-shadow:0 0 14px #ffd28a,0 0 30px #ffb35a}
#loadScr.done .lsTitle{text-shadow:0 0 28px rgba(255,220,170,.85),0 0 60px rgba(255,170,80,.6),0 4px 14px #000;transition:text-shadow .8s ease}
#loadScr .lsSide{position:absolute;top:0;bottom:0;width:24%;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 85%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 85%,transparent)}
#loadScr .lsSide.l{left:0}#loadScr .lsSide.r{right:0}
#loadScr .lsSide i{position:absolute;left:var(--x);bottom:-10px;width:var(--s);height:var(--s);border-radius:50%;background:#ffb860;box-shadow:0 0 6px #ff8a2a,0 0 14px #ff6a1a;opacity:0;animation:lsSide var(--t) linear var(--dl) infinite}
#loadScr .lsSide i.ash{background:#b8aea0;box-shadow:none;animation-name:lsAsh}
#loadScr.done .lsSide i:not(.ash){background:#fff0d8;box-shadow:0 0 8px #ffd9a0,0 0 18px #ffa040}
@keyframes lsSide{0%{opacity:0;transform:translate(0,0) scale(1)}12%{opacity:.95}70%{opacity:.6}100%{opacity:0;transform:translate(var(--dx),-92vh) scale(.35)}}
@keyframes lsAsh{0%{opacity:0;transform:translate(0,0) rotate(0)}20%{opacity:.45}100%{opacity:0;transform:translate(calc(var(--dx)*1.6),-70vh) rotate(260deg)}}
@media (max-width:700px){#loadScr .lsSide{width:18%}}
/* ================= v1.46 VALIKKO: otsikko, painikkeet, sankaripainike, näkymät, partikkelit ================= */
#menu{overflow:hidden}
#menuFx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#menu .inner,#menu .mView{position:relative;z-index:1}
#menu .mHome{transition:opacity .38s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s;max-width:560px;gap:12px}
#menu:not([data-view="main"]) .mHome{opacity:0;transform:translateX(-60px);pointer-events:none;visibility:hidden;transition:opacity .3s ease,transform .4s ease,visibility 0s .4s}
/* Otsikko: kaiverrettu kivi + taottu metalli + riimut */
.mTitle{position:relative;line-height:1;text-shadow:none}
.mTitle .tWord{position:relative;display:inline-block;font-family:'Cinzel Decorative','Uncial Antiqua',serif;font-weight:900;font-size:clamp(50px,7.4vw,104px);letter-spacing:.015em;color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,#fbf2dc 0%,#e6d3a8 30%,#a8875a 49%,#f1dfb6 56%,#c9a46a 72%,#6e4e2c 100%);
  background-blend-mode:multiply,normal;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 0 #2a1a0c) drop-shadow(0 6px 18px rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(255,140,50,.18));animation:tGlow 5s ease-in-out infinite}
.mTitle .tWord::after{content:attr(data-text);position:absolute;inset:0;color:transparent;background:linear-gradient(105deg,transparent 42%,rgba(255,250,235,.85) 50%,transparent 58%);background-size:260% 100%;background-position:130% 0;-webkit-background-clip:text;background-clip:text;animation:tSheen 7s ease-in-out 1.2s infinite;pointer-events:none}
.mTitle .tRunes{display:block;font:400 22px serif;letter-spacing:.95em;color:#ffb35a;opacity:.55;margin:4px 0 0 6px;text-shadow:0 0 8px #ff8a2a;animation:tRunes 4.2s ease-in-out infinite;transition:opacity .4s,letter-spacing .6s}
.mTitle:hover .tRunes{opacity:1;letter-spacing:1.05em;color:#ffe2b0;text-shadow:0 0 10px #ffb35a,0 0 22px #ff7a2a}
.mTitle::after{width:min(360px,70%);height:2px;margin-top:10px;background:linear-gradient(90deg,#e8a44a,rgba(232,164,74,.35) 60%,rgba(232,164,74,0));box-shadow:0 0 10px rgba(232,164,74,.45)}
@keyframes tGlow{0%,100%{filter:drop-shadow(0 2px 0 #2a1a0c) drop-shadow(0 6px 18px rgba(0,0,0,.75)) drop-shadow(0 0 18px rgba(255,140,50,.12))}50%{filter:drop-shadow(0 2px 0 #2a1a0c) drop-shadow(0 6px 18px rgba(0,0,0,.75)) drop-shadow(0 0 30px rgba(255,150,60,.32))}}
@keyframes tSheen{0%,55%{background-position:130% 0}85%,100%{background-position:-30% 0}}
@keyframes tRunes{0%,100%{opacity:.45}50%{opacity:.8}}
#menu .lede{font-size:15.5px;line-height:1.5;max-width:46ch;color:#d8cfbd;text-shadow:0 1px 6px rgba(0,0,0,.8)}
/* Painikkeet: tumma puu, rautaniitit, riimulaatta, valojuova */
#menu .menuBtns{gap:8px;max-width:400px}
#menu .menuBtns>.mbtn{max-width:400px}
#menu .mbtn{position:relative;overflow:hidden;padding:10px 18px 10px 64px;min-height:54px;font:700 17px 'Cinzel',var(--font-b);letter-spacing:.03em;color:#f1e6cc;text-align:left;border-radius:4px;border:1px solid #5a3a1e;
  background:radial-gradient(circle at 7px 7px,#c8b08a 0 1.6px,#3a2a1a 2.2px,transparent 2.8px),radial-gradient(circle at calc(100% - 7px) 7px,#c8b08a 0 1.6px,#3a2a1a 2.2px,transparent 2.8px),radial-gradient(circle at 7px calc(100% - 7px),#c8b08a 0 1.6px,#3a2a1a 2.2px,transparent 2.8px),radial-gradient(circle at calc(100% - 7px) calc(100% - 7px),#c8b08a 0 1.6px,#3a2a1a 2.2px,transparent 2.8px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 2px,transparent 2px 9px),linear-gradient(180deg,rgba(70,45,24,.94),rgba(34,22,13,.96));
  box-shadow:inset 0 1px 0 rgba(255,220,170,.12),inset 0 -2px 0 rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.45);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s,background-color .2s}
#menu .mbtn small{font:500 12.5px var(--font-b);letter-spacing:.01em;color:#b9aa8e;margin-top:2px}
#menu .mbtn .mIco{position:absolute;left:12px;top:50%;width:38px;height:38px;margin-top:-19px;display:flex;align-items:center;justify-content:center;font:400 22px serif;font-style:normal;color:#e8a44a;border-radius:3px;
  background:radial-gradient(circle at 35% 30%,#6a6258,#3b3631 70%);box-shadow:inset 0 1px 1px rgba(255,255,255,.18),inset 0 -2px 3px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.5);text-shadow:0 0 4px rgba(255,138,42,.5);transition:color .2s,text-shadow .2s,transform .3s}
#menu .mbtn .mSheen{position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,225,170,.16),transparent);transform:translateX(-140%) skewX(-18deg);pointer-events:none}
#menu .mbtn:hover,#menu .mbtn:focus-visible{transform:translateX(5px);border-color:#e8a44a;box-shadow:inset 0 1px 0 rgba(255,220,170,.2),0 0 0 1px rgba(232,164,74,.35),0 0 22px rgba(232,164,74,.28),0 8px 22px rgba(0,0,0,.5);outline:none}
#menu .mbtn:hover .mIco,#menu .mbtn:focus-visible .mIco{color:#fff0d0;text-shadow:0 0 6px #ffb35a,0 0 14px #ff7a2a;transform:rotate(-6deg) scale(1.08)}
#menu .mbtn:hover .mSheen{animation:mSheen .7s ease}
#menu .mbtn:active{transform:translateX(5px) translateY(1px) scale(.985);box-shadow:inset 0 2px 8px rgba(0,0,0,.6),0 0 16px rgba(232,164,74,.3)}
#menu .mbtn.on{border-color:#7fd0a0}#menu .mbtn.on .mIco{color:#9fffc0}
@keyframes mSheen{from{transform:translateX(-140%) skewX(-18deg)}to{transform:translateX(330%) skewX(-18deg)}}
#menu.anim .menuBtns>*{animation:mbIn .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*65ms + .1s)}
@keyframes mbIn{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
/* Sankaripainike: jatka / aloita seikkailu – pyörivä hehkureunus, sykkivä riimusinetti, kultainen teksti */
@property --ha{syntax:'<angle>';inherits:false;initial-value:0deg}
#menu .mbtn.mHero{min-height:86px;padding:14px 22px 14px 92px;border:none;font:900 24px 'Cinzel',serif;letter-spacing:.06em;isolation:isolate;
  background:linear-gradient(180deg,#3a210e,#1c0f07);box-shadow:0 0 28px rgba(255,140,50,.35),0 10px 30px rgba(0,0,0,.6);animation:heroBreath 3.2s ease-in-out infinite}
#menu .mbtn.mHero::before{content:"";position:absolute;inset:0;border-radius:5px;padding:2px;z-index:-1;background:conic-gradient(from var(--ha),#ff7a1a,#ffe2a0 12%,rgba(255,140,50,.1) 30%,#ffb35a 50%,#fff3d6 58%,rgba(255,140,50,.1) 75%,#ff7a1a);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:heroSpin 4s linear infinite}
#menu .mbtn.mHero::after{content:"";position:absolute;inset:2px;border-radius:4px;z-index:-2;background:radial-gradient(ellipse at 20% 50%,rgba(255,140,50,.32),transparent 55%),repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 2px,transparent 2px 9px),linear-gradient(180deg,#4a2a12,#1e1008)}
#menu .mbtn.mHero .hTxt{display:block;background:linear-gradient(180deg,#fff6e0,#ffd08a 55%,#e8903a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px rgba(255,160,70,.55))}
#menu .mbtn.mHero small{color:#e6cfa4;font-size:13px;letter-spacing:.02em}
#menu .mbtn.mHero .mIco{left:16px;width:60px;height:60px;margin-top:-30px;border-radius:50%;font-size:32px;color:#fff1d0;background:radial-gradient(circle at 50% 45%,#7a3a12,#2a1408 70%);box-shadow:0 0 0 2px #e8a44a,0 0 18px #ff8a2a,inset 0 0 14px rgba(255,160,70,.6);text-shadow:0 0 8px #ffb35a,0 0 18px #ff7a2a;animation:heroSigil 2.4s ease-in-out infinite}
#menu .mbtn.mHero .mIco::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(255,190,110,.7);animation:heroSpin2 9s linear infinite}
#menu .mbtn.mHero:hover{transform:translateX(5px) scale(1.015)}
#menu .mbtn.mHero:hover .mIco{transform:scale(1.1)}
@keyframes heroSpin{to{--ha:360deg}}
@keyframes heroSpin2{to{transform:rotate(360deg)}}
@keyframes heroBreath{0%,100%{box-shadow:0 0 22px rgba(255,140,50,.28),0 10px 30px rgba(0,0,0,.6)}50%{box-shadow:0 0 44px rgba(255,150,60,.55),0 10px 30px rgba(0,0,0,.6)}}
@keyframes heroSigil{0%,100%{box-shadow:0 0 0 2px #e8a44a,0 0 14px #ff8a2a,inset 0 0 12px rgba(255,160,70,.5)}50%{box-shadow:0 0 0 2px #ffd28a,0 0 30px #ffa040,inset 0 0 20px rgba(255,190,110,.8)}}
/* Leveä näkymä tyhjään tilaan (Maailmat / Näppäimet / Asetukset) */
#menu .mView{position:fixed;top:clamp(14px,4vh,40px);bottom:clamp(14px,4vh,40px);left:clamp(16px,6vw,100px);right:clamp(16px,5vw,90px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(24,16,10,.9),rgba(14,10,7,.93));border:1px solid #5a3a1e;border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 20px 60px rgba(0,0,0,.65),inset 0 0 60px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;transform:translateX(70px);visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}
#menu:not([data-view="main"]) .mView{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .35s ease .08s,transform .5s cubic-bezier(.2,.8,.2,1) .05s,visibility 0s}
#menu .mView::before,#menu .mView::after{content:"";position:absolute;width:46px;height:46px;border:2px solid #e8a44a;opacity:.55;pointer-events:none}
#menu .mView::before{left:8px;top:8px;border-right:none;border-bottom:none}#menu .mView::after{right:8px;bottom:8px;border-left:none;border-top:none}
#menu .mvHead{display:flex;align-items:center;gap:18px;padding:18px 26px 12px;border-bottom:1px solid rgba(232,164,74,.25)}
#menu .mvHead h2{margin:0;font:800 30px 'Cinzel',serif;color:#f1e6cc;letter-spacing:.06em;text-shadow:0 0 14px rgba(255,150,60,.25)}
#menu .mvRunes{margin-left:auto;font:400 18px serif;letter-spacing:.5em;color:#e8a44a;opacity:.45}
#menu .mBack{display:flex;align-items:center;gap:8px;padding:8px 14px;font:700 15px 'Cinzel',serif;color:#f1e6cc;background:linear-gradient(180deg,rgba(70,45,24,.94),rgba(34,22,13,.96));border:1px solid #5a3a1e;border-radius:4px;cursor:pointer;transition:transform .15s,border-color .2s,box-shadow .2s}
#menu .mBack i{font-style:normal;transition:transform .2s}#menu .mBack:hover{border-color:#e8a44a;box-shadow:0 0 16px rgba(232,164,74,.3)}#menu .mBack:hover i{transform:translateX(-4px)}
#menu .mBack kbd{font:700 11px var(--font-b);padding:1px 6px;border:1px solid #8a6a44;border-radius:3px;color:#e8a44a;margin-left:4px}
#menu .mvBody{flex:1;min-height:0;overflow:auto;padding:16px 26px 22px;scrollbar-width:thin;scrollbar-color:#7a4b1c transparent}
#menu .mvBody::-webkit-scrollbar{width:8px}#menu .mvBody::-webkit-scrollbar-thumb{background:#7a4b1c;border-radius:4px}
#menu[data-view="worlds"] #settings{display:none}#menu[data-view="settings"] #worlds,#menu[data-view="main"] #worlds{display:none}
#menu .mView .setCard{width:auto;max-width:none;margin:0}#menu .mView .setCard>.close{display:none}
#menu:not([data-view="main"]) .mvBody>*{animation:mbIn .5s cubic-bezier(.2,.8,.2,1) .12s both}
/* Maailmakortit ruudukkona */
#menu .worlds{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;max-width:none;margin:0}
#menu .worlds h3{grid-column:1/-1;margin:0;font:700 13px 'Cinzel',serif;letter-spacing:.2em}
#menu .world{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:16px 16px 14px;min-height:150px;border-radius:5px;border:1px solid #5a3a1e;
  background:radial-gradient(ellipse at 85% 0%,rgba(232,164,74,.14),transparent 55%),linear-gradient(180deg,rgba(66,42,22,.95),rgba(30,20,12,.96));box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,220,170,.1);transition:transform .2s,box-shadow .2s,border-color .2s;animation:mbIn .5s cubic-bezier(.2,.8,.2,1) both}
#menu .world:hover{transform:translateY(-3px);border-color:#e8a44a;box-shadow:0 0 22px rgba(232,164,74,.22),0 12px 26px rgba(0,0,0,.5)}
#menu .world .wInfo b{font:800 20px 'Cinzel',serif;color:#f6ecd2}#menu .world .wInfo span{font-size:13px;line-height:1.45;margin-top:4px}
#menu .world .wBtns{margin-top:auto;gap:6px}#menu .world .wBtns .btn{flex:1;padding:8px 10px;font-weight:700;transition:transform .15s,box-shadow .2s,border-color .2s}
#menu .world .wBtns .btn:hover{transform:translateY(-1px);box-shadow:0 0 12px rgba(232,164,74,.3)}
#menu .world::after{content:"ᛗ";position:absolute;right:14px;top:10px;font:400 26px serif;color:#e8a44a;opacity:.25}
#menu .wNew{grid-column:1/-1;display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;padding:14px;border:1px dashed rgba(232,164,74,.5);border-radius:5px;background:rgba(232,164,74,.04)}
#menu .wNew input.search{flex:1;min-width:200px;font-size:16px}#menu .wNew .mbtn{flex:1;min-width:260px;margin:0}
@media (max-height:760px){.mTitle .tWord{font-size:clamp(44px,6.2vw,84px)}#menu .lede{font-size:14px;line-height:1.4}#menu .mbtn{min-height:48px;padding-top:7px;padding-bottom:7px}#menu .mbtn.mHero{min-height:72px}#menu .menuBtns{gap:6px}}
@media (max-height:640px){#menu .lede{display:none}}
@media (max-width:700px){#menu .mView{left:8px;right:8px;top:8px;bottom:8px}#menu .mvRunes{display:none}#menu .mvHead h2{font-size:22px}}
#menu.inGame .lede{display:none}#menu .scrollHint{display:none}
#menu .worlds .wNew{width:auto;max-width:none;flex-direction:row}#menu .wNew input.search{max-width:none;align-self:center;height:46px}
/* v1.47: esiasetusliukusäätimen teemat (pv0 Low … pv7 Ultra), pv3 Medium = alkuperäinen */
.presetBox{position:relative;transition:border-color .4s,box-shadow .4s,background .4s}
.presetBox .pvFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.presetBox .sld{z-index:1}
.presetBox .sld .sldT b{transition:background .4s}.presetBox .sld s{transition:background .3s,border-color .3s,box-shadow .3s}
#presetName{transition:color .4s,text-shadow .4s}
/* Low: kylmä kivi, karhea pinta, pölyä */
.pv0{border-color:#5a5852;background:linear-gradient(180deg,rgba(60,58,54,.35),rgba(20,20,20,.3))}
.pv0 .sld .sldT b{background:repeating-linear-gradient(90deg,#77736b 0 3px,#6a665f 3px 7px),#6f6b63;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.pv0 .sld s{background:radial-gradient(circle at 35% 30%,#a9a49a,#5d5a54);border-color:#3a3834;border-radius:45% 55% 50% 50%}
.pv0 #presetName{color:#a9a49a;text-shadow:0 1px 0 #000}.pv0 .presetTicks span.on{color:#c9c4ba}
/* Low+: vaskipatina, itiöt */
.pv1{border-color:#3f6a5a;background:linear-gradient(180deg,rgba(30,70,60,.25),rgba(10,25,22,.3))}
.pv1 .sld .sldT b{background:linear-gradient(90deg,#3e7a64,#6fc0a0 70%,#a8d8b8);box-shadow:0 0 6px rgba(111,192,160,.35)}
.pv1 .sld s{background:radial-gradient(circle at 35% 30%,#d8f0e0,#6fa88c);border-color:#2f5a4a}
.pv1 #presetName{color:#8fd8b4;text-shadow:0 0 8px rgba(111,192,160,.4)}.pv1 .presetTicks span.on{color:#8fd8b4}
/* Medium-: metsän hämärä, tulikärpäset */
.pv2{border-color:#4e6a30;background:linear-gradient(180deg,rgba(40,60,20,.3),rgba(12,20,8,.3))}
.pv2 .sld .sldT b{background:linear-gradient(90deg,#3d5a20,#7aa83a 75%,#c8f070);box-shadow:0 0 8px rgba(160,220,90,.35)}
.pv2 .sld s{background:radial-gradient(circle at 35% 30%,#f4ffd0,#9ac860);border-color:#3d5a20;box-shadow:0 0 8px rgba(200,255,120,.5)}
.pv2 #presetName{color:#b8e070;text-shadow:0 0 10px rgba(180,240,100,.45)}.pv2 .presetTicks span.on{color:#c8f070}
/* Medium+: kulta, liikkuva kimallus */
.pv4{border-color:#a8822a;box-shadow:0 0 14px rgba(255,200,90,.15)}
.pv4 .sld .sldT b{background:linear-gradient(90deg,#8a6420,#e8c060 40%,#fff2b0 50%,#e8c060 60%,#b88a2a);background-size:220% 100%;animation:pvSheen 2.4s linear infinite;box-shadow:0 0 10px rgba(255,210,100,.5)}
.pv4 .sld s{background:radial-gradient(circle at 35% 30%,#fffbe0,#e8c060);border-color:#8a6420;box-shadow:0 0 10px rgba(255,220,120,.7)}
.pv4 #presetName{color:#ffd870;text-shadow:0 0 12px rgba(255,210,100,.6)}.pv4 .presetTicks span.on{color:#ffd870}
/* High: routa, jääkiteet */
.pv5{border-color:#5aa8c8;box-shadow:0 0 18px rgba(120,210,255,.18),inset 0 0 22px rgba(120,210,255,.08);background:linear-gradient(180deg,rgba(40,80,110,.28),rgba(8,20,30,.3))}
.pv5 .sld .sldT b{background:linear-gradient(90deg,#2a6a98,#7fd0ff 60%,#e8fbff);box-shadow:0 0 12px rgba(127,208,255,.65)}
.pv5 .sld s{background:radial-gradient(circle at 35% 30%,#fff,#9fe0ff);border-color:#2a6a98;box-shadow:0 0 12px #7fd0ff;transform:rotate(45deg);border-radius:3px}
.pv5 #presetName{color:#bfeaff;text-shadow:0 0 12px #7fd0ff,0 0 24px rgba(127,208,255,.5)}.pv5 .presetTicks span.on{color:#bfeaff}
/* High+: punainen ja palava */
.pv6{border-color:#c8401a;box-shadow:0 0 22px rgba(255,80,20,.3),inset 0 0 26px rgba(255,60,10,.12);background:linear-gradient(180deg,rgba(90,20,8,.35),rgba(30,6,2,.4))}
.pv6 .sld .sldT b{background:linear-gradient(90deg,#5a0a04,#c81e08 35%,#ff6a10 65%,#ffd060 88%,#fff2c0);background-size:200% 100%;animation:pvFire 1.1s ease-in-out infinite alternate;box-shadow:0 0 14px rgba(255,90,20,.85),0 -3px 10px rgba(255,140,40,.5)}
.pv6 .sld s{background:radial-gradient(circle at 40% 35%,#fff6d0,#ff8a20 55%,#c81e08);border-color:#5a0a04;box-shadow:0 0 14px #ff6a10,0 0 26px rgba(255,80,20,.7);animation:pvThumbFire .5s ease-in-out infinite alternate}
.pv6 #presetName{color:#ff7a3a;text-shadow:0 0 10px #ff4a10,0 0 24px rgba(255,90,20,.7),0 -2px 14px rgba(255,180,60,.6);animation:pvNameFire .35s ease-in-out infinite alternate}.pv6 .presetTicks span.on{color:#ff8a4a}
/* Ultra: violetti taika */
.pv7{border-color:#9a5af0;box-shadow:0 0 26px rgba(170,90,255,.35),inset 0 0 30px rgba(150,70,255,.14);background:radial-gradient(ellipse at 80% 0%,rgba(150,70,255,.22),transparent 60%),linear-gradient(180deg,rgba(40,14,70,.4),rgba(14,4,26,.45))}
.pv7 .sld .sldT b{background:linear-gradient(90deg,#3a0f6a,#8a3af0 35%,#d07aff 60%,#ffd0ff 75%,#8a3af0);background-size:240% 100%;animation:pvSheen 1.8s linear infinite;box-shadow:0 0 16px rgba(190,110,255,.9)}
.pv7 .sld s{background:radial-gradient(circle at 40% 35%,#fff,#d8a0ff 50%,#7a2ae0);border-color:#3a0f6a;box-shadow:0 0 16px #b06aff,0 0 32px rgba(170,90,255,.7);animation:pvThumbArc 1.6s ease-in-out infinite}
.pv7 #presetName{color:#e2b8ff;text-shadow:0 0 12px #b06aff,0 0 28px rgba(170,90,255,.8)}.pv7 .presetTicks span.on{color:#e2b8ff}
@keyframes pvSheen{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes pvFire{from{background-position:0 0;filter:brightness(1)}to{background-position:60% 0;filter:brightness(1.25)}}
@keyframes pvThumbFire{from{box-shadow:0 0 12px #ff6a10,0 0 22px rgba(255,80,20,.6)}to{box-shadow:0 0 18px #ffa040,0 0 34px rgba(255,80,20,.9)}}
@keyframes pvNameFire{from{text-shadow:0 0 10px #ff4a10,0 0 22px rgba(255,90,20,.7),0 -2px 12px rgba(255,180,60,.5)}to{text-shadow:0 0 14px #ff6a10,0 0 30px rgba(255,90,20,.85),0 -4px 18px rgba(255,200,80,.7)}}
@keyframes pvThumbArc{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
/* v1.47 Hiidenmaa-logo (SVG): kivi, halkeamat, malmit, sammal, rautareunus, riimut, hiidenkivikristallit */
.mTitle.hasLogo .tWord{display:none}
.mTitle .tLogo{display:block;width:min(560px,calc(100vw - 40px));height:auto;margin:2px 0 0 -6px;overflow:visible;filter:drop-shadow(0 8px 14px rgba(0,0,0,.8)) drop-shadow(0 0 26px rgba(255,140,50,.12))}
.mTitle .tLogo .lgCry{animation:lgCry 2.8s ease-in-out infinite}
.mTitle .tLogo .lgSheen{animation:lgSheen 8s ease-in-out 1.5s infinite}
.mTitle:hover .tLogo .lgRune{fill:#ff9a3a;transition:fill .5s}
.mTitle .tLogo .lgRune{transition:fill .8s}
@keyframes lgCry{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes lgSheen{0%,60%{transform:skewX(-18deg) translateX(0)}90%,100%{transform:skewX(-18deg) translateX(1500px)}}
@media (max-height:760px){.mTitle .tLogo{width:min(500px,calc(100vw - 40px))}}
/* v1.48 logoteemat */
.mTitle .tLogo .lgAura{animation:lgAura 3.2s ease-in-out infinite}
.mTitle .tLogo.lg-hiisi .lgVeinGlow{animation:lgCry 2.2s ease-in-out infinite}
.mTitle .tLogo.lg-iron .lgHeat{animation:lgHeat 3s ease-in-out infinite}
.mTitle .tLogo .lgSpk{animation:lgSpk 3.6s ease-in-out infinite;opacity:0}
.mTitle .tLogo.lg-rune .lgRuneGlow{animation:lgRuneG 4.5s ease-in-out infinite}
.mTitle:hover .tLogo.lg-rune .lgRuneGlow{opacity:1;animation:none}
.mTitle .tRunes.band{color:#ff6a3a;text-shadow:0 0 8px #c8281a,0 0 18px rgba(255,90,40,.6);opacity:.85}
@keyframes lgAura{0%,100%{opacity:.35}50%{opacity:.8}}
@keyframes lgHeat{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes lgSpk{0%,70%,100%{opacity:0}80%{opacity:1}}
@keyframes lgRuneG{0%,100%{opacity:.15}50%{opacity:.85}}
/* v1.49: Tallennettu-välähdys */
#menu .mbtn.saved{border-color:#7fd0a0;box-shadow:0 0 0 1px rgba(127,208,160,.5),0 0 22px rgba(127,208,160,.45)}#menu .mbtn.saved .bLbl{color:#bff5d0}#menu .mbtn.saved .mIco{color:#bff5d0;text-shadow:0 0 8px #7fd0a0}
/* v1.49 tiputusristikko */
#dropRet{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;animation:drIn .25s ease backwards}   /* v2.05: ei 'both' – täyttötila ohitti JS:n vilkkumisen (style.opacity) */
#dropRet svg{position:absolute;left:0;top:0;overflow:visible}
#dropRet polyline,#dropRet line{fill:none;stroke:rgba(255,242,215,.92);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
#dropRet .sh{stroke:rgba(0,0,0,.5);stroke-width:3}#dropRet circle{fill:rgba(255,242,215,.95)}#dropRet circle.sh{fill:rgba(0,0,0,.5);stroke:none}
#dropRet text{font:700 9.5px var(--font-b,sans-serif);fill:#ffe8c0;paint-order:stroke;stroke:rgba(0,0,0,.7);stroke-width:2.5px;letter-spacing:.3px}
#dropRet text.land{fill:#ffb070;font-size:8.8px}   /* v2.06: ▼ −20 % */#dropRet text.land.s{font-size:9.5px}
/* v2.04: vilkkuminen ohjataan JS:stä (aimBlinkOp), piste ja viivat samaan aikaan */
#aimHint{position:absolute;left:calc(50% + 74px);top:calc(50% + 16px);display:flex;flex-direction:column;gap:2px;pointer-events:none;font:600 10.5px var(--font-b,sans-serif);color:#f2e6cc;text-shadow:0 1px 2px #000,0 0 4px #000;white-space:nowrap;animation:drIn .3s ease both}
#aimHint kbd{display:inline-block;min-width:13px;padding:0 3px;margin-right:5px;font-size:9.5px!important;border:1px solid rgba(255,230,180,.6);border-radius:3px;background:rgba(0,0,0,.45);font:700 11px var(--font-b,sans-serif);text-align:center;color:#ffd36a}
@keyframes drIn{from{opacity:0}to{opacity:1}}
/* v1.52 CSS-pilviverho uuden maailman intron alussa (alle Medium-grafiikka) */
#cloudVeil{position:fixed;inset:0;z-index:8990;pointer-events:none;overflow:hidden}
#cloudVeil .cvBg{position:absolute;inset:0;background:linear-gradient(#d4dce8,#eef2f7 45%,#cfd8e4);transition:opacity 1.2s ease .15s}
#cloudVeil .cvSun{position:absolute;left:50%;top:45%;width:90vmax;height:90vmax;margin:-45vmax 0 0 -45vmax;border-radius:50%;opacity:0;transform:scale(.4);
  background:radial-gradient(circle,rgba(255,250,235,.9) 0%,rgba(255,236,200,.45) 18%,rgba(255,220,170,.12) 40%,transparent 62%);transition:opacity 1s ease .2s,transform 2.4s ease-out;will-change:opacity,transform}
#cloudVeil canvas{position:absolute;top:-9vh;height:118vh;width:68vw;will-change:transform,opacity;transform-origin:50% 50%}
#cloudVeil .cL{left:-6vw}#cloudVeil .cR{right:-6vw}
#cloudVeil .l0{transition:transform 2.7s cubic-bezier(.45,0,.2,1),opacity 1.1s ease 1.5s}
#cloudVeil .l1{transition:transform 2.3s cubic-bezier(.45,0,.2,1),opacity 1s ease 1.2s}
#cloudVeil .l2{transition:transform 1.9s cubic-bezier(.45,0,.2,1),opacity .9s ease .9s}
#cloudVeil.open .cvBg{opacity:0}#cloudVeil.open .cvSun{opacity:1;transform:scale(1.1);transition:opacity .9s ease .1s,transform 2.6s ease-out}
#cloudVeil.open .cL.l0{transform:translateX(-62%) scale(1.08);opacity:0}#cloudVeil.open .cR.l0{transform:translateX(62%) scale(1.08);opacity:0}
#cloudVeil.open .cL.l1{transform:translateX(-90%) scale(1.2);opacity:0}#cloudVeil.open .cR.l1{transform:translateX(90%) scale(1.2);opacity:0}
#cloudVeil.open .cL.l2{transform:translateX(-125%) scale(1.4);opacity:0}#cloudVeil.open .cR.l2{transform:translateX(125%) scale(1.4);opacity:0}
#cloudVeil.open{animation:cvOut .8s ease 2.1s forwards}@keyframes cvOut{to{opacity:0}}
#vcur{will-change:transform}   /* v1.54 */
/* ================= v1.55 ensikäynnin aloitusjakso ================= */
#splash{position:fixed;inset:0;z-index:9500;background:#000;color:#e8dcc0;overflow:hidden;cursor:default;transition:opacity .7s ease}
#splash.out{opacity:0;pointer-events:none}
#splash .spStage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity 1s ease;pointer-events:none;text-align:center}
#splash .spStage.on{opacity:1}
#splash .spStudioN{font:600 clamp(40px,6vw,74px) 'Cinzel',serif;letter-spacing:.18em;color:#f2ead8;opacity:0;transform:translateY(8px);transition:opacity 1.4s ease .2s,transform 1.8s ease .2s,letter-spacing 3s ease}
#splash .spStudioS{font:700 15px var(--font-b);letter-spacing:.6em;color:#b8a888;margin-top:12px;opacity:0;transition:opacity 1.2s ease 1s}
#splash .spStudio.on .spStudioN{opacity:1;transform:none;letter-spacing:.24em}#splash .spStudio.on .spStudioS{opacity:1}
#splash .spCopy{position:absolute;bottom:28px;left:16px;right:16px;font:500 12px/1.6 var(--font-b);color:#7a7060;opacity:0;transition:opacity 1.2s ease 1.4s}
#splash .spStudio.on .spCopy{opacity:1}
#splash #spLogo{width:min(820px,88vw);height:auto;opacity:0;transform:scale(1.06);filter:drop-shadow(0 10px 18px rgba(0,0,0,.9)) drop-shadow(0 0 30px rgba(255,140,50,.15));transition:opacity 2.6s ease .2s,transform 4.5s ease-out .2s}
#splash .spTitle.on #spLogo{opacity:1;transform:scale(1)}
#splash .spShade{position:absolute;inset:0;background:linear-gradient(0deg,#000 40%,rgba(0,0,0,0) 70%);background-size:100% 260%;background-position:0 -160%;opacity:0}
#splash .spTitle.on .spShade{animation:spShade 2s ease-in 4.2s forwards}
@keyframes spShade{0%{opacity:1;background-position:0 -160%}100%{opacity:1;background-position:0 100%}}
#splash .spWarn b{font:700 clamp(24px,3.2vw,34px) 'Cinzel',serif;color:#f2e6cc;margin-top:18px;letter-spacing:.04em}
#splash .spWarn p{font:500 17px/1.6 var(--font-b);color:#c8bba0;margin:12px 16px 0}#splash .spWarn em{color:#ffb35a;font-style:normal}
#splash .spDev{width:150px;color:#e8a44a;filter:drop-shadow(0 0 10px rgba(232,164,74,.4))}
#splash.trans{background:#000}
#splash .spSkip{position:absolute;right:22px;bottom:18px;font:600 12px var(--font-b);color:#5a5244;letter-spacing:.06em}
#loadScr.enter .lsCenter,#loadScr.enter .lsTitle{animation:ldEnter 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes ldEnter{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
/* v1.59 aloitusjakso: studiot allekkain yhtä isoina, Esc-ohje; suorituskykytestin paneeli latausnäytöllä */
#splash .spStudioN.n2{transition-delay:.7s}#splash .spAmp{font:500 clamp(20px,2.4vw,30px) 'Cinzel',serif;color:#b8a888;margin:6px 0;opacity:0;transition:opacity 1.2s ease .45s}
#splash .spStudio.on .spAmp{opacity:1}
#splash .spEsc{max-width:620px;margin-top:18px !important;padding:10px 14px;border:1px solid rgba(232,164,74,.35);border-radius:6px;background:rgba(232,164,74,.06);font-size:15px !important}
#splash kbd{font:700 12px var(--font-b);padding:1px 7px;border:1px solid #8a6a44;border-radius:3px;color:#ffb35a;margin:0 2px}

/* v1.60: latauksen aikana (.loading) vain riimujen oranssi täyttyminen ja palkki – koristeet levossa. Valmis (.done): vaalea leimahdus
   pelkillä opacity/transform-animaatioilla (ei suodinanimaatioita, jotka pätkivät), partikkelit häivyttyvät esiin. */
#loadScr .lsSparks,#loadScr .lsSide,#loadScr .lsMist{transition:opacity 1s ease}
#loadScr.loading .lsSparks,#loadScr.loading .lsSide,#loadScr.loading .lsMist{opacity:0}
#loadScr.loading .lsSparks i,#loadScr.loading .lsSide i,#loadScr.loading .lsMist,#loadScr.loading .lsStone{animation:none}
#loadScr .lsGlow{position:absolute;left:50%;top:44%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,246,226,.75) 0%,rgba(255,200,130,.4) 22%,rgba(255,150,60,.14) 45%,transparent 68%);opacity:0;transform:scale(.6);will-change:opacity,transform}
#loadScr.done .lsGlow{animation:lsGlow 1.7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes lsGlow{0%{opacity:0;transform:scale(.6)}35%{opacity:1;transform:scale(1.05)}100%{opacity:.55;transform:scale(1.2)}}
#loadScr .lsStone{will-change:transform}
#splash .spStage,#splash #spLogo,#splash .spStudioN,#splash .spCopy{will-change:opacity,transform}
#splash.noIntro{background:#050404}
#splash .spSkip kbd{font-size:11px}
#splash .spPerf canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#splash .spPerf .ppShade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 30%,rgba(0,0,0,.55) 100%),linear-gradient(0deg,rgba(0,0,0,.75),transparent 45%);transition:background .8s ease}
#splash .spPerf.res .ppShade{background:rgba(5,4,4,.82)}
#splash .ppPanel{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));box-sizing:border-box;padding:18px 22px;text-align:center;
  border:1px solid rgba(232,164,74,.45);border-radius:8px;background:rgba(20,14,9,.82);box-shadow:0 0 30px rgba(255,140,50,.15);transition:bottom .8s ease}
#splash .spPerf.res .ppPanel{bottom:calc(50% - 110px)}
#splash .ppPanel b{display:block;font:800 24px 'Cinzel',serif;color:#f2e6cc}#splash .ppPanel b small{font:600 16px var(--font-b);color:#ffb35a}
#splash .ppPanel .pHead{display:block;font:700 12px var(--font-b);letter-spacing:.25em;text-transform:uppercase;color:#8f846e;margin-bottom:6px}
#splash .ppPanel p{font:500 16px/1.55 var(--font-b);color:#d8cdb4;margin:8px 0 0}#splash .ppPanel em{font-style:normal;color:#ffb35a;font-weight:700}
#splash .ppPanel .pTip{font-size:15px;color:#c8bba0}
#splash .ppPanel .pBar{height:6px;margin:14px 0 6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
#splash .ppPanel .pBar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8a4a1a,#ffb35a)}
#splash .ppPanel .pBar.t i{width:100%;transform-origin:left;animation:ppT 9s linear forwards;background:rgba(255,179,90,.5)}
@keyframes ppT{from{transform:scaleX(1)}to{transform:scaleX(0)}}
#splash .ppPanel .pRow{display:flex;justify-content:space-between;font:700 13px var(--font-b);color:#b8a888}#splash .ppPanel #ppF{color:#ffb35a}
#splash .ppPanel .pRec{font:700 18px var(--font-b);color:#f2e6cc}
/* v1.63: HIIDENMAA-otsikko: vain häivytys sisään (1,6 s) ja ulos (1,3 s) – ei pyyhkäisyvarjoa, skaalausta eikä vaiheen omaa häivytystä
   (ennen otsikko "paljastui monta kertaa"). Kesto --td asetetaan boot.js:ssä (7,2 s ensikäynnillä, 4,6 s palaavalla). */
#splash .spTitle{transition:none}
#splash .spShade{display:none}
#splash #spLogo{transform:none;transition:none;opacity:0}
@keyframes spLogoIn{from{opacity:0}to{opacity:1}}@keyframes spLogoOut{from{opacity:1}to{opacity:0}}
/* v1.64: varoitusruudun alaosaan Windows-yhteensopivuus (valkoinen Windows 11 -tyylinen ikoni tekstin vieressä) */
#splash .spWin{position:absolute;left:0;right:0;bottom:56px;display:flex;align-items:center;justify-content:center;gap:10px;font:600 14px var(--font-b);color:#e8e2d4;letter-spacing:.04em;opacity:0;transition:opacity 1s ease .6s}
#splash .spWarn.on .spWin{opacity:.9}
#splash .spWin svg{width:15px;height:15px;fill:#fff;vertical-align:-2px;margin:0 6px 0 2px}   /* v1.65: ikoni Windows-sanan edessä */
#inv #craftSearch{max-width:300px}   /* v1.65: lyhyempi hakupalkki */
/* v1.66: HIIDENMAA nousee mustasta pilvestä ja vajoaa mustaan. Studio häivyttyy ensin (se on päällimmäisenä), sitten --tw musta
   (0,5 s ruudun mustana), musta savu (8 pehmeää läiskää) väistyy ulospäin ja reunojen varjo (.spVig) avautuu keskeltä; lopussa varjo
   tummenee reunoilta ensin, savu valuu takaisin keskelle ja lopuksi täysi musta. Vain opacity/transform → kevyt. */
#splash .spStudio{z-index:2}
#splash .spTitle.on #spLogo{animation:spLogoIn 2.4s ease-out var(--tw,1500ms) both,spLogoOut 1.4s ease-in calc(var(--td,6200ms) - 1.5s) forwards}
#splash .spTitle .spFull,#splash .spTitle .spVig{position:absolute;inset:0;pointer-events:none;opacity:0;will-change:opacity}
#splash .spTitle .spFull{background:#000}
#splash .spTitle .spVig{background:radial-gradient(ellipse 62% 58% at 50% 50%,transparent 18%,rgba(0,0,0,.75) 55%,#000 82%)}
#splash .spTitle.on .spFull{animation:spOut 1.4s ease var(--tw,1500ms) both,spIn .8s ease-in calc(var(--td,6200ms) - .85s) forwards}
#splash .spTitle.on .spVig{animation:spOut 2.6s ease calc(var(--tw,1500ms) + .5s) both,spIn 1.2s ease-in calc(var(--td,6200ms) - 1.9s) forwards}
#splash .spSm{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#splash .spSm i{position:absolute;left:50%;top:50%;width:44vmax;height:26vmax;margin:-13vmax 0 0 -22vmax;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(closest-side,rgba(0,0,0,.96),rgba(0,0,0,.82) 45%,rgba(0,0,0,0))}
#splash .spTitle.on .spSm i{animation:spSmOut 3s cubic-bezier(.3,.6,.4,1) var(--tw,1500ms) both,spSmIn 1.6s ease-in calc(var(--td,6200ms) - 1.7s) forwards}
@keyframes spOut{from{opacity:1}to{opacity:0}}@keyframes spIn{from{opacity:0}to{opacity:1}}
@keyframes spSmOut{from{opacity:1;transform:translate(var(--x),var(--y)) scale(var(--s))}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(calc(var(--s)*1.8))}}
@keyframes spSmIn{from{opacity:0;transform:translate(var(--dx),var(--dy)) scale(calc(var(--s)*1.8))}to{opacity:1;transform:translate(var(--x),var(--y)) scale(var(--s))}}
/* v1.66: ohitusteksti vain palaavalle kävijälle, pienenä ja huomaamattomana; ensikäynnillä piilossa */
#splash.first .spSkip{display:none}
#splash .spSkip{font-size:10.5px;color:#3e382f;letter-spacing:.04em;right:16px;bottom:12px}
/* v1.67: riimusiirtymä (2,9 s). Peittävä tausta (ei edellisen ruudun läpikuultoa). Kehä piirtyy (stroke-dashoffset, yksi ympyrä), 24 riimua
   syttyy kierroksena, keskellä 9 riimua tavaa H-I-I-D-E-N-M-A-A (0,15 s välein), sitten ne sulautuvat päällekkäin sinetiksi, joka leimahtaa:
   kipinät, kaksi paineaaltoa ja valkoinen välähdys → latausnäyttö. Muuten vain opacity/transform. */
#splash .spTrans{background:radial-gradient(circle at 50% 50%,#24130a 0%,#0b0604 50%,#000 85%);transition:opacity .4s ease;overflow:hidden}
#splash .stGlow{position:absolute;left:50%;top:50%;width:90vmin;height:90vmin;margin:-45vmin 0 0 -45vmin;border-radius:50%;opacity:0;will-change:opacity,transform;
  background:radial-gradient(circle,rgba(255,170,80,.42) 0%,rgba(255,120,40,.16) 32%,rgba(255,90,20,0) 62%)}
#splash .spTrans.on .stGlow{animation:stGlow 3.5s ease forwards}
@keyframes stGlow{0%{opacity:0;transform:scale(.6)}22%{opacity:.7;transform:scale(1)}74%{opacity:.6;transform:scale(.95)}80%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(1.6)}}
#splash .stRing{position:absolute;left:50%;top:50%;width:min(76vmin,560px);height:min(76vmin,560px);transform:translate(-50%,-50%);overflow:visible;opacity:0;will-change:transform,opacity}
#splash .spTrans.on .stRing{animation:stRing 3.5s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes stRing{0%{opacity:0;transform:translate(-50%,-50%) rotate(-40deg) scale(.9)}12%{opacity:1}76%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}84%{opacity:.9;transform:translate(-50%,-50%) rotate(6deg) scale(1.08)}100%{opacity:0;transform:translate(-50%,-50%) rotate(14deg) scale(1.5)}}
#splash .stRing circle{fill:none}
#splash .stRing .g{stroke:#ff8a2a;stroke-width:9;opacity:.16}
#splash .stRing .c1{stroke:#ffc47a;stroke-width:1.6;stroke-dasharray:943;stroke-dashoffset:943}
#splash .spTrans.on .stRing .c1{animation:stDraw .9s cubic-bezier(.5,0,.2,1) .1s forwards}
@keyframes stDraw{to{stroke-dashoffset:0}}
#splash .stRing .c2{stroke:#c9864a;stroke-width:1;stroke-dasharray:1.5 7;opacity:0}
#splash .spTrans.on .stRing .c2{animation:stFade .8s ease .5s forwards}
#splash .stRing .tk line{stroke:#9a6a3a;stroke-width:1.2}
#splash .stRing .tk{opacity:0}#splash .spTrans.on .stRing .tk{animation:stFade .7s ease .35s forwards}
#splash .stRing .rn text{font:400 19px serif;fill:#ffd9a0;text-anchor:middle;opacity:0}
#splash .spTrans.on .stRing .rn text{animation:stRuneOn .5s ease calc(.25s + var(--d)*.035s) forwards}
@keyframes stRuneOn{0%{opacity:0;fill:#fff}40%{opacity:1;fill:#fff6e6}100%{opacity:.85;fill:#ffb35a}}
@keyframes stFade{to{opacity:1}}
#splash .stCyc,#splash .stFin{position:absolute;left:50%;top:50%;width:0;height:0}
#splash .stCyc span,#splash .stFin span{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:400 min(19vmin,150px)/1 serif;color:#fff1d6;opacity:0;will-change:opacity,transform;
  text-shadow:0 0 10px #ffd08a,0 0 26px #ffa040,0 0 60px #ff6a1a}
#splash .spTrans.on .stCyc span{animation:stCyc .3s ease calc(.45s + var(--i)*.15s) both}
@keyframes stCyc{0%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}30%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
#splash .stSp{position:absolute;left:50%;top:50%}
#splash .stSp i{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#fff0d0;box-shadow:0 0 6px #ffb35a,0 0 12px #ff7a1a;opacity:0;will-change:transform,opacity}
#splash .spTrans.on .stSp i{animation:stSpark var(--t) cubic-bezier(.1,.7,.3,1) 2.7s forwards}
@keyframes stSpark{0%{opacity:1;transform:translate(0,0) scale(1.4)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
#splash .stWave{position:absolute;left:50%;top:50%;width:30vmin;height:30vmin;margin:-15vmin 0 0 -15vmin;border-radius:50%;border:2px solid rgba(255,220,170,.9);box-shadow:0 0 18px rgba(255,160,70,.6),inset 0 0 18px rgba(255,160,70,.45);opacity:0;will-change:transform,opacity}
#splash .spTrans.on .stWave{animation:stWave .85s cubic-bezier(.15,.6,.35,1) 2.7s forwards}
#splash .spTrans.on .stWave.w2{animation-delay:2.85s;animation-duration:.75s}
@keyframes stWave{0%{opacity:1;transform:scale(.25)}100%{opacity:0;transform:scale(4.2)}}
#splash .stFlash{position:absolute;inset:0;background:radial-gradient(circle,#fff6e6 0%,rgba(255,220,170,.6) 35%,rgba(255,180,100,0) 70%);opacity:0;will-change:opacity}
#splash .spTrans.on .stFlash{animation:stFlash .7s ease-out 2.7s forwards}
@keyframes stFlash{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}
#splash .ppPanel .pDet{font-size:13.5px;color:#b8a888;margin-top:4px}
/* v1.69: lopetus – ᚺ syttyy sinisenä keskelle, muut HIIDENMAA-riimut liukuvat sen alta sivuille oransseina kaartuvaksi riviksi (ei päällekkäin) */
#splash .stFin span{text-shadow:0 0 8px #ffd08a,0 0 20px #ff8a2a;font-size:min(8.5vmin,64px);color:#ffcf8a}
#splash .stFin span.h{font-size:min(20vmin,160px);color:#eaf6ff;text-shadow:0 0 10px #bfe6ff,0 0 26px #5ab4ff,0 0 64px #1f6aff;z-index:2}
#splash .spTrans.on .stFin span.h{animation:stH 1.65s cubic-bezier(.2,.7,.3,1) 1.9s both}
#splash .spTrans.on .stFin span:not(.h){animation:stSide 1.25s cubic-bezier(.2,.75,.25,1) calc(2.08s + var(--d)) both}
@keyframes stH{0%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}22%{opacity:1;transform:translate(-50%,-50%) scale(1)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}62%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}100%{opacity:0;transform:translate(-50%,-50%) scale(.7)}}
@keyframes stSide{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}35%{opacity:1;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(var(--rot)) scale(1)}70%{opacity:1;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(var(--rot)) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--tx)*1.25),calc(-50% + var(--ty)*1.25)) rotate(var(--rot)) scale(.85)}}
#deadS .deadTip{max-width:560px;margin:4px auto 18px;padding:10px 14px;border:1px solid rgba(232,164,74,.45);border-left:3px solid #e8a44a;border-radius:4px;background:rgba(40,24,10,.55);font:500 16px/1.5 var(--font-b);color:#e8dcc0;text-align:left}
#deadS .deadTip b{color:#ffb35a}
/* v1.72: suorituskykytestin yläilmoitus (näkyy testin ja tuloksen ajan) */
#splash .ppTop{position:absolute;left:50%;top:5vh;transform:translateX(-50%);width:min(640px,calc(100vw - 32px));box-sizing:border-box;padding:10px 16px;text-align:center;
  font:500 14.5px/1.5 var(--font-b);color:#d8cdb4;background:rgba(10,7,4,.72);border:1px solid rgba(232,164,74,.3);border-radius:6px;opacity:0;transition:opacity .8s ease .6s}
#splash .spPerf.on .ppTop{opacity:1}
#splash .spPerf.res .ppTop{opacity:0;transform:translate(-50%,-12px);transition:opacity .6s ease,transform .6s ease}   /* v1.73: vain testin ajan, häipyy tuloksen tullessa */
#splash .ppTop b{color:#f2e6cc;font-weight:700}#splash .ppTop em{font-style:normal;color:#ffb35a;font-weight:700}
@media (max-height:620px){#splash .ppTop{font-size:12.5px;top:8px;padding:6px 10px}#splash .spPerf.res .ppPanel{bottom:12px}#splash .ppPanel{padding:12px 16px}}
/* v1.75: kaikki toiminnot -ponnahdusikkuna */
#allKeys{z-index:70}
#allKeys .akBox{width:min(980px,94vw);max-width:none;box-sizing:border-box;max-height:86vh;overflow:auto;padding:16px 20px}
#allKeys .akHead{display:flex;align-items:center;justify-content:space-between;gap:12px}#allKeys .akHead b{font:700 22px 'Cinzel',serif;color:#f2e6cc}
#allKeys .akGrid{columns:3 270px;column-gap:24px;margin-top:6px}#allKeys .akCat{break-inside:avoid;margin-bottom:6px}
#allKeys .akCat h3{margin:10px 0 4px;font:700 12px var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:#e8a44a}
#allKeys .akRow{display:flex;gap:10px;align-items:baseline;padding:3px 0;border-bottom:1px solid rgba(0,0,0,.25);font-size:14px;line-height:1.35}
#allKeys .akRow .kb{flex:none;min-width:92px;text-align:center}
#allKeys .akRow .now{margin-left:6px;color:#ffb35a;font-weight:700}
/* v1.76: erittäin tarkat varjot – poikkeava valintarivi, huutomerkki kun päällä, raskain punainen */
.setRow.ultraRow{background:linear-gradient(90deg,rgba(120,60,180,.16),rgba(120,60,180,.04));border:1px dashed rgba(190,140,255,.45);border-radius:6px;padding:6px 8px;margin:6px 0}
.setRow.ultraRow.on{border-style:solid;border-color:rgba(255,120,90,.7);background:linear-gradient(90deg,rgba(200,60,40,.2),rgba(200,60,40,.05))}
.ultraOpts{display:flex;flex-wrap:wrap;gap:5px}
.ultraOpts .uo{font:600 12.5px var(--font-b);padding:5px 10px;border-radius:14px;border:1px solid rgba(190,140,255,.5);background:rgba(40,20,60,.55);color:#e2d4ff;cursor:pointer}
.ultraOpts .uo:hover{background:rgba(80,40,120,.7)}
.ultraOpts .uo.sel{background:#7a4ac0;color:#fff;border-color:#c8a8ff;box-shadow:0 0 10px rgba(170,120,255,.55)}
.ultraOpts .uo.red{border-color:rgba(255,90,70,.75);color:#ffb0a0;background:rgba(90,20,14,.6)}
.ultraOpts .uo.red.sel{background:#c0352a;color:#fff;border-color:#ff8a70;box-shadow:0 0 12px rgba(255,80,60,.6)}
.ultraBang{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;border-radius:50%;background:#e0412f;color:#fff;font:800 13px/1 var(--font-b);box-shadow:0 0 8px rgba(255,70,50,.7);vertical-align:1px}
/* v1.76: valikon partikkelit ja tausta häivyttyvät esiin, kun valikko avataan pelistä */
#menuFx{transition:opacity .9s ease}
#menu.mfFade #menuFx,#menu.mfFade ~ #menuFx{opacity:0;transition:none}
#menu.mfFade .mHero,#menu.mfFade .menuBtns{animation:none}
/* v1.77: nuoliteksti hotbarin yläpuolella */
#ammoT{position:absolute;z-index:6;left:50%;bottom:calc(108px + env(safe-area-inset-bottom,0px));transform:translate(-50%,6px);display:flex;align-items:center;gap:7px;padding:4px 12px;border-radius:14px;
  background:rgba(12,9,6,.62);border:1px solid rgba(232,164,74,.35);font:600 14px var(--font-b);color:#f2e6cc;opacity:0;transition:opacity .4s ease,transform .4s ease;pointer-events:none;white-space:nowrap;text-shadow:0 1px 3px #000}
#ammoT.on{opacity:1;transform:translate(-50%,0)}
#ammoT b{color:#ffb35a}#ammoT .ic{width:20px;height:20px;background-size:contain;background-repeat:no-repeat}
#ammoT.sm{font-size:12px;padding:2px 9px}#ammoT.sm .ic{width:15px;height:15px}
#ammoT.none{color:#ffb0a0;border-color:rgba(224,97,79,.6)}
/* v1.77: pikapaikan nimi (ohut, harvinaisuusväri, 1 s + häivytys) */
#hotName{position:absolute;z-index:6;bottom:calc(80px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font:300 15px var(--font-b);letter-spacing:.06em;white-space:nowrap;pointer-events:none;opacity:0;
  text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.7)}
#hotName.on{animation:hnShow 1.45s ease forwards}
@keyframes hnShow{0%{opacity:0;transform:translate(-50%,4px)}10%{opacity:1;transform:translate(-50%,0)}70%{opacity:1}100%{opacity:0}}
#hotName.r_com{color:#ece4d2}#hotName.r_unc{color:#9fdc7a}#hotName.r_rare{color:#7fbcff}
#hotName.r_leg{color:#f6cf5a;text-shadow:0 1px 2px #000,0 0 10px rgba(246,190,60,.55)}
.setRow.ovr{opacity:.42;filter:grayscale(1);pointer-events:none}.setRow.ovr .note{color:#ffb0a0}   /* v1.80: erittäin tarkkojen varjojen ohittamat asetukset */
/* v1.82: Early Access -merkintä version perässä (kiinteä "1.0" – ei muutu versionoston mukana) */
.mTitle small .eaTag{display:inline-block;margin-left:8px;padding:1px 9px 2px;border:1px solid rgba(127,233,221,.55);border-radius:10px;background:rgba(20,60,64,.35);
  font:600 11px 'Cinzel',serif;letter-spacing:.06em;text-transform:none;color:#8ff0e4;text-shadow:0 0 8px rgba(95,230,217,.45);vertical-align:1px}
/* v1.91 DEV Ö-valikko: pomorivit */
.devBoss{padding:5px 7px;background:rgba(0,0,0,.18);border-radius:4px;margin:3px 0}.devBoss .devBtns{margin-top:4px}.devBoss .note{font-size:12px;opacity:.8}
/* v1.92 DEV Ä-valikon isot pikanapit */
.devBig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 14px}.devBigB{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;text-align:left;min-height:62px}
.devBigB b{font-size:16px}.devBigB span{font-size:11.5px;opacity:.75;line-height:1.25}.devBigB.on{background:rgba(70,150,80,.55);border-color:#8fe08a}.devBigB.on span{opacity:1}
.devBigB.act{background:rgba(150,60,50,.45);border-color:#e88a7a}@media (max-width:700px){.devBig{grid-template-columns:1fr 1fr}}
/* ===== v1.94 EEPPINEN POMOPALKKI: teemat bbT-kivi / jaa / kalma / aarni (--bc pääväri, --bd tumma, --bl vaalea, rgb-kolmikkoina) ===== */
#bossbar,#bbVig{--bc:127,255,240;--bd:20,38,38;--bl:225,255,250}
#bossbar.bbT-kivi,#bbVig.bbT-kivi{--bc:127,255,240;--bd:20,38,38;--bl:225,255,250}#bossbar.bbT-jaa,#bbVig.bbT-jaa{--bc:150,215,255;--bd:12,28,48;--bl:240,250,255}
#bossbar.bbT-kalma,#bbVig.bbT-kalma{--bc:255,58,42;--bd:42,6,12;--bl:255,205,175}#bossbar.bbT-aarni,#bbVig.bbT-aarni{--bc:150,255,110;--bd:14,34,10;--bl:255,226,100}
#bossbar{width:min(660px,78vw);top:calc(14px + env(safe-area-inset-top,0px));z-index:6;pointer-events:none}
#bossbar.bbIn{animation:bbIn 1s cubic-bezier(.2,.9,.3,1.15)}
@keyframes bbIn{0%{opacity:0;transform:translateX(-50%) translateY(-24px) scaleX(.5);filter:blur(6px)}100%{opacity:1;transform:translateX(-50%) translateY(0) scaleX(1);filter:blur(0)}}
#bossbar .bbFrame{position:relative;padding:4px 46px 14px;background:radial-gradient(ellipse at 50% 120%,rgba(var(--bc),.16),transparent 70%),linear-gradient(180deg,rgba(var(--bd),.15),rgba(var(--bd),.88) 40%,rgba(0,0,0,.9));
  border-top:1px solid rgba(var(--bc),.6);border-bottom:1px solid rgba(var(--bc),.3);box-shadow:0 0 26px rgba(var(--bc),.22),inset 0 0 34px rgba(0,0,0,.85);border-radius:3px}
#bossbar .bbRune{position:absolute;top:50%;transform:translateY(-35%);font-size:30px;line-height:1;color:rgb(var(--bc));text-shadow:0 0 12px rgba(var(--bc),.95),0 0 3px #000;animation:bbRune 2.4s ease-in-out infinite}
#bossbar .bbRune.l{left:10px}#bossbar .bbRune.r{right:10px;animation-delay:-1.2s}
@keyframes bbRune{0%,100%{opacity:.65}50%{opacity:1;text-shadow:0 0 20px rgba(var(--bc),1),0 0 3px #000}}
#bossbar .name{font-family:var(--font-d);font-size:27px;letter-spacing:2px;color:rgb(var(--bl));text-shadow:0 0 12px rgba(var(--bc),.85),0 2px 4px #000;animation:bbName 4s infinite}
@keyframes bbName{0%,92%,100%{opacity:1}93%{opacity:.55}94%{opacity:1}96%{opacity:.7}}
#bossbar .bbSub{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:rgba(var(--bc),.85);margin-top:-1px;text-shadow:0 1px 2px #000}
#bossbar .track{position:relative;height:17px;margin-top:5px;background:rgba(0,0,0,.78);border:1px solid rgba(var(--bc),.65);box-shadow:inset 0 0 10px #000,0 0 10px rgba(var(--bc),.25);overflow:hidden}
#bossbar .track i{position:absolute;left:0;top:0;bottom:0;width:100%;transition:width .12s;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.13) 0 7px,transparent 7px 18px),linear-gradient(180deg,rgba(var(--bl),.95),rgb(var(--bc)) 42%,rgba(var(--bd),1));background-size:40px 100%,100% 100%;animation:bbFlow 1.1s linear infinite}
@keyframes bbFlow{to{background-position:40px 0,0 0}}
#bossbar .bbLag{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(180deg,#fff,rgba(var(--bl),.9) 50%,rgba(var(--bc),.55));opacity:.8}
#bossbar .bbGlint{position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:bbGlint 3.4s ease-in-out infinite}
@keyframes bbGlint{0%,55%{left:-80px}100%{left:110%}}
#bossbar .bbMarks .mk{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:rgba(var(--bl),.9);box-shadow:0 0 6px rgba(var(--bc),1)}
#bossbar .bbMarks .mk.past{background:rgba(0,0,0,.6);box-shadow:none}
#bossbar .bbCrack{position:absolute;inset:0;opacity:0;transition:opacity .8s;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='17'%3E%3Cpath d='M8 0 L14 6 L10 10 L17 17 M52 0 L47 7 L55 11 L50 17 M90 0 L96 5 L91 9 L99 17 M30 17 L34 11 L29 8 M72 0 L70 5 L76 8' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") repeat-x}
#bossbar.ph2 .bbCrack{opacity:.5}#bossbar.ph3 .bbCrack,#bossbar.fin .bbCrack{opacity:.9}
#bossbar.ph3 .track,#bossbar.fin .track{animation:bbPulse .9s ease-in-out infinite}
@keyframes bbPulse{0%,100%{box-shadow:inset 0 0 10px #000,0 0 10px rgba(var(--bc),.3)}50%{box-shadow:inset 0 0 10px #000,0 0 26px rgba(var(--bc),.95)}}
#bossbar.bbT-kivi.fin,#bossbar.bbT-jaa.fin,#bossbar.bbT-kalma.fin,#bossbar.bbT-aarni.fin{--bc:255,36,20;--bd:50,4,6;--bl:255,220,180}
/* teeman koriste palkin alla: jääpuikot, veripisarat, köynnös, kivisärö */
#bossbar .bbDeco{position:absolute;left:46px;right:46px;top:calc(100% - 13px);height:12px;pointer-events:none;opacity:.85}
.bbT-jaa .bbDeco{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='12'%3E%3Cpath d='M0 0 L4 9 L8 0 L11 6 L14 0 L19 12 L24 0 L27 5 L30 0 L35 8 L40 0 L43 4 L46 0Z' fill='%23c8ecff' fill-opacity='.85'/%3E%3C/svg%3E") repeat-x}
.bbT-kalma .bbDeco{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12'%3E%3Cpath d='M6 0 Q7 6 6 8 Q4 11 6.5 11 Q9 11 7.5 8 Q6 6 8 0Z M31 0 Q32 4 31 5 Q30 7 32 7 Q34 7 33 5 Q32 4 33 0Z M47 0 Q48 7 47 9 Q45 12 48 12 Q51 12 49 9 Q48 7 50 0Z' fill='%23a01018'/%3E%3C/svg%3E") repeat-x;animation:bbDrip 3s ease-in-out infinite}
@keyframes bbDrip{0%,100%{transform:scaleY(.8);transform-origin:top}50%{transform:scaleY(1.15);transform-origin:top}}
.bbT-aarni .bbDeco{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='12'%3E%3Cpath d='M0 3 Q17 10 35 3 T70 3' stroke='%233f7a2a' stroke-width='2' fill='none'/%3E%3Cellipse cx='14' cy='8' rx='4' ry='2' fill='%235f9a3a' transform='rotate(30 14 8)'/%3E%3Cellipse cx='50' cy='6' rx='4' ry='2' fill='%237fb84a' transform='rotate(-25 50 6)'/%3E%3Ccircle cx='33' cy='5' r='1.4' fill='%23ffe25a'/%3E%3C/svg%3E") repeat-x}
.bbT-kivi .bbDeco{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='12'%3E%3Cpath d='M0 0 L9 0 L11 4 L16 0 L28 0 L30 6 L35 2 L40 0 L54 0 L54 2 L44 3 L38 6 L31 9 L27 3 L18 4 L12 7 L8 2 L0 3Z' fill='%23302e2a'/%3E%3Cpath d='M30 6 L31 9 M11 4 L12 7' stroke='%237ffff0' stroke-width='1'/%3E%3C/svg%3E") repeat-x}
/* vaiheen vaihtuminen: tärähdys, välähdys ja iso teksti; kukistettu */
#bossbar .bbPhase{position:absolute;left:0;right:0;top:100%;margin-top:8px;font-family:var(--font-d);font-size:32px;letter-spacing:7px;color:rgb(var(--bl));text-shadow:0 0 20px rgba(var(--bc),1),0 0 6px rgba(var(--bc),1),0 2px 3px #000;opacity:0}
#bossbar.bbHit .bbFrame{animation:bbShake .55s linear,bbFlash 1.5s ease-out}
#bossbar.bbHit .bbPhase{animation:bbPhaseTxt 2.8s ease-out}
@keyframes bbShake{0%,100%{transform:translate(0,0)}15%{transform:translate(-7px,2px)}30%{transform:translate(6px,-3px)}45%{transform:translate(-5px,1px)}60%{transform:translate(4px,2px)}80%{transform:translate(-2px,-1px)}}
@keyframes bbFlash{0%{box-shadow:0 0 70px rgba(var(--bc),1),inset 0 0 50px rgba(var(--bc),.9)}100%{box-shadow:0 0 26px rgba(var(--bc),.22),inset 0 0 34px rgba(0,0,0,.85)}}
@keyframes bbPhaseTxt{0%{opacity:0;transform:scale(2.4);filter:blur(8px)}14%{opacity:1;transform:scale(1);filter:blur(0)}72%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
#bossbar.bbDead{transition:opacity 1.2s;filter:grayscale(.85)}#bossbar.bbDead .bbPhase{opacity:1;animation:none;color:#e8e0d0;text-shadow:0 0 14px rgba(255,255,255,.6),0 2px 3px #000}
#bossbar.bbOut{opacity:0}
/* pelottava vinjetti: hiljainen sävy taistelun ajan, välähdys vaiheen vaihtuessa, sydämenlyönti kun pomo on lähes kaatunut */
#bbVig{position:fixed;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at center,transparent 52%,rgba(var(--bd),.55) 82%,rgba(var(--bc),.32) 100%);opacity:.55;transition:opacity 1s}
#bbVig.flash{animation:bbVigF 1.8s ease-out}@keyframes bbVigF{0%{opacity:1;filter:brightness(2.2)}100%{opacity:.55;filter:none}}
#bbVig.low{animation:bbBeat 1.1s ease-in-out infinite}@keyframes bbBeat{0%,100%{opacity:.5}12%{opacity:.95}24%{opacity:.6}36%{opacity:.85}}

/* v2.00 DEV Å: pikavalinnat kahdessa sarakkeessa ilman vieritystä */
#devIP .devPicks{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;max-height:none;overflow:visible}
#devIP .devPicks .devIt .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* v2.01 tuulivaroitus jousta jännittäessä (kova tuuli ≥ 8 m/s): kolmio, teksti ja nuoli tuulen suuntaan ruudulla */
#windWarn{position:absolute;left:50%;top:calc(50% - 64px);transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:2px 9px;border-radius:4px;
  background:rgba(20,16,10,.62);border:1px solid rgba(255,196,64,.55);color:#ffd36a;font:700 13px var(--font-b,sans-serif);text-shadow:0 1px 2px #000;pointer-events:none;white-space:nowrap}
#windWarn .wwTri{font-size:16px;color:#ffb22e;animation:wwPulse 1s ease-in-out infinite}
#windWarn .wwArr{font-style:normal;display:inline-block;color:#e8f4ff;transition:transform .2s}
#windWarn.storm{border-color:rgba(255,90,60,.7);color:#ff9a7a}#windWarn.storm .wwTri{color:#ff5a3a}
@keyframes wwPulse{0%,100%{opacity:.65}50%{opacity:1}}

/* v2.04 tuulimittari: tyyni = pieni ja hillitty (ei kolmiota), kova tuuli = varoitus */
#windWarn.calm{background:rgba(10,10,10,.35);border-color:rgba(255,255,255,.18);color:#e8eef2;font-size:12px;padding:1px 7px}#windWarn.calm .wwTri{display:none}