/* The games corner: the other wall of the homepage's room. The catalogue is a wall of
   board-game boxes standing on shelves. Loaded after hub-index.css, which still owns the
   top bar, filters and dialogs. Box and shelf sizes are 0.6x their art (room/box.webp is
   240x300 with a 200px cover square at 16,33 and a title band at y 241; room/shelf.webp
   is 1200x72 with its top surface at y 14). */
:root{--room:url('./room/play-room.webp')}
body{background:#0b0e16 var(--room) center bottom/cover fixed no-repeat}
/* The same room with the season in its window (index.html sets data-season before the first paint). */
[data-season="autumn"]{--room:url('./room/play-room-autumn.webp')}
[data-season="spring"]{--room:url('./room/play-room-spring.webp')}
[data-season="winter"]{--room:url('./room/play-room-winter.webp')}
body::before{content:'';position:fixed;inset:0;z-index:-1;background:rgba(8,10,16,.25)}
main{width:min(1140px,59vw);margin:0 auto 0 18vw;padding-top:22px}
.head h1,.head p,.count{text-shadow:0 1px 6px #000}

.catalogue{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:26px 0;padding-top:8px}
.game,.game:not(.upcoming):hover{display:block;position:relative;min-height:0;padding:0 10px 30px;border:0;background:none;overflow:visible;transform:none;text-align:center}
.game:before{display:none}
/* The shelf runs unbroken behind every box in a row: hub.js sets --shelf-x to the box's
   offset so the plank's grain carries on from one box to the next. */
.game:after{content:'';position:absolute;left:0;right:0;bottom:0;height:43px;background:url('./room/shelf.webp') var(--shelf-x,0) 0/720px 43px repeat-x;pointer-events:none}
.game .thumb{position:relative;z-index:1;width:144px;height:180px;min-height:0;margin:0 auto;border:0;background:none;overflow:visible;transition:transform .16s ease}
.game .thumb:after{inset:0;box-shadow:none;background:url('./room/box.webp') 0 0/100% 100%}
.game .cover{position:absolute;left:9.6px;top:19.8px;width:120px;height:120px;image-rendering:pixelated;background:#1a222c url('/bg/city-posters-square.png') 0 0/960px auto}
.game .cover .generic-mark{display:grid;place-items:center;height:100%}
.game:not(.upcoming):hover .thumb,.game:focus-visible .thumb{transform:translateY(-7px)}
.game:focus-visible{outline:none}
.game:focus-visible .thumb{outline:2px solid var(--orange);outline-offset:3px}

.game .copy{position:static;padding:0}
.game .title-row{position:absolute;z-index:2;left:50%;top:145px;width:120px;height:33px;margin-left:-60px;justify-content:center;pointer-events:none;transition:transform .16s ease}
.game:not(.upcoming):hover .title-row,.game:focus-visible .title-row{transform:translateY(-7px)}
.game .copy h2{font:500 10.5px/1.05 var(--mono);letter-spacing:.02em;color:var(--cream);white-space:normal;text-align:center}
.game .title-row{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;overflow:visible}
.game .title-row>*{flex:none}
.game .facts{font:500 8px/1.1 var(--mono);letter-spacing:.04em;color:var(--cream);opacity:.72;white-space:nowrap;overflow:visible;max-width:none}
.game .badge,.game .go{display:none}
/* What is in the box, shown when it is picked up. */
.game .blurb{position:absolute;z-index:6;left:50%;top:calc(100% - 22px);width:230px;margin-left:-115px;padding:10px 12px;border:1px solid #2d3d43;background:#0c0f14;box-shadow:0 10px 24px #000a;text-align:left;opacity:0;visibility:hidden;transition:opacity .14s ease}
.game:hover .blurb,.game:focus-visible .blurb{opacity:1;visibility:visible}
.game .blurb p{margin:0 0 8px;color:#c4cccb;font:11px/1.45 var(--sans);display:block;overflow:visible}
.game.upcoming .thumb{opacity:.6}

/* From 900px the shelves are a case built into the wall (hub.js adds "built-in" and places
   the boxes): a recess with planks across it, each place holding a stack of boxes. The one
   at the front (data-depth 0) is the one to pick up; those behind it stand up and to the
   right in the shadow until the shelves are turned. */
.catalogue.built-in{position:relative;gap:26px 0;padding:24px 14px 0;border:11px solid #2b1b11;border-image:linear-gradient(#523524,#2a1a10 40%,#21140c) 1;background:linear-gradient(#060913,#0a0e1a);box-shadow:inset 0 22px 34px #000e,inset 16px 0 26px #000a,inset -16px 0 26px #000a,inset 0 -8px 16px #0008,0 1px 0 #ffffff14,0 16px 30px #0007}
.built-in .game:after{display:none}
.built-in .plank{align-self:end;height:43px;margin:0 -14px;background:url('./room/shelf.webp') 0 0/720px 43px repeat-x;pointer-events:none}
.built-in .game{z-index:3;transition:transform .34s cubic-bezier(.3,.7,.3,1),filter .34s ease,opacity .2s ease}
.built-in .game[data-depth="1"]{z-index:2;transform:translate(14px,-13px) scale(.96);filter:brightness(.46) saturate(.7);pointer-events:none}
.built-in .game[data-depth="2"]{z-index:1;transform:translate(26px,-24px) scale(.92);filter:brightness(.28) saturate(.6);pointer-events:none}
.built-in .game[data-depth="3"]{z-index:0;opacity:0;visibility:hidden;pointer-events:none}
/* The box being looked at comes in front of its neighbours, so its description is not hidden by the box below. */
.built-in .game[data-depth="0"]:hover,.built-in .game[data-depth="0"]:focus-visible{z-index:8}
.built-in .game:not([data-depth="0"]) .blurb{display:none}
/* Only the built-in case fits its boxes to the wall; the narrow-screen shelves keep their sizes. */
.catalogue.built-in{row-gap:var(--row-gap,26px);padding-top:calc(24px * var(--box-scale,1))}
.built-in .game,.built-in .game:not(.upcoming):hover{padding:0 calc(10px * var(--box-scale,1)) calc(30px * var(--box-scale,1))}
.built-in .plank{height:calc(43px * var(--box-scale,1));background-size:calc(720px * var(--box-scale,1)) calc(43px * var(--box-scale,1))}
.built-in .game .thumb{width:calc(144px * var(--box-scale,1));height:calc(180px * var(--box-scale,1))}
.built-in .game .cover{transform:scale(var(--box-scale,1));transform-origin:top left;left:calc(9.6px * var(--box-scale,1));top:calc(19.8px * var(--box-scale,1))}
.built-in .game .title-row{top:calc(145px * var(--box-scale,1));width:calc(120px * var(--box-scale,1));height:calc(33px * var(--box-scale,1));margin-left:calc(-60px * var(--box-scale,1))}
.built-in.fitted .game .copy h2{font-size:11px;line-height:1.05}
@media(min-width:900px){
  main{padding-bottom:4px}
  .note{margin-top:12px;padding-top:8px;padding-bottom:8px}
  .status:empty{display:none}
  main footer{margin-top:4px;padding-top:0;border:0;align-items:start}
  main footer>div{padding:3px 6px;background:#0c0f14e6}
}
/* The page's own controls sit in front of the room's click spots (the generator is behind them). */
.shelf-turn,.note,main footer{position:relative;z-index:2}
.shelf-turn{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-top:8px;color:#b9a888;font:9px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.shelf-turn button{width:26px;height:22px;min-height:0;padding:0;border:1px solid #5a4630;border-radius:2px;background:#2a1c12;color:#e8d9b8;font:13px/1 var(--mono);box-shadow:none;cursor:pointer}
.shelf-turn button:hover{background:#3a2819}
/* The note keeps to its own words, so the floor beside it (the heater, in the cold months) shows. */
.note{background:#0c0f14e6;width:fit-content;max-width:100%}
.tools .search{flex:1 1 150px;min-width:120px;max-width:240px;margin-left:auto;height:27px;padding:0 8px;border:1px solid #34444a;border-radius:3px;background:#0c0f14;color:var(--cream);font:10px var(--mono);letter-spacing:.04em}
.tools .search::placeholder{color:#718083}

/* A cork board hangs beside the case, inside the same wall footprint. The art
   has 6% clear air above its frame; raise that air so the wood lines up. */
.table-board{position:relative;z-index:2;width:clamp(180px,15vw,250px);aspect-ratio:600/784;background:url('./room/board.webp') center/100% 100% no-repeat;scroll-margin-top:80px;outline-offset:3px}
.table-cork{position:absolute;inset:13% 10% 10% 9%}
.table-notes{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));align-items:center;gap:0 2%;height:100%;margin:0;padding:0;list-style:none}
.table-note{position:relative;min-width:0;aspect-ratio:1;transform:rotate(var(--tilt));transform-origin:50% 16%;background:url('./room/note-card.webp') center/100% 100% no-repeat}
.table-note[data-paper="sticky"]{background-image:url('./room/note-sticky.webp')}
.table-note[data-paper="paper"]{background-image:url('./room/note-paper.webp')}
.table-note[data-side="right"]{align-self:end}
.table-note{container-type:inline-size}
.table-ink{position:absolute;inset:27% 16% 19% 16%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.2em;min-width:0;margin:0;padding:0;border:0;box-shadow:none;background:none;color:#2a2118;text-align:center;text-transform:lowercase;font:600 10.5cqi/1.1 var(--mono);letter-spacing:0}
.table-ink span{display:block;max-width:100%;overflow-wrap:anywhere}
/* Lift a note off the cork to read it, as you would. */
@media(hover:hover) and (min-width:900px){.table-note:not(.pinning):not(.unpinning){transition:transform .16s ease}.table-note:not(.pinning):not(.unpinning):is(:hover,:focus-within){z-index:4;transform:rotate(var(--tilt)) scale(1.55)}}
a.table-ink,button.table-ink{cursor:pointer}
.table-ink:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.table-note-muted{filter:opacity(.76)}
.table-note-empty{grid-area:1/1/3/3!important;justify-self:center;align-self:start;width:94%;max-width:180px}
.table-note-empty .table-ink{gap:.5em;font-size:9cqi}
.table-note-empty .table-ink span:last-child{text-decoration:underline;text-underline-offset:3px}
.table-totals{position:absolute;left:7%;right:8%;bottom:6.8%;margin:0;color:#e8d9b8;text-shadow:0 1px 1px #100b08;text-align:center;white-space:nowrap;font:10px/1 var(--mono);letter-spacing:-.04em}
.table-board.board-found{outline:2px solid var(--orange)}
.table-board:focus:not(:focus-visible){outline:none}
.table-board.board-found:focus{outline:2px solid var(--orange)}
@keyframes pin-note{0%{opacity:0;transform:translateY(-14px) rotate(calc(var(--tilt) + 4deg))}75%{opacity:1;transform:translateY(2px) rotate(calc(var(--tilt) - 1deg))}100%{opacity:1;transform:translateY(0) rotate(var(--tilt))}}
@keyframes unpin-note{to{opacity:0;transform:translateY(-10px) rotate(calc(var(--tilt) + 3deg))}}
.table-note.pinning{animation:pin-note 280ms ease-out both}
.table-note.unpinning{z-index:3;pointer-events:none;animation:unpin-note 220ms ease-in both}
@media(min-width:900px){
  main{display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,15vw,250px);column-gap:16px;align-items:start}
  main>.head,main>.tools,main>.note,main>.status,main>footer{grid-column:1/-1;min-width:0}
  .catalogue{grid-column:1;grid-row:3;min-width:0}
  .table-board{grid-column:2;grid-row:3;margin-top:calc(clamp(180px,15vw,250px) * -.08)}
  .shelf-turn{grid-column:1}
}
@media(max-width:899px){
  .table-board{width:100%;aspect-ratio:auto;margin:4px 0 20px;padding:4px 3px 22px;background-size:150% auto;background-position:50% 45%;border-top:6px solid #523524;border-right:6px solid #2b1b11;border-bottom:6px solid #21140c;border-left:6px solid #3b281c;box-shadow:none}
  .table-cork{position:static}
  .table-notes{display:flex;gap:4px;height:148px;overflow-x:auto;overflow-y:hidden;padding:10px 4px 4px;scrollbar-color:#735337 #2b211b;scrollbar-width:thin}
  .table-note,.table-note-empty{flex:0 0 126px;width:126px;max-width:none;align-self:center!important;order:var(--slot)}
  .table-note-empty{flex-basis:174px;width:174px}
  .table-note-empty .table-ink{font-size:8cqi}
  .table-ink{font-size:10px}
  .table-totals{bottom:5px}
  .table-note.unpinning{position:absolute;left:calc(4px + var(--slot) * 130px);width:126px}
}
@media(prefers-reduced-motion:reduce){.table-note.pinning,.table-note.unpinning{animation:none}}

/* The way back to the homepage: a wooden arrow like the signs on its windowsill. */
.top-left{display:flex;align-items:center;gap:16px;min-width:0}
.back{flex:none;padding:7px 12px 7px 24px;color:#ecdcb9;font:500 11px/1 var(--mono);letter-spacing:.04em;white-space:nowrap;background:repeating-linear-gradient(1deg,rgba(0,0,0,.12) 0 1px,transparent 1px 7px),linear-gradient(#6a4528,#4b2f1a);clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%);text-shadow:0 1px 0 rgba(0,0,0,.5)}
.back:hover,.back:focus-visible{color:var(--orange);filter:brightness(1.25)}
@media(max-width:560px){.back{font-size:0;padding:7px 10px 7px 20px}.back span{font-size:12px}}
/* Coming from the homepage, and going back: the view darkens gently and slides, as if
   turning between the window and this wall (hub-room.js adds the classes). */
.power{position:fixed;inset:0;z-index:30;background:#05070b;opacity:0;pointer-events:none}
@keyframes hub-in{from{opacity:1}to{opacity:0}}
@keyframes hub-out{from{opacity:0}to{opacity:1}}
@keyframes hub-slide-in{from{transform:translateX(48px)}to{transform:none}}
@keyframes hub-slide-out{from{transform:none}to{transform:translateX(48px)}}
/* Opening a box follows the link at once. The game fades in through this night for a
   tenth of a second (ui/open-game.js). Coming back, the box can still cross in that long. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:100ms}
::view-transition-group(game-open){animation-duration:100ms;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@media(prefers-reduced-motion:no-preference){
  .arriving .power{animation:hub-in 1.4s cubic-bezier(.3,0,.2,1) both}
  .arriving main{animation:hub-slide-in 1.4s cubic-bezier(.2,.7,.2,1) both}
  .leaving .power{animation:hub-out .8s cubic-bezier(.5,0,.8,.6) both}
  .leaving main{animation:hub-slide-out .8s cubic-bezier(.5,0,.8,.6) both}
}
/* The generator is painted into the room (room/play-room.webp); this is the spot over it.
   When it coughs or is clicked, smoke puffs from the top of its exhaust stack. */
.generator{padding:0;border:0;cursor:pointer;position:fixed;z-index:1;background:none}
.generator i{position:absolute;left:9.5%;top:0;width:22px;height:22px;margin:-11px;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(circle,rgba(214,208,198,.9),rgba(160,156,150,0) 72%)}
@keyframes hub-puff{0%{opacity:0;transform:scale(.5)}18%{opacity:.95}100%{opacity:0;transform:translate(var(--drift),-90px) scale(3)}}
.generator.coughing i{animation:hub-puff 1.2s ease-out}
.generator i:nth-child(1){--drift:-14px}
.generator i:nth-child(2){--drift:10px;animation-delay:.14s}
.generator i:nth-child(3){--drift:-4px;animation-delay:.3s}
/* Things in the picture that answer to a click (hub-room.js places them over the art). */
.spot{position:fixed;z-index:1;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}
.spot:hover{background-color:#e8915f14;box-shadow:0 0 0 1px #e8915f55}
.room-says{position:fixed;right:max(12px,3vw);bottom:46vh;z-index:3;max-width:200px;margin:0;padding:8px 11px;border:1px solid #3a4950;border-radius:10px 10px 2px 10px;background:#0c0f14;color:var(--cream);font:11px/1.45 var(--mono);box-shadow:0 8px 20px #0009}
.lamp-off body::before{background:rgba(5,7,12,.62)}
@media(max-width:1100px){.room-spots,.room-says{display:none}}
footer{text-shadow:0 1px 4px #000}
@media(max-width:1100px){
  body::before{background:rgba(8,10,16,.72)}
  main{width:calc(100% - 24px);margin:0 auto}
}
@media(max-width:560px){
  .catalogue{grid-template-columns:repeat(2,1fr)}
  .game .blurb{display:none}
}
@media(hover:none){.game .blurb{display:none}}
/* Phones and narrow windows: a plain wall behind the shelves, and the mascot's corner of the
   room as a picture at the foot of the page, so boxes never float over the floor. */
@media(max-width:899px){
  body{background:linear-gradient(#0e1430,#0a0e1e 60%,#090c16) fixed}
  body::before{display:none}
  main{padding-bottom:0}
  main::after{content:'';display:block;height:300px;margin:26px -12px 0;background:var(--room) right bottom/auto 540px no-repeat;-webkit-mask-image:linear-gradient(transparent,#000 70px);mask-image:linear-gradient(transparent,#000 70px)}
  .topbar{gap:10px;padding:8px 12px}
  .top-left{gap:10px}
  .top-actions button{white-space:nowrap}
  .tools{flex-wrap:wrap;overflow:visible}
  .tools .search{order:-1;flex:1 0 100%;max-width:none;margin:0 0 6px;height:36px;font-size:13px}
  .chip{padding:8px 10px;font-size:10px}
}
@media(max-width:620px){.brand span,#player-name{display:none!important}}