.ferry-page {
  --line: #b8dcd9;
  min-height: 100vh;
  color: #143746;
  background: radial-gradient(ellipse at 8% 22%, #ffe4bd, transparent 39%),
    radial-gradient(ellipse at 85% 70%, #b0e8db, transparent 48%), #eaf7ed;
}

.ferry-page a { color: #17485a; }
.ferry-main { padding-top: 40px; }
.ferry-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 52px; margin: 8px 0 44px; }
.ferry-kicker { color: #935333; font-size: 12px; font-weight: 850; letter-spacing: 2px; text-transform: uppercase; }
.ferry-title { margin: 20px 0; font-size: clamp(64px, 8vw, 106px); line-height: .92; letter-spacing: -.067em; }
.ferry-title span { display: block; color: #197675; }
.ferry-rule { max-width: 400px; color: #385d68; font-size: 18px; line-height: 1.55; }
.ferry-rule strong { color: #183d4a; }
.ferry-key { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.ferry-key span { padding: 8px 12px; border: 1px solid #a1c3bb; border-radius: 24px; background: #f7fff8; font-size: 12px; font-weight: 800; }
.ferry-key .lemon { background: #ffe9a1; border-color: #e1bd5e; }
.ferry-key .berry { background: #f2d8ff; border-color: #cba9db; }
.ferry-key .pear { background: #dcefb4; border-color: #acc778; }

.ferry-console {
  width: 100%;
  max-width: 490px;
  min-width: 0;
  justify-self: end;
  padding: 21px;
  border: 1px solid #6eaaa8;
  border-radius: 25px;
  background: #fffcef;
  box-shadow: 0 8px 0 #82b4a8, 0 20px 40px #25686725;
}
.ferry-stats { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.ferry-stats p { margin: 0; color: #385963; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.ferry-stats strong { display: block; color: #183b4a; font-size: 25px; font-variant-numeric: tabular-nums; }
.ferry-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  padding: 7px;
  border: 1px solid #286f80;
  border-radius: 19px;
  background: #2c8494;
}
.ferry-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 1px solid #b3eeec;
  border-radius: 12px;
  background: linear-gradient(145deg, #a8e6ed, #6bc6d9);
  color: #1b4b60;
  touch-action: manipulation;
}
.ferry-cell:disabled { opacity: 1; cursor: default; }
.ferry-cell[data-island="true"] { border-color: #397764; background: repeating-linear-gradient(132deg, #4a9675, #4a9675 9px, #55a580 9px, #55a580 17px); }
.ferry-cell[data-neighbor="true"] { border: 2px solid #fff6c4; cursor: pointer; }
.ferry-cell[data-boat="true"] { background: #44a4ba; border-color: #195e73; }
.ferry-cell:focus-visible, .ferry-controls button:focus-visible { outline: 3px solid #863794; outline-offset: 2px; z-index: 1; }
.ferry-cell svg { position: relative; width: 76%; height: 76%; pointer-events: none; filter: drop-shadow(0 2px 1px #16485d36); }
.ferry-dock {
  position: absolute;
  inset: 13%;
  display: grid;
  place-items: center;
  border: 2px dashed currentColor;
  border-radius: 50%;
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}
.ferry-dock[data-kind="l"] { color: #815112; background: #fff0a8; }
.ferry-dock[data-kind="b"] { color: #653a85; background: #efdbfa; border-radius: 34% 34% 48% 48%; }
.ferry-dock[data-kind="p"] { color: #3d6532; background: #dcefb2; border-radius: 48% 48% 39% 39%; }
.ferry-check { position: absolute; top: 1px; right: 2px; padding: 2px 4px; border-radius: 8px; background: #23684f; color: #fff; font-size: 12px; line-height: 1; pointer-events: none; }
.ferry-move svg { animation: ferry-arrive .24s ease-out; }
@keyframes ferry-arrive {
  0% { opacity: .58; transform: scale(.88); }
  100% { opacity: 1; transform: scale(1); }
}
.ferry-status { min-height: 42px; display: grid; place-items: center; margin: 8px 0; color: #315865; text-align: center; font-size: 13px; font-weight: 700; }
.ferry-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 11px; }
.ferry-controls button { flex: 1; min-height: 44px; padding: 8px 12px; border: 1px solid #86aaa5; border-radius: 11px; background: #e7f4ee; color: #174658; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.ferry-controls .ferry-primary { min-width: 96px; border-color: #146e70; background: #157575; color: #fff; }
.ferry-controls button:disabled { opacity: .46; cursor: default; }
.ferry-hint { margin: 10px 0 0; color: #41636c; text-align: center; font-size: 11px; }
.ferry-page .ad-slot { margin: 32px auto; }
.ferry-page [hidden] { display: none !important; }

@media (max-width: 780px) {
  .ferry-hero { gap: 25px; }
  .ferry-console { padding: 15px; }
}
@media (max-width: 640px) {
  .ferry-page .collection-header { height: 63px; }
  .ferry-main { padding-top: 11px; }
  .ferry-hero { display: block; margin: 6px 0 30px; }
  .ferry-kicker { margin: 8px 0; font-size: 10px; }
  .ferry-title { margin: 9px 0; font-size: 46px; }
  .ferry-title span { display: inline; }
  .ferry-rule { margin: 8px 0; font-size: 14px; }
  .ferry-rule br { display: none; }
  .ferry-key { margin: 11px 0 15px; gap: 5px; }
  .ferry-key span { padding: 4px 8px; font-size: 10px; }
  .ferry-console { margin-inline: auto; padding: 12px; border-radius: 19px; }
  .ferry-stats { margin-bottom: 10px; }
  .ferry-stats strong { font-size: 22px; }
  .ferry-controls button { padding-inline: 7px; font-size: 12px; }
  .ferry-board { gap: 4px; padding: 5px; border-radius: 15px; }
  .ferry-cell { border-radius: 9px; }
  .ferry-dock { inset: 11%; }
  .ferry-status { min-height: 36px; margin: 5px 0; font-size: 12px; }
}
@media (max-width: 360px) {
  .ferry-page .collection-header { height: 55px; }
  .ferry-main { padding-top: 7px; }
  .ferry-title { font-size: 41px; }
  .ferry-key { margin: 8px 0 10px; }
  .ferry-status { min-height: 30px; margin: 3px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ferry-move svg { animation: none; }
}