:root {
  --ink:#183756;
  --blue:#225ba5;
  --sky:#dceef9;
  --pink:#f7c1d4;
  --paper:#fffbed;
  --yellow:#f5d768;
  --green:#245e43
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#a8c9df;
  color:var(--ink);
  font-family:Trebuchet MS,Arial,sans-serif;
  font-size:16px;
  line-height:1.45
}
button,input,a {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
  border:2px solid var(--ink);
  background:var(--paper);
  padding:10px 16px;
  border-radius:7px;
  min-height:46px;
  font-weight:bold;
  box-shadow:0 3px 0 var(--ink)
}
button:hover {
  background:#fff
}
button:active,button.active {
  transform:translateY(2px);
  box-shadow:0 1px 0 var(--ink)
}
button:disabled {
  opacity:.47;
  cursor:default;
  transform:none
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:4px solid #b52c69;
  outline-offset:4px
}
button[aria-pressed=true] {
  background:var(--yellow);
  box-shadow:inset 0 0 0 2px var(--ink),0 3px 0 var(--ink)
}
button.primary {
  background:var(--blue);
  color:white;
  border-color:var(--ink);
  padding:15px 25px;
  font-size:18px
}
h1,h2,p {
  margin-top:0
}
h2 {
  font-size:22px;
  line-height:1.2
}
kbd {
  font:700 11px Trebuchet MS,Arial,sans-serif;
  display:inline-block;
  padding:1px 4px;
  background:#fff9;
  border:1px solid currentColor;
  border-radius:3px;
  color:var(--ink);
  vertical-align:middle;
  margin-left:3px
}
a {
  color:inherit
}
.stall {
  max-width:1180px;
  margin:24px auto;
  border:3px solid var(--ink);
  background:var(--paper);
  box-shadow:10px 12px 0 #18375630;
  overflow:clip;
  border-radius:14px 14px 5px 5px
}
.topbar {
  background:var(--blue);
  color:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 24px;
  gap:16px;
  font-size:14px
}
.topbar a {
  font-weight:bold;
  text-decoration:none
}
.topbar button {
  background:transparent;
  color:white;
  border:1px solid #ffffff80;
  box-shadow:none;
  min-height:36px;
  padding:4px 10px
}
.awning {
  height:38px;
  background:repeating-linear-gradient(90deg,var(--paper) 0 48px,var(--pink) 48px 96px);
  border-bottom:3px solid var(--ink);
  box-shadow:0 6px 0 #18375610
}
main {
  padding:30px 36px
}
#welcome {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 50px
}
.location {
  font-size:16px;
  font-weight:bold;
  margin:0 0 15px
}
.intro-copy h1 {
  font-family:Georgia,serif;
  font-size:clamp(64px,7vw,100px);
  line-height:.85;
  letter-spacing:-5px;
  margin:18px 0 28px;
  position:relative
}
.title-star {
  color:var(--blue);
  font-family:Georgia,serif;
  font-size:74px;
  display:inline-block;
  vertical-align:top;
  margin-left:12px
}
.intro-text {
  font-size:19px;
  max-width:370px
}
.tag {
  display:inline-block;
  border-bottom:2px solid var(--pink);
  font-size:14px;
  font-weight:bold;
  padding-bottom:5px
}
.shop-window {
  background:var(--sky);
  border:8px solid var(--blue);
  outline:2px solid var(--ink);
  border-radius:140px 140px 0 0;
  align-self:center;
  overflow:hidden;
  position:relative;
  text-align:center;
  padding-top:25px;
  max-width:430px;
  width:100%
}
.window-lettering {
  font-family:Georgia,serif;
  font-size:29px;
  font-style:italic;
  line-height:1.1
}
.shelf {
  display:flex;
  justify-content:center;
  align-items:end;
  border-bottom:8px solid var(--blue);
  margin:8px 25px 0
}
.shelf svg {
  width:95px;
  height:95px
}
.counter-illustration {
  height:130px;
  background:var(--pink);
  border-top:3px solid var(--ink);
  display:flex;
  align-items:center;
  justify-content:space-evenly
}
.counter-illustration svg {
  width:180px;
  height:125px
}
.postmark {
  border:2px dashed var(--ink);
  border-radius:50%;
  height:90px;
  width:90px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1;
  font-family:Georgia,serif;
  font-size:40px;
  transform:rotate(9deg)
}
.postmark small {
  font:14px Trebuchet MS,Arial,sans-serif
}
.window-bottom {
  background:var(--blue);
  color:white;
  font-size:11px;
  padding:6px 0
}
.start-strip {
  grid-column:1/-1;
  border-top:2px solid var(--ink);
  padding-top:22px;
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:space-between
}
fieldset {
  display:flex;
  border:0;
  margin:0;
  padding:0;
  gap:20px
}
legend {
  font-weight:bold;
  margin-bottom:8px
}
fieldset label {
  display:flex;
  align-items:flex-start;
  gap:7px;
  cursor:pointer
}
input[type=radio] {
  accent-color:var(--blue);
  width:20px;
  height:20px;
  margin:3px 0 0;
  flex-shrink:0
}
fieldset small {
  display:block;
  font-size:13px;
  max-width:180px
}
fieldset strong {
  font-size:16px
}
.start-action {
  text-align:center;
  flex-shrink:0
}
.start-action p {
  font-size:12px;
  margin:10px 0 0
}
footer {
  display:flex;
  justify-content:space-between;
  gap:10px;
  border-top:2px solid var(--ink);
  padding:12px 24px;
  font-size:12px;
  background:#e9f1ef
}
footer span {
  font-style:italic
}
.game-heading {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:15px
}
.game-heading h1 {
  font-family:Georgia,serif;
  font-size:32px;
  margin:0;
  line-height:1
}
.game-heading p {
  font-size:13px;
  margin:0
}
.game-heading button {
  margin-left:auto
}
.scoreboard {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-block:2px solid var(--ink);
  padding:10px 0;
  margin-bottom:22px
}
.scoreboard div {
  text-align:center;
  border-right:1px solid #18375640
}
.scoreboard div:last-child {
  border:none
}
.scoreboard span {
  display:block;
  font-size:12px
}
.scoreboard strong {
  font-size:26px;
  font-variant-numeric:tabular-nums;
  line-height:1.2
}
.orders-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.orders-heading h2 {
  font-size:17px;
  margin-bottom:9px
}
.orders-heading span {
  font-size:12px
}
.orders {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  min-height:145px
}
.ticket {
  border:2px solid var(--ink);
  background:#fff;
  position:relative;
  padding:12px 14px;
  box-shadow:3px 4px 0 #18375615;
  border-radius:0 0 12px 0
}
.ticket::before {
  content:'';
  position:absolute;
  top:-5px;
  left:20%;
  right:20%;
  height:7px;
  background:var(--pink);
  border:1px solid var(--ink)
}
.ticket-top {
  display:flex;
  justify-content:space-between;
  font-size:13px;
  font-weight:bold
}
.ticket-time {
  font-variant-numeric:tabular-nums;
  font-size:12px
}
.ticket-body {
  display:flex;
  gap:7px;
  align-items:center;
  margin:5px 0
}
.ticket svg {
  width:58px;
  height:58px;
  flex-shrink:0
}
.ticket strong {
  display:block;
  font-size:16px
}
.ticket .wrap-label {
  font-size:12px;
  padding:2px 5px;
  display:inline-block;
  background:var(--sky)
}
.ticket .gift {
  background:var(--pink)
}
.ticket-address {
  font-weight:bold;
  font-size:13px;
  border-top:1px dashed #18375660;
  padding-top:5px;
  display:flex;
  justify-content:space-between
}
.ticket-address small {
  font-weight:normal;
  font-size:10px
}
.ticket.urgent {
  border-color:#ae234d
}
.ticket.urgent .ticket-time {
  color:#ae234d
}
.ticket-empty {
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px dashed #18375640;
  font-size:14px;
  text-align:center
}
.handoff {
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:center;
  margin:20px 0 14px;
  min-height:23px;
  font-size:13px;
  font-weight:bold
}
.handoff-track {
  width:100px;
  height:9px;
  background:var(--sky);
  border:1px solid var(--ink);
  border-radius:5px;
  overflow:hidden;
  flex-shrink:0
}
.handoff-track i {
  display:block;
  height:100%;
  background:var(--blue);
  width:0
}
.handoff-note {
  font-size:11px;
  font-weight:normal
}
.workbench {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.role {
  border:2px solid var(--ink);
  padding:16px 20px 20px;
  border-radius:10px 10px 2px 2px
}
.packer {
  background:#f8dce6
}
.dispatcher {
  background:#deedf6
}
.role-heading {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:12px
}
.role-heading h2 {
  margin:0;
  font-size:24px;
  font-family:Georgia,serif
}
.role-heading p {
  font-size:12px;
  margin:2px 0 0
}
.player-number {
  border:2px solid var(--ink);
  border-radius:50%;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  font-size:22px;
  font-family:Georgia,serif;
  background:var(--paper);
  flex-shrink:0
}
.choices {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px
}
.choices button {
  padding:6px 3px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0
}
.choices svg {
  height:55px;
  width:55px
}
.choices span {
  font-size:13px
}
.choices .place-icon {
  height:55px;
  font-size:40px;
  line-height:55px
}
.wide {
  width:100%;
  margin-top:12px;
  min-height:44px;
  padding:8px;
  text-align:center;
  font-size:14px
}
.address {
  background:#fff8;
  border:2px dashed #18375640;
  border-radius:7px
}
.parcel-mat {
  height:87px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:12px;
  border:2px dashed #18375640;
  border-radius:6px;
  color:var(--ink);
  background:#fff5
}
.parcel-mat svg {
  width:64px;
  height:64px
}
.parcel-mat p {
  font-size:12px;
  max-width:145px;
  margin:0;
  text-align:center
}
.parcel-mat strong {
  display:block;
  font-size:14px
}
.action-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin:12px 0
}
.action-pair button {
  font-size:14px;
  min-height:44px;
  padding:6px
}
.hold {
  background:var(--blue);
  color:white;
  width:100%;
  min-height:51px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none
}
.hold:hover,.hold.active {
  background:#153e73
}
.feedback {
  text-align:center;
  margin:18px auto 0;
  min-height:44px;
  font-weight:bold;
  max-width:720px;
  font-size:14px
}
.footnote {
  text-align:center;
  font-size:11px;
  margin:7px 0 0
}
dialog {
  max-width:620px;
  width:calc(100% - 30px);
  padding:30px;
  border:3px solid var(--ink);
  border-radius:12px;
  color:var(--ink);
  background:var(--paper);
  box-shadow:10px 10px 0 #18375640
}
dialog::backdrop {
  background:#183756b0
}
dialog h2 {
  font-family:Georgia,serif;
  font-size:32px
}
dialog li {
  margin-bottom:12px
}
dialog p,dialog li {
  font-size:15px
}
dialog ol {
  padding-left:24px
}
.rules-note {
  font-size:12px;
  border-top:1px solid #18375640;
  padding-top:10px
}
#pause-dialog {
  text-align:center
}
#pause-dialog button {
  margin:7px
}
#result {
  text-align:center;
  padding:24px 0
}
#result h1 {
  font-family:Georgia,serif;
  font-size:64px;
  letter-spacing:-2px;
  line-height:1;
  margin:18px 0
}
#result-summary {
  font-size:20px
}
.result-stamp {
  width:195px;
  height:195px;
  border:5px double var(--blue);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin:25px auto;
  background:var(--sky);
  transform:rotate(-5deg)
}
.result-stamp strong {
  font-family:Georgia,serif;
  font-size:58px;
  line-height:1.2
}
.result-stamp span {
  font-size:13px
}
#result-stats {
  display:flex;
  justify-content:center;
  gap:38px
}
#result-stats dt {
  font-size:13px
}
#result-stats dd {
  margin:0;
  font-size:26px;
  font-weight:bold
}
#result-tip {
  font-size:14px;
  max-width:520px;
  margin:24px auto
}
.result-actions {
  display:flex;
  justify-content:center;
  gap:15px;
  flex-wrap:wrap
}
.svg-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
[hidden] {
  display:none!important
}
@media(min-width:900px) {
  #game {
    max-width:990px;
    margin:auto
  }
}
@media(max-width:760px) {
  .stall {
    margin:0;
    border-radius:0;
    border-width:0;
    box-shadow:none
  }
  .topbar {
    padding:10px 14px
  }
  .topbar>span {
    display:none
  }
  main {
    padding:24px 18px
  }
  #welcome {
    gap:20px;
    grid-template-columns:1fr 1fr
  }
  .intro-copy h1 {
    font-size:68px;
    letter-spacing:-3px
  }
  .title-star {
    display:none
  }
  .intro-text {
    font-size:16px
  }
  .shop-window {
    border-width:5px;
    padding-top:20px
  }
  .window-lettering {
    font-size:22px
  }
  .shelf {
    margin:8px 8px 0
  }
  .shelf svg {
    width:65px;
    height:65px
  }
  .counter-illustration {
    height:105px
  }
  .counter-illustration svg {
    width:120px;
    height:90px
  }
  .postmark {
    width:65px;
    height:65px;
    font-size:30px
  }
  .postmark small {
    font-size:11px
  }
  .window-bottom {
    font-size:8px
  }
  .start-strip {
    align-items:flex-start
  }
  fieldset {
    flex-direction:column;
    gap:12px
  }
  .start-action {
    align-self:center
  }
  .orders {
    gap:9px
  }
  .ticket {
    padding:10px
  }
  .ticket strong {
    font-size:14px
  }
  .ticket svg {
    width:45px;
    height:45px
  }
  .role {
    padding:12px
  }
  .role-heading h2 {
    font-size:21px
  }
  .workbench {
    gap:12px
  }
  .choices span {
    font-size:12px
  }
  .handoff-note {
    display:none
  }
}
@media(max-width:480px) {
  main {
    padding:20px 12px
  }
  .awning {
    height:24px;
    background-size:auto
  }
  #welcome {
    grid-template-columns:1fr
  }
  .intro-copy {
    padding:0 8px
  }
  .location {
    font-size:13px;
    margin-bottom:10px
  }
  .intro-copy h1 {
    font-size:72px;
    margin:10px 0 20px
  }
  .intro-copy h1 br {
    display:none
  }
  .intro-copy h1 {
    font-size:53px;
    letter-spacing:-3px
  }
  .intro-text {
    margin-bottom:8px;
    max-width:none
  }
  .tag {
    margin:4px 0 6px;
    font-size:12px
  }
  .shop-window {
    max-width:320px;
    justify-self:center;
    display:none
  }
  .start-strip {
    flex-direction:column;
    gap:20px;
    margin:0 8px
  }
  .start-action {
    width:100%
  }
  .start-action button {
    width:100%
  }
  fieldset {
    width:100%
  }
  fieldset small {
    max-width:none
  }
  .game-heading {
    gap:9px;
    margin-bottom:12px;
    flex-wrap:wrap
  }
  .game-heading h1 {
    font-size:27px
  }
  .game-heading p {
    font-size:11px;
    order:3;
    width:100%
  }
  .game-heading button {
    padding:6px 10px;
    min-height:40px;
    font-size:12px
  }
  .scoreboard {
    margin-bottom:18px;
    padding:8px 0
  }
  .scoreboard strong {
    font-size:22px
  }
  .scoreboard span {
    font-size:10px
  }
  .orders-heading {
    display:block
  }
  .orders-heading h2 {
    margin-bottom:2px;
    font-size:16px
  }
  .orders-heading>span {
    display:block;
    font-size:11px;
    margin-bottom:10px
  }
  .orders {
    gap:7px;
    min-height:166px
  }
  .ticket {
    padding:10px 7px
  }
  .ticket-top {
    font-size:12px
  }
  .ticket-time {
    font-size:10px
  }
  .ticket-body {
    flex-direction:column;
    align-items:flex-start;
    gap:0
  }
  .ticket svg {
    width:38px;
    height:38px;
    align-self:center
  }
  .ticket strong {
    font-size:12px;
    white-space:nowrap
  }
  .ticket .wrap-label {
    font-size:10px;
    padding:1px 3px
  }
  .ticket-address {
    font-size:12px;
    margin-top:6px
  }
  .ticket-address small {
    display:none
  }
  .handoff {
    font-size:11px;
    gap:8px;
    margin:14px 0 12px;
    min-height:32px
  }
  .handoff-track {
    width:55px
  }
  .workbench {
    gap:8px
  }
  .role {
    padding:10px 8px 12px
  }
  .role-heading {
    gap:6px;
    margin-bottom:10px
  }
  .role-heading h2 {
    font-size:18px
  }
  .role-heading p {
    font-size:10px;
    line-height:1.2;
    margin-top:4px
  }
  .player-number {
    width:24px;
    height:24px;
    font-size:15px
  }
  .choices {
    gap:5px
  }
  .choices button {
    padding:5px 0
  }
  .choices svg {
    width:38px;
    height:42px
  }
  .choices span {
    font-size:10px
  }
  .choices .place-icon {
    font-size:32px;
    height:42px;
    line-height:42px
  }
  .choices kbd {
    display:block;
    font-size:9px;
    width:15px;
    margin:2px auto 0;
    padding:0
  }
  .wide {
    font-size:12px;
    padding:7px 3px
  }
  .parcel-mat {
    height:87px;
    gap:1px;
    flex-direction:column
  }
  .parcel-mat svg {
    width:38px;
    height:38px
  }
  .parcel-mat strong {
    font-size:12px
  }
  .parcel-mat p {
    font-size:10px;
    padding:3px;
    line-height:1.2
  }
  .action-pair {
    gap:6px
  }
  .action-pair button {
    font-size:12px;
    padding:5px 1px
  }
  .action-pair kbd,.hold kbd {
    font-size:9px;
    padding:0 2px;
    margin-left:1px
  }
  .hold {
    padding:10px 2px;
    font-size:11px
  }
  .feedback {
    font-size:12px;
    min-height:48px
  }
  .footnote {
    font-size:10px
  }
  footer {
    font-size:10px;
    padding:10px 12px
  }
  dialog {
    padding:22px
  }
  dialog h2 {
    font-size:28px
  }
  dialog p,dialog li {
    font-size:14px
  }
  #result h1 {
    font-size:47px
  }
  #result-stats {
    gap:22px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
/* Keep both work surfaces and visitor tickets usable on short displays. */
.stall:has(#game:not([hidden])) {
  margin-block:12px
}
.stall:has(#game:not([hidden])) main {
  padding-block:16px
}
.stall:has(#game:not([hidden])) .awning {
  height:20px
}
.stall:has(#game:not([hidden])) footer {
  display:none
}
.game-heading {
  margin-bottom:10px
}
.scoreboard {
  padding:7px 0;
  margin-bottom:14px
}
.orders {
  position:sticky;
  top:0;
  z-index:2;
  background:var(--paper);
  min-height:118px;
  padding-top:5px;
  padding-bottom:5px
}
.ticket {
  padding:8px 12px
}
.ticket svg {
  width:43px;
  height:43px
}
.ticket-body {
  margin:3px 0
}
.handoff {
  margin:9px 0
}
.role {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:12px 16px
}
.role-heading,.choices,.action-pair,.hold {
  grid-column:1/-1
}
.role-heading {
  margin:0
}
.role-heading h2 {
  font-size:23px
}
.role-heading p {
  font-size:11px
}
.player-number {
  width:32px;
  height:32px;
  font-size:19px
}
.choices svg {
  width:42px;
  height:42px
}
.choices .place-icon {
  height:42px;
  line-height:42px;
  font-size:33px
}
.wide {
  margin:0;
  min-height:64px
}
.parcel-mat {
  height:64px;
  margin:0
}
.parcel-mat svg {
  width:43px;
  height:43px
}
.parcel-mat p {
  font-size:11px
}
.parcel-mat strong {
  font-size:12px
}
.action-pair {
  margin:0
}
.hold {
  min-height:46px
}
.feedback {
  margin-top:12px;
  min-height:24px
}
.footnote {
  margin-top:8px
}
@media(max-width:480px) {
  .stall:has(#game:not([hidden])) {
    margin:0
  }
  .stall:has(#game:not([hidden])) main {
    padding-top:14px;
    padding-bottom:10px
  }
  .game-heading {
    gap:6px;
    margin-bottom:9px
  }
  .game-heading p {
    margin-top:0
  }
  .scoreboard {
    margin-bottom:12px
  }
  .orders {
    min-height:155px
  }
  .ticket {
    padding:9px 7px
  }
  .ticket svg {
    width:34px;
    height:34px
  }
  .role {
    padding:10px 8px;
    gap:8px
  }
  .role-heading {
    min-height:32px;
    gap:5px
  }
  .role-heading h2 {
    font-size:17px
  }
  .role-heading p {
    display:none
  }
  .player-number {
    width:24px;
    height:24px;
    font-size:15px
  }
  .choices svg {
    width:36px;
    height:36px
  }
  .choices .place-icon {
    height:36px;
    line-height:36px
  }
  .wide,.parcel-mat {
    grid-column:1/-1
  }
  .wide {
    min-height:44px
  }
  .parcel-mat {
    height:54px;
    flex-direction:row
  }
  .parcel-mat svg {
    width:34px;
    height:34px
  }
  .parcel-mat p {
    font-size:10px
  }
  .parcel-mat strong {
    font-size:11px
  }
  .handoff {
    min-height:30px;
    margin:8px 0
  }
  .hold {
    min-height:48px
  }
  .feedback {
    min-height:34px
  }
}