/* Pin World's look, shared by the site (index.html), the video templates (video/*.html) and the
   social pictures (video/profile.html, video/banner.html). A bright game world, medieval.

   Fonts (load assets/fonts/fonts.css where this is used; source/licences in assets/CREDITS.md):
     New Rocker  headings, the logo, DAY n, town and kingdom names
     Lilita One  usernames, numbers, buttons: chunky and easy to read small
     Nunito      everything you read in sentences */
:root {
  --pw-ink: #2b1d14;            /* every outline */
  --pw-ink-soft: #6a5240;
  --pw-sea: #3fa7dc; --pw-sea-deep: #2a7fb8; --pw-sea-light: #8fd3f2;
  --pw-grass: #8cc557; --pw-grass-dark: #5d9a35; --pw-forest: #3f7a2c;
  --pw-gold: #ffc928; --pw-gold-light: #ffe680; --pw-gold-dark: #c98a00;
  --pw-red: #e23d3d; --pw-red-dark: #a3212a;
  --pw-blue: #3a7bdc; --pw-blue-dark: #22509f;
  --pw-green: #3fa34d; --pw-green-dark: #22712f;
  --pw-purple: #9a5cf0; --pw-purple-dark: #5f2fb0;
  --pw-parch: #fff4d6; --pw-parch-2: #f6dfab; --pw-parch-edge: #c9965a;
  --pw-wood: #b06b33; --pw-wood-dark: #6e3b16;
  --pw-stone: #d9d2c6; --pw-stone-dark: #8d8274;
  --pw-white: #fffaf0;
  --pw-display: "New Rocker", "Lilita One", serif;
  --pw-game: "Lilita One", "Nunito", system-ui, sans-serif;
  --pw-body: "Nunito", system-ui, sans-serif;
  /* a chunky drop under things, like a game button sitting on the table */
  --pw-lift: 0 5px 0 var(--pw-ink), 0 9px 18px rgba(20, 30, 50, 0.28);
  --pw-lift-sm: 0 3px 0 var(--pw-ink), 0 5px 10px rgba(20, 30, 50, 0.25);
}

/* outlined lettering: white or gold with an ink outline and a hard drop */
.pw-outline, .pw-gold-text {
  color: var(--pw-white);
  text-shadow: -2px -2px 0 var(--pw-ink), 2px -2px 0 var(--pw-ink), -2px 2px 0 var(--pw-ink), 2px 2px 0 var(--pw-ink),
    0 -2px 0 var(--pw-ink), 0 2px 0 var(--pw-ink), -2px 0 0 var(--pw-ink), 2px 0 0 var(--pw-ink), 0 5px 0 var(--pw-ink);
}
.pw-gold-text { color: var(--pw-gold); }
.pw-outline.thick, .pw-gold-text.thick {
  text-shadow: -3px -3px 0 var(--pw-ink), 3px -3px 0 var(--pw-ink), -3px 3px 0 var(--pw-ink), 3px 3px 0 var(--pw-ink),
    0 -3px 0 var(--pw-ink), 0 3px 0 var(--pw-ink), -3px 0 0 var(--pw-ink), 3px 0 0 var(--pw-ink), 0 8px 0 var(--pw-ink), 0 12px 20px rgba(0, 0, 0, .35);
}

/* chunky buttons: a coloured slab with a shine on top, pressed down when tapped */
.pw-btn {
  --c: var(--pw-gold); --c2: var(--pw-gold-dark); --t: var(--pw-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 400 18px/1 var(--pw-game); letter-spacing: .3px; color: var(--t);
  padding: 11px 18px 12px; border: 3px solid var(--pw-ink); border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, white) 0 42%, var(--c) 42% 100%);
  box-shadow: inset 0 -5px 0 var(--c2), 0 4px 0 var(--pw-ink), 0 7px 14px rgba(20, 30, 50, .25);
  transition: transform .08s, box-shadow .08s; -webkit-user-select: none; user-select: none;
}
.pw-btn:active, .pw-btn.down { transform: translateY(3px); box-shadow: inset 0 -3px 0 var(--c2), 0 1px 0 var(--pw-ink), 0 2px 6px rgba(20, 30, 50, .25); }
.pw-btn.red { --c: var(--pw-red); --c2: var(--pw-red-dark); --t: var(--pw-white); }
.pw-btn.blue { --c: var(--pw-blue); --c2: var(--pw-blue-dark); --t: var(--pw-white); }
.pw-btn.green { --c: var(--pw-green); --c2: var(--pw-green-dark); --t: var(--pw-white); }
.pw-btn.parch { --c: var(--pw-parch); --c2: var(--pw-parch-edge); }
.pw-btn.red, .pw-btn.blue, .pw-btn.green { text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }

/* parchment panels with a stitched inner edge */
.pw-panel {
  position: relative; background: linear-gradient(180deg, var(--pw-parch), var(--pw-parch-2));
  border: 3px solid var(--pw-ink); border-radius: 20px; box-shadow: var(--pw-lift);
}
.pw-panel::before {
  content: ""; position: absolute; inset: 6px; border: 2px dashed rgba(150, 100, 50, .45); border-radius: 14px; pointer-events: none;
}

/* a red ribbon banner with folded tails, for headings */
.pw-ribbon {
  position: relative; display: inline-block; padding: 7px 22px 9px; margin: 0 18px;
  font: 400 22px/1 var(--pw-display); color: var(--pw-white); letter-spacing: .5px; white-space: nowrap;
  background: linear-gradient(180deg, #f05252 0 45%, var(--pw-red) 45%); border: 3px solid var(--pw-ink); border-radius: 6px;
  box-shadow: inset 0 -4px 0 var(--pw-red-dark), 0 4px 0 var(--pw-ink);
  text-shadow: -1.5px -1.5px 0 var(--pw-ink), 1.5px -1.5px 0 var(--pw-ink), -1.5px 1.5px 0 var(--pw-ink), 1.5px 1.5px 0 var(--pw-ink), 0 3px 0 var(--pw-ink);
}
.pw-ribbon::before, .pw-ribbon::after {   /* the tails */
  content: ""; position: absolute; top: 9px; width: 22px; height: 100%; z-index: -1;
  background: var(--pw-red-dark); border: 3px solid var(--pw-ink);
}
.pw-ribbon::before { left: -19px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 38% 50%); border-right: 0; }
.pw-ribbon::after { right: -19px; clip-path: polygon(0 0, 100% 0, 62% 50%, 100% 100%, 0 100%); border-left: 0; }
.pw-ribbon.gold { color: var(--pw-ink); text-shadow: 0 2px 0 rgba(255, 255, 255, .45);
  background: linear-gradient(180deg, var(--pw-gold-light) 0 45%, var(--pw-gold) 45%); box-shadow: inset 0 -4px 0 var(--pw-gold-dark), 0 4px 0 var(--pw-ink); }
.pw-ribbon.gold::before, .pw-ribbon.gold::after { background: var(--pw-gold-dark); }

/* counters: an icon in a coin and a number */
.pw-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 4px;
  font: 400 20px/1 var(--pw-game); color: var(--pw-white); white-space: nowrap;
  background: rgba(43, 29, 20, .82); border: 3px solid var(--pw-ink); border-radius: 999px; box-shadow: var(--pw-lift-sm);
  text-shadow: 0 2px 0 var(--pw-ink);
}
.pw-chip > i {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal; font-size: 17px;
  background: radial-gradient(circle at 35% 30%, var(--pw-gold-light), var(--pw-gold) 60%, var(--pw-gold-dark)); border: 2px solid var(--pw-ink);
  text-shadow: none;
}
.pw-chip small { font: 900 11px/1 var(--pw-body); letter-spacing: 1px; opacity: .85; text-transform: uppercase; }

/* heraldic shield with an icon: the rank badge */
.pw-shield {
  --c: var(--pw-parch); display: inline-grid; place-items: center; width: 30px; height: 34px; font-size: 16px; flex: none;
  background: var(--pw-ink); clip-path: path("M15 0 L30 4 L30 16 C30 26 22 31 15 34 C8 31 0 26 0 16 L0 4 Z");
  position: relative;
}
.pw-shield::before {
  content: ""; position: absolute; inset: 2.5px; z-index: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 65%, white) 0 45%, var(--c) 45%);
  clip-path: path("M12.5 0 L25 3.4 L25 13.4 C25 21.7 18.3 25.9 12.5 28.5 C6.7 25.9 0 21.7 0 13.4 L0 3.4 Z");
}
.pw-shield > * { position: relative; z-index: 1; }

/* rank colours, everywhere: gold for rulers, red for the court, blue for town offices, parchment for everyone */
.pw-r3 { --c: var(--pw-gold); --c2: var(--pw-gold-dark); --t: var(--pw-ink); }
.pw-r2 { --c: var(--pw-red); --c2: var(--pw-red-dark); --t: var(--pw-white); }
.pw-r1 { --c: var(--pw-blue); --c2: var(--pw-blue-dark); --t: var(--pw-white); }
.pw-r0 { --c: var(--pw-parch); --c2: var(--pw-parch-edge); --t: var(--pw-ink); }
.pw-rare { --c: var(--pw-purple); --c2: var(--pw-purple-dark); --t: var(--pw-white); }

/* the address, as a chunky parchment pill */
.pw-url {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font: 400 30px/1 var(--pw-game); color: var(--pw-ink);
  background: var(--pw-parch); border: 3px solid var(--pw-ink); border-radius: 999px; padding: 10px 26px 12px 16px; box-shadow: var(--pw-lift);
}
.pw-url b { font-weight: 400; color: var(--pw-red); }