/* Quests (plant) and profile (sudoku) */
.q-label { font-family: var(--cond); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }

.can { position: absolute; top: 3cqw; right: 8%; width: 20cqw; opacity: 0; transform: translate(12cqw, -4cqw) rotate(0); transition: opacity .3s, transform .6s ease; pointer-events: none; z-index: 2; }
.can.pour { opacity: 1; transform: translate(-12cqw, 0) rotate(-28deg); }
.drops { position: absolute; left: calc(50% - 9cqw); top: 14cqw; width: 8cqw; height: 24cqw; pointer-events: none; }
.drops i { position: absolute; left: 50%; top: 0; width: 1.6cqw; height: 2.4cqw; margin-left: -.8cqw; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #6fb4e6; opacity: 0; }
.drops i:nth-child(2) { margin-left: 1.4cqw; } .drops i:nth-child(3) { margin-left: -2.6cqw; } .drops i:nth-child(4) { margin-left: .2cqw; }
.drops.pour i { animation: drip .6s .35s linear infinite; }
.drops.pour i:nth-child(2) { animation-delay: .5s; } .drops.pour i:nth-child(3) { animation-delay: .65s; } .drops.pour i:nth-child(4) { animation-delay: .8s; }
@keyframes drip { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(22cqw); opacity: 0; } }

.dots { display: flex; gap: 1.2cqw; }
.dots i { width: 5cqw; height: 1.7cqw; border-radius: 1cqw; background: #d3dccf; transition: background .4s; }
.dots i.on { background: #6fb4e6; }
.btn .count { margin-left: 8px; opacity: .6; font-weight: 500; }
.quest-hint { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 520px; margin: 0 auto; padding-bottom: 80px; }
.windows.one { grid-template-columns: minmax(0, 640px); justify-content: center; }

/* Sudoku */
.sdk-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg { display: flex; gap: 6px; }
.sdk-info { font-family: var(--display); font-size: 28px; letter-spacing: .04em; color: var(--gray); }
.sdk-grid { display: grid; grid-template-columns: repeat(9, 1fr); width: min(100%, 330px); margin-inline: auto; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: #fff; }
.sdk-cell { aspect-ratio: 1; padding: 0; display: grid; place-items: center; font-family: var(--sans); font-size: clamp(13px, 4vw, 18px); font-weight: 500; color: #3d6fa6; background: #fff; border: 0; border-right: 1px solid #deded6; border-bottom: 1px solid #deded6; border-radius: 0; transition: background .12s; }
.sdk-cell.cb { border-right: 2px solid var(--ink); }
.sdk-cell.rb { border-bottom: 2px solid var(--ink); }
.sdk-cell:nth-child(9n) { border-right: 0; }
.sdk-cell:nth-child(n+73) { border-bottom: 0; }
.sdk-cell.given { color: var(--ink); font-weight: 700; background: #f7f7f2; }
.sdk-cell.peer { background: #eef2f7; }
.sdk-cell.same { background: #dbe7f5; }
.sdk-cell.sel { background: #c6dcf4; }
.sdk-cell.hinted { color: #b8602c; }
.sdk-cell.wrong { background: #fbd9d9; color: #b3261e; }
.sdk-cell:focus-visible { outline: 2px solid #3d6fa6; outline-offset: -2px; }
.sdk-grid.done { animation: pop .7s; border-color: #3d8a4e; }
@keyframes pop { 40% { transform: scale(1.02); } }
.sdk-pad { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; width: min(100%, 330px); margin-inline: auto; }
.sdk-pad button { padding: 6px 0; border-radius: 8px; background: #f4f4ef; border: 1px solid #dcdcd3; font-weight: 600; font-size: 16px; }
.sdk-pad button:hover { background: #ebebe4; }
@media (max-width: 520px) { .sdk-pad { grid-template-columns: repeat(5, 1fr); } }

.win.game.small { grid-column: 1 / -1; width: min(100%, 400px); justify-self: center; }

/* the sudoku lives on the iMac screen when "profile" is open */
.sdisplay { container-type: inline-size; grid-template-columns: auto minmax(0, 1fr); gap: 2.4cqw; padding: 2.6cqw; align-items: stretch; background: #fbfbf7; }
.sdisplay .sd-left { height: 100%; aspect-ratio: 1; }
.sdisplay .sdk-grid { width: 100%; height: 100%; margin: 0; border-width: 1.5px; border-radius: 3px; }
.sdisplay .sdk-cell { font-size: 3.5cqw; aspect-ratio: auto; }
.sdisplay .sd-right { display: flex; flex-direction: column; justify-content: center; gap: 1.8cqw; min-width: 0; }
.sdisplay .sdk-top { gap: 1cqw; flex-wrap: nowrap; justify-content: space-between; }
.sdisplay .seg { gap: .8cqw; }
.sdisplay .btn { font-size: max(9px, 2.7cqw); padding: .9cqw 1.7cqw; border-radius: 1.4cqw; }
.sdisplay .sdk-info { font-size: 5cqw; }
.sdisplay .sdk-pad { grid-template-columns: repeat(5, 1fr); gap: .9cqw; width: 100%; margin: 0; }
.sdisplay .sdk-pad button { padding: 0; height: 5.6cqw; min-height: 20px; font-size: max(10px, 3cqw); border-radius: 1.2cqw; }
.sdisplay .row { gap: .9cqw; justify-content: flex-start; flex-wrap: nowrap; }
.sdisplay .help { font-size: max(9px, 2.6cqw); line-height: 1.25; text-align: left; min-height: 2.5em; }
.sdisplay .sdk-grid { grid-template-rows: repeat(9, 1fr); }
.sdisplay .sd-left { width: 50cqw; height: 50cqw; align-self: center; aspect-ratio: auto; }
.sdisplay .sdk-top { flex-wrap: wrap; }
.sdisplay .sdk-info { font-size: 4.2cqw; line-height: 1; }
@media (max-width: 520px) { .sdisplay .sd-left { width: 46cqw; height: 46cqw; } .sdisplay .sdk-pad button { min-height: 0; } }

/* the games open in a pop-up window, like the photobooth */
.sheet .win-body .display { aspect-ratio: 16 / 9; border-radius: 8px; border: 1px solid var(--line); }
@media (max-width: 560px) {
  .sheet .sdisplay { aspect-ratio: auto; grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .sheet .sdisplay .sd-left { width: min(100%, 340px); height: auto; aspect-ratio: 1; justify-self: center; }
  .sheet .sdisplay .sdk-cell { font-size: 17px; }
  .sheet .sdisplay .btn { font-size: 14px; padding: 8px 14px; }
  .sheet .sdisplay .sdk-pad { gap: 6px; }
  .sheet .sdisplay .sdk-pad button { height: 40px; font-size: 16px; }
  .sheet .sdisplay .sdk-info { font-size: 26px; }
  .sheet .sdisplay .help { font-size: 14px; }
  .sheet .sdisplay .row { flex-wrap: wrap; }
}
/* Cat Run (quest 1): replaces the plant game. Add this to the end of css/games.css */
.cdisplay { display: block; position: relative; overflow: hidden; background: linear-gradient(#fdf0f4, #f7dce5); }
.cdisplay canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; }
.cat-hint { margin-top: 10px; text-align: center; color: var(--gray); }