/* The Realm palette and type (from willyrat.com) */
:root{
  --ink:#f4e8d0; --muted:#cdb999; --faint:#948067; --dim:#6d5c48;
  --gold:#e8b45c; --gold2:#a8742c; --gold3:#ffdc92;
  --ember:#ff8a3d; --ember2:#c4521c; --moss:#a3b85e; --rust:#9a3f24;
  --line:rgba(232,180,92,.26); --line2:rgba(232,180,92,.5);
  --ease:cubic-bezier(.2,.7,.2,1);
  /* the HUD's dark warm glass, and the dark edge round its words (so they read over a bright sky) */
  --glass:linear-gradient(180deg,rgba(35,24,17,.8),rgba(14,9,6,.88));
  --edge:0 1px 3px #000,0 0 8px rgba(0,0,0,.75);
  --corner:linear-gradient(var(--gold),var(--gold));
  --frame:var(--corner) 0 0/18px 1.5px no-repeat,var(--corner) 0 0/1.5px 18px no-repeat,var(--corner) 100% 0/18px 1.5px no-repeat,var(--corner) 100% 0/1.5px 18px no-repeat,
    var(--corner) 0 100%/18px 1.5px no-repeat,var(--corner) 0 100%/1.5px 18px no-repeat,var(--corner) 100% 100%/18px 1.5px no-repeat,var(--corner) 100% 100%/1.5px 18px no-repeat;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#1a120d}
body{color:var(--ink);font-family:"EB Garamond",Georgia,serif;font-size:19px;line-height:1.5;-webkit-font-smoothing:antialiased;user-select:none}
:focus-visible{outline:2px solid var(--gold3);outline-offset:3px}
.mono{font-family:"IBM Plex Mono",monospace}
[hidden]{display:none!important}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}

/* screens */
.screen{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;
  background:radial-gradient(130% 95% at 50% 45%,rgba(44,27,18,.55),rgba(14,9,6,.94) 72%),#1a120d}
.screen.dim{background:radial-gradient(130% 95% at 50% 45%,rgba(20,12,8,.45),rgba(10,6,4,.82) 80%)}
#lobby{background:radial-gradient(120% 90% at 50% 40%,#5a2f1c 0%,#2c1b12 45%,#0e0906 85%);overflow-y:auto;place-items:safe center}
.panel{width:min(460px,100%);padding:30px 32px 26px;border:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(35,24,17,.9),rgba(16,11,8,.94));box-shadow:0 30px 80px rgba(0,0,0,.6);text-align:center}
.panel.wide{width:min(760px,100%);text-align:left;max-height:calc(100vh - 48px);overflow-y:auto}   /* (a long menu scrolls) */
/* the bag and the menu over the game: framed glass, the game blurred a little behind (only while they are open) */
#bag,#pause{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#bag .panel,#pause .panel{border-color:var(--line);background:var(--frame),radial-gradient(120% 60% at 50% 0%,rgba(140,64,26,.16),transparent 60%),linear-gradient(180deg,rgba(35,24,17,.93),rgba(14,9,6,.95));
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,220,160,.09);scrollbar-width:thin;scrollbar-color:var(--gold2) transparent}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;font-family:Cinzel,serif;font-weight:700;font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before,.eyebrow::after{content:"";width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow::after{transform:scaleX(-1)}
.title{margin:.25em 0 .1em;font-family:Cinzel,serif;font-weight:900;font-size:3rem;letter-spacing:.06em;line-height:1.05;
  background:linear-gradient(180deg,#fff6dc 0%,#ffd88c 36%,#e7a04a 60%,#8b4b1d 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.title.small{font-size:1.8rem}
.lede{margin:.4em 0 1.2em;color:var(--muted);font-style:italic}
form{display:grid;gap:12px;text-align:left}
label{display:grid;gap:4px;font-family:Cinzel,serif;font-weight:700;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold3)}
label.check{display:flex;align-items:center;gap:8px;letter-spacing:.12em;color:var(--muted)}
input,select{font:inherit;font-size:1rem;letter-spacing:normal;text-transform:none;color:var(--ink);background:rgba(0,0,0,.35);border:1px solid var(--line2);padding:9px 12px;user-select:text}
input:focus,select:focus{border-color:var(--gold3);outline:none}
select option{background:#1d130d}
.rules{display:grid;gap:12px}
.rules[hidden]{display:none}
input[type=checkbox]{accent-color:var(--gold)}
details{font-size:.9rem;color:var(--faint)}
summary{cursor:pointer}
details label{margin-top:8px}
.btn{font-family:Cinzel,serif;font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  border:1px solid var(--line2);background:rgba(18,12,9,.66);color:var(--gold3);padding:12px 18px}
.btn:hover{background:rgba(232,180,92,.16);border-color:var(--gold3)}
.btn.gold{background:linear-gradient(180deg,#f3c46d,#b67828);color:#1d1109;border-color:#ffdc92;box-shadow:0 0 34px rgba(240,160,70,.3),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.gold:hover{filter:brightness(1.08)}
.btn.big{width:100%;padding:16px;font-size:.9rem}
.small-link{justify-self:center;background:none;border:0;cursor:pointer;font:inherit;font-size:.9rem;color:var(--faint);text-decoration:underline;text-underline-offset:3px;margin-top:6px}
#pause .small-link{margin:0;padding:4px 2px;font-family:Cinzel,serif;font-weight:700;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;border-bottom:1px solid var(--line)}
#pause .small-link:hover{color:var(--gold3);border-bottom-color:var(--gold3)}
.small-link:hover{color:var(--gold3)}
#leave{display:block}
.note{margin:.2em 0 0;font-size:.85rem;color:var(--faint)}
.msg{min-height:1.5em;margin:12px 0 0;color:var(--ember)}
.msg.ok{color:var(--moss)}
.room-code{text-align:center;color:var(--muted)}
.my-rooms{margin-top:22px;text-align:left}
.my-rooms ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:260px;overflow-y:auto}
.my-rooms li{display:grid;grid-template-columns:1fr auto;border:1px solid var(--line)}
.my-rooms li.gone{opacity:.5}
.my-rooms .go{display:grid;gap:1px;padding:7px 10px;background:none;border:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.my-rooms li:not(.gone) .go:hover{background:rgba(232,180,92,.12)}
.my-rooms li.gone .go{cursor:default}
.my-rooms .go b{font-family:"IBM Plex Mono",monospace;font-weight:500;letter-spacing:.08em;color:var(--gold3)}
.my-rooms .go span{font-size:.8rem;color:var(--faint)}
.my-rooms .go em{font-style:normal;font-size:.8rem;color:var(--moss)}
.my-rooms li.gone .go em{color:var(--ember)}
.my-rooms .forget{width:34px;background:none;border:0;border-left:1px solid var(--line);color:var(--faint);cursor:pointer;font-size:.9rem}
.my-rooms .forget:hover{color:var(--ember)}
.room-code b{color:var(--gold3);letter-spacing:.12em}

/* pause menu */
.sub-h{font-family:Cinzel,serif;font-weight:700;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:22px 0 8px}
/* in the bag and the menu a heading has a gold line after it */
#bag .sub-h,#pause .sub-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
#bag .sub-h::after,#pause .sub-h::after{content:"";flex:1 0 24px;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.invite-row{display:flex;gap:8px}
.invite-row input{flex:1;font-size:.82rem}
.cols{display:grid;grid-template-columns:1fr 1.3fr;gap:28px}
.players{list-style:none;margin:0;padding:0}
.players li{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid rgba(232,180,92,.12)}
.players i{width:12px;height:12px;transform:rotate(45deg);flex:0 0 12px}
.players em{color:var(--faint);font-size:.85rem}
/* the controls: a group under each small heading; the keys as gold key caps */
#pause .panel.wide{width:min(980px,100%)}
#pause .cols{grid-template-columns:1fr;gap:0}
.kcols{columns:2 330px;column-gap:34px}
.kgrp{break-inside:avoid;padding-bottom:14px}
.keys-h{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-family:Cinzel,serif;font-weight:700;font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.keys-h::before{content:"";flex:none;width:5px;height:5px;transform:rotate(45deg);background:var(--ember);box-shadow:0 0 6px var(--ember)}
.keys{display:grid;grid-template-columns:8.8em 1fr;gap:5px 14px;margin:0;font-size:.9rem;line-height:1.42}
.keys dt{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--gold3);padding-top:1px;white-space:nowrap}
.keys dd{margin:0;color:var(--muted)}
kbd{display:inline-block;min-width:1.9em;padding:1px 5px 0;font-family:"IBM Plex Mono",monospace;font-size:.64rem;line-height:1.5;text-align:center;color:var(--gold3);
  background:linear-gradient(180deg,rgba(255,220,160,.1),rgba(0,0,0,.3));border:1px solid var(--line2);border-bottom-width:2px;border-radius:2px}

/* loader */
#loader{grid-template-rows:auto;align-content:center;justify-items:center;gap:18px}
.ld-cube{width:46px;height:46px;position:relative;transform:rotate(45deg);animation:spin 2.4s var(--ease) infinite}
.ld-cube i{position:absolute;inset:0;border:1.5px solid var(--gold);background:rgba(232,180,92,.08);box-shadow:inset 0 0 14px rgba(255,180,80,.25)}
@keyframes spin{0%{transform:rotate(45deg)}50%{transform:rotate(225deg)}100%{transform:rotate(405deg)}}
.ld-t{font-family:Cinzel,serif;font-weight:700;letter-spacing:.42em;text-transform:uppercase;font-size:.86rem;color:var(--gold3);padding-left:.42em}
.ld-bar{width:230px;height:2px;background:rgba(232,180,92,.18);overflow:hidden}
.ld-bar i{display:block;height:100%;width:4%;background:linear-gradient(90deg,var(--ember),var(--gold3));transition:width .3s var(--ease);box-shadow:0 0 10px var(--ember)}
.ld-s{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;color:var(--faint)}

/* HUD */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none}
.crosshair{position:fixed;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px}
.crosshair::before,.crosshair::after{content:"";position:absolute;background:rgba(255,230,180,.85);box-shadow:0 0 4px #000}
.crosshair::before{left:8px;top:0;width:2px;height:18px}.crosshair::after{top:8px;left:0;height:2px;width:18px}
.draw{position:fixed;left:50%;top:calc(50% + 20px);width:64px;height:6px;margin-left:-33px;background:rgba(14,9,6,.72);border:1px solid var(--line2);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.draw i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ember),var(--gold3))}.draw.full i{background:var(--gold3);box-shadow:0 0 8px var(--ember)}
#hud.foe .crosshair{transform:rotate(45deg)}#hud.foe .crosshair::before,#hud.foe .crosshair::after{background:#ff7a5a}
/* the hotbar: a strip of dark glass, gold corners; the slot in hand glows ember, a gold gem over it */
.hotbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:4px;padding:7px 9px;background:var(--glass);
  box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,220,160,.08),inset 0 0 0 1px rgba(232,180,92,.3)}
.hotbar::before,.toast::before{content:"";position:absolute;inset:-1px;pointer-events:none;--c:var(--gold);
  background:linear-gradient(var(--c),var(--c)) 0 0/14px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1.5px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/14px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/1.5px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/14px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/1.5px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/14px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/1.5px 14px no-repeat}
.hotbar .slot{width:50px;height:50px;border-color:rgba(232,180,92,.15);background:radial-gradient(120% 90% at 50% 30%,rgba(255,200,130,.07),rgba(0,0,0,.3))}
.hotbar .slot[aria-pressed="true"]{border-color:var(--ember);background:radial-gradient(110% 90% at 50% 60%,rgba(255,138,61,.28),rgba(40,18,8,.5));
  box-shadow:0 0 18px rgba(255,138,61,.45),inset 0 0 10px rgba(255,160,80,.3)}
.hotbar .slot[aria-pressed="true"]::before{content:"";position:absolute;left:50%;top:-6px;width:7px;height:7px;margin-left:-3.5px;transform:rotate(45deg);
  background:var(--gold3);box-shadow:0 0 8px var(--ember)}
.hotbar .slot .k{font-family:Cinzel,serif;font-weight:700;font-size:.54rem;color:rgba(232,180,92,.55)}
.hotbar .slot[aria-pressed="true"] .k{color:var(--gold3)}
.slot{position:relative;width:52px;height:52px;border:1px solid rgba(232,180,92,.16);background:radial-gradient(120% 90% at 50% 30%,rgba(255,200,130,.06),rgba(0,0,0,.34));
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45);display:grid;place-items:center}
.slot[aria-pressed="true"]{border-color:var(--ember);background:radial-gradient(110% 90% at 50% 60%,rgba(255,138,61,.26),rgba(40,18,8,.5));box-shadow:0 0 16px rgba(255,138,61,.4),inset 0 0 10px rgba(255,160,80,.3)}
.slot svg{width:32px;height:32px}
.slot .k{position:absolute;left:4px;top:2px;font-family:Cinzel,serif;font-weight:700;font-size:.54rem;color:rgba(232,180,92,.55)}
.slot .n{position:absolute;right:4px;bottom:1px;font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:.7rem;color:var(--ink);text-shadow:0 1px 2px #000,0 0 3px #000}
.slot .wear{position:absolute;left:6px;right:6px;bottom:4px;height:3px;background:rgba(0,0,0,.7)}
.slot .wear i{display:block;height:100%}
.slot .gems{position:absolute;right:5px;top:5px;display:flex;gap:3px}
.slot .gems i{width:5px;height:5px;transform:rotate(45deg);background:#ffc24a;box-shadow:0 0 4px rgba(255,194,74,.8)}
.slot .gems i.ru{background:#ff8a3d;box-shadow:0 0 4px rgba(255,138,61,.8)}
.block-name{position:fixed;left:50%;bottom:140px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;font-family:Cinzel,serif;font-weight:700;font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold3);text-shadow:var(--edge);white-space:nowrap;opacity:0;transition:opacity .4s}
.block-name::before,.block-name::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.block-name::after{transform:scaleX(-1)}
.block-name.on{opacity:1}
/* the toast: a short word under the compass, on glass with gold corners, a gem before it */
.toast{position:fixed;left:50%;top:70px;transform:translate(-50%,-10px);display:flex;align-items:center;gap:12px;max-width:min(720px,86vw);font-family:Cinzel,serif;font-weight:700;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold3);text-shadow:0 1px 6px #000;background:var(--glass);border:1px solid var(--line);
  box-shadow:0 12px 34px rgba(0,0,0,.45);padding:9px 18px;opacity:0;transition:.4s var(--ease)}
.toast::after{content:"";order:-1;flex:none;width:6px;height:6px;transform:rotate(45deg);background:var(--gold3);box-shadow:0 0 8px var(--ember)}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* the right side, by the hotbar: what I just got, over the corner text (where I am, what I ride and its keys, the players); its lines wrap
   before they reach the hotbar */
.side{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.corner{max-width:calc(50vw - 300px);font-size:.64rem;letter-spacing:.04em;color:var(--muted);text-align:right;text-shadow:var(--edge);line-height:1.6;white-space:pre-wrap}
.chatlog{position:fixed;left:14px;bottom:62px;width:clamp(220px,calc(50vw - 314px),440px);display:flex;flex-direction:column;gap:3px}
.chatlog p{margin:0;padding:3px 10px;background:linear-gradient(90deg,rgba(14,9,6,.78),rgba(14,9,6,.5));border-left:2px solid var(--line2);font-size:.95rem;line-height:1.35;
  text-shadow:0 1px 2px #000;transition:opacity 1s;word-wrap:break-word;user-select:text}
.chatlog p.old{opacity:0}
.chatlog.open p.old{opacity:1}
.chatlog b{font-weight:600}
.chatlog p.sys{color:var(--muted);font-style:italic;border-left-color:rgba(232,180,92,.18)}
.chatbox{position:fixed;left:14px;bottom:14px;width:min(440px,46vw);pointer-events:auto}
.chatbox input{width:100%}

/* the compass strip (as on the site) */
.compass{position:fixed;left:50%;top:14px;transform:translateX(-50%);width:min(520px,70vw);height:30px;overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(14,10,7,.7) 18%,rgba(14,10,7,.7) 82%,transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.compass::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line2) 20%,var(--line2) 80%,transparent)}
.compass::after{content:"";position:absolute;left:50%;top:1px;width:6px;height:6px;margin-left:-3px;transform:rotate(45deg);background:var(--gold3);box-shadow:0 0 8px var(--ember)}
/* the Maw's health, under the compass, while it is near (red when it is angry) */
.boss{position:fixed;left:50%;top:52px;transform:translateX(-50%);width:min(420px,60vw);text-align:center;font-family:Cinzel,serif;font-size:.85rem;letter-spacing:.12em;color:#f2d6b0;text-shadow:0 1px 3px #000;pointer-events:none}
.boss span{display:block;height:8px;margin-top:4px;background:rgba(0,0,0,.6);border:1px solid rgba(255,200,150,.45);border-radius:4px;overflow:hidden}
.boss i{display:block;height:100%;width:100%;background:linear-gradient(#c8641c,#7a2a10);transition:width .3s}
.boss.angry i{background:linear-gradient(#ff3a1a,#8a0a06)}
.boss.angry b{color:#ff8a6a}
.cmp{position:absolute;top:0;transform:translateX(-50%);will-change:left}
.cmp.dir{top:8px;font-family:Cinzel,serif;font-weight:700;font-size:.68rem;letter-spacing:.1em;color:var(--ink);text-shadow:0 1px 4px #000}
.cmp.dir.n{color:var(--ember)}
.cmp.lm{top:11px;width:9px;height:9px;transform:translateX(-50%) rotate(45deg);border:1px solid var(--gold3);background:rgba(232,180,92,.35);box-shadow:0 0 8px rgba(255,190,90,.7)}
.cmp.lm.camp{background:var(--ember)}
.cmp.pl{top:11px;width:9px;height:9px;border-radius:50%;box-shadow:0 0 6px #000}
.cmp.wind{top:5px;font-size:.95rem;line-height:1;color:#a8d8ff;text-shadow:0 0 6px #000}
.cmp.foal{top:5px;font-size:.8rem;line-height:1;color:var(--ember);text-shadow:0 0 8px #ff5a14,0 0 3px #000;animation:foalMark 0.8s ease-in-out infinite alternate}
@keyframes foalMark{from{opacity:.55}to{opacity:1}}
.cmp.rift{top:4px;font-size:1rem;line-height:1;color:#fff1c8;text-shadow:0 0 8px #ffc860,0 0 3px #000}

/* the bag: my things, the recipes, the forge */
.panel.bagp{width:min(1060px,100%);text-align:left;padding:22px 28px 16px;max-height:calc(100vh - 48px);overflow-y:auto}
.bag-cols{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:start}
.bag-cols .sub-h:first-child{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(10,52px);gap:5px}
#bag .slot{cursor:pointer}
#bag .slot:not([aria-pressed="true"]):hover{border-color:var(--line2);background:radial-gradient(120% 90% at 50% 40%,rgba(255,200,130,.14),rgba(0,0,0,.3))}
#bag .slot[data-pick]::after{content:attr(data-pick);position:absolute;left:3px;top:2px;padding:0 4px;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  color:#1a120d;background:var(--gold3);box-shadow:0 0 6px var(--ember)}
.bag-foot{display:flex;align-items:center;gap:14px;margin-top:14px}
.bag-foot .note{margin:0;max-width:450px;font-size:.8rem;line-height:1.4}
#bag .slot.trash{flex:0 0 52px;color:var(--ember);font-size:1.3rem;border-color:rgba(255,138,61,.35);background:radial-gradient(circle,rgba(255,138,61,.1),rgba(0,0,0,.34))}
#bag .slot.trash:hover{border-color:var(--ember);box-shadow:0 0 12px rgba(255,138,61,.35)}
.close-note{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;font-family:Cinzel,serif;font-weight:700;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.close-note::before,.close-note::after{content:"";width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--line2))}
.close-note::after{transform:scaleX(-1)}
.find{width:100%;margin:0 0 8px;padding:7px 10px 7px 32px;font:inherit;font-size:.9rem;color:var(--ink);outline:none;border:1px solid var(--line);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5' fill='none' stroke='%23e8b45c' stroke-width='1.5'/%3E%3Cpath d='M10 10l4 4' stroke='%23e8b45c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 10px 50%/14px no-repeat,rgba(0,0,0,.35)}
.find:focus{border-color:var(--gold3);box-shadow:0 0 12px rgba(255,190,90,.2)}
.find::placeholder{color:var(--dim)}
.find::-webkit-search-cancel-button{display:none}
.recipes .none{margin:6px 2px;color:var(--faint);font-style:italic}
.all-rcp{margin:8px 0 2px;padding:6px;font-family:Cinzel,serif;font-weight:700;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);background:none;border:1px dashed var(--line);cursor:pointer}
.all-rcp:hover{color:var(--gold3);border-color:var(--gold3)}
.recipes{display:grid;gap:4px;max-height:430px;overflow-y:auto;padding:2px 6px 2px 2px;scrollbar-width:thin;scrollbar-color:var(--gold2) transparent}
.rcp{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:4px 10px 4px 4px;border:1px solid rgba(232,180,92,.1);border-left-width:2px;
  background:rgba(0,0,0,.25);color:var(--muted);font:inherit;font-size:.92rem;text-align:left;cursor:pointer;opacity:.5}
.rcp.can{opacity:1;color:var(--ink);border-color:var(--line);border-left-color:var(--ember);background:linear-gradient(90deg,rgba(255,138,61,.1),rgba(0,0,0,.22) 45%)}
.rcp.can:hover{border-color:var(--gold3);background:linear-gradient(90deg,rgba(255,170,90,.18),rgba(232,180,92,.08) 60%)}
.rcp:focus-visible{outline-offset:-2px}
.rcp .out{position:relative;width:38px;height:38px;display:grid;place-items:center}
.rcp .out svg{width:30px;height:30px}
.rcp b{position:absolute;right:0;bottom:-2px;font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:.66rem;color:var(--ink);text-shadow:0 1px 2px #000}
.rcp em{display:block;font-size:.75rem;color:var(--faint)}
.rcp em.from{color:var(--gold2)}
.rcp .ins{display:flex;gap:4px}
.rcp .in{position:relative;width:28px;height:28px;display:grid;place-items:center}
.rcp .in svg{width:22px;height:22px}
.rcp .in.miss b{color:var(--ember)}
.bench-note{color:var(--moss);letter-spacing:.12em}
.sub-h .sort{padding:3px 10px 2px;font:inherit;font-size:.56rem;letter-spacing:.2em;color:var(--gold3);background:linear-gradient(180deg,rgba(255,220,160,.08),rgba(0,0,0,.25));
  border:1px solid var(--line2);cursor:pointer}
.sub-h .sort:hover{background:rgba(232,180,92,.18);border-color:var(--gold3);box-shadow:0 0 10px rgba(255,190,90,.25)}
.grid.chest{grid-template-columns:repeat(6,52px)}
.forge{display:grid;grid-template-columns:52px 60px 52px;grid-template-rows:52px 26px 52px;align-items:center;justify-items:center;gap:6px 18px;margin:8px 0 14px;
  grid-template-areas:"in arrow out" "flame arrow out" "fuel arrow out"}
.forge [data-s="44"]{grid-area:in}.forge [data-s="45"]{grid-area:fuel}.forge [data-s="46"]{grid-area:out}
.forge .flame{grid-area:flame;width:14px;height:22px;background:rgba(0,0,0,.5);border:1px solid var(--line2);display:flex;align-items:flex-end}
.forge .flame i{display:block;width:100%;background:linear-gradient(0deg,var(--ember2),var(--ember),var(--gold3));box-shadow:0 0 8px var(--ember)}
.forge .arrow{grid-area:arrow;position:relative;width:56px;height:8px;background:rgba(0,0,0,.5);border:1px solid var(--line2)}
.forge .arrow::after{content:"";position:absolute;right:-7px;top:-5px;border:8px solid transparent;border-right:0;border-left:7px solid var(--line2)}
.forge .arrow i{display:block;height:100%;background:linear-gradient(90deg,var(--ember),var(--gold3));box-shadow:0 0 8px var(--ember)}
.rgrp{display:flex;align-items:center;gap:10px;font-family:Cinzel,serif;font-weight:700;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:12px 0 3px}
.rgrp::after{content:"";flex:1 0 20px;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.rgrp:first-child{margin-top:0}
.rgrp.here{color:var(--moss)}
.rgrp i{font-style:normal;letter-spacing:.1em}
.rcp.info{cursor:default;opacity:.85;color:var(--muted)}
.recipes.short{max-height:300px}
.fuel-note{margin:6px 0 0}
#bag .slot.from{opacity:.35}
#bag .slot.ghost{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%);border-color:var(--ember);background:rgba(28,16,10,.9);box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 18px rgba(255,138,61,.45)}
/* what I just got */
.pickups{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.pick{display:flex;align-items:center;gap:8px;padding:3px 12px 3px 26px;background:linear-gradient(90deg,rgba(14,9,6,0),rgba(14,9,6,.8) 34%);border-right:2px solid var(--gold);
  font-family:Cinzel,serif;font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold3);text-shadow:0 1px 3px #000;transition:opacity .7s;animation:pickIn .25s var(--ease)}
.pick svg{width:22px;height:22px}
.pick.old{opacity:0}
@keyframes pickIn{from{transform:translateX(16px);opacity:0}}

/* armour slots, and well fed */
.grid.armor{grid-template-columns:repeat(4,52px)}
#armorGrid .slot:empty::after{content:attr(data-hint);font-family:Cinzel,serif;font-weight:700;font-size:.48rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.fed-note{color:var(--ember);letter-spacing:.12em}
.fed{position:fixed;left:50%;bottom:115px;transform:translateX(-50%);font-family:Cinzel,serif;font-weight:700;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember);text-shadow:var(--edge);white-space:nowrap}

/* health and hunger over the hotbar, air under water; the red flash when I am hit */
/* my pegasus's wings (ride.js): a gold bar over the health bar while I ride her; ember when they are almost tired */
.wings{position:fixed;left:50%;bottom:113px;margin-left:-277px;display:flex;align-items:center;gap:8px;font-family:Cinzel,serif;font-weight:700;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold3);text-shadow:var(--edge)}
.wings span{display:block;width:150px;height:8px;background:rgba(14,9,6,.72);border:1px solid rgba(255,220,146,.55);box-shadow:0 0 0 1px rgba(0,0,0,.45);overflow:hidden}
.wings i{display:block;height:100%;width:100%;background:linear-gradient(180deg,#ffe8b0,#e8b45c 55%,#9a6a24);box-shadow:0 0 6px rgba(255,217,138,.6)}
.wings.tired b{color:var(--ember)}.wings.tired i{background:linear-gradient(180deg,#ffb08a,#e0601c 55%,#8a2c0c);animation:shake .5s steps(2) infinite}
/* health and hunger: a slim bar each in a gold frame, in 10 parts (a heart, a drumstick), the number by it; air over hunger, under water */
.bars{position:fixed;left:50%;bottom:89px;transform:translateX(-50%);width:554px;display:flex;justify-content:space-between}
.gauge{display:flex;align-items:center;gap:7px;font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:.72rem;line-height:1;color:var(--ink);text-shadow:var(--edge)}
.gauge.meats,.gauge.air{flex-direction:row-reverse}
.gauge span{position:relative;display:block;width:200px;height:10px;background:rgba(14,9,6,.74);border:1px solid rgba(255,220,146,.5);box-shadow:0 0 0 1px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.4)}
.gauge span::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(14,9,6,.85) calc(10% - 1px) 10%)}
.gauge i{position:absolute;left:0;top:0;bottom:0;display:block;transition:width .3s var(--ease)}
.gauge.meats i,.gauge.air i{left:auto;right:0}
#hearts i{background:linear-gradient(180deg,#ff8a74,#d8302a 55%,#8a1612);box-shadow:0 0 8px rgba(255,70,50,.5)}
#meats i{background:linear-gradient(180deg,#ffd08a,#e08a2c 55%,#8a4a14);box-shadow:0 0 8px rgba(255,160,60,.45)}
.gauge b{min-width:2.4em;font-weight:500}
.gauge.meats b,.gauge.air b{text-align:right}
.gauge svg{flex:none;width:19px;height:18px;filter:drop-shadow(0 1px 2px #000)}
.gauge.low span{animation:lowBar .9s ease-in-out infinite alternate}
.gauge.low svg{animation:shake .5s steps(2) infinite}
@keyframes lowBar{to{border-color:#ff9a7a;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 12px rgba(255,80,50,.65)}}
@keyframes shake{50%{transform:translateY(-2px)}}
.air{position:fixed;left:50%;bottom:113px;margin-left:-277px;width:554px}
.air span{width:140px;height:8px}
.air i{background:linear-gradient(180deg,#d8f0ff,#6ab8f0 55%,#2a5a8a);box-shadow:0 0 8px rgba(120,190,255,.5)}
.air svg{width:16px;height:15px}
/* the potions working: a chip of glass each, its bottle and the time left (over the wing bar while I ride) */
.fx{position:fixed;left:50%;bottom:112px;transform:translateX(-50%);width:554px;display:flex;gap:6px;pointer-events:none}
.wings:not([hidden])~.fx{bottom:134px}
.fx span{display:flex;align-items:center;gap:4px;padding:2px 8px 2px 3px;background:var(--glass);border:1px solid var(--line2);color:var(--gold3);font:500 .66rem/1 "IBM Plex Mono",monospace;
  text-shadow:0 1px 2px #000}
.fx svg{width:18px;height:18px}
.fx .end{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.45}}
.hurt-flash{position:fixed;inset:0;background:radial-gradient(ellipse at center,rgba(200,20,10,.1) 25%,rgba(190,15,8,.7));opacity:0}
.hurt-flash.on{animation:hurt .5s ease-out}
/* the air crackles before a bolt (main.js: opacity); a gust or a bolt coming: a line of words over the crosshair */
.static{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,rgba(170,210,255,0) 40%,rgba(150,200,255,.25) 70%,rgba(200,230,255,.6))}
.warn-line{position:fixed;left:50%;top:32%;transform:translate(-50%,6px);display:flex;align-items:center;gap:14px;font-family:Cinzel,serif;font-weight:700;font-size:.78rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold3);text-shadow:0 1px 8px #000,0 0 18px rgba(232,180,92,.35);opacity:0;transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none;white-space:nowrap}
.warn-line::before,.warn-line::after{content:"";width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.warn-line::after{transform:scaleX(-1)}
.warn-line.on{opacity:1;transform:translate(-50%,0)}
/* after going to another world: the browser needs a click or a key before the game takes the mouse again (no menu) */
.go-on{position:fixed;left:50%;top:58%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;font-family:Cinzel,serif;font-weight:700;font-size:.78rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold3);text-shadow:0 1px 8px #000,0 0 18px rgba(232,180,92,.35);pointer-events:none;white-space:nowrap;
  padding:10px 22px;background:linear-gradient(90deg,transparent,rgba(16,11,8,.7),transparent);animation:goOn 1.6s var(--ease) infinite alternate}
.go-on::before,.go-on::after{content:"";width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.go-on::after{transform:scaleX(-1)}
@keyframes goOn{from{opacity:.65}to{opacity:1}}
/* the pegasus quest: a gold line high over the crosshair (the cage opened, she is yours; ember: the foal is lost) */
.quest-line{top:22%;font-size:.86rem;color:var(--gold3);text-shadow:0 1px 8px #000,0 0 22px rgba(255,170,80,.55)}
.quest-line.bad{color:#ffb08a}
.quest-line.bad::before,.quest-line.bad::after{background:linear-gradient(90deg,transparent,var(--ember))}
/* the story card: once, on a player's first time in a survival game (the site's look: Cinzel, gold and ember) */
#story{z-index:60}
.story-card{width:min(580px,100%);padding:28px 42px 26px;max-height:calc(100vh - 48px);overflow-y:auto;
  background:radial-gradient(120% 70% at 50% 0%,rgba(140,64,26,.32),transparent 62%),linear-gradient(180deg,rgba(35,24,17,.96),rgba(14,9,6,.97));
  box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 70px rgba(255,138,61,.12),inset 0 0 0 4px rgba(14,9,6,.9),inset 0 0 0 5px var(--line)}
.story-mark{display:block;width:170px;height:85px;margin:12px auto 2px;filter:drop-shadow(0 0 14px rgba(255,170,80,.4))}
.story-text{margin:.65em 0;text-align:left;color:var(--ink);font-size:1.02rem;line-height:1.55}
.story-card .story-text:first-of-type::first-letter{font-family:Cinzel,serif;font-weight:900;font-size:2.4em;float:left;line-height:.92;margin:.04em .1em 0 0;color:var(--gold3)}
.story-way{display:flex;flex-wrap:wrap;justify-content:center;row-gap:6px;margin:18px 0 8px;padding:0;list-style:none;font-family:Cinzel,serif;font-weight:700;font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.story-way li{display:flex;align-items:center}
.story-way li+li::before{content:"";width:20px;height:1px;margin:0 9px;background:linear-gradient(90deg,var(--gold2),var(--gold3))}
.story-warn{margin:6px 0 18px;color:var(--ember);font-style:italic;font-size:.95rem}
.warn-line.bolt{color:#dff0ff;text-shadow:0 1px 8px #000,0 0 18px rgba(150,200,255,.55)}
.warn-line.bolt::before,.warn-line.bolt::after{background:linear-gradient(90deg,transparent,#a8d4ff)}
@keyframes hurt{from{opacity:1}to{opacity:0}}
/* the violet flash when I step into a portal */
.warp-flash{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(180,120,255,.15) 20%,rgba(90,20,200,.75));opacity:0}
.warp-flash.on{animation:hurt 1.2s ease-out}
.warp-flash.hold{animation:none;opacity:1;transition:opacity .4s;background:radial-gradient(ellipse at center,rgba(200,150,255,.6) 10%,rgba(40,8,90,1))}
.warp-flash.sky{background:radial-gradient(ellipse at center,rgba(255,248,225,.25) 20%,rgba(255,214,140,.8))}
.warp-flash.sky.hold{background:radial-gradient(ellipse at center,rgba(255,255,245,.9) 10%,rgba(250,210,150,1))}
.died{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);font-family:Cinzel,serif;font-weight:900;font-size:2.4rem;letter-spacing:.08em;
  color:#ff8a6a;text-shadow:0 2px 18px rgba(120,0,0,.9),0 1px 3px #000;opacity:0;white-space:nowrap}
.died.on{animation:died 3.2s ease-out}
@keyframes died{0%{opacity:0;transform:translate(-50%,-40%)}12%,70%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0}}
.sound-on{margin:0}
.menu-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0 4px}
.save-row{display:flex;align-items:center;gap:16px}
.save-row .note{margin:0}
.save-row .small-link{margin-top:0}
#saveNow{padding:9px 22px}
.lock-note{margin:10px 0 0;color:var(--ember);text-align:center}
/* the card over a thing in the bag: its numbers, with bars against the best of its kind */
.item-card{position:fixed;z-index:60;pointer-events:none;width:290px;padding:11px 14px 10px;border:1px solid var(--line);font-size:.86rem;line-height:1.3;
  background:var(--frame),linear-gradient(180deg,rgba(38,26,18,.97),rgba(14,9,6,.97));box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 24px rgba(255,138,61,.08)}
.item-card b{display:block;margin-bottom:7px;padding-bottom:6px;border-bottom:1px solid var(--line);font-family:Cinzel,serif;font-weight:700;letter-spacing:.04em;color:var(--gold3)}
.item-card .st{display:grid;grid-template-columns:76px 1fr;column-gap:8px;margin:4px 0}
.item-card .st>span:first-child{color:var(--faint)}
.item-card .st i{display:block;height:3px;margin-top:3px;background:rgba(232,180,92,.14)}
.item-card .st i i{height:100%;margin:0;background:linear-gradient(90deg,var(--gold2),var(--gold3));box-shadow:0 0 5px rgba(255,190,90,.4)}
.item-card p{margin:7px 0 0;color:var(--faint);font-style:italic;font-size:.8rem}
@media (max-height:680px),(max-width:1100px){
  .panel.bagp{padding:16px 22px 10px}
  .bag-cols{gap:22px}
  #bag .slot{width:44px;height:44px}
  #bag .slot svg{width:28px;height:28px}
  .grid{grid-template-columns:repeat(10,44px);gap:4px}
  .grid.chest{grid-template-columns:repeat(6,44px)}
  .grid.armor{grid-template-columns:repeat(4,44px)}
  .forge{grid-template-columns:44px 60px 44px;grid-template-rows:44px 22px 44px}
  #bag .sub-h{margin:14px 0 6px}
  #bag .slot.trash{flex-basis:44px}
  .recipes{max-height:calc(100vh - 190px)}
  .bag-foot{margin-top:10px}
  .bag-foot .note{font-size:.74rem}
}