/* Dosa Tycoon — screens.css (SHELL)
 * Everything DT.screens renders into #screen-layer: the title, the Career / Sandbox question,
 * how-to-play, the settings / pause menu, the confirm modal, toasts, the rank-up, win and
 * new-outlet celebrations, and the travelling curtain.
 * All sizes are stage pixels (the stage is 1600×900 and scaled as a whole). */

/* ---------- hosts, screens, modals ---------- */

#screen-layer > .dts-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dts-host > * { pointer-events: auto; }
.dts-host--curtain { z-index: 1; }
.dts-host--notice { z-index: 1; }
.dts-host--modal { z-index: 2; }
.dts-host--toast { z-index: 3; }

.dts-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* a closing screen fades out but keeps catching the pointer until it is gone */
.dts-screen.is-leaving,
.dts-modal.is-leaving {
  opacity: 0;
  transition: opacity .2s ease-out;
}

.dts-modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dts-modal__dim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(74, 20, 30, .58) 0%, rgba(24, 6, 9, .86) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(.9);
  backdrop-filter: blur(6px) saturate(.9);
  animation: dts-fade .25s ease-out both;
}

.dts-modal > .dt-panel {
  animation: dts-pop .4s var(--ease-out-back) both;
}

@keyframes dts-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dts-pop { from { opacity: 0; transform: scale(.72); } 60% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
@keyframes dts-rise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dts-slide-r { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dts-spin { to { transform: rotate(360deg); } }
@keyframes dts-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes dts-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(2.2deg); } }
@keyframes dts-pulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.06); filter: brightness(1.1); } }
@keyframes dts-shake { 0%, 100% { transform: translateX(0); } 18% { transform: translateX(-9px) rotate(-1deg); } 38% { transform: translateX(8px) rotate(1deg); } 58% { transform: translateX(-6px); } 78% { transform: translateX(4px); } }

/* ---------- shared bits ---------- */

.dts-btn-xl {
  min-height: 86px;
  padding: 0 46px 8px;
  font-size: 38px;
  border-radius: 28px;
  gap: 14px;
}

.dts-btn-xl > svg { width: 44px; height: 44px; }
.dts-btn-xl.dt-btn--primary::after { inset: 4px 4px 11px; border-radius: 19px; }

.dts-iconbtn {
  width: 68px;
  min-height: 68px;
  padding: 0 0 6px;
  border-radius: 50%;
}

.dts-iconbtn > svg { width: 42px; height: 42px; }
.dts-iconbtn[aria-pressed="false"] { --btn-face: #E9E0CF; --btn-face-2: #D9CDB6; --btn-lip: #B8AA90; }
.dts-iconbtn[aria-pressed="false"] > svg { opacity: .8; }

.dts-toggles {
  display: flex;
  gap: 14px;
}

.dts-toran {
  position: absolute;
  left: 50%;
  top: -40px;
  z-index: 3;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 5px 0 rgba(58, 31, 18, .25));
}

.dts-kolam {
  position: absolute;
  width: 240px;
  height: 240px;
  color: var(--c-jaggery);
  opacity: .13;
  pointer-events: none;
}

.dts-kolam--tl { left: -40px; top: -30px; }
.dts-kolam--br { right: -40px; bottom: -40px; }

/* Painted ribbon heading: kumkum band with folded tails. */
.dts-ribbon {
  position: relative;
  display: inline-block;
  align-self: center;
  z-index: 4;
  filter: drop-shadow(0 6px 0 var(--c-ink));
}

.dts-ribbon > span {
  position: relative;
  z-index: 1;
  display: block;
  padding: 8px 50px 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 46px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #FFF6D8;
  text-shadow: 0 4px 0 rgba(90, 6, 20, .85);
  background: linear-gradient(180deg, #F2314F 0%, var(--c-kumkum) 60%, #A80D25 100%);
  border: 4px solid var(--c-ink);
  border-radius: 12px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), inset 0 -6px 0 rgba(90, 6, 20, .5);
}

.dts-ribbon::before,
.dts-ribbon::after {
  content: '';
  position: absolute;
  top: 14px;
  width: 54px;
  height: 100%;
  background: #8E1B2D;
  border: 4px solid var(--c-ink);
}

.dts-ribbon::before { left: -34px; border-radius: 10px 0 0 10px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%); }
.dts-ribbon::after { right: -34px; border-radius: 0 10px 10px 0; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%); }

/* Toasts: under the HUD's own message stack while playing, at the top on the title. */
.dts-host--toast {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 26px;
}

.dts-host--toast.is-play { padding-top: 208px; }

.dts-host--toast > .dts-toast {
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  max-width: 900px;
  padding: 12px 28px 14px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-cream);
  background: var(--c-ink);
  border: 3px solid var(--c-turmeric);
  border-radius: 999px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35);
  animation: dts-rise .3s var(--ease-out-back) both;
  transition: opacity .25s ease-out, transform .25s ease-out;
}

.dts-host--toast > .dts-toast.is-bad { border-color: #FF7B8C; }
.dts-host--toast > .dts-toast.is-good { border-color: #8FE06A; }
.dts-host--toast > .dts-toast.has-action { pointer-events: auto; padding: 8px 10px 10px 28px; }
.dts-host--toast > .dts-toast.is-long { max-width: 760px; padding: 12px 30px 15px; font-size: 21px; text-align: center; border-radius: 30px; }
.dts-toast > .dt-btn { flex: none; }
.dts-toast.is-leaving { opacity: 0; transform: translateY(-14px); pointer-events: none; }

/* ---------- title ---------- */

.dts-title {
  background: linear-gradient(180deg, #FFD890 0%, #FDEFCB 44%, #F3B86A 45%, #B8632A 100%);
}

.dts-title__bg {
  position: absolute;
  inset: 0;
  transform-origin: 50% 62%;
  will-change: transform;
  animation: dts-title-drift 28s ease-in-out infinite alternate;
}

@keyframes dts-title-drift {
  from { transform: scale(1.012) translateX(-7px); }
  to { transform: scale(1.045) translateX(7px); }
}

.dts-title__rays {
  position: absolute;
  left: 50%;
  top: 548px;
  width: 2600px;
  height: 2600px;
  margin: -1300px 0 0 -1300px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 246, 210, .17) 0deg 5deg, rgba(255, 246, 210, 0) 5deg 16.4deg);
  -webkit-mask-image: radial-gradient(circle, transparent 3%, #000 8%, rgba(0, 0, 0, .55) 26%, transparent 50%);
  mask-image: radial-gradient(circle, transparent 3%, #000 8%, rgba(0, 0, 0, .55) 26%, transparent 50%);
  animation: dts-spin 110s linear infinite;
  pointer-events: none;
}

.dts-title__motes { position: absolute; inset: 0; pointer-events: none; }

.dts-title__motes > i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF6C8 0%, rgba(255, 214, 90, .7) 45%, rgba(255, 214, 90, 0) 70%);
  opacity: 0;
  animation: dts-mote 9s linear infinite;
}

.dts-title__motes > i:nth-child(1) { left: 12%; top: 58%; animation-delay: -1s; }
.dts-title__motes > i:nth-child(2) { left: 27%; top: 44%; animation-delay: -4s; width: 7px; height: 7px; }
.dts-title__motes > i:nth-child(3) { left: 38%; top: 62%; animation-delay: -6.5s; }
.dts-title__motes > i:nth-child(4) { left: 55%; top: 50%; animation-delay: -2.5s; width: 8px; height: 8px; }
.dts-title__motes > i:nth-child(5) { left: 66%; top: 60%; animation-delay: -7.5s; }
.dts-title__motes > i:nth-child(6) { left: 78%; top: 42%; animation-delay: -3.2s; width: 7px; height: 7px; }
.dts-title__motes > i:nth-child(7) { left: 88%; top: 56%; animation-delay: -5.4s; }
.dts-title__motes > i:nth-child(8) { left: 47%; top: 36%; animation-delay: -8.2s; width: 6px; height: 6px; }

@keyframes dts-mote {
  0% { opacity: 0; transform: translate(0, 30px); }
  15% { opacity: .9; }
  80% { opacity: .7; }
  100% { opacity: 0; transform: translate(46px, -170px); }
}

.dts-title__hero {
  position: absolute;
  left: 6px;
  bottom: -26px;
  width: 560px;
  height: 420px;
  animation: dts-rise .7s var(--ease-out-back) .15s both;
  filter: drop-shadow(0 16px 12px rgba(58, 31, 18, .35));
}

.dts-title__hero > svg { animation: dts-bob 6s ease-in-out infinite; }

.dts-steam {
  position: absolute;
  left: 22%;
  top: -4%;
  width: 46%;
  height: 46%;
  pointer-events: none;
}

.dts-steam > i {
  position: absolute;
  bottom: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .28) 45%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  animation: dts-steam 5s ease-out infinite;
}

.dts-steam > i:nth-child(1) { left: 6%; animation-delay: -.4s; }
.dts-steam > i:nth-child(2) { left: 34%; animation-delay: -2.1s; }
.dts-steam > i:nth-child(3) { left: 58%; animation-delay: -3.4s; }
.dts-steam > i:nth-child(4) { left: 80%; animation-delay: -1.3s; }

@keyframes dts-steam {
  0% { opacity: 0; transform: translate(0, 20px) scale(.6); }
  25% { opacity: .75; }
  100% { opacity: 0; transform: translate(26px, -150px) scale(1.9); }
}

.dts-title__chef {
  position: absolute;
  right: 14px;
  bottom: -34px;
  width: 330px;
  height: 396px;
  animation: dts-rise .7s var(--ease-out-back) .3s both;
  filter: drop-shadow(0 14px 10px rgba(58, 31, 18, .3));
}

.dts-title__chefbody {
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  animation: dts-sway 2.6s ease-in-out infinite;
}

.dts-logo {
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  text-align: center;
  pointer-events: none;
}

.dts-logo__line {
  display: flex;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  line-height: .92;
  white-space: nowrap;
}

.dts-logo__line--1 { font-size: 186px; letter-spacing: 8px; }
.dts-logo__line--2 { font-size: 156px; letter-spacing: 6px; margin-top: -8px; }

/* the system fallback face is wider and tighter than the display face */
.dt-font-fallback .dts-logo__line--1 { font-size: 168px; letter-spacing: 20px; }
.dt-font-fallback .dts-logo__line--2 { font-size: 138px; letter-spacing: 16px; margin-top: 2px; }
.dt-font-fallback .dts-logo__crown { margin-left: -286px; top: -22px; }

.dts-logo__ch {
  position: relative;
  display: inline-block;
  color: var(--c-ink);
  -webkit-text-stroke: 18px var(--c-ink);
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));
  animation: dts-letter .6s var(--ease-out-back) both;
  animation-delay: calc(var(--i, 0) * 55ms + 120ms);
}

/* kumkum extrusion under each letter (text-shadow ignores the stroke, so it is a layer) */
.dts-logo__ch::before {
  content: attr(data-ch);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: var(--c-kumkum);
  -webkit-text-stroke: 18px var(--c-kumkum);
  transform: translateY(12px);
  filter: drop-shadow(0 6px 0 var(--c-ink)) drop-shadow(0 12px 9px rgba(58, 31, 18, .4));
}

.dts-logo__ch::after {
  content: attr(data-ch);
  position: absolute;
  left: 0;
  top: 0;
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
  background: linear-gradient(180deg, #FFF6B8 8%, #FFD93D 36%, var(--c-turmeric) 58%, var(--c-marigold) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@keyframes dts-letter {
  from { opacity: 0; transform: translateY(calc(var(--y, 0px) - 90px)) rotate(calc(var(--r, 0deg) - 14deg)) scale(.4); }
  to { opacity: 1; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)) scale(1); }
}

.dts-logo__crown {
  position: absolute;
  left: 50%;
  top: -28px;
  width: 118px;
  height: 82px;
  margin-left: -272px;
  transform: rotate(-16deg);
  animation: dts-crown .6s var(--ease-out-back) .75s both;
  filter: drop-shadow(0 5px 0 rgba(58, 31, 18, .5));
  z-index: 1;
}

@keyframes dts-crown {
  from { opacity: 0; transform: translateY(-70px) rotate(20deg) scale(.5); }
  to { opacity: 1; transform: rotate(-16deg) scale(1); }
}

.dts-logo__tag {
  margin-top: 16px;
  animation: dts-pop .45s var(--ease-out-back) .85s both;
}

.dts-logo__tag > span {
  display: inline-block;
  padding: 7px 34px 11px;
  font-size: 31px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .5px;
  color: #FFF6D8;
  background: linear-gradient(180deg, #E3223F, var(--c-kumkum));
  border: 4px solid var(--c-ink);
  border-radius: 999px;
  box-shadow: inset 0 -4px 0 rgba(90, 6, 20, .5), 0 6px 0 var(--c-ink);
  transform: rotate(-1.5deg);
}

.dts-title__menu {
  position: absolute;
  left: 50%;
  top: 492px;
  width: 460px;
  margin-left: -230px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dts-title:not(.has-save) .dts-title__menu { top: 524px; }

.dts-title__menu > .dt-btn {
  width: 100%;
  padding-left: 18px;
  padding-right: 18px;
  animation: dts-rise .45s var(--ease-out-back) backwards;
}

.dts-title__menu > .dt-btn.is-long { font-size: 31px; gap: 10px; }
.dts-title__menu > .dt-btn.is-long > svg { width: 36px; height: 36px; }
.dts-title__menu > .dt-btn:nth-child(1) { animation-delay: .9s; }
.dts-title__menu > .dt-btn:nth-child(2) { animation-delay: 1s; }
.dts-title__menu > .dt-btn:nth-child(3) { animation-delay: 1.1s; }

.dts-title__card {
  position: absolute;
  left: 1062px;
  top: 500px;
  width: 292px;
  padding: 16px 18px 16px;
  border-radius: 26px;
  text-align: center;
  animation: dts-pop .45s var(--ease-out-back) 1.15s both;
}

.dts-title__badge {
  width: 112px;
  height: 112px;
  margin: -62px auto 0;
  filter: drop-shadow(0 4px 0 rgba(58, 31, 18, .35));
}

.dts-title__rank {
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 30px;
  line-height: 1.05;
  color: var(--c-kumkum);
}

.dts-title__sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 18px;
  font-weight: 700;
  color: #6B4A33;
  white-space: nowrap;
}

.dts-title__sub > svg { width: 22px; height: 22px; }
.dts-title__sub > b { color: var(--c-ink); font-weight: 800; }

.dts-title__stats { margin: 10px 0 0; }

.dts-title__stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  border-top: 2px dashed rgba(58, 31, 18, .22);
}

.dts-title__stats dt { font-size: 17px; font-weight: 700; color: #6B4A33; }

.dts-title__stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 24px;
  line-height: 1.15;
  white-space: nowrap;
}

.dts-title__stats dd.len-l { font-size: 20px; }
.dts-title__stats dd.len-xl { font-size: 17px; }

.dts-title__corner {
  position: absolute;
  right: 26px;
  top: 24px;
  animation: dts-fade .5s ease-out 1.1s both;
}
/* a refresh (another tab saved) swaps the menu in place, without the entrance */
.dts-title.is-static .dts-title__menu > .dt-btn,
.dts-title.is-static .dts-title__card { animation: none; }

.dts-title__card[hidden] { display: none; }
.dts-title__stats dd.is-neg { color: var(--c-kumkum); }
.dts-title__stars { display: inline-flex; align-items: center; gap: 5px; }
.dts-title__stars > svg { width: 24px; height: 24px; margin-top: -3px; }

/* ---------- how to play ---------- */

.dts-how {
  width: 1548px;
  padding: 64px 26px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dts-how__steps {
  display: flex;
  gap: 11px;
  width: 100%;
  margin-top: 26px;
}

.dts-how__step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 10px 14px;
  text-align: center;
  background: var(--c-jasmine);
  border: 3px solid var(--c-ink);
  border-radius: 24px;
  box-shadow: 0 5px 0 var(--c-ink);
  animation: dts-rise .45s var(--ease-out-back) both;
  animation-delay: calc(var(--i) * 70ms + 200ms);
}

.dts-how__pic {
  position: relative;
  z-index: 0;           /* its own stacking context: nothing inside may cover the step number */
  height: 184px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #FFF1CC 0%, #FFD98A 70%, #F6BC62 100%);
  border: 3px solid var(--c-ink);
  border-radius: 16px;
}

.dts-how__pic svg { width: 100%; height: 100%; }

.dts-how__num {
  position: relative;
  width: 48px;
  height: 48px;
  margin: -26px auto 2px;
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 28px;
  line-height: 40px;
  color: #FFF6D8;
  background: var(--c-kumkum);
  border: 4px solid var(--c-ink);
  border-radius: 50%;
}

.dts-how__step > h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 24px;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--c-maroon);
}

.dts-how__step > p {
  margin-top: 5px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.22;
  color: #5B3A26;
}

/* little round sticker with a UI icon */
.dts-how__tag {
  position: absolute;
  top: 8px;
  width: 50px;
  height: 50px;
  padding: 6px;
  background: var(--c-jasmine);
  border: 3px solid var(--c-ink);
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--c-ink);
}

.dts-how__tag--tl { left: 8px; transform: rotate(-8deg); }
.dts-how__tag--tr { right: 8px; transform: rotate(8deg); }

/* 1 build */
.dts-how__thumb { position: absolute; }
.dts-how__thumb--a { left: -4px; top: 2px; width: 142px; height: 142px; }
.dts-how__thumb--b { right: 0; bottom: 4px; width: 88px; height: 88px; }
.dts-how__big { position: absolute; left: 50%; top: 20px; width: 150px; height: 150px; margin-left: -75px; }

/* 2 hire */
.dts-how__staff { position: absolute; bottom: -6px; }
.dts-how__staff--a { left: -8px; width: 122px; height: 122px; z-index: 1; }
.dts-how__staff--b { right: -8px; width: 108px; height: 108px; bottom: 40px; }
.dts-how__chef { position: absolute; left: 50%; top: 8px; width: 170px; height: 204px; margin-left: -85px; }

/* 3 open */
.dts-how__guest { position: absolute; width: 112px; height: 168px; }
.dts-how__guest--a { left: -8px; top: 44px; }
.dts-how__guest--b { left: 78px; top: 56px; }

.dts-how__sign {
  position: absolute;
  right: 8px;
  top: 20px;
  transform: rotate(5deg);
  transform-origin: 50% -14px;
  animation: dts-sway 3.2s ease-in-out infinite;
}

.dts-how__sign::before {
  /* the two cords it hangs from */
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: -22px;
  height: 22px;
  border: solid var(--c-ink);
  border-width: 0 3px;
}

.dts-how__sign > span {
  display: block;
  padding: 2px 12px 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 1px;
  color: #FFF6D8;
  text-shadow: 0 2px 0 rgba(15, 61, 28, .9);
  background: linear-gradient(180deg, #43B056, var(--c-leaf));
  border: 3px solid var(--c-ink);
  border-radius: 9px;
  box-shadow: inset 0 -4px 0 rgba(15, 61, 28, .45), 0 3px 0 var(--c-ink);
}

/* 4 thoughts */
.dts-how__cust { position: absolute; left: -22px; top: 34px; width: 132px; height: 198px; }

.dts-how__thought {
  position: absolute;
  right: 6px;
  top: 8px;
  width: 112px;
  padding: 7px 8px 9px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.12;
  color: var(--c-ink);
  background: var(--c-jasmine);
  border: 3px solid var(--c-ink);
  border-radius: 20px;
  box-shadow: 0 3px 0 var(--c-ink);
  animation: dts-bob 3s ease-in-out infinite;
}

.dts-how__thought::before,
.dts-how__thought::after {
  content: '';
  position: absolute;
  background: var(--c-jasmine);
  border: 3px solid var(--c-ink);
  border-radius: 50%;
}

.dts-how__thought::before { left: 2px; bottom: -17px; width: 16px; height: 16px; }
.dts-how__thought::after { left: -12px; bottom: -29px; width: 10px; height: 10px; }

/* 5 prices, research, marketing */
.dts-how__dish { position: absolute; left: 50%; top: 8px; width: 100px; height: 100px; margin-left: -50px; }

.dts-how__price {
  position: absolute;
  left: 50%;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 5px 5px;
  background: var(--c-jasmine);
  border: 3px solid var(--c-ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--c-ink);
  transform: translateX(-50%);
}

.dts-how__price > i {
  width: 28px;
  height: 28px;
  font-style: normal;
  font-size: 24px;
  font-weight: 800;
  line-height: 22px;
  color: var(--c-ink);
  background: linear-gradient(180deg, #FFD44A, var(--c-turmeric));
  border: 3px solid var(--c-ink);
  border-radius: 50%;
}

.dts-how__price > b {
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 26px;
  line-height: 1;
}

/* 6 ranks */
.dts-how__rank { position: absolute; filter: drop-shadow(0 3px 0 rgba(58, 31, 18, .3)); }
.dts-how__rank--0 { left: 2px; bottom: 4px; width: 66px; height: 66px; }
.dts-how__rank--1 { left: 44px; bottom: 44px; width: 82px; height: 82px; }
.dts-how__rank--2 { right: 0; top: 2px; width: 112px; height: 112px; animation: dts-pulse 2.4s ease-in-out infinite; }

/* 7 towns */
.dts-how__town { position: absolute; filter: drop-shadow(0 3px 0 rgba(58, 31, 18, .3)); }
.dts-how__town--0 { left: 4px; top: 6px; width: 96px; height: 96px; }
.dts-how__town--1 { right: 2px; top: 30px; width: 84px; height: 84px; }
.dts-how__town--2 { left: 46px; bottom: 26px; width: 78px; height: 78px; }

/* controls strip */
.dts-how__keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 13px;
  margin-top: 18px;
  padding: 9px 14px 12px;
  background: rgba(255, 253, 245, .8);
  border: 3px solid var(--c-ink);
  border-radius: 20px;
}

.dts-how__keys > li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  color: #5B3A26;
}

.dts-how__keys kbd {
  display: inline-block;
  min-width: 36px;
  padding: 1px 9px 4px;
  font: inherit;
  font-weight: 800;
  text-align: center;
  color: var(--c-ink);
  background: linear-gradient(180deg, var(--c-jasmine), #F6E6C3);
  border: 3px solid var(--c-ink);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--c-ink);
}

.dts-how__foot { margin-top: 18px; }
.dts-how__foot > .dt-btn { min-width: 260px; }

/* ---------- settings / pause ---------- */

.dts-pause {
  width: 640px;
  padding: 62px 42px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dts-pause__today {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 22px;
  padding: 8px 18px 10px 12px;
  background: rgba(255, 253, 245, .8);
  border: 3px solid var(--c-ink);
  border-radius: 22px;
}

.dts-pause__badge {
  flex: none;
  width: 100px;
  height: 100px;
  filter: drop-shadow(0 4px 0 rgba(58, 31, 18, .3));
}

.dts-pause__info { flex: 1 1 0; min-width: 0; }

.dts-pause__rank {
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 34px;
  line-height: 1.05;
  white-space: nowrap;
  color: var(--c-kumkum);
}

.dts-pause__label {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-jaggery);
}

.dts-pause__facts {
  display: flex;
  gap: 22px;
  margin-top: 1px;
}

.dts-pause__facts > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 30px;
  line-height: 1.1;
  white-space: nowrap;
}

.dts-pause__facts svg { width: 30px; height: 30px; }
.dts-pause__facts b { font-weight: inherit; }
.dts-pause__facts > .is-neg b { color: var(--c-kumkum); }

.dts-pause__btns {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: 22px;
}

.dts-pause__btns > .dt-btn { width: 100%; }

.dts-pause__row {
  display: flex;
  gap: 14px;
  align-items: center;
}

.dts-pause__row > .dt-btn:not(.dts-iconbtn) { flex: 1 1 0; min-width: 0; padding-left: 14px; padding-right: 14px; font-size: 25px; }
.dts-pause__row > .dts-toggles { flex: none; }

/* export / import: quieter than the main actions */
.dts-pause__row--file { gap: 12px; margin-top: -4px; }
.dts-pause__row--file > .dt-btn:not(.dts-iconbtn) { font-size: 20px; }
.dts-pause__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.dts-pause__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
}

.dts-pause__ver {
  position: absolute;
  right: 26px;
  bottom: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #A08462;
}

/* a save file dragged over the panel */
.dts-pause__drop {
  position: absolute;
  inset: 10px;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 40px;
  line-height: 1.1;
  text-align: center;
  color: var(--c-leaf-dark);
  background: rgba(255, 253, 245, .93);
  border: 5px dashed var(--c-leaf);
  border-radius: 24px;
  pointer-events: none;
}

.dts-pause.is-drop > .dts-pause__drop { display: flex; }

/* "Save Now" answers with a green tick */
.dts-pause__saveicon { display: none; flex: none; width: 34px; height: 34px; }
.dt-btn.is-saved { --btn-face: #A6E884; --btn-face-2: #6CC64B; --btn-lip: #3C8F2A; }
.dt-btn.is-saved > .dts-pause__saveicon { display: block; animation: dts-pop .35s var(--ease-out-back) both; }
.dt-btn.is-failed { --btn-face: #F6C7C0; --btn-face-2: #EBA89E; --btn-lip: #B96A5E; animation: dts-shake .4s ease-out; }

.dts-pause__over {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 16px 6px 12px;
  font-size: 20px;
  font-weight: 800;
  color: var(--c-maroon);
  border-radius: 999px;
  outline: none;
  opacity: .82;
  transition: background .15s ease-out, opacity .15s ease-out;
}

.dts-pause__over > svg { width: 24px; height: 24px; }
.dts-pause__over:hover { background: rgba(200, 16, 46, .12); opacity: 1; }
.dts-pause__over:active { background: rgba(200, 16, 46, .22); }
.dts-pause__over:focus-visible { opacity: 1; box-shadow: 0 0 0 4px var(--c-teal); }

/* ---------- confirm ---------- */

.dts-confirm {
  width: 620px;
  padding: 34px 40px 34px;
  text-align: center;
}

.dts-confirm__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 46px;
  line-height: 1.05;
  color: var(--c-kumkum);
}

.dts-confirm__text {
  margin-top: 12px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  color: #4A2C1A;
}

.dts-confirm__btns {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}

.dts-confirm__btns > .dt-btn { flex: 1 1 0; min-width: 0; padding-left: 16px; padding-right: 16px; }

/* ---------- rank up ---------- */

.dts-rankup {
  width: 900px;
  padding: 54px 46px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: visible;
}

.dts-rankup__rays,
.dts-win__rays {
  position: absolute;
  left: 50%;
  top: 172px;
  width: 760px;
  height: 760px;
  margin: -380px 0 0 -380px;
  background: repeating-conic-gradient(from 0deg, rgba(245, 179, 1, .34) 0deg 9deg, rgba(245, 179, 1, 0) 9deg 22.5deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%);
  mask-image: radial-gradient(circle, #000 12%, transparent 62%);
  animation: dts-spin 40s linear infinite;
  pointer-events: none;
}

.dts-rankup__eyebrow {
  position: relative;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-jaggery);
}

.dts-rankup__badge {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 0 -4px;
  animation: dts-badge .7s cubic-bezier(.2, 1.3, .4, 1) .2s both;
  filter: drop-shadow(0 10px 0 rgba(58, 31, 18, .3));
}

@keyframes dts-badge {
  0% { opacity: 0; transform: scale(.2) rotate(-25deg); }
  60% { opacity: 1; transform: scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.dts-rankup__pre {
  position: relative;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--c-maroon);
}

.dts-rankup__name {
  position: relative;
  font-size: 78px;
  white-space: nowrap;
  animation: dts-pop .5s var(--ease-out-back) .55s both;
}

.dts-rankup__name.is-long { font-size: 72px; }

.dts-rankup__reward {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 3px 28px 7px 8px;
  color: #FFF6D8;
  background: linear-gradient(180deg, #3FA650, var(--c-leaf));
  border: 3px solid var(--c-ink);
  border-radius: 999px;
  box-shadow: inset 0 -4px 0 rgba(15, 61, 28, .45), 0 5px 0 var(--c-ink);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s ease-out, transform .4s var(--ease-out-back);
}

.dts-rankup__reward.is-in { opacity: 1; transform: scale(1); }
.dts-rankup__reward > i { flex: none; width: 44px; height: 44px; margin-top: 2px; }

.dts-rankup__reward > span {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.dts-rankup__reward > b {
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 42px;
  line-height: 1;
  color: #FFE27A;
  text-shadow: 0 3px 0 rgba(15, 61, 28, .9);
  font-variant-numeric: tabular-nums;
}

.dts-rankup__list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  width: 100%;
  margin-top: 14px;
  text-align: left;
}

.dts-rankup__list > li {
  flex: 0 1 392px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 4px 14px 6px 8px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.16;
  color: #4A2C1A;
  background: rgba(255, 253, 245, .9);
  border: 3px solid var(--c-ink);
  border-radius: 16px;
  box-shadow: 0 3px 0 var(--c-ink);
  animation: dts-rise .4s var(--ease-out-back) both;
  animation-delay: calc(var(--i) * 90ms + 1000ms);
}

.dts-rankup__list > li > i { flex: none; width: 40px; height: 40px; }
.dts-rankup__list b { font-weight: 800; color: var(--c-ink); }
.dts-rankup__list > li.is-towns > i { display: flex; width: auto; height: 44px; }
.dts-rankup__list > li.is-towns em { display: block; flex: none; width: 44px; height: 44px; }
.dts-rankup__list > li.is-towns em + em { margin-left: -12px; }

.dts-rankup__next {
  position: relative;
  margin-top: 10px;
  font-size: 19px;
  font-weight: 700;
  color: #8B6B4F;
}

.dts-rankup__next > b { color: var(--c-ink); }
.dts-rankup > .dt-btn { margin-top: 14px; min-width: 320px; }

/* ---------- win ---------- */

.dts-win {
  width: 1200px;
  padding: 54px 60px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dts-win__rays { top: 170px; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; }

.dts-win__hero {
  position: absolute;
  left: -156px;
  bottom: -54px;
  width: 372px;
  height: 279px;
  z-index: 2;
  animation: dts-rise .6s var(--ease-out-back) .4s both;
  filter: drop-shadow(0 12px 10px rgba(58, 31, 18, .35));
}

.dts-win__chef {
  position: absolute;
  right: -76px;
  bottom: -20px;
  width: 300px;
  height: 360px;
  z-index: 2;
  animation: dts-rise .6s var(--ease-out-back) .5s both;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
}

.dts-win__chef > svg { transform-origin: 50% 100%; animation: dts-sway 1.4s ease-in-out infinite; }

.dts-win__badge {
  position: relative;
  width: 186px;
  height: 186px;
  margin-top: -6px;
  animation: dts-badge .7s cubic-bezier(.2, 1.3, .4, 1) .2s both;
  filter: drop-shadow(0 8px 0 rgba(58, 31, 18, .3));
}

.dts-win__pre {
  position: relative;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-jaggery);
}

.dts-win__title {
  position: relative;
  margin-top: 4px;
  font-size: 68px;
  white-space: nowrap;
  animation: dts-pop .5s var(--ease-out-back) .55s both;
}

.dts-win__stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 236px);
  gap: 12px;
  margin: 22px 0 0;
}

.dts-win__stat {
  padding: 8px 10px 10px;
  background: rgba(255, 253, 245, .9);
  border: 3px solid var(--c-ink);
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--c-ink);
  animation: dts-pop .4s var(--ease-out-back) both;
  animation-delay: calc(var(--i) * 70ms + 750ms);
}

.dts-win__stat > dt { font-size: 17px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--c-jaggery); }

.dts-win__stat > dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 36px;
  line-height: 1.1;
  white-space: nowrap;
}

.dts-win__stat > dd.len-l { font-size: 29px; line-height: 1.36; }
.dts-win__stat > dd.len-xl { font-size: 23px; line-height: 1.7; }

.dts-win__note {
  position: relative;
  max-width: 700px;
  margin-top: 16px;
  line-height: 1.25;
  font-size: 22px;
  font-weight: 600;
  color: #4A2C1A;
}

.dts-win > .dt-btn { margin-top: 18px; min-width: 340px; z-index: 3; }
.dts-win__note > b { font-weight: 800; color: var(--c-leaf-dark); }
.dts-win .dts-kolam { opacity: .1; }

/* ---------- sandbox medal (stands in for a rank badge) ---------- */

.dts-sandbox {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 35% 28%, #FFF3B0 0%, #FFD23F 38%, var(--c-turmeric) 68%, #C98A00 100%);
  border: 4px solid var(--c-ink);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .35), inset 0 -8px 0 rgba(150, 90, 0, .35);
}

.dts-sandbox__tool { position: absolute; left: 18%; top: 22%; width: 64%; height: 64%; }
.dts-sandbox__crown { position: absolute; left: 22%; top: -24%; width: 56%; height: 40%; transform: rotate(-8deg); filter: drop-shadow(0 3px 0 rgba(58, 31, 18, .4)); }

/* ---------- new game: career or sandbox ---------- */

.dts-mode {
  width: 980px;
  padding: 62px 44px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dts-mode__cards {
  display: flex;
  gap: 22px;
  width: 100%;
  margin-top: 26px;
}

.dts-mode__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 26px 24px;
  text-align: center;
  color: var(--c-ink);
  background: linear-gradient(180deg, var(--c-jasmine) 0%, #FFF1CF 100%);
  border: 4px solid var(--c-ink);
  border-radius: 28px;
  box-shadow: inset 0 -8px 0 #E6CB94, 0 7px 0 var(--c-ink);
  outline: none;
  transition: transform .1s ease-out, box-shadow .1s ease-out, filter .15s ease-out;
  animation: dts-rise .45s var(--ease-out-back) both;
}

.dts-mode__card:nth-child(2) { animation-delay: .08s; }
.dts-mode__card--sandbox { background: linear-gradient(180deg, #FFF8D8 0%, #FFE9A6 100%); box-shadow: inset 0 -8px 0 #E2B94C, 0 7px 0 var(--c-ink); }
.dts-mode__card:hover { transform: translateY(-4px); filter: brightness(1.04); box-shadow: inset 0 -8px 0 #E6CB94, 0 11px 0 var(--c-ink); }
.dts-mode__card--sandbox:hover { box-shadow: inset 0 -8px 0 #E2B94C, 0 11px 0 var(--c-ink); }
.dts-mode__card:active { transform: translateY(5px); box-shadow: inset 0 -3px 0 #E6CB94, 0 2px 0 var(--c-ink); }
.dts-mode__card:focus-visible { outline: 4px solid var(--c-jasmine); outline-offset: 3px; box-shadow: inset 0 -8px 0 #E6CB94, 0 7px 0 var(--c-ink), 0 0 0 11px var(--c-teal); }

.dts-mode__art {
  display: block;
  width: 190px;
  height: 190px;
  filter: drop-shadow(0 7px 0 rgba(58, 31, 18, .25));
}

.dts-mode__card--sandbox .dts-mode__art { width: 150px; height: 150px; margin: 30px 0 10px; }

.dts-mode__name {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 50px;
  line-height: 1.05;
  color: var(--c-kumkum);
}

.dts-mode__text {
  margin-top: 6px;
  max-width: 340px;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.22;
  color: #4A2C1A;
}

.dts-mode__foot { margin-top: 22px; }
.dts-mode__foot > .dt-btn { min-width: 180px; }

/* ---------- a new outlet is ready ---------- */

.dts-outlet {
  width: 760px;
  padding: 56px 46px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dts-outlet__badge {
  position: relative;
  width: 190px;
  height: 190px;
  margin: 2px 0 2px;
  animation: dts-badge .7s cubic-bezier(.2, 1.3, .4, 1) .15s both;
  filter: drop-shadow(0 9px 0 rgba(58, 31, 18, .3));
}

.dts-outlet__name {
  position: relative;
  font-size: 76px;
  white-space: nowrap;
  animation: dts-pop .5s var(--ease-out-back) .45s both;
}

.dts-outlet__name.is-long { font-size: 62px; }

.dts-outlet__tag {
  position: relative;
  margin-top: 10px;
  font-size: 23px;
  font-weight: 700;
  font-style: italic;
  color: var(--c-jaggery);
}

.dts-outlet__traits {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.dts-outlet__traits > li {
  padding: 3px 16px 6px;
  font-size: 19px;
  font-weight: 800;
  color: #4A2C1A;
  background: rgba(255, 253, 245, .9);
  border: 3px solid var(--c-ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--c-ink);
  animation: dts-rise .4s var(--ease-out-back) both;
  animation-delay: calc(var(--i) * 80ms + 650ms);
}

.dts-outlet__btns {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 560px;
  margin-top: 22px;
}

.dts-outlet__btns > .dt-btn { flex: 1 1 0; min-width: 0; }

/* ---------- travelling curtain ---------- */

.dts-curtain {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* a slanted maroon band, wider than the stage, that slides across it */
.dts-curtain__wipe {
  position: absolute;
  left: -20%;
  top: 0;
  width: 140%;
  height: 100%;
  background:
    var(--kolam-gold) 50% 50% / 140px 140px,
    linear-gradient(100deg, #5A1524 0%, #8E1B2D 45%, #6E1B2C 100%);
  border: solid var(--c-turmeric);
  border-width: 0 10px;
  box-shadow: 0 0 0 5px var(--c-ink);
  transform: translateX(-112%) skewX(-12deg);
  transition: transform .15s cubic-bezier(.3, .7, .3, 1);
  will-change: transform;
}

.dts-curtain.is-in > .dts-curtain__wipe { transform: translateX(0) skewX(-12deg); }
.dts-curtain.is-out > .dts-curtain__wipe { transform: translateX(112%) skewX(-12deg); transition: transform .18s cubic-bezier(.6, 0, .8, .4); }

.dts-curtain__plate {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  transform: translateY(-50%) scale(.9);
  opacity: 0;
  transition: opacity .11s ease-out .04s, transform .15s var(--ease-out);
}

.dts-curtain.is-in > .dts-curtain__plate { opacity: 1; transform: translateY(-50%) scale(1); }
.dts-curtain.is-out > .dts-curtain__plate { opacity: 0; transform: translateY(-50%) translateX(120px); transition: opacity .12s ease-in, transform .17s ease-in; }

.dts-curtain__badge { flex: none; width: 190px; height: 190px; filter: drop-shadow(0 8px 0 rgba(27, 7, 11, .5)); }
.dts-curtain__words { display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: var(--c-cream); }
.dts-curtain__pre { font-size: 26px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; color: var(--c-turmeric); }

.dts-curtain__name {
  display: block;
  max-width: 1000px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 92px;
  line-height: 1;
  white-space: nowrap;
  color: #FFF6D8;
  text-shadow: 0 6px 0 rgba(27, 7, 11, .7);
}

.dts-curtain__tag { margin-top: 8px; font-size: 28px; font-weight: 700; font-style: italic; color: #FFD98A; }

/* ---------- online: account chip, panels, the sync notice ---------- */

.dts-offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* the player's Google picture, or their initial when there is none */
.dts-avatar {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  background: linear-gradient(180deg, #FFD44A, var(--c-turmeric));
  border: 3px solid var(--c-ink);
  border-radius: 50%;
}

.dts-avatar > i {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-synthesis: none;
  font-size: 24px;
  line-height: 1;
  color: var(--c-ink);
}

.dts-avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* title screen, top left: mirrors the sound toggles on the right */
.dts-title__account {
  position: absolute;
  left: 26px;
  top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  animation: dts-fade .5s ease-out 1.1s both;
}

.dts-title__account[hidden] { display: none; }

.dts-chipbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  max-width: 380px;
  padding: 4px 22px 7px 10px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  text-align: left;
  color: var(--c-ink);
  background: linear-gradient(180deg, var(--c-jasmine), #F6E6C3);
  border: 4px solid var(--c-ink);
  border-radius: 999px;
  box-shadow: inset 0 -5px 0 #D6BD8B, 0 5px 0 var(--c-ink);
  outline: none;
  transition: transform .09s ease-out, box-shadow .09s ease-out, filter .15s ease-out;
}

.dts-chipbtn:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: inset 0 -5px 0 #D6BD8B, 0 7px 0 var(--c-ink); }
.dts-chipbtn:active { transform: translateY(4px); box-shadow: inset 0 -2px 0 #D6BD8B, 0 1px 0 var(--c-ink); }
.dts-chipbtn:focus-visible { box-shadow: inset 0 -5px 0 #D6BD8B, 0 5px 0 var(--c-ink), 0 0 0 9px var(--c-teal); }
.dts-chipbtn__icon { flex: none; width: 38px; height: 38px; }
.dts-chipbtn.is-user { padding-left: 6px; }
.dts-chipbtn__words { display: flex; flex-direction: column; min-width: 0; }
.dts-chipbtn__words > b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 800; }
.dts-chipbtn__words > small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 700; color: #6B4A33; }
.dts-chipbtn.is-warn .dts-chipbtn__words > small,
.dts-chipbtn.is-warn > span { color: var(--c-maroon); }

.dts-title__hall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 3px 14px 5px 8px;
  font-size: 19px;
  font-weight: 800;
  color: #FFF6D8;
  text-decoration: none;
  background: rgba(58, 31, 18, .62);
  border-radius: 999px;
  outline: none;
  transition: background .15s ease-out;
}

.dts-title__hall > svg { width: 22px; height: 22px; }
.dts-title__hall:hover { background: rgba(58, 31, 18, .85); }
.dts-title__hall:focus-visible { box-shadow: 0 0 0 4px var(--c-teal); }

/* in play, under the settings gear: only while syncing needs the player's eye */
.dts-host--notice > .dts-cloudnote {
  position: absolute;
  right: 12px;
  top: 78px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 380px;
  padding: 4px 16px 6px 8px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  color: var(--c-cream);
  background: var(--c-ink);
  border: 3px solid #FF9A8C;
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
  outline: none;
  animation: dts-rise .3s var(--ease-out-back) both;
}

.dts-cloudnote > i { flex: none; width: 28px; height: 28px; }
.dts-cloudnote.is-good { border-color: #8FE06A; }
.dts-cloudnote:hover { filter: brightness(1.2); }
.dts-cloudnote:focus-visible { box-shadow: 0 0 0 4px var(--c-teal); }

/* Settings with an account: the usual controls on the left, "Online" on the right */
.dts-pause.has-online { width: 1100px; }
.dts-pause__cols { display: flex; align-items: stretch; gap: 30px; width: 100%; }
.dts-pause__main { flex: none; width: 548px; display: flex; flex-direction: column; align-items: center; }

.dts-pause__side {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 22px;
  padding: 16px 20px 14px;
  background: rgba(255, 253, 245, .8);
  border: 3px solid var(--c-ink);
  border-radius: 22px;
}

.dts-online { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: left; }

.dts-online__head {
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 32px;
  line-height: 1.05;
  color: var(--c-kumkum);
}

.dts-online__warn { font-size: 19px; font-weight: 800; color: var(--c-maroon); }
.dts-online__perks { display: flex; flex-direction: column; gap: 5px; }
.dts-online__perks > li { display: flex; align-items: flex-start; gap: 8px; font-size: 20px; font-weight: 700; line-height: 1.2; color: #4A2C1A; }
.dts-online__perks > li > i { flex: none; width: 24px; height: 24px; margin-top: 1px; }
.dts-online__google { display: flex; justify-content: center; min-height: 46px; margin-top: 6px; }
.dts-online__wait { min-height: 20px; font-size: 16px; font-weight: 700; text-align: center; color: #8B6B4F; }
.dts-online__wait.is-bad { color: var(--c-kumkum); }
.dts-online__wait:empty { display: none; }
/* our own "Continue with Google" button (the G is drawn here; nothing is loaded from Google) */
.dts-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 300px;
  height: 52px;
  padding: 0 24px 0 18px;
  border: 3px solid var(--c-ink);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 0 var(--c-ink);
  font: 800 20px/1 var(--font-ui);
  color: var(--c-ink);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, background .12s;
}
.dts-google:hover { background: var(--c-jasmine); }
.dts-google:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-ink); }
.dts-google:disabled { opacity: .6; cursor: default; transform: none; box-shadow: 0 4px 0 var(--c-ink); }
.dts-google__g { display: block; width: 24px; height: 24px; flex: none; }
.dts-google__g svg { display: block; width: 100%; height: 100%; }
.dts-online__privacy { margin-top: 2px; font-size: 15px; font-weight: 600; line-height: 1.25; color: #8B6B4F; }

.dts-online__who { display: flex; align-items: center; gap: 12px; }
.dts-online__who > .dts-avatar { width: 60px; height: 60px; }
.dts-online__who > .dts-avatar > i { font-size: 32px; }
.dts-online__whowords { display: flex; flex-direction: column; min-width: 0; }

.dts-online__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  font-size: 30px;
  line-height: 1.1;
}

.dts-online__status { font-size: 18px; font-weight: 800; color: var(--c-leaf-dark); }
.dts-online__status.is-warn { color: var(--c-maroon); }
.dts-online__status.is-busy { color: var(--c-jaggery); }
.dts-online__btns { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.dts-online__btns > .dt-btn { width: 100%; }
.dts-online__ic { flex: none; width: 28px; height: 28px; }

.dts-online__link {
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 10px 4px;
  font-size: 17px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--c-maroon);
  border-radius: 999px;
  outline: none;
}

.dts-online__link:hover { background: rgba(200, 16, 46, .1); }
.dts-online__link:focus-visible { box-shadow: 0 0 0 4px var(--c-teal); }

/* the panel behind the title chip */
.dts-account {
  width: 620px;
  padding: 62px 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dts-account > .dts-online { width: 100%; margin-top: 22px; }
.dts-account__foot { margin-top: 16px; }
.dts-account__foot > .dt-btn { min-width: 180px; }

/* ---------- which save? ---------- */

.dts-which {
  width: 980px;
  padding: 62px 44px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dts-which__lead { max-width: 760px; margin-top: 20px; font-size: 22px; font-weight: 600; line-height: 1.25; color: #4A2C1A; }
.dts-which__cards { display: flex; gap: 22px; width: 100%; margin-top: 18px; }

.dts-which__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 20px 16px;
  color: var(--c-ink);
  background: linear-gradient(180deg, var(--c-jasmine) 0%, #FFF1CF 100%);
  border: 4px solid var(--c-ink);
  border-radius: 26px;
  box-shadow: inset 0 -7px 0 #E6CB94, 0 6px 0 var(--c-ink);
  opacity: .78;
  outline: none;
  transition: transform .1s ease-out, opacity .15s ease-out, box-shadow .1s ease-out;
}

.dts-which__card:hover { opacity: 1; transform: translateY(-2px); }
.dts-which__card:focus-visible { box-shadow: inset 0 -7px 0 #E6CB94, 0 6px 0 var(--c-ink), 0 0 0 9px var(--c-teal); }

.dts-which__card.is-picked {
  opacity: 1;
  background: linear-gradient(180deg, #FFF8D8 0%, #FFE9A6 100%);
  box-shadow: inset 0 -7px 0 #E2B94C, 0 6px 0 var(--c-ink), 0 0 0 7px var(--c-leaf);
}

.dts-which__where { font-size: 19px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--c-jaggery); }
.dts-which__badge { display: block; width: 120px; height: 120px; margin: 6px 0 0; }
.dts-which__badge > .dts-sandbox { width: 96px; height: 96px; margin: 18px auto 0; }
.dts-which__rank { font-family: var(--font-display); font-weight: 800; font-synthesis: none; font-size: 34px; line-height: 1.1; color: var(--c-kumkum); }
.dts-which__facts { margin-top: 2px; font-size: 22px; font-weight: 700; color: #4A2C1A; }
.dts-which__facts > b { font-weight: 800; color: var(--c-ink); }
.dts-which__cash { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 800; font-synthesis: none; font-size: 30px; line-height: 1.2; }
.dts-which__cash > svg { width: 28px; height: 28px; }
.dts-which__cash.is-neg { color: var(--c-kumkum); }
.dts-which__when { margin-top: 2px; font-size: 18px; font-weight: 700; color: #8B6B4F; }
.dts-which__none { display: block; padding: 40px 0; font-size: 20px; font-weight: 700; color: #8B6B4F; }

.dts-which__new {
  position: absolute;
  right: -10px;
  top: -14px;
  padding: 2px 14px 5px;
  font-size: 18px;
  font-weight: 800;
  color: #FFF6D8;
  background: var(--c-leaf);
  border: 3px solid var(--c-ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--c-ink);
  transform: rotate(6deg);
}

.dts-which__foot { display: flex; gap: 16px; margin-top: 22px; }
.dts-which__foot > .dt-btn { min-width: 250px; }

/* ---------- public profile editor ---------- */

.dts-profile {
  width: 1040px;
  padding: 62px 40px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dts-profile__cols { display: flex; gap: 28px; width: 100%; margin-top: 22px; text-align: left; }
.dts-profile__form { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dts-profile__preview { flex: none; width: 380px; }
.dts-profile__preview > h3 { font-size: 18px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--c-jaggery); }

.dts-field { display: flex; flex-direction: column; gap: 3px; }
.dts-field > span:first-child { font-size: 18px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-jaggery); }

.dts-field__box {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 14px;
  background: var(--c-jasmine);
  border: 3px solid var(--c-ink);
  border-radius: 16px;
  box-shadow: inset 0 3px 0 rgba(58, 31, 18, .1);
}

.dts-field__box:focus-within { box-shadow: inset 0 3px 0 rgba(58, 31, 18, .1), 0 0 0 4px var(--c-teal); }
.dts-field__box > i { font-style: normal; font-size: 26px; font-weight: 800; color: #8B6B4F; }

.dts-input {
  flex: 1 1 0;
  min-width: 0;
  height: 52px;
  padding: 0 0 3px;
  font: inherit;
  font-size: 26px;
  font-weight: 800;
  color: var(--c-ink);
  background: none;
  border: 0;
  outline: none;
}

.dts-input::placeholder { color: #C4B08F; }
.dts-field__note { min-height: 21px; font-size: 17px; font-weight: 700; color: #8B6B4F; }
.dts-field__note.is-good { color: var(--c-leaf-dark); }
.dts-field__note.is-bad { color: var(--c-kumkum); }

.dts-profile__switch { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 700; line-height: 1.2; color: #4A2C1A; }

.dts-switch {
  position: relative;
  flex: none;
  width: 74px;
  height: 40px;
  background: #D9CDB6;
  border: 3px solid var(--c-ink);
  border-radius: 999px;
  outline: none;
  transition: background .15s ease-out;
}

.dts-switch > i {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 28px;
  height: 28px;
  background: var(--c-jasmine);
  border: 3px solid var(--c-ink);
  border-radius: 50%;
  transition: transform .15s var(--ease-out);
}

.dts-switch.is-on { background: var(--c-good); }
.dts-switch.is-on > i { transform: translateX(34px); }
.dts-switch:focus-visible { box-shadow: 0 0 0 4px var(--c-teal); }

.dts-profile__url {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 8px 10px 10px 16px;
  background: rgba(255, 253, 245, .8);
  border: 3px dashed rgba(58, 31, 18, .45);
  border-radius: 18px;
}

.dts-profile__link { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 21px; font-weight: 800; color: var(--c-teal); }
.dts-profile__url > .dt-btn { flex: none; text-decoration: none; }
.dts-profile__url > a.dt-btn.is-disabled { pointer-events: none; }

.dts-profile__card {
  margin-top: 6px;
  padding: 14px 18px 14px;
  background: var(--c-jasmine);
  border: 3px solid var(--c-ink);
  border-radius: 22px;
  box-shadow: 0 4px 0 var(--c-ink);
}

.dts-profile__name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-display); font-weight: 800; font-synthesis: none; font-size: 32px; line-height: 1.1; color: var(--c-kumkum); }
.dts-profile__at { display: block; font-size: 18px; font-weight: 700; color: #8B6B4F; }
.dts-profile__empty { margin-top: 10px; font-size: 18px; font-weight: 600; line-height: 1.25; color: #6B4A33; }
.dts-profile__rank { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.dts-profile__rank > i { flex: none; width: 70px; height: 70px; }
.dts-profile__rank b { display: block; font-family: var(--font-display); font-weight: 800; font-synthesis: none; font-size: 26px; line-height: 1.1; }
.dts-profile__rank small { font-size: 17px; font-weight: 700; color: #6B4A33; }
.dts-profile__towns { display: flex; gap: 4px; margin-top: 8px; }
.dts-profile__towns > i { width: 50px; height: 50px; }
.dts-profile__recs { display: flex; gap: 8px; margin: 10px 0 0; }
.dts-profile__recs > div { flex: 1 1 0; min-width: 0; padding: 4px 6px 6px; text-align: center; background: #FFF1CF; border: 2px solid rgba(58, 31, 18, .35); border-radius: 12px; }
.dts-profile__recs dt { font-size: 13px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--c-jaggery); }
.dts-profile__recs dd { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-display); font-weight: 800; font-synthesis: none; font-size: 21px; line-height: 1.15; }
.dts-profile__private { margin-top: 10px; font-size: 16px; font-weight: 700; color: #8B6B4F; }

.dts-profile__foot { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 20px; }
.dts-profile__hall { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; padding: 4px 12px 6px 6px; font-size: 20px; font-weight: 800; color: var(--c-maroon); text-decoration: underline; text-underline-offset: 3px; border-radius: 999px; outline: none; }
.dts-profile__hall > svg { width: 26px; height: 26px; }
.dts-profile__hall:focus-visible { box-shadow: 0 0 0 4px var(--c-teal); }
.dts-profile__foot > .dt-btn { min-width: 190px; }
.dts-profile__hall { margin-right: 0; }
.dts-profile__share { margin-right: auto; }

/* ---------- share ---------- */

.dts-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.dts-share > .dt-btn { text-decoration: none; }
.dts-share > .dt-btn > svg { width: 24px; height: 24px; }
.dts-share--party { margin-top: 16px; }
.dts-share--online { margin-top: 12px; }
.dts-share--online > .dt-btn { width: 100%; }
.dts-online__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; }


/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .dts-title__bg,
  .dts-title__rays,
  .dts-title__motes > i,
  .dts-title__hero > svg,
  .dts-title__chefbody,
  .dts-steam > i,
  .dts-rankup__rays,
  .dts-win__rays,
  .dts-win__chef > svg,
  .dts-how__sign,
  .dts-how__thought,
  .dts-how__rank--2 { animation: none; }
  .dts-curtain__wipe,
  .dts-curtain__plate { transition: none; }
}