/* Gielinor Guess (/dailies/gielinor-guess): the page is framed like the OSRS game client.
   Stone and brown panel chrome with rivets, parchment chatbox and dialogue, orange and yellow text with a hard
   black shadow, the RuneScape bitmap fonts (RuneStar, CC0) at their native 16 px. Everything drawn here is ours:
   the Wise Old Man drawing, the icons, the Lumbridge scene. Only the item pictures come from the OSRS Wiki (credited in the footer).
   Contrast: black on parchment 12:1; orange #FF981F and yellow #FFFF00 on stone carry a 1 px black shadow and
   sit above 6:1; body copy on stone is #F0E6CC (10:1). */
@font-face{font-family:"RS Plain";src:url(/dailies/gielinor-guess/fonts/RuneScape-Plain-12.woff2) format("woff2");font-display:swap}
@font-face{font-family:"RS Bold";src:url(/dailies/gielinor-guess/fonts/RuneScape-Bold-12.woff2) format("woff2");font-display:swap}
@font-face{font-family:"RS Quill";src:url(/dailies/gielinor-guess/fonts/RuneScape-Quill-8.woff2) format("woff2");font-display:swap}
@font-face{font-family:"RS Caps";src:url(/dailies/gielinor-guess/fonts/RuneScape-Quill-Caps.woff2) format("woff2");font-display:swap}

:root{
  --stone:#3e3529; --stone-2:#4b4031; --stone-d:#2b241b; --stone-l:#655641; --edge:#130f0a; --rivet:#a8957a;
  --parch:#d8cba4; --parch-2:#c8b88d; --parch-edge:#7d6a49; --ink:#000;
  --orange:#ff981f; --yellow:#ffff00; --white:#ffffff; --cream:#f0e6cc; --green:#0dc10d; --red:#ff2a1a; --blue:#0000ff; --maroon:#800000;
  --rs:"RS Plain","Trebuchet MS",Verdana,sans-serif; --rsb:"RS Bold","RS Plain",Verdana,sans-serif; --quill:"RS Quill","RS Plain",Georgia,serif; --caps:"RS Caps",Georgia,serif;
  --shadow:1px 1px 0 #000; --shadow2:2px 2px 0 #000;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;color:var(--cream);font:16px/1.25 var(--rs);-webkit-font-smoothing:none;font-smooth:never;overflow-x:hidden;
  background:#1b140d;
  background-image:
    radial-gradient(90% 60% at 50% -10%,rgba(255,170,80,.18),transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='64'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.45'%3E%3Cpath d='M0 31.5h96M0 63.5h96M47.5 0v32M15.5 32v32M79.5 32v32'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.025'%3E%3Crect x='2' y='2' width='44' height='4'/%3E%3Crect x='50' y='2' width='44' height='4'/%3E%3Crect x='18' y='34' width='60' height='4'/%3E%3C/g%3E%3C/svg%3E")}
h1,h2,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
img{image-rendering:pixelated}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:200;background:var(--yellow);color:#000;padding:10px 14px}
.skip:focus{top:8px}
[hidden]{display:none!important}

/* ---------- materials ---------- */
.stone,.stone-btn{background-color:var(--stone)}
.panel-frame,.client{position:relative;border:3px solid var(--edge);box-shadow:inset 2px 2px 0 var(--stone-l),inset -2px -2px 0 var(--stone-d),0 10px 30px -10px #000}
/* rivets: four brass pins in the corners of any framed panel */
.client::before,.side::before{content:"";position:absolute;inset:5px;pointer-events:none;z-index:3;
  background:radial-gradient(circle at 4px 4px,var(--rivet) 2px,#3a2f22 3px,transparent 3.5px) top left/100% 100% no-repeat,
    radial-gradient(circle at calc(100% - 4px) 4px,var(--rivet) 2px,#3a2f22 3px,transparent 3.5px) top right/100% 100% no-repeat,
    radial-gradient(circle at 4px calc(100% - 4px),var(--rivet) 2px,#3a2f22 3px,transparent 3.5px) bottom left/100% 100% no-repeat,
    radial-gradient(circle at calc(100% - 4px) calc(100% - 4px),var(--rivet) 2px,#3a2f22 3px,transparent 3.5px) bottom right/100% 100% no-repeat}
.stone-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:6px 14px;border:2px solid var(--edge);border-radius:2px;
  color:var(--orange);text-shadow:var(--shadow);text-decoration:none;cursor:pointer;font:16px/1 var(--rsb);
  box-shadow:inset 2px 2px 0 var(--stone-l),inset -2px -2px 0 var(--stone-d);
  background-image:linear-gradient(180deg,rgba(255,255,255,.06),transparent 45%,rgba(0,0,0,.18))}
.stone-btn:hover{color:var(--yellow);background-color:var(--stone-2)}
.stone-btn:active{box-shadow:inset -2px -2px 0 var(--stone-l),inset 2px 2px 0 var(--stone-d)}
.stone-btn[disabled]{color:#8d7a5c;cursor:not-allowed}
.stone-btn.wide{display:flex;width:100%;margin-top:8px}

.site{max-width:1220px;margin:0 auto;padding:10px 16px 14px;display:grid;gap:10px}



/* ---------- banner ---------- */
.banner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px 16px;padding:6px 12px;border:3px solid var(--edge);background:var(--stone);
  box-shadow:inset 2px 2px 0 var(--stone-l),inset -2px -2px 0 var(--stone-d);background-image:linear-gradient(180deg,rgba(255,200,120,.08),transparent 60%)}
.banner .back{justify-self:start}
.wordmark{text-align:center}
.wm{font:64px/0.9 var(--caps);color:var(--orange);text-shadow:3px 3px 0 #000}
.wm span:last-child{color:var(--yellow)}
.tagline{color:var(--cream);text-shadow:var(--shadow)}
.world{justify-self:end;color:var(--yellow);text-shadow:var(--shadow)}
.world b{font-family:var(--rsb);color:var(--green);font-weight:normal}

/* ---------- the client: viewport, side panel, chatbox ---------- */
.client{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:436px 206px;grid-template-areas:"view side" "chat side";gap:6px;padding:8px;
  border:3px solid var(--edge);background:var(--stone);box-shadow:inset 2px 2px 0 var(--stone-l),inset -2px -2px 0 var(--stone-d),0 10px 30px -10px #000}
.viewport{grid-area:view;position:relative;overflow:hidden;border:2px solid var(--edge);background:#7aa0c8}
.mouseover{position:absolute;left:8px;top:6px;z-index:7;font:16px/1 var(--rsb);color:var(--white);text-shadow:var(--shadow);pointer-events:none}
.mouseover b{color:var(--yellow);font-weight:normal}
.mouseover .opt{color:var(--white)}

/* Lumbridge castle courtyard, drawn in CSS */
.scene{position:absolute;inset:0}
.sky{position:absolute;inset:0 0 40% 0;background:linear-gradient(180deg,#5f8fc8,#9cc0de 70%,#c8dbe4)}
.cloud{position:absolute;height:18px;background:#f4f7f8;box-shadow:12px -8px 0 #f4f7f8,28px 0 0 #f4f7f8;opacity:.85}
.cloud.c1{left:10%;top:16%;width:60px}.cloud.c2{left:62%;top:9%;width:44px}
.castle{position:absolute;left:0;right:0;bottom:36%;height:58%}
.keep{position:absolute;left:22%;right:22%;bottom:0;height:72%;background:#8e9097;
  background-image:linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px),linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px);background-size:36px 18px;box-shadow:inset -12px 0 0 rgba(0,0,0,.12)}
.keep::before,.tower::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;background:repeating-linear-gradient(90deg,#8e9097 0 14px,transparent 14px 24px)}
.door{position:absolute;left:50%;bottom:0;width:70px;height:56%;margin-left:-35px;border-radius:35px 35px 0 0;background:#3a2a1a;box-shadow:inset 0 0 0 5px #6f7178}
.win{position:absolute;top:22%;width:16px;height:26px;border-radius:8px 8px 0 0;background:#2a2622}
.win.w1{left:22%}.win.w2{right:22%}
.tower{position:absolute;bottom:0;width:15%;height:100%;background:#9a9ca3;box-shadow:inset -10px 0 0 rgba(0,0,0,.15);
  background-image:linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px),linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px);background-size:30px 18px}
.tower.tl{left:7%}.tower.tr{right:7%}
.pennant{position:absolute;top:-20%;width:4px;height:44px;background:#5a4a3a}
.pennant::after{content:"";position:absolute;left:4px;top:2px;width:30px;height:18px;background:#2b4fa0;clip-path:polygon(0 0,100% 50%,0 100%);box-shadow:inset 0 3px 0 #d6a325}
.pennant.p1{left:14%}.pennant.p2{left:50%;top:-34%}.pennant.p3{right:14%}
.ground{position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(180deg,#5f8a34,#4b7028)}
.path{position:absolute;left:50%;bottom:0;width:46%;height:100%;margin-left:-23%;background:#a49c88;clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 22px)}
.bush{position:absolute;bottom:58%;width:56px;height:34px;border-radius:28px 28px 6px 6px;background:#3f6b2a;box-shadow:inset -8px -6px 0 #2f5320}
.bush.b1{left:4%}.bush.b2{right:4%}

/* the Wise Old Man, standing, and the mystery item on its plinth */
.wom-spot{position:absolute;z-index:2;left:17%;bottom:122px;width:122px}
.wom-spot .wom{display:block;width:122px;height:277px}
.wom .brows,.wom .mouth{display:none}
.pose-stand .arms-cheer,.pose-cheer .arms-stand{display:none}
.face-neutral .b-neutral,.face-neutral .m-neutral,.face-talk .b-neutral,.face-talk .m-talk,.face-happy .b-happy,.face-happy .m-happy,
.face-sad .b-sad,.face-sad .m-sad,.face-shock .b-shock,.face-shock .m-shock{display:inline}
@media (prefers-reduced-motion:no-preference){.wom-spot .wom{animation:idle 3.2s ease-in-out infinite;transform-origin:50% 100%}}
@keyframes idle{50%{transform:translateY(1px) scaleY(.995)}}
.mystery{position:absolute;z-index:3;left:calc(17% + 150px);bottom:126px;width:140px;height:156px;padding:0;border:0;background:none;cursor:pointer}
.plinth{position:absolute;left:12px;right:12px;bottom:0;height:42px;background:linear-gradient(180deg,#a7a59d 0 10px,#86847c 10px);border:2px solid #4a4943;box-shadow:inset 0 3px 0 #c8c6be}
.sack{position:absolute;left:30px;right:30px;bottom:40px;height:90px;display:grid;place-items:center;border-radius:40% 40% 18px 18px;
  background:linear-gradient(90deg,#a8834c,#c9a466 40%,#8a6a3c);border:2px solid #3a2a14;clip-path:polygon(30% 0,70% 0,64% 14%,100% 40%,100% 100%,0 100%,0 40%,36% 14%)}
.sack b{font:64px/1 var(--caps);font-weight:normal;color:#2a1a08;text-shadow:2px 2px 0 #d8b678;margin-top:18px}
.item-art{position:absolute;left:0;right:0;bottom:40px;width:140px;height:112px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 4px 4px rgba(0,0,0,.45))}
.mystery.sil1 .sack,.mystery.sil2 .sack,.mystery.full .sack{display:none}
.mystery.sil1 .item-art{image-rendering:pixelated;filter:drop-shadow(0 0 10px rgba(255,255,200,.6))}
.mystery.sil2 .item-art{filter:drop-shadow(0 0 10px rgba(255,255,200,.6))}
.mystery.full .item-art{animation:pop .7s cubic-bezier(.3,1.5,.5,1) both;filter:drop-shadow(0 0 14px rgba(255,240,150,.9))}
@keyframes pop{from{transform:translateY(30px) scale(.5);opacity:0}to{transform:none;opacity:1}}
.mystery:focus-visible{outline:2px solid var(--yellow)}
.splats{position:absolute;inset:0;pointer-events:none;z-index:2}

/* chathead dialogue, inside the viewport */
.dialogue{position:absolute;z-index:5;left:10px;right:10px;bottom:8px;min-height:104px;display:grid;grid-template-columns:80px 1fr;gap:10px;padding:8px 12px 6px 8px;
  background:linear-gradient(180deg,var(--parch),var(--parch-2));border:2px solid #4a3c27;box-shadow:inset 0 0 0 2px var(--parch-edge),0 6px 18px -6px #000;color:#000}
.dialogue.closed{display:none}
.chathead .wom{width:64px;height:121px;margin:-22px auto 0;display:block}
.dlg-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0}
.dlg-name{font:16px/1 var(--rsb);color:var(--maroon)}
.dlg-text{font:16px/1.3 var(--quill);color:#000;min-height:2.6em;max-width:64ch}
.dlg-text .redact{background:#000}
.dlg-continue{margin-top:auto;min-height:44px;padding:4px 12px;border:0;background:none;color:var(--blue);font:16px/1 var(--quill);cursor:pointer}
.dlg-continue:hover{color:#fff;text-shadow:var(--shadow)}
.dlg-extra{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:2px}
.dlg-extra .stone-btn{min-height:40px}
.dlg-note{color:#0a5a0a;min-height:1.1em}
.lore{max-width:64ch;color:#2a1d0c}
.lore b{color:var(--maroon);font-family:var(--rsb);font-weight:normal}

/* ---------- side panel ---------- */
.side{grid-area:side;position:relative;display:flex;flex-direction:column;gap:6px;padding:8px;border:2px solid var(--edge);background:var(--stone);
  box-shadow:inset 2px 2px 0 var(--stone-l),inset -2px -2px 0 var(--stone-d)}
.orbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.orb{display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:4px;padding:4px 6px;border-radius:22px;background:#1c1610;border:2px solid #000;box-shadow:inset 0 0 0 2px #5e5138}
.orb img{grid-row:1/3;width:22px;height:22px}
.orb b{font:16px/1 var(--rsb);color:var(--green);text-shadow:var(--shadow);font-weight:normal}
.orb small{font:16px/1 var(--rs);color:var(--cream);text-shadow:var(--shadow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.tabs button{display:grid;place-items:center;min-height:46px;padding:2px;border:2px solid var(--edge);background:var(--stone-d);cursor:pointer;box-shadow:inset 1px 1px 0 var(--stone-l)}
.tabs button img{width:32px;height:32px}
.tabs button[aria-selected=true]{background:#6b2a17;box-shadow:inset 0 0 0 2px #a2472a}
.tabs button:hover{filter:brightness(1.15)}
.pane{flex:1;min-height:0;overflow:auto;padding:6px;background:var(--stone-d);border:2px solid var(--edge);box-shadow:inset 1px 1px 0 #1c1610}
.pane-h{font:16px/1.1 var(--rsb);color:var(--orange);text-shadow:var(--shadow);margin-bottom:6px}
.pane-h span{font-family:var(--rs);color:var(--cream)}
.pane-small{margin-top:10px;color:var(--cream);text-shadow:var(--shadow)}
.inv{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.slot{position:relative;width:100%;aspect-ratio:1.1;min-height:44px;display:grid;place-items:center;border:0;padding:0;background:transparent;cursor:default;color:var(--cream)}
.slot img.icon{width:48px;height:48px}
.slot .lk{position:absolute;right:4px;bottom:6px;width:16px;height:16px}
.slot .tag{position:absolute;left:2px;top:1px;font:16px/1 var(--rs);color:var(--yellow);text-shadow:var(--shadow)}
.slot.locked img.icon{filter:grayscale(1) brightness(.5)}
.slot.ready{cursor:pointer}
.slot.ready::after{content:"";position:absolute;inset:3px;border:1px solid transparent;animation:glint 1.4s ease-in-out infinite}
@keyframes glint{50%{border-color:rgba(255,255,0,.9);box-shadow:0 0 12px rgba(255,255,0,.4)}}
.slot.open{cursor:pointer}
.slot.open img.icon{filter:drop-shadow(0 0 4px rgba(255,255,0,.7))}
.slot.ready:hover,.slot.open:hover,.slot.note:hover{background:rgba(255,255,255,.07)}
.slot.note{cursor:pointer}
.slot .tiny{position:absolute;left:0;right:0;bottom:1px;font:16px/1 var(--rs);color:var(--cream);text-shadow:var(--shadow);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.slot.empty{pointer-events:none}
.slot.win img.icon{filter:drop-shadow(0 0 6px rgba(255,255,0,.8))}
/* hitsplats and XP drops */
.splats{position:absolute;inset:0;pointer-events:none;z-index:2}
.splat{position:absolute;left:50%;top:50%;width:34px;height:30px;margin:-15px 0 0 -17px;display:grid;place-items:center;font:16px/1 var(--rsb);color:#fff;text-shadow:var(--shadow);
  background:radial-gradient(circle at 50% 45%,#5a7bff,#1f3dd6 60%,#0d1d7a 72%,transparent 74%);animation:splat 1.2s ease-out both}
@keyframes splat{0%{transform:scale(.4);opacity:0}12%{transform:scale(1.15);opacity:1}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
.xpdrops{position:absolute;right:16px;top:40px;z-index:7;pointer-events:none;display:grid;gap:4px;justify-items:end}
.xpdrop{display:flex;align-items:center;gap:4px;font:16px/1 var(--rsb);color:var(--white);text-shadow:var(--shadow);animation:xp 2.4s linear both}
.xpdrop img{width:20px;height:20px}
@keyframes xp{from{transform:translateY(80px);opacity:0}10%{opacity:1}85%{opacity:1}to{transform:translateY(-40px);opacity:0}}

/* fireworks (level up) and the death screen */
.fx{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.spark{position:absolute;width:6px;height:6px;background:var(--c);box-shadow:0 0 6px var(--c);animation:spark 1.1s ease-out var(--d) both}
@keyframes spark{from{transform:translate(0,0);opacity:1}to{transform:translate(var(--x),var(--y));opacity:0}}
.dead{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);animation:fade .5s ease both}
.dead p{font:32px/1 var(--rsb);color:var(--red);text-shadow:2px 2px 0 #000;text-align:center}
.dead small{display:block;margin-top:10px;font:16px/1.2 var(--rs);color:var(--cream)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* skills and quests */
.skill{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:8px;padding:6px;background:#2e261c;border:1px solid #000}
.skill img{width:32px;height:32px}
.skill .lv{font:16px/1 var(--rsb);color:var(--yellow);text-shadow:var(--shadow)}
.skill .nm{color:var(--orange);text-shadow:var(--shadow)}
.xpbar{height:8px;margin-top:4px;background:#000;border:1px solid #000}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#0d8f0d,#2fe02f)}
.hiscores{width:100%;margin-top:8px;border-collapse:collapse}
.hiscores td{padding:3px 4px;border-bottom:1px solid #1c1610;text-shadow:var(--shadow)}
.hiscores td:last-child{text-align:right;color:var(--yellow)}
.cape{margin-top:8px;color:var(--green);text-shadow:var(--shadow)}
.qlist{display:grid;gap:2px}
.qlist .qh{margin-top:8px;color:var(--orange);font-family:var(--rsb);text-shadow:var(--shadow)}
.qlist a{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:2px 6px;text-decoration:none;text-shadow:var(--shadow);color:var(--red)}
.qlist a.started{color:var(--yellow)}
.qlist a.done{color:var(--green)}
.qlist a:hover{background:rgba(255,255,255,.06)}
.qp{color:var(--orange);text-shadow:var(--shadow)}

/* ---------- chatbox ---------- */
.chatbox{grid-area:chat;position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto auto;min-height:0;border:2px solid #4a3c27;color:#000;
  background:linear-gradient(180deg,var(--parch),var(--parch-2));box-shadow:inset 0 0 0 2px var(--parch-edge)}
.chat-log{min-height:0;overflow:hidden;padding:6px 10px 2px;display:flex;flex-direction:column;justify-content:flex-end;gap:1px}
.chat-log p{overflow-wrap:anywhere}
.chat-log p{line-height:1.2}
.chat-log .nm{color:#000}
.chat-log .pub{color:var(--blue)}
.chat-log .red{color:#c00000}
.chat-log .gz{color:#7b00a8}
.chat-log .sys{color:#000}
.chat-log .lvl{color:#000}
.chat-log .lvl b{color:#0a5a0a;font-weight:normal;font-family:var(--rsb)}
.chat-log img{width:16px;height:16px;vertical-align:-3px;margin-right:3px}
.chat-tabs{display:flex;gap:2px;padding:0 2px 2px}
.chat-tabs span{flex:1;padding:4px 2px;text-align:center;font:16px/1 var(--rs);color:var(--cream);text-shadow:var(--shadow);background:var(--stone);border:1px solid var(--edge);box-shadow:inset 1px 1px 0 var(--stone-l)}
.chat-tabs span.on{color:var(--white);background:#6b2a17}

.credits{color:#bfae8a;font-size:16px;line-height:1.3;text-shadow:var(--shadow);text-align:center;padding:2px 10px}
.credits a{color:var(--orange)}
.nojs{padding:20px;color:var(--yellow)}

/* failure inside the viewport */
.failure{position:absolute;inset:0;z-index:9;display:grid;place-items:center;align-content:center;gap:12px;padding:20px;background:rgba(20,14,8,.92);text-align:center}
.failure p{color:var(--cream);text-shadow:var(--shadow)}
.failure .big{font:32px/1 var(--rsb);color:var(--orange)}
.failure .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* help scroll */
.scroll-dlg{border:0;padding:0;background:none;max-width:min(520px,calc(100vw - 24px))}
.scroll-dlg::backdrop{background:rgba(0,0,0,.65)}
.scroll{position:relative;padding:24px 28px 20px;color:#000;background:linear-gradient(180deg,#e6d9b2,#d2c093);border:2px solid #4a3c27;box-shadow:inset 0 0 0 3px #b8a678,0 20px 50px -10px #000}
.scroll::before,.scroll::after{content:"";position:absolute;left:-10px;right:-10px;height:16px;border-radius:8px;background:linear-gradient(180deg,#b79a63,#7d6338);border:2px solid #3c2d17}
.scroll::before{top:-10px}.scroll::after{bottom:-10px}
.scroll h2{font:32px/1 var(--caps);color:var(--maroon);text-align:center;margin-bottom:12px;font-weight:normal}
.scroll ol{display:grid;gap:8px;counter-reset:s;margin-bottom:14px}
.scroll li{counter-increment:s;display:grid;grid-template-columns:24px 1fr;line-height:1.3}
.scroll li::before{content:counter(s)".";font-family:var(--rsb);color:var(--maroon)}
.scroll .small{font-size:16px;color:#4a3c27;margin-bottom:12px}
.scroll .stone-btn{width:100%}



.chat-input{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:4px 10px 6px;border-top:1px solid var(--parch-edge)}
.who{font-family:var(--rsb);color:#000}
.chat-input input{min-width:0;min-height:44px;padding:4px 8px;border:1px solid var(--parch-edge);background:rgba(255,255,255,.35);color:var(--blue);font:16px/1 var(--rs);caret-color:var(--blue);border-radius:0}
.chat-input input::placeholder{color:#7a6a4a}
.chat-input input:focus{outline:2px solid #000;outline-offset:0;background:rgba(255,255,255,.55)}
.guess-btn,.giveup-btn{min-width:88px}
.giveup-btn{color:#ff8a7a}
.giveup-btn.sure{color:var(--yellow);background-color:#6b2a17}
.results{position:absolute;left:0;right:0;bottom:calc(100% + 4px);z-index:20;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:0 8px;padding:4px 8px;box-shadow:0 -8px 20px -8px #000;
  background:linear-gradient(180deg,#e4d8b4,#d6c69a);border:1px solid var(--parch-edge)}
.results li{display:flex;align-items:center;min-height:40px;padding:2px 6px;cursor:pointer;color:#000}
.results li.on,.results li:hover{background:#000;color:var(--yellow)}
.results .none{grid-column:1/-1;color:#5a4a2c}

/* ---------- sizes ---------- */
@media (max-height:860px) and (min-width:900px){
  .site{gap:6px;padding-top:6px}
  .wm{font-size:48px}
  .client{grid-template-rows:420px 188px}
  .credits{line-height:1.15}
}
@media (max-width:1100px) and (min-width:900px){
  .wom-spot{left:6%}.mystery{left:calc(6% + 150px)}
}
@media (max-width:899px){
  .site{padding:6px 8px 10px;gap:8px}
  .banner{grid-template-columns:auto 1fr;padding:6px 8px}
  .world{display:none}
  .wm{font-size:36px}
  .tagline{display:none}
  .client{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"view" "side" "chat";padding:6px}
  .viewport{height:auto;min-height:0;display:grid;padding-top:300px}
  .wom-spot{left:6%;bottom:auto;top:20px;width:110px}
  .wom-spot .wom{width:110px;height:275px}
  .mystery{left:auto;right:6%;bottom:auto;top:110px;width:130px;height:150px}
  .item-art{width:130px;height:110px}
  .dialogue{position:relative;left:auto;right:auto;bottom:auto;margin:0 6px 6px;grid-template-columns:72px 1fr}
  .chathead .wom{width:60px;height:114px;margin-top:-16px}
  .mouseover{display:none}
  .xpdrops{top:8px}
  .side{max-height:none}
  .pane{max-height:none}
  .inv li:nth-child(n+9):has(.slot.empty){display:none}
  .chatbox{min-height:300px;grid-template-rows:170px auto auto}
  .chat-input{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who who" "in btn" "gu gu"}
  .who{grid-area:who}.chat-input input{grid-area:in}.guess-btn{grid-area:btn}.giveup-btn{grid-area:gu}
  .results{grid-template-columns:1fr}
  .chat-tabs{display:none}
}
@media (max-width:420px){
  .orb small{display:none}
  .wm{font-size:30px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* chat colours and the finished state of the chat input */
.chat-log .blue{color:var(--blue)}
.chat-input .result-line{grid-column:1/-1;color:#000;font-family:var(--rsb)}
.chat-input .dlg-extra{grid-column:1/-1;justify-content:flex-start}
.new-round{color:var(--yellow)}