/* CONTACT — the Sun God Lawn by the pier (SPEC §4.8, SECTIONS-C). The look changes only under html.is-game;
   no-JS, Reviewer mode and print keep today's contact card (address, phone, links list). */

/* ================================================================ the mail line */
html.is-game #contact .card { overflow: visible; }
html.is-game #contact .mailline {
  gap: 6px 12px; margin: 0 -10px; padding: 10px; border-radius: 6px;
  background: rgba(6, 9, 18, 0.45); border: 1px solid rgba(255, 255, 255, 0.06);
}
html.is-game #contact .mailline:hover, html.is-game #contact .mailline:focus-visible,
html.is-game #contact .mailline.is-lit, html.is-game #contact .mailline.is-current {
  background: linear-gradient(90deg, rgba(255, 205, 0, 0.07), rgba(6, 9, 18, 0.45) 60%); box-shadow: inset 3px 0 0 var(--gold);
}
html.is-game #mail-link { font-size: 20px; font-weight: 500; color: var(--ink); text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat; transition: background-size 300ms var(--ease), color var(--t-ui); }
html.is-game #mail-link:hover, html.is-game #mail-link:focus-visible, html.is-game .mailline.is-hot #mail-link { background-size: 100% 2px; color: #fff; }
html.is-game .mailline .gbtn.is-ok { border-color: var(--hp); color: var(--hp); }
html.is-game .mailline .phone { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); text-decoration: none; }
html.is-game .mailline .phone:hover, html.is-game .mailline .phone:focus-visible { color: var(--ink); }

.mailbox {
  position: relative; display: inline-grid; place-items: end center; width: 44px; height: 44px; padding: 0 4px 3px 0;
  border: 0; border-radius: 4px; background: none; cursor: pointer; vertical-align: middle;
}
.mailbox:hover { background: rgba(255, 255, 255, 0.05); }
.mailbox:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mailbox__body { display: block; width: 36px; height: auto; }
/* the flag: a pole on the right of the box, horizontal when down, upright when up */
.mailbox__flag {
  position: absolute; left: 31px; top: 13px; width: 3px; height: 14px; background: #cbd5e1;
  transform-origin: 50% 100%; transform: rotate(90deg); transition: transform 360ms cubic-bezier(0.3, 1.6, 0.5, 1);
  box-shadow: 0 0 0 1px #0b1020;
}
.mailbox__flag::after { content: ''; position: absolute; left: 3px; top: 0; width: 9px; height: 6px; background: #ef4444; box-shadow: 0 0 0 1px #0b1020, 0 0 6px rgba(239, 68, 68, 0.5); }
.mailbox.is-up .mailbox__flag { transform: rotate(0deg); }
html.rm .mailbox__flag { transition: none; }

.phone__i { display: inline-grid; place-items: center; transform-origin: 50% 80%; }
.phone__i svg { display: block; width: 18px; height: auto; }
.phone.is-ring .phone__i { animation: phone-ring 300ms steps(4) 3; }
@keyframes phone-ring { 25% { transform: rotate(12deg); } 75% { transform: rotate(-12deg); } }
html.rm .phone.is-ring .phone__i { animation: none; }

.pigeon { position: fixed; z-index: 80; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; }
.pigeon__b { display: block; animation: pigeon-flap 180ms steps(2) infinite; }
.pigeon__b svg { display: block; width: 36px; height: auto; }
@keyframes pigeon-flap { 50% { transform: scaleY(0.82) translateY(2px); } }

/* ================================================================ portals */
html.is-game #contact .portals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
html.is-game #contact .portal {
  --pc: var(--gold);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 74px auto; justify-items: center; align-items: center; gap: 8px;
  padding: 10px 6px 10px; border-radius: 6px; text-decoration: none; color: var(--ink-2); text-shadow: none;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--pc) 12%, transparent), transparent 62%), rgba(6, 9, 18, 0.55);
  border: 1px solid color-mix(in srgb, var(--pc) 22%, transparent);
  transition: border-color var(--t-ui), color var(--t-ui), transform 200ms var(--ease), box-shadow var(--t-ui);
}
html.is-game #contact .portal::before { content: none; display: none; }
html.is-game #contact .portal[data-portal='scholar'] { --pc: #5FB3FF; }
html.is-game #contact .portal[data-portal='github'] { --pc: #B58CFF; }
html.is-game #contact .portal[data-portal='linkedin'] { --pc: #00C6D7; }
html.is-game #contact .portal[data-portal='x'] { --pc: #E7E9EA; }
html.is-game #contact .portal:hover, html.is-game #contact .portal:focus-visible {
  color: var(--ink); transform: translateY(-2px); border-color: color-mix(in srgb, var(--pc) 70%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--pc) 28%, transparent), inset 0 0 18px color-mix(in srgb, var(--pc) 10%, transparent);
}
html.is-game #contact .portal:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
html.is-game #contact .portal > img { grid-area: 1 / 1; justify-self: center; align-self: center; z-index: 2; width: 24px; height: 24px; opacity: 0.95; transition: transform 240ms var(--ease); }
html.is-game #contact .portal:hover > img, html.is-game #contact .portal:focus-visible > img { transform: scale(1.08); }
html.is-game .portal__l { grid-row: 2; grid-column: 1; font: 400 9px/1.2 var(--px); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
html.is-game .portal__ring { grid-area: 1 / 1; position: relative; width: 70px; height: 70px; border-radius: 50%; }
.portal__ring::before, .portal__ring::after {
  content: ''; position: absolute; border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 5px), #000 calc(50% - 4px) calc(50% - 1px), transparent 50%);
  mask: radial-gradient(circle, transparent 0 calc(50% - 5px), #000 calc(50% - 4px) calc(50% - 1px), transparent 50%);
}
.portal__ring::before {
  inset: 0; background: repeating-conic-gradient(from 0deg, var(--pc) 0 14deg, transparent 14deg 22deg, var(--gold) 22deg 30deg, transparent 30deg 45deg);
  animation: portal-cw 8s steps(48) infinite;
}
.portal__ring::after {
  inset: 9px; background: repeating-conic-gradient(from 10deg, color-mix(in srgb, var(--pc) 70%, #fff) 0 10deg, transparent 10deg 30deg);
  animation: portal-ccw 12s steps(48) infinite; opacity: 0.8;
}
.portal__core {
  position: absolute; inset: 14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 11, 22, 0.95) 30%, color-mix(in srgb, var(--pc) 30%, rgba(8, 11, 22, 0.9)) 100%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--pc) 40%, transparent), inset 0 0 10px color-mix(in srgb, var(--pc) 45%, transparent);
}
.portal__core::after { content: ''; position: absolute; inset: -16px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, rgba(255, 255, 255, 0) 70%); opacity: 0; transform: scale(1.4); }
.portal.is-warp .portal__core::after { animation: portal-implode 360ms var(--ease) both; }
@keyframes portal-implode { 0% { opacity: 0.95; transform: scale(1.4); } 100% { opacity: 0; transform: scale(0.1); } }
.portal:hover .portal__ring::before, .portal:focus-visible .portal__ring::before { animation-duration: 1.8s; }
.portal:hover .portal__ring::after, .portal:focus-visible .portal__ring::after { animation-duration: 2.6s; opacity: 1; }
@keyframes portal-cw { to { transform: rotate(360deg); } }
@keyframes portal-ccw { to { transform: rotate(-360deg); } }
section:not(.is-live) .portal__ring::before, section:not(.is-live) .portal__ring::after { animation-play-state: paused; }
html.rm .portal__ring::before, html.rm .portal__ring::after { animation: none; }
html.rm .portal:hover .portal__core, html.rm .portal:focus-visible .portal__core { box-shadow: 0 0 26px var(--pc), inset 0 0 14px var(--pc); }

/* ================================================================ quick subjects */
html.is-game .compose { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.compose__k { margin-right: 4px; font: 400 9px/1 var(--px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
html.is-game .compose .chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; text-decoration: none; color: var(--ink-2);
  background: rgba(24, 43, 73, 0.5); border: 1px solid var(--line-2); transition: border-color var(--t-ui), color var(--t-ui), transform 140ms var(--ease);
}
html.is-game .compose .chip::before { content: '✉'; font: 400 12px/1 var(--sans); color: var(--gold); }
html.is-game .compose .chip:hover, html.is-game .compose .chip:focus-visible { color: var(--ink); border-color: var(--gold-a45); transform: translateY(-1px); }
@media (pointer: coarse) { html.is-game .compose .chip { min-height: 44px; } }

/* ================================================================ save point */
html.is-game .savepoint {
  display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 8px 14px 8px 8px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(6, 9, 18, 0.5) 55%); border: 1px solid rgba(74, 222, 128, 0.22);
}
.savepoint__crystal {
  position: relative; display: grid; place-items: center; width: 48px; height: 48px; flex: none; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.25), transparent 65%);
}
.savepoint__crystal img { height: 38px; width: auto; animation: crystal-bob 2.4s steps(4) infinite alternate; filter: drop-shadow(0 0 8px rgba(0, 198, 215, 0.6)); }
.savepoint__crystal::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; box-shadow: 0 0 18px rgba(74, 222, 128, 0.35); animation: crystal-glow 3s ease-in-out infinite; }
.savepoint__crystal:hover img { filter: drop-shadow(0 0 12px rgba(74, 222, 128, 0.9)); }
.savepoint__crystal:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@keyframes crystal-bob { to { transform: translateY(-3px); } }
@keyframes crystal-glow { 50% { opacity: 0.35; } }
section:not(.is-live) .savepoint__crystal img, section:not(.is-live) .savepoint__crystal::after { animation-play-state: paused; }
html.rm .savepoint__crystal img, html.rm .savepoint__crystal::after { animation: none; }
.savepoint.is-saved .savepoint__crystal { animation: crystal-pulse 600ms var(--ease); }
@keyframes crystal-pulse { 30% { transform: scale(1.18); box-shadow: 0 0 30px rgba(74, 222, 128, 0.8); } }
html.rm .savepoint.is-saved .savepoint__crystal { animation: none; box-shadow: 0 0 20px rgba(74, 222, 128, 0.6); }
html.is-game .savepoint__t { font: 400 9.5px/1.5 var(--px); letter-spacing: 0.08em; text-transform: uppercase; color: #bbf7d0; }
.savepoint.is-saved .savepoint__t { color: var(--hp); }

/* ================================================================ the sea lion on the card's bottom edge */
.sealion {
  position: absolute; right: 30px; bottom: -3px; z-index: 3; display: block; padding: 0; border: 0; background: none; cursor: pointer;
  transform-origin: 50% 100%;
}
.sealion img { display: block; width: 48px; height: 36px; }
.sealion:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sealion::before { content: ''; position: absolute; inset: -8px -6px -4px; }
.sealion__z { position: absolute; right: -4px; top: -10px; font: 400 8px/1 var(--px-num); color: var(--ink-2); animation: seal-z 2.6s linear infinite; pointer-events: none; }
@keyframes seal-z { 0% { transform: translate(0, 4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(8px, -12px) scale(1.4); opacity: 0; } }
section:not(.is-live) .sealion__z { animation-play-state: paused; }
html.rm .sealion__z { animation: none; }
.sealion.is-awake .sealion__z { display: none; }
.sealion.is-awake { animation: seal-flop 1.1s var(--ease); }
@keyframes seal-flop { 20% { transform: translateY(-10px) rotate(-8deg); } 45% { transform: translateY(16px) rotate(14deg); opacity: 0.4; } 70% { transform: translateY(-4px) rotate(-3deg); opacity: 1; } }
html.rm .sealion.is-awake { animation: none; }
@media (pointer: coarse) { .sealion::before { inset: -10px; } }

/* ================================================================ phones */
@media (max-width: 720px) {
  html.is-game #mail-link { font-size: 17px; }
  html.is-game #contact .portals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.is-game #contact .portal { grid-template-rows: 66px auto; padding: 8px 4px; }
  html.is-game .portal__ring { width: 62px; height: 62px; }
  html.is-game .portal__l { font-size: 10px; letter-spacing: 0.02em; }
  .sealion { right: 18px; }
}