/* YAKUN website. Each page has a desktop view and a phone view, each drawn on its own design's pixel grid:
   one design pixel is var(--u). Elements carry their design box as --x, --y, --w, --h. */
:root {
  --cream: #f3e7d3;
  --maroon-ink: #3a0a08;
  --maroon-num: #7a0e0a;
  --navy: #14223f;
  --gold: #e6b65c;
  --orange: #f08a2c;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--navy) var(--repeat) repeat;
  background-size: min(470px, 40vw);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; }
[hidden], .hide { display: none !important; }

/* views: desktop one-screen pages fit the window, long pages and phone pages fit its width and scroll */
.view { position: relative; --u: min(calc(100vw / var(--dw)), calc(100vh / var(--dh))); }
.view.long, .view.mob { --u: calc(100vw / var(--dw)); }
.view.mob { display: none; }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  .view.desk { display: none; }
  .view.mob { display: block; }
}
html[data-view=mobile] .view.desk { display: none; }
html[data-view=mobile] .view.mob { display: block; }
html[data-view=desktop] .view.desk { display: block; }
html[data-view=desktop] .view.mob { display: none; }
/* pages with only a phone design: that design on every screen; on a wide window a column in the middle */
:root { --col: min(100vw, 600px); }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) { :root { --col: 100vw; } }
html[data-view=mobile] { --col: 100vw; }
.view.mob.only, html[data-view=desktop] .view.mob.only { display: block; width: var(--col); margin: 0 auto; --u: calc(var(--col) / var(--dw)); }
.view.mob.only .stage { box-shadow: 0 0 calc(var(--u) * 60) rgba(0, 0, 0, .55); }

/* the painting fills the window behind a desktop page; the ground sits on the window's bottom edge */
.scene { position: fixed; inset: 0; z-index: -2; background: center top / cover no-repeat; }
.ground { position: fixed; left: 0; right: 0; bottom: 0; z-index: -1; height: calc(100vw * var(--gh) / var(--dw)); background: center bottom / 100% 100% no-repeat; pointer-events: none; }
.hdrbar { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--u) * var(--hh)); background: left top / 100% 100% no-repeat; }
.stage { position: relative; margin: 0 auto; width: calc(var(--u) * var(--dw)); height: calc(var(--u) * var(--H)); }
.view.mob .stage, .view.long .stage { overflow: hidden; }

.a {
  position: absolute; display: block;
  left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y));
  width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h));
}
img.a, .fill { user-select: none; -webkit-user-drag: none; }
.fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.flip { transform: scaleX(-1); }
.scene-img, .ground-img { pointer-events: none; }

/* one-colour icons, coloured here */
.ico {
  background: var(--c, #f1e2ce);
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.ico.dark { --c: #3b0b08; }
.ico.gold { --c: var(--gold); }
.ico.orange { --c: var(--orange); }

/* live text: site.js sets size, spacing and exact position from data-box (x, y, width, cap height) */
.t { position: absolute; left: 0; top: 0; white-space: nowrap; line-height: 1; visibility: hidden; }
.t.ready { visibility: visible; }
.light { color: var(--cream); text-shadow: 0 calc(var(--u) * 1) 0 rgba(6, 10, 20, .85), 0 0 calc(var(--u) * 4) rgba(0, 0, 0, .35); }
.f-nav { font-family: 'Alegreya SC', serif; font-weight: 500; }
.f-disp { font-family: 'Cinzel', serif; font-weight: 700; }
.f-cond { font-family: 'Roboto Serif', serif; font-weight: 700; font-stretch: condensed; }
.f-semi { font-family: 'Roboto Serif', serif; font-weight: 600; }
.f-serif { font-family: 'Roboto Serif', serif; font-weight: 400; }

/* flowing text */
.p { height: auto; margin: 0; font-size: calc(var(--u) * var(--fs)); line-height: calc(var(--u) * var(--lh)); white-space: normal; font-variation-settings: 'opsz' var(--fs); }
.p.h { height: calc(var(--u) * var(--h)); overflow: hidden; }

/* thin lines drawn in code */
.vline { background: linear-gradient(to bottom, transparent, #efe7d8 25%, #efe7d8 75%, transparent); box-shadow: calc(var(--u) * -1) 0 0 rgba(0, 0, 0, .45), calc(var(--u) * 1) 0 0 rgba(0, 0, 0, .45); }
.hline { background: linear-gradient(to right, transparent, #f4efe3 30%, #f4efe3 70%, transparent); box-shadow: 0 calc(var(--u) * 1) 0 rgba(0, 0, 0, .5); }
.hline.solid { background: rgba(236, 226, 208, .55); box-shadow: none; }
.rule { background: rgba(236, 226, 208, .28); }

/* links and plates: hover a little brighter with a warm edge glow, pressed a little darker */
.navlink .t { transition: color .12s; }
.navlink:hover .t { color: #fffaf0; }
.navlink:active .t { color: #cdb9a5; }
.under { opacity: 0; transition: opacity .12s; pointer-events: none; }
.under.on { opacity: 1; }
.navlink:hover .under:not(.on) { opacity: .4; }
.navlink:hover .ico { --c: #fffaf0; }
.btn { cursor: pointer; transition: filter .12s ease-out; }
.btn:hover, .btn:focus-visible { filter: brightness(1.1) drop-shadow(0 0 calc(var(--u) * 5) rgba(240, 184, 96, .45)); outline: none; }
.btn:active { filter: brightness(.88); transition: none; }
.btn.off, .btn:disabled { cursor: default; filter: grayscale(.5) brightness(.7); }
.card { transition: transform .2s ease-out, filter .2s; cursor: pointer; }
.card:hover { transform: translateY(calc(var(--u) * -3)); filter: brightness(1.05); }
.link { cursor: pointer; }
.link:hover .t { color: #fffaf0; }
.uline { background: currentColor; opacity: .8; }
.link .uline { background: #efe2cc; }

/* form fields: a plate (or the design's underline) with the input over it */
.fld input, .inp {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; outline: 0; background: transparent;
  padding: 0 0 0 calc(var(--u) * var(--pad, 20));
  font-family: 'Roboto Serif', serif; font-size: calc(var(--u) * var(--fs, 19)); color: var(--cream);
}
.fld input::placeholder, .inp::placeholder { color: rgba(225, 214, 196, .62); }
.fld:focus-within { filter: brightness(1.12) drop-shadow(0 0 calc(var(--u) * 4) rgba(240, 184, 96, .35)); }
.fld.bad { filter: drop-shadow(0 0 calc(var(--u) * 4) rgba(230, 60, 40, .8)); }
.fld.under { border-bottom: calc(var(--u) * 2) solid rgba(236, 226, 208, .75); }
.fld.under input { padding-left: calc(var(--u) * var(--pad, 0)); }
.chk { cursor: pointer; }
.chk input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chk .tick { position: absolute; inset: 14%; background: var(--cream); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; opacity: 0; transition: opacity .1s; }
.chk input:checked ~ .tick { opacity: 1; }
.chk:hover .fill { filter: brightness(1.2); }
.boxline { border: calc(var(--u) * 2) solid rgba(236, 226, 208, .8); border-radius: calc(var(--u) * 3); }
.note { margin: 0; text-align: center; font: 500 calc(var(--u) * 19) / 1.3 'Roboto Serif', serif; color: #f6d9a8; text-shadow: 0 1px 0 #000; }

/* the phone menu (site.js) */
.drawer { --vw: 1vw; position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; overflow-y: auto;
  background: rgba(10, 16, 32, .96) var(--repeat) repeat; background-size: calc(var(--vw) * 60); padding: calc(var(--vw) * 5) calc(var(--vw) * 6) calc(var(--vw) * 10); }
.drawer .dlogo { width: calc(var(--vw) * 46); margin: calc(var(--vw) * 1) 0 calc(var(--vw) * 6); }
.drawer .dclose { position: absolute; right: calc(var(--vw) * 4); top: calc(var(--vw) * 3.5); width: calc(var(--vw) * 11); height: calc(var(--vw) * 11); cursor: pointer; }
.drawer .dclose span { position: absolute; inset: 22%; background: var(--cream); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.drawer a { position: relative; display: flex; align-items: center; gap: calc(var(--vw) * 4); width: calc(var(--vw) * 78); height: calc(var(--vw) * 15); margin: 0 0 calc(var(--vw) * 2.4); padding: 0 0 0 calc(var(--vw) * 7);
  font: 500 calc(var(--vw) * 5.4)/1 'Alegreya SC', serif; color: var(--cream); letter-spacing: .06em; text-shadow: 0 1px 0 #000; }
.drawer a img.plate { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.drawer a .ico { position: static; width: calc(var(--vw) * 7); height: calc(var(--vw) * 7); flex: none; }
.drawer a:active { filter: brightness(.88); }
.drawer .who { font: 600 calc(var(--vw) * 4.2)/1.3 'Roboto Serif', serif; color: var(--gold); margin: 0 0 calc(var(--vw) * 4); text-align: center; }
body.phone-only .drawer { --vw: calc(var(--col) / 100); left: 50%; right: auto; width: var(--col); transform: translateX(-50%); }

/* art not delivered yet */
.pending { visibility: hidden; }

/* the logged-in header's player and counters */
.dot { border-radius: 50%; background: #2fd067; box-shadow: 0 0 0 calc(var(--u) * 2) #12182a; }
.dot.off { background: #7d8594; }
.badge { border-radius: 50%; background: #d9302a; color: #fff; display: flex; align-items: center; justify-content: center;
  font: 700 calc(var(--u) * 9) / 1 'Roboto Serif', serif; box-shadow: 0 0 0 calc(var(--u) * 1.5) #12182a; }
.badge[hidden] { display: none; }
.iconlink .ico { transition: background-color .12s; }
.iconlink:hover .ico { --c: #fffaf0; }
.navplate { pointer-events: none; }