/*
  Slumber Realm Fan Art Contest winners: the bedroom's Corkboard, with the four winning pieces pinned to it.

  Written for a 360 px phone first. The art in media/ is drawn by Tools/VideoRenderer
  and resized by ../../build.py; the torn edges in torn.css come from the same script.
*/
/* The site's own copy of Grandstander (Open Font License; fonts/OFL.txt). One variable file holds every weight. */
@font-face{
  font-family:"Grandstander";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/Grandstander-latin.woff2) format("woff2");
}
:root{
  --ink:#10203A;
  --paper:#FBF8F0;
  --cork:#B5793F;
  --mint:#5FF3D2;
  --gold:#F2D06B;
  --cream:#FFF6E8;
  --board-blue:#1B2C7C;
  --board-blue-edge:#3E8FC0;
  --button:#8DF3EE;
  --pencil:#22316E;
  --red:#C81E1E;
  --shadow:drop-shadow(0 6px 7px rgba(20,10,0,.42));
  --sheet-shadow:0 6px 12px rgba(20,10,0,.42);
}
*{box-sizing:border-box}
html{background:var(--cork);scroll-behavior:smooth;scroll-padding-top:16px;overflow-x:clip}
body{
  margin:0;
  overflow-x:clip;
  background:var(--cork) url(media/cork.webp) 0 0/360px 360px;
  color:var(--ink);
  font-family:"Grandstander","Trebuchet MS",sans-serif;
  font-weight:500;
  font-size:17px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}
/* The board darkens toward its edges, as in the game. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(120% 90% at 50% 35%,transparent 55%,rgba(50,22,0,.42) 100%);
}
img{display:block;max-width:100%;height:auto}
a{color:var(--pencil);text-underline-offset:.15em}
a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}

.board{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:22px 14px 40px}

/* ---------- pinned things: a shadow, a slight turn, a pin at the top ---------- */
/* Shadows are box shadows, not filters: a filter makes the browser draw a whole tall sheet off screen first. */
.pinned{position:relative;display:block;rotate:var(--r,0deg)}
.pin{position:absolute;z-index:2;top:-13px;left:50%;width:40px;height:40px;translate:-50% 0;color:var(--pin,#E11D1D);overflow:visible}
.pin--left{left:12%}
.pin--right{left:88%;top:-17px}
.sheet{
  position:relative;
  margin:0;
  padding:30px 20px 24px;
  background:url(media/grain.webp) 0 0/256px 256px,var(--sheet,var(--paper));
  box-shadow:var(--sheet-shadow);
}
/* A torn edge is a thin strip of the same paper hanging off the sheet, cut ragged. */
.torn-a::after,.torn-c::before{content:"";position:absolute;left:0;right:0;height:10px;background:inherit}
.torn-a::after{top:calc(100% - 1px);clip-path:var(--torn-a)}
.torn-c::before{bottom:calc(100% - 1px);clip-path:var(--torn-c)}

/* ---------- section headings: the game's lettering on a scrap of the Corkboard menu's torn blue paper ---------- */
.scrap{
  position:relative;
  width:fit-content;
  margin:0;
  padding:16px 26px 9px 30px;
  rotate:var(--r,-2deg);
  filter:var(--shadow);
  font-weight:700;
  font-size:clamp(22px,6.4vw,34px);
  line-height:1.1;
  letter-spacing:.01em;
  color:var(--mint);
}
/* Two sheets, the lighter one showing at the edge, as on the title. */
.scrap::before,.scrap::after{content:"";position:absolute;z-index:-1}
.scrap::before{inset:0;background:var(--board-blue-edge);clip-path:var(--scrap-edge)}
.scrap::after{inset:4px;background:url(media/grain.webp) 0 0/256px 256px,var(--board-blue);clip-path:var(--scrap)}
.scrap span{position:relative;-webkit-text-stroke:.24em var(--ink);paint-order:stroke fill}
.scrap .pin{left:14px;top:-15px;width:34px;height:34px}

/* ---------- the top of the board ---------- */
.top{display:grid;gap:4px}
/* The key art as a print with a white border. */
.print{
  width:90%;
  margin:6px auto 0;
  padding:9px;
  background:url(media/grain.webp) 0 0/256px 256px,#FCFAF3;
  box-shadow:var(--sheet-shadow);
}
.print img{width:100%}
.print .pin--left{left:9%}
.print .pin--right{left:91%}
.title{margin:-14px -14px -22px;position:relative;z-index:1}
.title img{width:100%}
.strip{margin:0 6px;text-align:center}
.strip .sheet{padding:13px 30px 8px;font-weight:700;font-size:clamp(15px,4.4vw,24px);line-height:1.25;text-wrap:balance}
.tape{position:absolute;z-index:2;width:50px;top:50%}
.tape--left{left:-16px;translate:0 -50%;rotate:-38deg}
.tape--right{right:-16px;translate:0 -50%;rotate:40deg}

.snaps{display:flex;justify-content:center;margin:14px -8px 4px}
.snaps img{width:36%;margin:0 -1.2%;transform-origin:50% 8%}
.snaps img:nth-child(2){margin-top:12px}

/* The price tag says when it closed; the Steam link sits under it on a phone and beside it on a wider screen. */
.facts{display:grid;justify-items:start;gap:22px;margin:26px 0 8px}
.pricetag{position:relative;width:60%;aspect-ratio:500/190;rotate:var(--r);filter:var(--shadow);z-index:1}
.pricetag svg{position:absolute;inset:0;width:100%;height:100%}
.pricetag p{
  position:absolute;
  inset:0 6% 0 21%;
  margin:0;
  display:flex;
  align-items:center;
  font-weight:700;
  font-size:clamp(14px,4.2vw,22px);
  line-height:1.2;
  padding-top:.2em;
}
.closed{margin:26px 2px 0}

/* ---------- a link in the shape of the game's own buttons ---------- */
.steam{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.66em 1.1em .44em;
  background:var(--button);
  color:var(--ink);
  font-weight:700;
  font-size:1.12rem;
  line-height:1.1;
  text-decoration:none;
  border:3px solid var(--ink);
  border-radius:13px;
  box-shadow:0 5px 0 var(--ink),0 9px 10px rgba(20,10,0,.35);
}
.steam:hover{background:#B4F8F4}
.steam:active{translate:0 5px;box-shadow:none}
.steam-mark{flex:none;width:1.4em;height:1.4em;margin-top:-.22em}
.steam-row{margin:0;text-align:center}

/* ---------- sheets of copy ---------- */
.lined{
  background:
    linear-gradient(to right,transparent 0 32px,#F2A7A0 32px 34px,transparent 34px) 0 0/100% 100%,
    url(media/grain.webp) 0 0/256px 256px,
    var(--sheet,var(--paper));
  padding-left:46px;
}
.sheet p{margin:0 0 .8em}
.sheet p:last-child{margin-bottom:0}
.sheet strong{font-weight:700}

/* ---------- our accounts, each on a pin-back badge ---------- */
.badge{
  flex:none;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:3px solid var(--ink);
  border-radius:50%;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.75) 0 9%,transparent 10%),var(--badge);
  box-shadow:0 3px 0 var(--ink);
  color:var(--ink);
}
.badge svg{width:22px;height:22px}
.badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.badges .badge{width:48px;height:48px;box-shadow:0 3px 0 var(--ink),0 8px 9px rgba(20,10,0,.35)}
.badges .badge:nth-child(odd){rotate:-5deg}
.badges li:nth-child(even) .badge{rotate:4deg}
.badge:active{translate:0 3px;box-shadow:none}

/* ---------- the winners: four prints pinned to the board ---------- */
.winners-h{margin:52px 0 34px 8px}
.winners{list-style:none;margin:0 auto;padding:0;display:grid;gap:54px;max-width:1064px}
.entry{
  margin:0 4px;
  padding:9px 9px 0;
  background:url(media/grain.webp) 0 0/256px 256px,#FCFAF3;
  box-shadow:var(--sheet-shadow);
}
.art{background:#E3D8C0}
.art img{width:100%}
/* The pixel art keeps hard edges, on a mat the console's teal stands out against. */
.art--pixel{padding:18px 0;background:#FFF1B8}
.art--pixel img{width:68%;margin:0 auto;image-rendering:pixelated}
.art--two{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:none}
/* The place, on a badge like the ones the accounts wear. */
.rank{
  position:absolute;
  z-index:3;
  top:-22px;
  right:-10px;
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  padding-top:.15em;
  border:3px solid var(--ink);
  border-radius:50%;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.75) 0 9%,transparent 10%),var(--note);
  box-shadow:0 3px 0 var(--ink);
  font-size:1.3rem;
  font-weight:700;
  line-height:1;
  rotate:8deg;
}
.entry figcaption{padding:16px 6px 22px}
.entry h3{margin:0 0 .25em;font-size:1.5rem;font-weight:700;line-height:1.2}
.entry h3 small{display:block;margin-top:.1em;font-size:.82rem;font-weight:500;line-height:1.3}
.entry p{margin:0 0 .5em}
.entry p:last-child{margin-bottom:0}
.piece{font-weight:700;font-size:1.08rem;color:var(--red)}
.fav{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  margin:0 0 .6em !important;
  padding:.38em .8em .2em;
  background:var(--gold);
  border:2.5px solid var(--ink);
  border-radius:999px;
  box-shadow:0 3px 0 var(--ink);
  font-size:.92rem;
  font-weight:700;
  line-height:1.1;
  rotate:-2deg;
}
.fav svg{flex:none;width:1.15em;height:1.15em;margin-top:-.2em}
/* Said to a screen reader, not drawn: the badge already shows the place. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

footer{margin:48px 0 0;display:grid;justify-items:center;gap:22px}
footer p{margin:0;font-size:.85rem;font-weight:700;color:var(--cream);text-shadow:0 1px 2px rgba(40,18,0,.8)}

/* ---------- wider screens: the board spreads out ---------- */
@media (min-width:600px){
  .board{padding-inline:28px}
  .snaps img{width:30%}
  .facts{grid-template-columns:auto auto;justify-content:start;align-items:center;gap:30px}
  .pricetag{width:230px}
}
@media (min-width:760px){
  .winners{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;align-items:start}
  .winners li:nth-child(even){margin-top:64px}
}
@media (min-width:900px){
  body{font-size:17.5px}
  .top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center;padding-top:10px}
  .title{margin:-14px -20px -22px}
  .strip .sheet{font-size:22px}
  .pricetag p{font-size:19px}
  .winners-h{margin-top:64px}
}

/* ---------- pinned things sway a little, unless the visitor asked for less motion ---------- */
@media (prefers-reduced-motion:no-preference){
  /* A pinned thing swings from its pin, a couple of degrees either side of where it hangs. */
  .sway{animation:sway 4.6s ease-in-out infinite;animation-delay:var(--d,0s)}
  @keyframes sway{
    0%,100%{rotate:calc(var(--r,0deg) - 2deg)}
    50%{rotate:calc(var(--r,0deg) + 2deg)}
  }
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}