/* * Sunflowers. * * Everything is scoped under .game-sunflowers so the game can share a document * with the platform chrome. The standalone build declared its palette on :root * and its dark theme on ; both hang off the root class here, which is * what lets two games coexist in one document. */ .game-sunflowers{ --sun-font: "Baloo 2", system-ui, -apple-system, sans-serif; --ink: #2B2B2B; --accent: #E0A020; --cell: #ffffff; /* playable cells */ --page: #ffffff; --surface:#ffffff; --gridln: color-mix(in srgb, #E5E1D6 82%, #ffffff); --frame: #45362a; /* board frame + New button */ --tile: #e6e1d6; /* clue tiles — beige */ --tile-ink:#55524A; --clue-done:#b0aaa0; --soft: #8A8A8A; --cross: #5A4638; --cross-opacity: .75; --cross-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12' stroke='%23000' stroke-width='3.25' stroke-linecap='round'/%3E%3Cpath d='M18 6L6 18' stroke='%23000' stroke-width='3.25' stroke-linecap='round'/%3E%3C/svg%3E"); --error: #D64545; --uiline: #E5E5E0; --green: #2e9e5b; --green-dark: #278a4f; --muted: #9a9488; --board-gap: 36px; /* Synced to #board via JS so modal cards line up with the grid */ --modal-top: calc(36px + 60px + var(--board-gap)); --modal-width: 460px; } html[data-theme="dark"] .game-sunflowers{ color-scheme: dark; --ink: #dddace; --accent: #E0A020; --cell: #2C2824; --page: #141412; --surface:#1c1c19; --gridln: color-mix(in srgb, #3F3832 82%, #1A1714); --frame: #C4A882; --tile: #3A342E; --tile-ink:#D8D2C8; --clue-done:#6a645c; --soft: #A39E94; --cross: #C4A882; --error: #E85A5A; --uiline: #3F3832; --green: #3cb87a; --green-dark: #2e9e5b; --muted: #9a9488; } .game-sunflowers.no-clue-flourish .clue.done{ color:var(--tile-ink); animation:none !important; } .game-sunflowers.no-clue-flourish .clue.done::after{ display:none !important; } .game-sunflowers *{ box-sizing:border-box; } /* Page shell, matching the other games: the body is the flex column and the game root fills it. The dark background is repeated on the page elements because --page is declared on the root class, which they cannot see. */ html:has(.game-sunflowers) { height: auto; min-height: 100%; background: transparent; } body:has(.game-sunflowers) { margin: 0; position: relative; width: 100%; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; background: transparent; overflow-x: hidden; } .game-sunflowers { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; background: var(--page); color: var(--ink); font-family: var(--sun-font); touch-action: manipulation; } .game-sunflowers .content { position: relative; flex: 1 1 auto; width: 100%; max-width: 1403px; min-height: 700px; display: flex !important; flex-direction: column; align-items: center; background: var(--page); box-sizing: border-box; line-height: normal; } .game-sunflowers .game-shell { width: 100%; max-width: 460px; flex: 1; display: flex; flex-direction: column; position: relative; line-height: normal; padding: 0 22px 12px; box-sizing: border-box; } /* Hint / mistake explainer under the grid. Always reserve the fitBoard hintReserve height so showing the box never resizes the board — and so the text isn't clipped by overflow:hidden ancestors (mobile shell). */ .game-sunflowers .play-chrome { position: relative; display: block; width: 100%; min-height: 140px; height: 140px; overflow: visible; z-index: 5; pointer-events: none; box-sizing: border-box; } .game-sunflowers .play-chrome > * { pointer-events: auto; } .game-sunflowers .play-tools { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin: 0; padding: 0; flex: 0 0 auto; } .game-sunflowers .play-tools .top-icon { width: 44px; height: 44px; border-radius: 8px; } /* Dark yellow hint-count badge (chrome tools live outside .game-sunflowers). */ .game-sunflowers .hint-badge, body:has(.game-sunflowers) #pd-chrome-tools .hint-badge { background: #c9a227; color: #fff; } /* Hide lightbulb on completion — pause/help can stay. */ body:has(.game-sunflowers.is-done) #pd-chrome-tools .hint-btn { display: none !important; } .game-sunflowers .see-results-btn { appearance: none; -webkit-appearance: none; display: none; margin: 0 auto; font-family: var(--sun-font); font-weight: 800; font-size: 1.05rem; line-height: 1; color: #1a1a1a; background: transparent; border: 3px solid #1a1a1a; border-radius: 999px; padding: 12px 28px; cursor: pointer; touch-action: manipulation; align-self: center; justify-self: center; } .game-sunflowers.is-done .see-results-btn:not([hidden]) { display: flex; align-items: center; justify-content: center; width: fit-content; } .game-sunflowers .see-results-btn:active { transform: scale(.98); } .game-sunflowers .top-icon .icon-badge { position: absolute; top: 0; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #e8b028; color: #fff; font-family: var(--sun-font); font-weight: 800; font-size: .82rem; line-height: 20px; text-align: center; pointer-events: none; box-sizing: border-box; } .game-sunflowers .top-icon.is-active { color: #fabd31; background: rgba(250, 189, 49, .16); } .game-sunflowers .top-icon { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; color: #45362a; padding: 0; cursor: pointer; text-decoration: none; border-radius: 8px; } @media (hover: hover) and (pointer: fine) { .game-sunflowers .top-icon { transition: background .15s ease; } .game-sunflowers .top-icon:hover { background: rgba(69, 54, 42, .06); } .game-sunflowers .top-icon:disabled:hover { background: none; } .game-sunflowers .top-icon.is-active:hover { background: rgba(250, 189, 49, .22); } } .game-sunflowers .top-icon svg { width: 34px; height: 34px; display: block; } .game-sunflowers .top-icon:disabled { opacity: .35; cursor: default; color: #45362a; } .game-sunflowers .top-icon:disabled:hover { color: #45362a; } .game-sunflowers .top-icon:focus, .game-sunflowers .top-icon:focus-visible { outline: none; } .game-sunflowers .chrome-tip { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 50; padding: 7px 12px; border-radius: 8px; background: #45362a; color: #fff; font-family: var(--pd-font-ui); font-weight: 700; font-size: .85rem; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s ease; } .game-sunflowers .chrome-tip.show { opacity: 1; } /* Keep edge toolbar tips on-screen on narrow viewports */ .game-sunflowers .play-tools > .top-icon:first-child .chrome-tip { left: 0; transform: none; } .game-sunflowers .play-tools > .top-icon:last-child .chrome-tip { left: auto; right: 0; transform: none; } .game-sunflowers #undo { position: relative; } .game-sunflowers .game-area { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: var(--board-gap); } /* Welcome wrapper must stay in the flex chain or .play collapses and fitBoard sizes cells to the 14px floor. */ .game-sunflowers .pd-play-area { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; } .game-sunflowers .confirm-modal { display: none; position: fixed; inset: 0; z-index: 1102; align-items: center; justify-content: center; background: transparent; padding: 20px; overflow: hidden; overscroll-behavior: none; touch-action: none; box-sizing: border-box; } .game-sunflowers .confirm-modal.show { display: flex; } .game-sunflowers .confirm-modal-card { position: relative; display: flex; flex-direction: column; justify-content: safe center; align-items: stretch; background: var(--surface); border: 2px solid var(--ink); border-radius: 12px; padding: 28px 16px 22px; width: 100%; max-width: 400px; max-height: min(58dvh, calc(100dvh - 96px)); box-sizing: border-box; overflow: hidden; overscroll-behavior: none; text-align: left; } body:has(.game-sunflowers .confirm-modal.show) { overflow: hidden !important; overscroll-behavior: none; } .game-sunflowers .modal-x { position: absolute; top: 25px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border: none; background: none; color: var(--ink); font-size: 32px; font-weight: 600; line-height: 1; text-align: center; cursor: pointer; border-radius: 8px; padding: 0; z-index: 2; } .game-sunflowers .modal-x:hover { background: rgba(0,0,0,.06); } .game-sunflowers .confirm-modal-card h2 { flex: 0 0 auto; margin: 0 0 12px; font-size: 24px; font-weight: 800; line-height: 28px; text-align: center; padding: 0 28px; } .game-sunflowers .confirm-modal-card p { margin: 0 0 12px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink); text-align: center; } .game-sunflowers .confirm-modal-card .modal-body { flex: 0 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; } .game-sunflowers .confirm-modal-card .confirm-actions { flex: 0 0 auto; width: 100%; margin-top: 16px; } .game-sunflowers .confirm-actions { display: flex; gap: 10px; } .game-sunflowers .confirm-actions .ctrl { flex: 1; } .game-sunflowers .confirm-modal-card > p { flex: 0 0 auto; } html[data-theme="dark"] .game-sunflowers .hintbox, html[data-theme="dark"] .game-sunflowers #loaderr, html[data-theme="dark"] .game-sunflowers button.ctrl { background: var(--surface); color: var(--ink); border-color: var(--ink); } html[data-theme="dark"] .game-sunflowers .board-loader { background: var(--page); } html[data-theme="dark"] .game-sunflowers .top-icon, html[data-theme="dark"] .game-sunflowers .top-icon:disabled, html[data-theme="dark"] .game-sunflowers .top-icon:disabled:hover { color: var(--muted); } html[data-theme="dark"] .game-sunflowers .top-icon.is-active { color: #fabd31; } html[data-theme="dark"] .game-sunflowers .top-icon:hover { background: rgba(255,255,255,.06); } html[data-theme="dark"] .game-sunflowers .top-icon.is-active:hover { background: rgba(250, 189, 49, .22); } html[data-theme="dark"] .game-sunflowers .modal-x:hover { background: rgba(255,255,255,.08); } html[data-theme="dark"] .game-sunflowers .clue.done::after { background: linear-gradient( 105deg, transparent 0%, rgba(255,255,255,.18) 45%, rgba(255,255,255,.06) 55%, transparent 100% ); } /* Hint walkthrough + highlight surfaces for dark boards. */ html[data-theme="dark"] .game-sunflowers .hint-next{ background: #35302b; color: var(--ink); border-color: var(--uiline); } html[data-theme="dark"] .game-sunflowers .hint-next:hover{ border-color: var(--frame); background: #3f3832; } html[data-theme="dark"] .game-sunflowers .cell.hl-target{ background: #3d3424; box-shadow: inset 0 0 0 3px var(--accent); } html[data-theme="dark"] .game-sunflowers .cell.hl-bad, html[data-theme="dark"] .game-sunflowers .cell.wrong{ background: #3a2826; box-shadow: inset 0 0 0 3px var(--error); } html[data-theme="dark"] .game-sunflowers .clue.hl-clue{ box-shadow: inset 0 0 0 3px var(--accent); } html[data-theme="dark"] .game-sunflowers .cell.ghost-f, html[data-theme="dark"] .game-sunflowers .cell.ghost-x{ background: #2e3340; box-shadow: inset 0 0 0 2px #5a6a8a; } html[data-theme="dark"] .game-sunflowers .cell.hl-pivot{ background: #2c3348; box-shadow: inset 0 0 0 3px #6b8ae0; } html[data-theme="dark"] .game-sunflowers .clue.hl-break, html[data-theme="dark"] .game-sunflowers .clue.bad{ background: #4a322c; color: var(--error); } /* Tutorial guide highlights reuse hint surfaces; lock non-active cells. */ html[data-theme="dark"] .game-sunflowers #board.tutorial-guide .cell.tut-locked{ opacity: .72; } /* First-visit / Tutorial difficulty: guided play inside a modal (like Zanagrams) */ /* Tutorial: fade completed clue numbers only — no scale/shine flourish. */ .game-sunflowers.is-tutorial .clue.done{ color: var(--clue-done); animation: none !important; transition: color .35s ease; } .game-sunflowers.is-tutorial .clue.done::after{ display: none !important; } .game-sunflowers.is-tutorial .hint-btn, body:has(.game-sunflowers.is-tutorial) #pd-chrome-tools .hint-btn { display: none !important; } .game-sunflowers.is-tutorial #tutBanner:not([hidden]) { display: flex; } .game-sunflowers.is-tutorial .game-area { padding-top: 34px; } body:has(.game-sunflowers.is-tutorial) #pd-chrome-tools { display: none !important; } /* Skip / Play now under the board in the normal play column */ .game-sunflowers .tut-skip { display: none; align-self: center; width: auto; margin: 18px auto 0; padding: 10px 22px; font-family: var(--pd-font-ui); font-size: 16px; font-weight: 700; line-height: 1.2; border-radius: 999px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); cursor: pointer; } .game-sunflowers.is-tutorial .tut-skip:not([hidden]) { display: block; } .game-sunflowers .tut-skip:hover { background: rgba(0, 0, 0, .04); } html[data-theme="dark"] .game-sunflowers .tut-skip:hover { background: rgba(255, 255, 255, .06); } .game-sunflowers .tut-skip.tut-skip-play { background: #1a1a1a; border-color: #1a1a1a; color: #fff; } html[data-theme="dark"] .game-sunflowers .tut-skip.tut-skip-play { background: var(--ink); border-color: var(--ink); color: var(--page); } /* Smooth step-to-step highlight changes (avoid hard clear → flash). */ .game-sunflowers #board.tutorial-guide .cell, .game-sunflowers #board.tutorial-guide .clue, .game-sunflowers #board.tutorial-guide .clue .clue-num{ transition: opacity .34s ease, background-color .34s ease, color .34s ease; } .game-sunflowers #board.tutorial-guide .cell.tut-locked{ cursor: default; opacity: .78; pointer-events: none; } /* Soft shared yellow wash on active cells. */ .game-sunflowers #board.tutorial-guide .cell.hl-target, .game-sunflowers #board.tutorial-guide .cell.tut-ref{ box-shadow: none; background: #F3E4B8; opacity: 1; } html[data-theme="dark"] .game-sunflowers #board.tutorial-guide .cell.hl-target, html[data-theme="dark"] .game-sunflowers #board.tutorial-guide .cell.tut-ref{ box-shadow: none; background: #4a3d24; } /* First plant step: gentle pulse on the target square. */ .game-sunflowers #board.tutorial-guide.tut-pulse-plant .cell.hl-target{ animation: sunflowers-tutPlantPulse 1.5s ease-in-out infinite; } .game-sunflowers #board.tutorial-guide.tut-hl-fade.tut-pulse-plant .cell.hl-target{ animation: none; } @keyframes sunflowers-tutPlantPulse{ 0%, 100%{ background-color: #F3E4B8; transform: scale(1); } 50%{ background-color: #E8D090; transform: scale(1.03); } } html[data-theme="dark"] .game-sunflowers #board.tutorial-guide.tut-pulse-plant .cell.hl-target{ animation-name: sunflowers-tutPlantPulseDark; } @keyframes sunflowers-tutPlantPulseDark{ 0%, 100%{ background-color: #4a3d24; transform: scale(1); } 50%{ background-color: #5c4a28; transform: scale(1.03); } } /* Clue: tint the number, keep tile background. */ .game-sunflowers #board.tutorial-guide .clue.hl-clue{ box-shadow: none; background: var(--tile); } .game-sunflowers #board.tutorial-guide .clue.hl-clue .clue-num{ color: var(--accent); } .game-sunflowers #board.tutorial-guide .clue.hl-clue.done .clue-num{ color: var(--accent); } .game-sunflowers #board.tutorial-guide.tut-hl-fade .cell.hl-target, .game-sunflowers #board.tutorial-guide.tut-hl-fade .cell.tut-ref{ background-color: var(--cell); } .game-sunflowers #board.tutorial-guide.tut-hl-fade .clue.hl-clue .clue-num{ color: var(--tile-ink); } .game-sunflowers #board.tutorial-guide.tut-hl-fade .clue.hl-clue.done .clue-num{ color: var(--clue-done); } /* "Next" beat: cool wash / number so yellow Next is the clear CTA. */ .game-sunflowers #board.tutorial-guide.tut-await-next .cell.hl-target, .game-sunflowers #board.tutorial-guide.tut-await-next .cell.tut-ref{ background: #D8E0EA; } html[data-theme="dark"] .game-sunflowers #board.tutorial-guide.tut-await-next .cell.hl-target, html[data-theme="dark"] .game-sunflowers #board.tutorial-guide.tut-await-next .cell.tut-ref{ background: #2e3844; } .game-sunflowers #board.tutorial-guide.tut-await-next .clue.hl-clue .clue-num, .game-sunflowers #board.tutorial-guide.tut-await-next .clue.hl-clue.done .clue-num{ color: #6B84A0; } html[data-theme="dark"] .game-sunflowers #board.tutorial-guide.tut-await-next .clue.hl-clue .clue-num, html[data-theme="dark"] .game-sunflowers #board.tutorial-guide.tut-await-next .clue.hl-clue.done .clue-num{ color: #8AA0B8; } /* Light ? marks on the uncertain squares. */ .game-sunflowers #board.tutorial-guide.tut-await-next .cell.hl-target::after{ content: '?'; display: block; width: auto; height: auto; background: none; -webkit-mask: none; mask: none; font-family: var(--sun-font); font-weight: 700; font-size: calc(var(--cs) * .42); line-height: 1; color: #6B84A0; opacity: .4; pointer-events: none; } html[data-theme="dark"] .game-sunflowers #board.tutorial-guide.tut-await-next .cell.hl-target::after{ color: #8AA0B8; opacity: .45; } .game-sunflowers .tut-banner{ display: none; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; width: 0; min-width: 100%; box-sizing: border-box; text-align: center; margin: 8px 0 28px; padding: 0 4px; font-family: var(--pd-font-ui); font-weight: 800; font-size: clamp(1.25rem, 4.4vw, 1.55rem); line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; /* Reserve two lines so later steps don't nudge the board. */ min-height: calc(1.3em * 2); } .game-sunflowers .tut-banner-text{ display: inline; opacity: 1; transform: translateY(0); transition: opacity .3s ease, transform .3s ease; } .game-sunflowers .tut-banner b{ font-weight: 800; } .game-sunflowers .tut-banner .tut-flower{ display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin: 0 0.08em; } .game-sunflowers .tut-banner.is-leaving .tut-banner-text, .game-sunflowers .tut-banner.is-leaving .tut-next{ opacity: 0; transform: translateY(-6px); } .game-sunflowers .tut-banner.is-entering .tut-banner-text, .game-sunflowers .tut-banner.is-entering .tut-next{ opacity: 0; transform: translateY(6px); } .game-sunflowers .tut-banner .tut-next{ display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 1.3em; /* match .tut-banner line-height — no layout shift */ margin: 0; padding: 0 0.55em; vertical-align: middle; font-family: inherit; font-weight: 800; font-size: 0.72em; line-height: 1; border-radius: 999px; border: 1.5px solid var(--accent); background: var(--accent); color: #1a1a1a; cursor: pointer; box-shadow: 0 0 0 0 rgba(224, 160, 32, .45); animation: sunflowers-tutGotItPulse 1.6s ease-in-out infinite; transition: opacity .3s ease, transform .3s ease, filter .12s ease; } .game-sunflowers .tut-banner .tut-next:hover{ filter: brightness(1.08); } .game-sunflowers .tut-banner .tut-next:active{ transform: scale(.97); } .game-sunflowers .tut-banner.is-leaving .tut-next, .game-sunflowers .tut-banner.is-entering .tut-next{ animation: none; } @keyframes sunflowers-tutGotItPulse{ 0%, 100%{ box-shadow: 0 0 0 0 rgba(224, 160, 32, .5); transform: scale(1); } 50%{ box-shadow: 0 0 0 6px rgba(224, 160, 32, 0); transform: scale(1.04); } } @media (max-width: 768px) { html:has(.game-sunflowers), .game-sunflowers { height: 100dvh !important; max-height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; } .game-sunflowers .content { min-height: 0 !important; height: 100% !important; flex: 1 1 auto !important; overflow: hidden !important; } .game-sunflowers .game-shell { min-height: 0 !important; height: 100% !important; overflow: hidden !important; padding-left: 14px; padding-right: 14px; } /* Done: unlock page scroll so results sit under the board */ html:has(.game-sunflowers.is-done), body:has(.game-sunflowers.is-done), .game-sunflowers.is-done { height: auto !important; max-height: none !important; min-height: 100dvh !important; overflow-x: hidden !important; overflow-y: auto !important; } .game-sunflowers.is-done .content, .game-sunflowers.is-done .game-shell { height: auto !important; overflow: visible !important; } .game-sunflowers { --modal-top: calc(32px + 52px + var(--board-gap)); } .game-sunflowers .top-icon { width: 40px; height: 40px; } .game-sunflowers .play-tools .top-icon { width: 40px; height: 40px; } .game-sunflowers .top-icon svg { width: 30px; height: 30px; } .game-sunflowers .top-icon .icon-badge { min-width: 18px; height: 18px; font-size: .76rem; line-height: 18px; padding: 0 4px; top: 0; right: -1px; } .game-sunflowers .game-area { flex: 1 1 auto; min-height: 0; /* visible so the under-board hint/error box isn't clipped */ overflow: visible; } } .game-sunflowers button.ctrl{ font-family: var(--sun-font); font-weight:700; font-size:.95rem; color:var(--ink); background:#fff; border:2px solid var(--uiline); border-radius:999px; padding:7px 18px; cursor:pointer; transition:border-color .12s ease, background .12s ease; } .game-sunflowers button.ctrl:hover{ border-color:#CFCFCF; } .game-sunflowers button.ctrl:active{ transform:translateY(1px); } .game-sunflowers button.ctrl.primary{ background:var(--ink); border-color:var(--ink); color:#fff; } .game-sunflowers button.ctrl.primary:hover{ background:#3D3D3D; border-color:#3D3D3D; } .game-sunflowers button.ctrl:disabled{ opacity:.4; cursor:default; transform:none; } .game-sunflowers :focus-visible{ outline:none; } .game-sunflowers .play{ flex:1 1 auto; min-height:0; width:100%; max-width:460px; display:flex; flex-direction:column; align-items:stretch; } .game-sunflowers .board-slot{ flex:1 1 auto; min-height:0; width:100%; display:flex; flex-direction:column; } .game-sunflowers .board-wrap{ position:relative; flex:0 1 auto; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; } .game-sunflowers .board-wrap.is-loading .board-stack{ visibility:hidden; } .game-sunflowers .board-loader{ position:absolute; inset:0; z-index:6; display:none; align-items:center; justify-content:center; background:var(--page); pointer-events:none; } .game-sunflowers .board-wrap.is-loading .board-loader{ display:flex; } .game-sunflowers .board-loader-spinner{ width:28px; height:28px; border:3px solid #E0DBD0; border-top-color:var(--ink); border-radius:50%; animation:sunflowers-boardSpin .65s linear infinite; } @keyframes sunflowers-boardSpin{ to{ transform:rotate(360deg); } } .game-sunflowers .board-stack{ position:relative; display:flex; flex-direction:column; align-items:stretch; width:max-content; max-width:100%; } .game-sunflowers .board-frame{ position:relative; width:max-content; max-width:100%; } .game-sunflowers.is-paused #board, .game-sunflowers.is-paused .board-frame{ visibility:hidden; } .game-sunflowers #board{ display:grid; gap:1px; background:var(--gridln); border:3px solid var(--frame); border-radius:5px; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; } .game-sunflowers .cell, .game-sunflowers .clue{ width:var(--cs); height:var(--cs); border-radius:0; display:flex; align-items:center; justify-content:center; font-family: var(--sun-font); } /* Match the board's rounded frame on corner squares */ .game-sunflowers .cell.corner-tl, .game-sunflowers .clue.corner-tl{ border-radius:5px 0 0 0; } .game-sunflowers .cell.corner-tr, .game-sunflowers .clue.corner-tr{ border-radius:0 5px 0 0; } .game-sunflowers .cell.corner-bl, .game-sunflowers .clue.corner-bl{ border-radius:0 0 0 5px; } .game-sunflowers .cell.corner-br, .game-sunflowers .clue.corner-br{ border-radius:0 0 5px 0; } .game-sunflowers .cell{ appearance:none; -webkit-appearance:none; padding:0; margin:0; position:relative; overflow:hidden; background:var(--cell); border:none; cursor:pointer; font-size:calc(var(--cs) * .62); line-height:1; transition:background .12s ease; -webkit-tap-highlight-color: transparent; touch-action:none; } /* Only real mouse/trackpad hover — touch leaves :hover stuck on the cell. */ @media (hover: hover) and (pointer: fine) { .game-sunflowers .cell:hover{ background:#f3f1ec; } html[data-theme="dark"] .game-sunflowers .cell:hover{ background:#35302b; } } .game-sunflowers .cell:focus{ outline: none; } .game-sunflowers .cell:focus-visible{ outline: 2px solid var(--accent); outline-offset:-3px; } .game-sunflowers .cell.filled::after{ content:''; display:block; width:calc(var(--cs) * .64); height:calc(var(--cs) * .64); background:url('sunflower.png') center / contain no-repeat; } .game-sunflowers .cell.blank::after{ content:''; display:block; width:calc(var(--cs) * .32); height:calc(var(--cs) * .32); background-color:var(--cross); opacity:var(--cross-opacity); -webkit-mask:var(--cross-mark) center / contain no-repeat; mask:var(--cross-mark) center / contain no-repeat; } .game-sunflowers .cell.pencil.filled::after{ opacity: .42; } .game-sunflowers .cell.pencil.blank::after{ opacity: .38; background-color: #a8b39f; } html[data-theme="dark"] .game-sunflowers .cell.pencil.blank::after{ opacity: .18; background-color: #8a8578; } .game-sunflowers .clue{ position:relative; overflow:hidden; background:var(--tile); color:var(--tile-ink); font-weight:800; font-size:calc(var(--cs) * .48); line-height:1; transition:color .35s ease; } .game-sunflowers .clue .clue-num{ display:block; position:relative; z-index:1; } .game-sunflowers .clue.done{ color:var(--clue-done); animation:sunflowers-clueComplete .55s ease forwards; cursor:pointer; } /* Soft highlight sweep when a clue first completes. */ .game-sunflowers .clue.done::after{ content:''; position:absolute; top:0; left:0; width:45%; height:100%; background:linear-gradient( 105deg, transparent 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.15) 55%, transparent 100% ); transform:translateX(-120%); opacity:0; animation:sunflowers-clueShine .55s ease-out forwards; pointer-events:none; z-index:0; } @keyframes sunflowers-clueComplete{ 0%{ color:var(--tile-ink); transform:scale(1); } 40%{ color:#c4a06a; transform:scale(1.08); } 100%{ color:var(--clue-done); transform:scale(1); } } @keyframes sunflowers-clueShine{ 0%{ transform:translateX(-120%); opacity:0; } 25%{ opacity:1; } 100%{ transform:translateX(260%); opacity:0; } } /* Restored mid-puzzle clues skip the completion flourish. */ .game-sunflowers #board.is-restoring .clue.done, .game-sunflowers #board.is-restoring .clue.done::after{ animation:none !important; } .game-sunflowers .clue.bad{ background:#E8C4B4; color:var(--error); } .game-sunflowers .cell.hl-target{ box-shadow:inset 0 0 0 3px var(--accent); background:#FBF5E2; } .game-sunflowers .cell.hl-bad{ box-shadow:inset 0 0 0 3px var(--error); background:#F8E4E0; } .game-sunflowers .clue.hl-clue{ box-shadow:inset 0 0 0 3px var(--accent); } /* ---- staged hint walkthrough: ghost marks + pivot + breaking clue ---- */ .game-sunflowers .cell.ghost-f, .game-sunflowers .cell.ghost-x{ box-shadow:inset 0 0 0 2px #B9C6E2; background:#F4F6FB; } .game-sunflowers .cell.ghost-f::after{ content:''; display:block; width:calc(var(--cs) * .64); height:calc(var(--cs) * .64); background:url('sunflower.png') center / contain no-repeat; opacity:.45; } .game-sunflowers .cell.ghost-x::after{ content:''; display:block; width:calc(var(--cs) * .32); height:calc(var(--cs) * .32); background-color:var(--cross); opacity:.55; -webkit-mask:var(--cross-mark) center / contain no-repeat; mask:var(--cross-mark) center / contain no-repeat; } .game-sunflowers .cell.hl-pivot{ box-shadow:inset 0 0 0 3px #4A6FD4; background:#EDF1FC; } @keyframes sunflowers-breakPulse{ 0%, 100%{ box-shadow:inset 0 0 0 3px var(--error); } 50%{ box-shadow:inset 0 0 0 5px var(--error); } } .game-sunflowers .clue.hl-break{ background:#E8C4B4; color:var(--error); animation:sunflowers-breakPulse .9s ease infinite; } .game-sunflowers .hint-controls{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:8px; } .game-sunflowers .hint-step{ font-size:.82em; font-weight:700; opacity:.55; font-variant-numeric:tabular-nums; } .game-sunflowers .hint-next{ font-family: var(--sun-font); font-weight:700; font-size:.9em; padding:5px 14px; border-radius:9px; border:2px solid var(--uiline); background:#fff; color:var(--ink); cursor:pointer; } .game-sunflowers .hint-next:hover{ border-color:var(--ink); } .game-sunflowers .cell.wrong{ background:#F8E4E0; box-shadow:inset 0 0 0 3px var(--error); } .game-sunflowers .cell.wrong.filled::after{ filter: grayscale(0.15) sepia(0.35) hue-rotate(-20deg) saturate(1.4); } .game-sunflowers .cell.wrong.blank::after{ color:var(--error); } @keyframes sunflowers-cellShake{ 0%, 100%{ transform:translateX(0); } 20%{ transform:translateX(-3px); } 40%{ transform:translateX(3px); } 60%{ transform:translateX(-2px); } 80%{ transform:translateX(2px); } } .game-sunflowers .cell.shake{ animation:sunflowers-cellShake .38s ease; } .game-sunflowers #board.is-revealing{ pointer-events:none; } .game-sunflowers .cell.reveal-clear{ animation:sunflowers-revealClear .34s ease both; } .game-sunflowers .cell.reveal-place{ animation:sunflowers-revealPlace .36s cubic-bezier(.34,1.45,.64,1) both; } @keyframes sunflowers-revealClear{ 0%{ transform:scale(1); opacity:1; } 55%{ transform:scale(.86); opacity:.35; } 100%{ transform:scale(1); opacity:1; } } @keyframes sunflowers-revealPlace{ 0%{ transform:scale(.72); } 70%{ transform:scale(1.08); } 100%{ transform:scale(1); } } .game-sunflowers .hintbox{ display:none; position:absolute; left:0; right:0; top:8px; bottom:0; margin:0; width:100%; height:auto; max-height:100%; box-sizing:border-box; overflow:auto; overflow-wrap:break-word; background:var(--page); border:2px solid var(--uiline); border-radius:12px; padding:14px 16px; font-size:.92rem; font-weight:500; line-height:1.45; box-shadow:0 8px 22px rgba(0,0,0,.08); } .game-sunflowers .hintbox.show{ display:flex; flex-direction:column; justify-content:center; gap:4px; } .game-sunflowers .hintbox .hint-text{ display:block; text-align:left; } .game-sunflowers .hintbox b{ font-weight:800; } .game-sunflowers .play-stats{ position:relative; z-index:6; flex:0 0 auto; margin-top:12px; width:100%; min-width:0; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:0; font-family: var(--sun-font); color:#45362a; user-select:none; } /* Keep hint/error text readable across the board width */ .game-sunflowers .play-stats .play-chrome { width: min(100%, 460px); max-width: 100%; } /* Puzzle finished — board stays visible; completion panel sits under it. */ .game-sunflowers.is-done .play-tools { display: none !important; } .game-sunflowers.is-done .play-chrome { display: none; } .game-sunflowers.is-done #playStats { display: none !important; } /* Under-board completion — staged reveal like The Middle / 18 Words */ .game-sunflowers #completeScreen.pd-complete-panel { margin-top: 36px; padding-left: 0; padding-right: 0; opacity: 1; transform: none; transition: none; } .game-sunflowers #completeScreen.pd-complete-panel:not(.is-shown) { visibility: hidden; pointer-events: none; } .game-sunflowers #completeScreen.pd-complete-panel.is-shown { visibility: visible; pointer-events: auto; } .game-sunflowers #completeScreen.pd-complete-panel.is-instant .sun-c-stage { transition: none; } .game-sunflowers .sun-c-stage { opacity: 0; transform: translateY(22px); transition: opacity 0.45s cubic-bezier(.22,1,.36,1), transform 0.45s cubic-bezier(.22,1,.36,1); width: 100%; display: flex; flex-direction: column; align-items: center; } .game-sunflowers .sun-c-stage.is-in { opacity: 1; transform: none; } .game-sunflowers .sun-c-score-block { width: 100%; } .game-sunflowers .sun-c-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 14px; } .game-sunflowers .sun-c-pills[hidden] { display: none !important; } .game-sunflowers .sun-c-pill { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border-radius: 999px; font-family: var(--pd-font-ui); font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; } .game-sunflowers .sun-c-pill.is-perfect { background: color-mix(in srgb, #2e9e5b 16%, #fff); color: #1f7a45; } .game-sunflowers .sun-c-pill.is-hint { background: color-mix(in srgb, #c9852a 16%, #fff); color: #9a6414; } .game-sunflowers .sun-c-pill.is-mistake { background: color-mix(in srgb, #f22f2c 14%, #fff); color: #c42220; } .game-sunflowers #completeScreen.is-failed .pd-c-share { display: none !important; } .game-sunflowers #completeScreen.is-failed #cTime { display: none !important; } .game-sunflowers #completeScreen #cTime[hidden] { display: none !important; } .game-sunflowers #completeScreen .pd-c-score { font-variant-numeric: tabular-nums; } .game-sunflowers #completeScreen.is-failed #cTitle:not([hidden]) { display: block; } .game-sunflowers #loaderr{ display:none; width:100%; max-width:480px; background:#fff; border:2px solid var(--uiline); border-radius:12px; padding:18px 20px; text-align:center; } .game-sunflowers #loaderr.show{ display:block; } .game-sunflowers #loaderr h2{ margin:0 0 6px; font-size:1.15rem; font-weight:800; } .game-sunflowers #loaderr p{ margin:0 0 12px; font-size:.9rem; font-weight:500; color:var(--soft); line-height:1.55; } @keyframes sunflowers-floatUp{ 0%{ transform:translateY(0); } 40%{ transform:translateY(calc(var(--cs) * -.14)); } 100%{ transform:translateY(0); } } .game-sunflowers #board.won .cell.filled::after{ animation:sunflowers-floatUp 1s ease both; animation-delay:var(--d); } @media (prefers-reduced-motion: reduce){ .game-sunflowers *{ animation:none !important; transition:none !important; } } /* The platform shell owns the loading spinner and the reveal, so the standalone build's own loading gate is gone. */ .game-sunflowers .game-shell { position: relative; min-height: 280px; } @keyframes sunflowers-sunSpin { to { transform: rotate(360deg); } }