.quick-play { width: min(1360px, calc(100% - 2rem)); margin: 2rem auto; padding: clamp(1rem, 3vw, 2.5rem); border: 1px solid var(--line); background: radial-gradient(ellipse at 5% 0, #22462b88, transparent 55%), #07120d; scroll-margin-top: 1rem; }
.quick-play .section-heading h2 { font-size: clamp(2.4rem, 5.5vw, 5rem); line-height: .98; letter-spacing: -.045em; }
.quick-play a { color: var(--cyan); text-underline-offset: .2em; }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.quick-card { min-width: 0; border: 1px solid #709a78; background: linear-gradient(145deg, #102b1c, #07130d); border-radius: .5rem; overflow: hidden; }
.quick-portrait { position: relative; width: 100%; aspect-ratio: 1.15; background-image: url('assets/milo-quickplay.webp'); background-size: 300% 100%; background-repeat: no-repeat; border-bottom: 1px solid #739a65; }
.portrait-attention { background-position: left center; }
.portrait-sun { background-position: center center; }
.portrait-gifts { background-position: right center; }
.quick-portrait > span { position: absolute; bottom: .7rem; left: .7rem; right: .7rem; padding: .55rem; background: #041009e8; color: var(--matcha); font-size: .75rem; font-weight: 900; line-height: 1.4; text-align: center; letter-spacing: .07em; border: 1px solid #94ad62; }
.quick-card-body { padding: clamp(.9rem, 1.6vw, 1.5rem); }
.quick-card h3 { font-size: clamp(1.8rem, 2.6vw, 2.8rem); line-height: 1.05; letter-spacing: -.04em; margin: 1rem 0; }
.quick-card p, .quick-settings p { font-size: 1rem; line-height: 1.55; color: #d0e2d0; }
.quick-score { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.quick-score b { color: var(--cyan); font-size: .875rem; }
.quick-score span { color: #c7d8bc; font-size: .75rem; }
.quick-primary, .quick-secondary { width: 100%; min-height: 48px; padding: .75rem; border: 1px solid var(--matcha); border-radius: .25rem; color: #0c2110; background: var(--matcha); font-size: .95rem; font-weight: 800; cursor: pointer; }
.quick-secondary { color: var(--cyan); background: #102b21; border-color: var(--cyan); }
.quick-secondary:disabled { opacity: .5; cursor: not-allowed; }
.quick-prompt { min-height: 7rem; padding: 1rem; border-left: 3px solid var(--magenta); background: #07100d; font-family: Georgia, serif; }
.attention-answers { display: grid; gap: .4rem; }
.attention-answers button { min-height: 44px; padding: .6rem; border: 1px solid #92b892; color: var(--paper); background: #194031; border-radius: .2rem; cursor: pointer; font-size: .95rem; }
.attention-answers button:disabled { opacity: .5; cursor: not-allowed; }
.quick-feedback { min-height: 4.8rem; }
.quick-card small { display: block; margin-top: .75rem; color: #c4d8c1; font-size: .8rem; line-height: 1.5; }
.sun-spots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; margin: 1rem 0; }
.sun-spots button { aspect-ratio: 1; min-width: 0; min-height: 54px; border: 1px solid #718d73; border-radius: .5rem; color: #adc5b2; background: #0b1a12; font-size: 2rem; cursor: pointer; }
.sun-spots button.sunlit { color: #1b270c; background: #eeff8e; border: 3px solid #ffffd4; box-shadow: 0 0 23px #d6ff5c44; }
.sun-spots button:disabled { cursor: not-allowed; }
.gift-certificate { margin: 1rem 0; padding: 1rem; color: #07150d; background: #eaffca; border: 4px double #537c3b; min-height: 16rem; }
.gift-certificate > span { display: block; font-size: .75rem; line-height: 1.5; font-weight: 900; }
.gift-certificate h4 { font-size: 1.5rem; line-height: 1.15; margin: .7rem 0; }
.gift-certificate p { color: #18351c; font-size: 1rem; }
.gift-shelf { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .4rem; }
.gift-shelf button { min-height: 44px; color: var(--ink); background: var(--cyan); border: 1px solid var(--cyan); border-radius: .25rem; font-weight: 900; cursor: pointer; }
.gift-shelf button:disabled { color: #c1cfb9; border: 1px dashed #72816d; background: #08160e; cursor: not-allowed; }
.quick-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; padding: 1.2rem; border: 1px solid #83a184; background: #0d2418; }
.quick-settings strong { color: var(--cyan); font-size: 1.15rem; }
.quick-settings p { margin-bottom: 0; }
.quick-visit-controls { display: flex; flex-direction: column; gap: .5rem; }
.quick-visit-controls button { min-height: 44px; padding: .65rem; border: 1px solid #a1bea0; background: #102e21; color: var(--paper); font-size: .9rem; cursor: pointer; }
.quick-visit-controls button[aria-pressed='true'] { border-color: var(--violet); color: #dac5ff; }
.visit-history { margin: 1rem 0; border-bottom: 1px solid #537159; padding: .5rem 0; }
.visit-history summary { min-height: 44px; padding: .7rem 0; cursor: pointer; color: var(--cyan); font-size: .9rem; }
.visit-history li { font-size: 1rem; line-height: 1.6; color: #d4e9cf; margin-bottom: .5rem; }
.pack-frequency { margin-top: 1.4rem; padding: 1.4rem; border: 1px solid #ac92cb; background: linear-gradient(130deg, #211b30, #142b20); }
.pack-frequency > span { color: #ddc8ff; font-size: .75rem; letter-spacing: .1em; font-weight: 900; }
.pack-frequency p { font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.45; font-family: Georgia, serif; min-height: 3em; }
.pack-frequency button { min-height: 44px; padding: .7rem; color: var(--ink); background: var(--cyan); border: 0; border-radius: .2rem; font-weight: 800; font-size: .9rem; cursor: pointer; }
.pack-frequency small { margin-left: .65rem; display: inline-block; padding-top: .75rem; font-size: .8rem; color: #d6c4ed; }

/* One dismissible visitor, never a permanent adoption result. */
.free-table-open .discovery-ledger { visibility: hidden; }
#freeTable { width: min(320px, calc(100vw - 24px)); max-height: calc(100svh - 32px); padding: .75rem; color: #edffdd; background: #0b2419; border: 1px solid #9fcd82; box-shadow: 0 8px 36px #0008; border-radius: .6rem; transform: none; transition: none; overflow: auto; overscroll-behavior: contain; }
#freeTable[hidden] { display: none !important; }
.milo-visit-header { display: flex; align-items: start; gap: .4rem; justify-content: space-between; position: sticky; top: -.75rem; padding-top: .15rem; background: #0b2419; z-index: 2; }
#freeTable .free-table-sign { flex: 1; min-width: 0; background: transparent; padding: .4rem 0; margin-bottom: .4rem; color: var(--cyan); font-size: .75rem; line-height: 1.5; }
#freeTableClose { position: static; flex: 0 0 auto; min-width: 70px; min-height: 44px; padding: .55rem; border: 1px solid #a3c398; border-radius: .25rem; color: #edffdd; background: #173d29; font-size: .875rem; font-weight: 800; cursor: pointer; }
#freeTableClose:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
#freeTableTitle { margin-bottom: .7rem; font-size: 1rem; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
#freeTable #toyButton { width: 100%; min-height: 44px; padding: .65rem; font-size: .875rem; border-radius: .25rem; background: #d4faaa; color: #0a2916; }
.milo-visit-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem; padding-top: .35rem; }
.milo-visit-footer span { font-size: .75rem; color: #c3d5bd; }
.milo-visit-footer button { min-height: 44px; border: 0; padding: .4rem 0; color: var(--cyan); background: transparent; font-size: .8rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
@media (max-width: 1000px) {
  .quick-grid { grid-template-columns: 1fr; }
  .quick-card { display: grid; grid-template-columns: minmax(210px,.8fr) minmax(0,1.2fr); }
  .quick-portrait { aspect-ratio: 1; align-self: start; position: sticky; top: 0; }
}
@media (max-width: 900px) {
  .operations-grid > .operation-card { grid-column: 1 / -1; }
  .operation-card h3 { overflow-wrap: anywhere; line-height: 1; }
}
@media (max-width: 600px) {
  .quick-play { width: calc(100% - 1rem); padding: 1rem; margin: 1rem auto; }
  .quick-card { display: block; }
  .quick-portrait { position: relative; aspect-ratio: 1.15; }
  .quick-settings { grid-template-columns: 1fr; gap: 1rem; }
  .sun-spots { max-width: 360px; margin-inline: auto; }
  .bliss-mode::after { font-size: 2.5rem; color: rgba(184,255,62,.07); }
}