/* Slop Online website: early-2000s MMORPG site, in the spirit of old-school RuneScape and its contemporaries.
   Carved stone, aged parchment, wooden nav planks and gold bevels. Plain CSS, no frameworks. */
:root{--stone:#1a1209;--stone2:#2b2118;--wood:#4a3320;--wood2:#6b4a2b;--gold:#e9c46a;--gold2:#ffe9a8;--goldd:#8a6a2a;--parch:#dccba0;--parch2:#cdb887;--ink:#2a1a0c;--red:#8b1e1e;--blue:#2c5d8c;
 --cursor:url(cursor.png) 6 2}
*{box-sizing:border-box}
html{cursor:url(cursor.png) 6 2,auto}
body,a,button,.btn,summary,label,select,input,video,[role=button]{cursor:url(cursor.png) 6 2,auto}
body{margin:0;color:var(--ink);font:14px/1.55 Verdana,Tahoma,Geneva,sans-serif;background:var(--stone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .28 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");}
#wrap{max-width:1040px;margin:0 auto;padding:0 10px 30px}
a{color:#7a2a12;text-decoration:underline}a:hover{color:#b3411d}
h1,h2,h3,h4{font-family:Cinzel,Georgia,serif;margin:0}
kbd{display:inline-block;min-width:1.7em;padding:0 5px;margin:0 1px;text-align:center;font:600 12px/1.6 Verdana,sans-serif;color:var(--ink);background:linear-gradient(#f5ead0,#cdb887);border:1px solid #6b4a2b;border-bottom-width:3px;border-radius:4px}
/* header */
#top{margin-top:8px;border:4px solid #0b0704;border-radius:6px 6px 0 0;box-shadow:0 0 0 2px var(--goldd),0 10px 30px #000a;background:#150e08}
.banner{position:relative;min-height:330px;background-size:cover;background-position:center 30%;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:16px 22px;border-bottom:3px solid var(--goldd)}
.logo img{display:block;width:min(430px,70vw);filter:drop-shadow(0 6px 10px #000c)}
.tag{flex:1;color:var(--gold2);font:600 17px/1.35 Cinzel,Georgia,serif;text-shadow:0 2px 3px #000,0 0 12px #000;text-align:center}
.tag small{display:block;font:12px Verdana,sans-serif;color:#f1e3b8;margin-top:4px}
.btn{display:inline-block;padding:7px 16px;font:700 13px/1.2 Cinzel,Georgia,serif;letter-spacing:.04em;color:#2a1608!important;text-decoration:none!important;text-shadow:0 1px 0 #fff6;background:linear-gradient(#ffe28a,#d39b2a 55%,#a97316);border:2px solid #20160c;border-radius:5px;box-shadow:inset 0 1px 0 #fffa,inset 0 -2px 0 #0004,0 2px 4px #0008;margin:2px 0}
.btn:hover{filter:brightness(1.12);color:#000!important}.btn:active{transform:translateY(1px)}
.btn.big{font-size:17px;padding:10px 26px}
.btn.play{font-size:20px;padding:13px 30px;background:linear-gradient(#ff9a5a,#c0392b 55%,#7a1a12);color:#fff2d6!important;text-shadow:0 2px 2px #000;white-space:nowrap}
/* nav planks */
#nav{background:linear-gradient(#3a2815,#25190d);border-bottom:3px solid #0b0704}
#nav ul{list-style:none;margin:0;padding:6px 8px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
#nav a{display:block;padding:7px 14px;font:700 13px/1 Cinzel,Georgia,serif;color:var(--gold)!important;text-decoration:none;text-shadow:0 2px 2px #000;background:linear-gradient(#6b4a2b,#4a3320 60%,#3a2815);border:2px solid #120b05;border-radius:4px;box-shadow:inset 0 1px 0 #ffd98a55,inset 0 -2px 0 #0006}
#nav a:hover{color:#fff!important;background:linear-gradient(#8a5f35,#5c3f25)}
#nav a.on{color:#2a1608!important;text-shadow:0 1px 0 #fff6;background:linear-gradient(#ffe28a,#d39b2a);border-color:#20160c}
#ticker{overflow:hidden;white-space:nowrap;background:#0d0804;border-top:1px solid #3a2815;color:#f1d58a;font:12px/26px Verdana,sans-serif}
#ticker div{display:inline-block;padding-left:100%;animation:tick 38s linear infinite}
#ticker span{margin-right:60px}
@keyframes tick{to{transform:translateX(-100%)}}
/* layout */
#cols{display:flex;gap:12px;align-items:flex-start;margin-top:12px}
#side{flex:0 0 218px}#main{flex:1;min-width:0}
/* panels */
.panel{margin:0 0 12px;background:linear-gradient(#e6d6ad,var(--parch) 40%,var(--parch2));border:3px solid #4a3320;border-radius:5px;box-shadow:inset 0 0 0 2px #b79a5f,inset 0 0 40px #8a6a2a55,0 0 0 2px #0b0704,0 4px 10px #0007;overflow:hidden}
.panel>h2,.panel>h3{margin:0;padding:8px 14px;color:var(--gold);font-size:17px;text-shadow:0 2px 2px #000;background:linear-gradient(#5a3d22,#38250f);border-bottom:3px solid #0b0704;box-shadow:inset 0 1px 0 #ffd98a44}
.panel>h3{font-size:14px;padding:6px 12px}
.panel>h2::before,.panel>h2::after{content:"\2756";color:var(--goldd);margin:0 10px;font-size:13px}
.pb{padding:12px 16px 14px}.panel>.links,.panel>.stats{padding:10px 14px}
.pb p{margin:0 0 .8em}.pb p:last-child{margin-bottom:0}
.play{background:linear-gradient(#6b2a1e,#3a1710);border-color:#2a0f09}.play>h3{background:linear-gradient(#a8321f,#6b1d12)}.play .pb{color:#f6dfb2;text-align:center}
.spawn{background:linear-gradient(#2a3a4a,#16222e);border-color:#0e1822}.spawn>h3{background:linear-gradient(#3a6b99,#244763)}.spawn .pb{color:#cfe2f3;font-size:12.5px}.spawn a{color:#9fd0ff}
.spawnp .pb{background:linear-gradient(#dfe9f2,#b9cde0)}
.links{list-style:none;margin:0}.links li{border-bottom:1px dotted #8a6a2a88}.links li:last-child{border:0}.links a{display:block;padding:5px 2px;text-decoration:none;font-weight:600}.links a:hover{background:#0002;padding-left:8px}
dl.stats{display:grid;grid-template-columns:1fr auto;gap:2px 8px;margin:0}dl.stats dt{font-weight:600}dl.stats dd{margin:0;font:700 14px Cinzel,serif;color:#7a2a12}
.lead{font:600 16px/1.5 Cinzel,Georgia,serif}
.more{text-align:right;font-weight:700}
.soon{display:inline-block;margin-left:6px;padding:0 6px;font:700 10px/16px Verdana,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:#a8321f;border-radius:3px;vertical-align:middle}
.note{padding:8px 12px;background:#0002;border-left:4px solid var(--red)}
/* home */
.welcome{display:flex;gap:16px;align-items:flex-start}.boxart{width:150px;flex:none;border:3px solid #0b0704;border-radius:4px;box-shadow:0 4px 10px #0009,0 0 0 2px var(--goldd)}
.trailer{width:100%;display:block;background:#000;border:3px solid #0b0704;border-radius:4px}
.feat{margin:0;padding-left:20px}.feat li{margin:0 0 .6em}
.news{padding:0 0 10px;margin:0 0 10px;border-bottom:1px dotted #8a6a2a}.news:last-child{border:0;margin:0;padding:0}
.news time{font:700 11px Verdana,sans-serif;color:#7a2a12}.news h4{font-size:16px;margin:2px 0 3px;color:#3a1c0a}.news p{margin:0}
/* tables */
.tbl{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}.tbl th{text-align:left;padding:4px 8px;color:var(--gold);background:#4a3320;font-family:Cinzel,serif}.tbl td{padding:4px 8px;border-bottom:1px solid #8a6a2a66}.tbl tr:nth-child(even) td{background:#0000000d}
.dl{font-size:12.5px}
/* bosses */
.bosses{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.boss{background:#1d140c;border:3px solid #0b0704;border-radius:5px;box-shadow:0 0 0 2px var(--goldd);color:#eadcb6;overflow:hidden;display:flex;flex-direction:column}
.boss.raid{box-shadow:0 0 0 2px #c0392b,0 0 14px #c0392b88}
.bi{position:relative;aspect-ratio:16/10;background:#000}.bi img{width:100%;height:100%;object-fit:cover;display:block}
.rb{position:absolute;top:8px;right:8px;padding:2px 8px;font:700 11px Cinzel,serif;color:#fff;background:#a8321f;border:1px solid #000;border-radius:3px;letter-spacing:.08em}
.bt{padding:8px 12px 12px}.bt h4{color:var(--gold);font-size:15px}.bn{font-size:12px;color:#f1c27a;margin:2px 0 6px}.bt p{margin:0;font-size:12.5px;line-height:1.5;color:#d8c89e}
/* classes */
.classes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.class{background:#1d140c;border:3px solid #0b0704;border-radius:5px;box-shadow:0 0 0 2px var(--goldd);color:#eadcb6;padding:10px 12px}
.ct{display:flex;gap:10px;align-items:center;margin-bottom:6px}.crest{width:58px;height:58px;object-fit:contain;flex:none;background:#0006;border:2px solid #0b0704;border-radius:4px}
.class h4{color:var(--gold);font-size:15px;line-height:1.2}
.role{display:inline-block;padding:0 7px;font:700 10px/16px Verdana,sans-serif;text-transform:uppercase;color:#fff;background:var(--c);border-radius:3px}.res{font-size:11px;color:#c9b88a;text-transform:capitalize}
.class p{margin:6px 0;font-size:12.5px;line-height:1.45;color:#d8c89e;min-height:3.6em}
.sk{display:flex;gap:4px;margin:6px 0}.sk img{width:30px;height:30px;border:1px solid #6b4a2b;border-radius:3px;background:#000}
.un{font-size:11px;color:#f1c27a;border-top:1px dotted #6b4a2b;padding-top:4px}
.legend span{display:inline-block;margin-right:8px;padding:1px 9px;font:700 11px/18px Verdana,sans-serif;color:#fff;background:var(--c);border-radius:3px}
/* collectibles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.tile{background:#14100a;border:2px solid var(--c);border-radius:4px;padding:3px;text-align:center;box-shadow:inset 0 0 8px #000}.tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:2px}
.tile span{display:block;margin-top:3px;font-size:10.5px;line-height:1.2;color:var(--c);height:2.5em;overflow:hidden}
.tile:hover{transform:translateY(-2px);box-shadow:0 0 12px var(--c)}
/* features / faq */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}.fcard{background:#0002;border:2px solid #6b4a2b;border-radius:4px;padding:8px 12px}.fcard h4{font-size:15px;color:#7a2a12;margin-bottom:3px}.fcard p{margin:0;font-size:13px}
.qa{margin:0 0 12px}.qa h4{font-size:15px;color:#7a2a12}.qa p{margin:2px 0 0}
/* footer */
#foot{margin-top:6px;padding:16px;text-align:center;color:#bda877;font-size:12px;background:linear-gradient(#25190d,#120b05);border:3px solid #0b0704;border-radius:0 0 6px 6px;box-shadow:0 0 0 2px var(--goldd)}
#foot a{color:var(--gold)}.fl{margin-bottom:8px}.powered{margin:8px auto;padding:8px 12px;display:inline-block;color:var(--gold2);font:700 14px Cinzel,serif;background:#0006;border:2px solid var(--goldd);border-radius:4px}#foot p{margin:8px auto 0;max-width:760px;font-size:11px;color:#9b8960}
@media(max-width:820px){#cols{flex-direction:column}#side{flex:none;width:100%}.banner{flex-direction:column;align-items:center;text-align:center}.welcome{flex-direction:column}.boxart{width:120px}}
/* the ticker always scrolls, so every stat gets its turn on screen */

/* collapsible regions + tabs (keeps the art-heavy pages light: hidden lazy images are never fetched) */
.region{margin:0 0 12px;background:linear-gradient(#e6d6ad,var(--parch2));border:3px solid #4a3320;border-radius:5px;box-shadow:inset 0 0 0 2px #b79a5f,0 0 0 2px #0b0704,0 4px 10px #0007}
.region>summary{list-style:none;padding:9px 14px;color:var(--gold);font:700 17px Cinzel,Georgia,serif;text-shadow:0 2px 2px #000;background:linear-gradient(#5a3d22,#38250f);border-bottom:3px solid #0b0704}
.region>summary::-webkit-details-marker{display:none}.region>summary small{font:11px Verdana,sans-serif;color:#d8c08a;margin-left:8px}.region>summary::before{content:'\25B8  ';color:var(--goldd)}.region[open]>summary::before{content:'\25BE  '}
.region>.bosses{padding:12px}
.tabs{display:flex;gap:6px;margin:0 0 10px}.tab{padding:8px 16px;font:700 13px Cinzel,serif;color:var(--gold);background:linear-gradient(#6b4a2b,#3a2815);border:2px solid #120b05;border-radius:4px;box-shadow:inset 0 1px 0 #ffd98a55}.tab.on{color:#2a1608;background:linear-gradient(#ffe28a,#d39b2a)}
.more-tiles{margin-top:10px}.more-tiles>summary{list-style:none;display:inline-block}.more-tiles>summary::-webkit-details-marker{display:none}.more-tiles .tiles{margin-top:10px}

/* grid items must be allowed to shrink below their image's natural size */
.tile,.boss,.class,.fcard,.bi{min-width:0}img{max-width:100%}.tile img{height:auto}

/* journey page, sidebar road, dungeon tables */
.road{margin:0;padding:8px 14px 10px 34px}.road li{margin:0 0 5px;padding-left:2px}.road li::marker{font:700 13px Cinzel,serif;color:#7a2a12}.road small{display:block;color:#6b4a2b;font-size:11px}
.steps{list-style:none;margin:12px 0 0;padding:0}.steps li{display:flex;gap:12px;align-items:flex-start;margin:0 0 10px}
.steps li>span{flex:none;width:30px;height:30px;line-height:26px;text-align:center;font:900 15px Cinzel,serif;color:#2a1608;background:linear-gradient(#ffe28a,#d39b2a);border:2px solid #20160c;border-radius:50%;box-shadow:inset 0 1px 0 #fffa,0 2px 3px #0006}
.roadmap{list-style:none;margin:0;padding:0}.stop{display:flex;gap:14px;padding:0 0 14px;position:relative}
.stop:not(:last-child)::before{content:"";position:absolute;left:17px;top:38px;bottom:0;width:3px;background:repeating-linear-gradient(#8a6a2a 0 6px,transparent 6px 11px)}
.stop .num{flex:none;width:36px;height:36px;line-height:32px;text-align:center;font:900 17px Cinzel,serif;color:var(--gold);background:linear-gradient(#5a3d22,#38250f);border:3px solid #0b0704;border-radius:50%;box-shadow:0 0 0 2px var(--goldd)}
.stop h4{font-size:17px;color:#3a1c0a}.stop h4 small{font:12px Verdana,sans-serif;color:#7a2a12;margin-left:6px}.stop p{margin:2px 0 0}.hop{font-size:12.5px;color:#6b4a2b;font-style:italic}
.soonline{margin:10px 0 0;padding-top:8px;border-top:1px dotted #8a6a2a}.soonline span{display:inline-block;margin:0 2px;padding:0 7px;font-weight:700;font-size:12px;color:#fff;background:#a8321f;border-radius:3px}
.dg td:last-child,.dg th:last-child{text-align:right;width:3.5em}.dg tr.raid td{background:#a8321f1f;font-weight:700}.rtag{display:inline-block;margin-left:6px;padding:0 6px;font:700 10px/16px Verdana,sans-serif;letter-spacing:.06em;color:#fff;background:#a8321f;border-radius:3px;vertical-align:middle}
/* play chooser */
#playdlg{width:min(860px,94vw);max-height:92vh;padding:0;border:4px solid #0b0704;border-radius:6px;background:linear-gradient(#e6d6ad,var(--parch2));box-shadow:0 0 0 2px var(--goldd),0 20px 60px #000c;color:var(--ink);overflow:auto}
#playdlg::backdrop{background:#000b;backdrop-filter:blur(2px)}
.pd{position:relative;padding:0 0 16px}.pd>h2{margin:0;padding:12px 50px 10px 18px;color:var(--gold);font-size:20px;text-shadow:0 2px 2px #000;background:linear-gradient(#5a3d22,#38250f);border-bottom:3px solid #0b0704}
.pd-x{position:absolute;right:10px;top:9px;width:30px;height:30px;font:700 15px Verdana,sans-serif;color:var(--gold);background:#0006;border:2px solid #0b0704;border-radius:4px}.pd-x:hover{background:#a8321f;color:#fff}
.pd-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 16px 0}
.pd-card{padding:12px 14px;background:#0000000f;border:2px solid #6b4a2b;border-radius:5px}.pd-card h3{font-size:18px;color:#3a1c0a;margin-bottom:2px}.pd-card .rec{margin:0 0 8px;font:700 11px Verdana,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#7a2a12}
.pd-card.recd{background:#a8321f14;border-color:#a8321f}.pd-card .btn{display:block;text-align:center;margin-top:12px}
.pd-steps{margin:8px 0 0;padding-left:20px;font-size:13px}.pd-steps li{margin:0 0 9px}
.cmd{display:flex;gap:6px;margin-top:4px}.cmd code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;padding:6px 9px;font:12.5px Consolas,Menlo,monospace;color:#f1e3b8;background:#1a120a;border:2px solid #0b0704;border-radius:4px}
.cp{flex:none;padding:0 12px;font:700 12px Cinzel,serif;color:#2a1608;background:linear-gradient(#ffe28a,#d39b2a);border:2px solid #20160c;border-radius:4px}.cp:hover{filter:brightness(1.12)}
.pd-note{margin:10px 0 0;font-size:12px;color:#5a3d22}.pd-note code{padding:0 4px;background:#0002;border-radius:3px}
@media(max-width:700px){.pd-cols{grid-template-columns:1fr}}
/* the creator's statement: the first thing on the home page, impossible to miss */
.creator{background:linear-gradient(#f3e4b4,#dcc88f 60%,#cbb27a);border:4px solid #0b0704;box-shadow:inset 0 0 0 3px #e9c46a,0 0 0 3px var(--goldd),0 0 26px #e9c46a66,0 6px 14px #000a}
.creator>h2{padding:12px 16px;font-size:22px;text-align:center;background:linear-gradient(#a8321f,#6b1d12 70%,#4a1209);color:#ffe9a8;border-bottom:3px solid #0b0704;letter-spacing:.04em}
.creator>h2::before,.creator>h2::after{content:"\2605";color:#ffd76a;margin:0 14px}
.creator .pb{padding:18px 26px 16px;text-align:center}
.creator .big{font:700 21px/1.4 Cinzel,Georgia,serif;color:#3a1c0a}
.creator .pb p{font-size:15.5px;line-height:1.6}
.creator .sig{margin:10px 0 0;font:700 22px Cinzel,Georgia,serif;color:#7a2a12;font-style:italic;text-align:right}
@media(max-width:600px){.creator .big{font-size:17px}.creator .pb{padding:14px 14px 12px}}
/* the Meet the bosses heading on the dungeons page */
.meet{margin:18px 4px 10px;padding:8px 14px;text-align:center;font:900 24px Cinzel,Georgia,serif;letter-spacing:.06em;color:var(--gold);text-shadow:0 2px 3px #000;background:linear-gradient(#5a3d22,#38250f);border:3px solid #0b0704;border-radius:5px;box-shadow:0 0 0 2px var(--goldd)}

/* the key art picture on the home page (where the trailer will go later) */
.keyart{display:block;border:3px solid #0b0704;border-radius:4px;box-shadow:0 0 0 2px var(--goldd),0 6px 16px #0008;overflow:hidden;line-height:0}.keyart img{width:100%;height:auto;display:block;transition:transform .6s}.keyart:hover img{transform:scale(1.03)}

/* button feel and the dialog opening; pages themselves change instantly, with no fade */
html{scroll-behavior:smooth}
a{transition:color .18s ease}
.btn,#nav a,.tab,.pd-x,.lang button,.links a{transition:filter .2s ease,transform .2s ease,box-shadow .2s ease,color .2s ease,background-color .2s ease,padding .2s ease}
.btn:hover,#nav a:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fffa,inset 0 -2px 0 #0004,0 5px 10px #000a}
.btn:active,#nav a:active{transform:translateY(1px) scale(.97);transition-duration:.06s}
.boss,.tile,.keyart,.fcard{transition:transform .25s ease,box-shadow .25s ease}
.boss:hover{transform:translateY(-4px)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#playdlg[open]{animation:dlgin .28s cubic-bezier(.2,.8,.2,1)}
#playdlg[open]::backdrop{animation:fadein .28s ease}
@keyframes dlgin{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
details[open]>.bosses,details[open]>.tiles{animation:rise .35s ease both}
/* banner picture mirrored horizontally (own layer, so the logo and text stay unflipped) */
.banner{isolation:isolate}
.banner::before{content:"";position:absolute;inset:0;z-index:-1;background:inherit;transform:scaleX(-1)}