@charset "UTF-8";

/* A little interactive desk, shared by the personal page and the game lab. */
.toy-shelf {
  --toy-ink: #273d32;
  --toy-muted: #687461;
  --toy-border: #d5dcca;
  --toy-panel: #eaf0df;
  --toy-card: #f5f7ec;
  --toy-accent: #d4ef7c;
  position: relative;
  min-width: 0;
  margin-block: 10px 72px;
  color: var(--toy-ink);
}
.toy-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 23px; }
.toy-heading .eyebrow { display: block; margin-bottom: 9px; color: var(--toy-muted); }
.toy-heading h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.3; letter-spacing: -.04em; }
.toy-heading p { color: var(--toy-muted); font-size: 13px; line-height: 1.8; margin-top: 10px; max-width: 37em; }
.toy-controls { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
.toy-control { min-height: 36px; padding: 7px 11px; border: 1px solid var(--toy-border); border-radius: 6px; background: transparent; color: var(--toy-ink); font-size: 11px; line-height: 1.5; white-space: nowrap; transition: background .18s, border-color .18s; }
.toy-control:hover { background: var(--toy-panel); border-color: #9bab82; }
.toy-control:disabled { cursor: default; opacity: .55; }
.toy-control[aria-disabled="true"] { cursor: default; opacity: .65; }
.toy-toggle[aria-pressed="true"] { background: var(--toy-accent); border-color: #bed575; color: #293b20; }
.toy-shelf :is(a, button):focus-visible { outline: 3px solid #829d50; outline-offset: 4px; }
.toy-range { position: relative; height: 190px; background: var(--toy-panel); border: 1px solid var(--toy-border); border-radius: 14px 14px 0 0; overflow: hidden; isolation: isolate; }
.toy-range::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#8c9c7233 .8px, transparent .8px); background-size: 16px 16px; mask-image: linear-gradient(90deg, transparent 5%, #000 50%, #000 85%, transparent); pointer-events: none; z-index: -1; }
.toy-range::after { content: ""; position: absolute; left: 0; right: 0; top: 126px; height: 1px; background: linear-gradient(90deg, transparent, #adbd9066 20%, #adbd9066 80%, transparent); pointer-events: none; z-index: -1; }
.toy-weapons { position: absolute; top: 5px; left: 22px; width: 49%; max-width: 430px; height: 150px; display: flex; align-items: center; gap: 12px; }
.toy-blaster { position: relative; flex: 1; min-width: 0; padding: 9px 5px 6px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--toy-ink); text-align: center; transition: background .18s, border-color .18s; }
.toy-blaster:hover { background: #ffffff54; border-color: #a6b6885c; }
.toy-object { width: 120px; height: 90px; margin-inline: auto; overflow: visible; pointer-events: none; transition: transform .22s cubic-bezier(.2,.8,.3,1); }
.toy-blaster .toy-object { max-width: 100%; }
.toy-blaster:hover .toy-object { transform: translateY(-4px) rotate(-3deg); }
.toy-blaster:active .toy-object { transform: translate(-4px, 0) rotate(-5deg); }
.toy-blaster strong { display: block; font-size: 12px; line-height: 1.4; font-weight: 650; }
.toy-blaster small { display: block; margin-top: 3px; color: var(--toy-muted); font: 9px/1.4 var(--mono, monospace); letter-spacing: .04em; }
.toy-range-label { position: absolute; left: 25px; bottom: 11px; right: 110px; margin: 0; font-size: 10px; color: var(--toy-muted); line-height: 1.6; }
.toy-target { position: absolute; width: 65px; top: 24px; right: 34px; height: 130px; display: flex; flex-direction: column; gap: 7px; justify-content: center; align-items: center; }
.toy-target::before { content: ""; width: 3px; height: 85px; position: absolute; background: #899b6e; bottom: 9px; z-index: -1; }
.toy-target::after { content: ""; width: 46px; height: 9px; border-radius: 50%; position: absolute; background: #6f825326; bottom: 0; z-index: -1; }
.toy-target-star { display: grid; place-items: center; width: 32px; height: 29px; border: 1px solid #a2b27e; background: #eff4d9; color: #a0b16d; border-radius: 5px; font-size: 22px; line-height: 1; box-shadow: 3px 3px 0 #93a3744a; transition: color .12s, background .12s, transform .15s; }
.toy-target-star:nth-child(1) { transform: rotate(-6deg); }
.toy-target-star:nth-child(2) { transform: rotate(4deg); }
.toy-target-star:nth-child(3) { transform: rotate(-3deg); }
.toy-target-star[data-hit="true"], .toy-target-star[data-hit="1"], .toy-target-star.is-hit { background: #e0f68e; color: #4f712b; transform: scale(1.2) rotate(8deg); box-shadow: 0 0 18px #badf6d77; }
.toy-bullet { position: absolute; display: block; left: 0; top: 0; width: 17px; height: 6px; border-radius: 10px; background: #cbed71; box-shadow: 0 0 0 2px #d6ef8736, 0 0 11px #b6d35190; pointer-events: none; z-index: 3; will-change: transform; }
.toy-bullet[data-kind="raygun"], .toy-bullet.is-cyan { background: #79d7d2; box-shadow: 0 0 0 2px #85d9d733, 0 0 10px #5dcacb80; }
.toy-portals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 13px 9px 15px; background: var(--toy-card); border: 1px solid var(--toy-border); border-top: 0; border-radius: 0 0 14px 14px; }
.toy-portal { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-width: 0; padding: 4px 7px 8px; border-radius: 8px; color: var(--toy-ink); transition: background .18s; }
.toy-portal + .toy-portal::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 18px; width: 1px; background: var(--toy-border); }
.toy-portal:hover { background: #dae6c150; }
.toy-portal:hover .toy-object { transform: translateY(-7px) rotate(-4deg); }
.toy-portal:active .toy-object { transform: translateY(-2px) scale(.96); }
.toy-portal > span { font-size: 11px; font-weight: 550; line-height: 1.5; text-align: center; }
.toy-portal > span::after { content: " ↗"; color: var(--toy-muted); font-family: sans-serif; font-weight: 400; }
.toy-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 2px 0; color: var(--toy-muted); font-size: 10px; line-height: 1.7; }
.toy-collection { color: var(--toy-ink); font-family: var(--mono, monospace); font-size: 10px; white-space: nowrap; }
.toy-bottom { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 3px 16px; padding-top: 10px; }
.toy-bottom .toy-status { margin: 0; }
.toy-portal > span::after { content: none; }

.lab-page .toy-shelf { --toy-ink: #e1e9d8; --toy-muted: #a5b59e; --toy-border: #3a4839; --toy-panel: #1d2921; --toy-card: #18221d; margin-top: 60px; }
.lab-page .toy-range::before { background-image: radial-gradient(#b9d48b2b .8px, transparent .8px); }
.lab-page .toy-range::after { background: linear-gradient(90deg, transparent, #7d985345 20%, #7d985345 80%, transparent); }
.lab-page .toy-blaster:hover { background: #d4ef7c0a; border-color: #a6b68836; }
.lab-page .toy-target-star { background: #39492b; border-color: #677e45; color: #90a464; box-shadow: 3px 3px 0 #0003; }
.lab-page .toy-target-star[data-hit="true"], .lab-page .toy-target-star[data-hit="1"], .lab-page .toy-target-star.is-hit { color: #304920; background: #d4ef7c; box-shadow: 0 0 18px #badf6d55; }
.lab-page .toy-portal:hover { background: #b8d47b0b; }

/* Floating surprises are click-through except for the actual collectible. */
.packet-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 50; }
.red-packet { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 48px; height: 62px; margin: 0; padding: 0; border: 1px solid #f7ac74; border-radius: 5px 5px 8px 8px; background: linear-gradient(145deg, #f88758, #df533a 74%); color: #ffe5a2; box-shadow: 3px 5px 0 #762c2118, 0 5px 14px #6e3a3029; pointer-events: auto; cursor: pointer; will-change: transform; touch-action: manipulation; }
.red-packet::before { content: ""; position: absolute; left: 3px; right: 3px; top: 1px; height: 18px; border-bottom: 1px solid #ffd998aa; border-radius: 0 0 50% 50%; background: #ffb07840; }
.red-packet svg { width: 100%; height: 100%; opacity: .35; position: absolute; inset: 0; pointer-events: none; }
.red-packet > span { position: relative; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 9px; font-size: 21px; font-weight: 750; color: #8c4226; background: #ffe1a1; border-radius: 4px; box-shadow: 0 1px 0 #8f43142b; pointer-events: none; }
.red-packet:hover { filter: brightness(1.08); }
.red-packet:focus-visible { outline: 3px solid #496b32; outline-offset: 5px; }
.rain-banner { position: fixed; top: 98px; left: 50%; transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 28px); padding: 10px 11px 10px 17px; border: 1px solid #e5c693; border-radius: 10px; background: #fff4de; color: #674c30; font-size: 12px; line-height: 1.6; box-shadow: 0 6px 24px #2a251216; }
.rain-stop { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid #d8b985; border-radius: 6px; background: transparent; color: #765534; font-size: 16px; line-height: 1; }
.rain-stop:hover { background: #f3dfba; }
.rain-stop { width: 40px; height: 40px; font-size: 22px; }
.toy-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 13px; width: max-content; max-width: calc(100vw - 28px); padding: 12px 13px 12px 17px; border: 1px solid #587043; border-radius: 11px; background: #263e2e; color: #f2f5df; box-shadow: 0 8px 35px #18231824; font-size: 12px; line-height: 1.6; }
.toy-toast a { flex-shrink: 0; color: #d4ef7c; text-decoration: underline; text-underline-offset: 3px; }
.toy-toast button { flex-shrink: 0; min-width: 30px; min-height: 30px; padding: 0 5px; border: 0; border-radius: 5px; background: #f0ffd00d; color: #e4edda; font-size: 17px; }
.toy-toast :is(a, button):focus-visible, .rain-stop:focus-visible { outline: 2px solid #9bb978; outline-offset: 3px; }
.lab-page .rain-banner { background: #322b22; border-color: #695536; color: #f3d5a5; }
.lab-page .rain-stop { border-color: #76603f; color: #f3d5a5; }
.lab-page .rain-stop:hover { background: #52402a; }

@media (max-width: 850px) {
  .toy-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .toy-weapons { left: 12px; width: 54%; gap: 2px; }
  .toy-target { right: 23px; }
  .toy-portal .toy-object { width: 106px; height: 81px; }
}
@media (max-width: 600px) {
  .toy-shelf { margin-bottom: 45px; }
  .toy-heading { margin-bottom: 17px; }
  .toy-heading p { font-size: 12px; }
  .toy-controls { gap: 6px; }
  .toy-control { min-height: 38px; padding: 8px 10px; font-size: 10px; }
  .toy-range { height: 165px; border-radius: 11px 11px 0 0; }
  .toy-range::after { top: 110px; }
  .toy-weapons { top: 8px; left: 7px; width: 55%; height: 125px; }
  .toy-blaster { padding: 7px 1px; }
  .toy-blaster .toy-object { width: 97px; height: 70px; }
  .toy-blaster strong { font-size: 10px; }
  .toy-blaster small { font-size: 8px; }
  .toy-target { right: 13px; top: 18px; width: 50px; height: 118px; gap: 6px; }
  .toy-target-star { width: 27px; height: 25px; font-size: 19px; }
  .toy-target::before { height: 76px; }
  .toy-target::after { width: 39px; }
  .toy-range-label { left: 14px; bottom: 8px; right: 67px; font-size: 9px; }
  .toy-portals { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #a9b690 transparent; gap: 0; padding: 10px 5px 12px; border-radius: 0 0 11px 11px; }
  .toy-portal { flex: 0 0 100px; scroll-snap-align: start; padding: 3px 5px 6px; }
  .toy-portal .toy-object { width: 93px; height: 73px; }
  .toy-portal > span { font-size: 10px; }
  .toy-status { align-items: flex-start; flex-wrap: wrap; gap: 4px 10px; font-size: 9px; }
  .toy-collection { font-size: 9px; }
  .lab-page .toy-shelf { margin-top: 44px; }
  .rain-banner { top: 86px; font-size: 11px; gap: 8px; padding-left: 12px; }
  .toy-toast { bottom: max(16px, env(safe-area-inset-bottom)); font-size: 11px; gap: 9px; padding: 10px 11px; }
  .toy-toast > span { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .toy-shelf *, .red-packet { transition: none !important; }
  .toy-blaster:hover .toy-object, .toy-blaster:active .toy-object, .toy-portal:hover .toy-object, .toy-portal:active .toy-object { transform: none; }
  .toy-bullet { will-change: auto; }
  .red-packet { will-change: auto; }
}