.stage{max-width:640px;margin-inline:auto}.turnbar{--tb-msg-lines:2;--tb-st-lines:1}.turnbar .message{font-size:16px}.board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:8px;max-width:calc(var(--cols) * 60px + (var(--cols) - 1) * 8px);margin:16px auto;outline-offset:4px}.flower-cell{width:100%;aspect-ratio:1;min-width:44px;min-height:44px;border:1px solid var(--line-strong);border-radius:6px;padding:2px;background:var(--surface);box-shadow:var(--shadow-piece);cursor:pointer}.flower-cell svg{width:100%;height:100%;display:block}.flower-cell.selected{border:3px solid var(--accent);padding:0;background:var(--bg)}.flower-cell.selected::after{content:''}.flower-cell.empty{border-style:dashed;box-shadow:none;background:var(--bg);color:var(--ink-sub);cursor:default}.flower-cell.empty span{font-size:24px}.flower-cell:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.board.paused .flower-cell svg{visibility:hidden}.flower-cell:disabled{cursor:default}.stage .controls{display:flex;gap:8px;flex-wrap:wrap;margin-block:8px}.puzzle-label,.progress,.selection{text-align:center;margin-block:8px;min-height:24px}.stage .field{display:inline-flex;flex-direction:column;gap:8px;margin:8px;max-width:100%}.field input{width:128px;max-width:100%;font:inherit;padding:8px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--ink)}#result{border-top:1px solid var(--line);padding-top:16px}#stats{font-size:14px;color:var(--ink-sub)}.article figure{margin:24px 0}.article img{width:100%;height:auto}.article table{width:100%;border-collapse:collapse;table-layout:fixed}.article th,.article td{padding:8px;border:1px solid var(--line);overflow-wrap:anywhere}.article{overflow-wrap:anywhere}.ad-gap{height:150px}.legend{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;font-size:14px}.legend svg{width:32px;height:32px}.legend span{display:flex;align-items:center;gap:4px}@media(min-width:700px){.turnbar{--tb-msg-lines:1}}@media(max-width:480px){.stage{padding-inline:8px}.board{gap:8px}}@media(prefers-color-scheme:dark){.flower-cell svg{filter:var(--img-dim)}}
.site-header,.site-footer{padding-inline:16px}main{max-width:960px;margin:24px auto;padding-inline:16px}

/* Individual game UI: reuse the original flowers, with a garden and bouquet tray. */
.fp-quality{padding:16px;isolation:isolate}.fp-heading .puzzle-label{font-size:17px;font-weight:700;margin:4px 0 10px}.fp-toolbar{display:flex;justify-content:flex-end;gap:8px;margin-bottom:12px}.fp-toolbar .btn{font-size:14px;min-height:44px;padding:0 12px}.fp-goal{gap:8px;border-block:1px solid var(--line);padding:8px 0;margin:0 0 12px}.fp-goal-label{font-weight:700;font-size:14px}.fp-goal-types{display:flex;align-items:center;gap:5px}.fp-goal-types svg{width:32px;height:34px}.fp-goal-types svg:last-child{width:42px;height:40px}.fp-goal b{color:var(--ink-sub);font-size:16px}.fp-garden{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px}.fp-quality .board{position:relative;gap:8px;width:100%;max-width:calc(var(--cols) * 68px + (var(--cols) - 1) * 8px);margin:0 auto}.fp-quality .flower-cell{position:relative;z-index:1;border-radius:10px;box-shadow:0 2px 0 var(--line);background:var(--surface);touch-action:manipulation}.fp-quality .flower-cell.selected{border:3px solid var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--surface)}.fp-quality .flower-cell.valid-selection{outline:2px solid var(--accent);outline-offset:1px}.fp-quality .flower-cell.empty{background:transparent;box-shadow:none;opacity:.5}.fp-links{position:absolute;z-index:0;pointer-events:none;overflow:visible}.fp-links path{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round}.fp-selection{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;min-height:62px;margin:12px 0 8px}.fp-selection .selection{font-size:14px;font-weight:700;margin:0}.fp-preview{display:flex;gap:6px}.fp-slot{position:relative;display:inline-flex;width:38px;height:38px;border:2px dashed var(--line-strong);border-radius:8px;padding:1px;opacity:.48}.fp-slot svg{width:100%;height:100%}.fp-slot.filled{opacity:1;border-style:solid;border-color:var(--accent);background:var(--accent-soft)}.fp-slot.duplicate{opacity:1;border-style:solid;border-color:var(--warn)}.fp-slot b{position:absolute;right:-5px;bottom:-5px;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;min-width:18px;text-align:center;font-size:12px;line-height:18px;color:var(--ink)}.fp-connection{font-size:14px;color:var(--ink-sub);min-height:24px}.fp-connection.ready{color:var(--accent);font-weight:700}.fp-connection.invalid{font-weight:700}.fp-actions .btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;font-size:18px}.fp-action-art{display:inline-flex;width:36px;height:36px}.fp-action-art svg{width:100%;height:100%}.fp-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 16px}.fp-tools .btn{padding:6px;font-size:15px;min-height:48px;line-height:1.2}.fp-progress{padding:8px 12px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}.fp-progress .progress{font-weight:700;font-size:14px;margin:0 0 5px}.fp-rack{display:flex;justify-content:center;gap:3px}.fp-bouquet{display:inline-flex;width:32px;min-width:0;height:34px;border-bottom:2px dashed var(--line-strong);color:var(--ink-sub);opacity:.24}.fp-bouquet svg{width:100%;height:100%}.fp-bouquet.made{opacity:1;color:var(--accent);border-bottom-style:solid}.fp-nav{display:flex;justify-content:center;gap:8px;margin:14px 0}.fp-nav .btn{font-size:14px;min-height:44px;padding-inline:12px}.fp-quality #stats{text-align:center;font-size:14px}.fp-flying{position:fixed;width:48px;height:48px;z-index:10000;pointer-events:none;color:var(--accent)}.fp-flying svg{width:100%;height:100%}.fp-setup .field{display:inline-flex;flex-direction:column;gap:8px;margin:8px;max-width:100%}.fp-setup select,.fp-setup input{font:inherit;font-size:16px;min-height:44px;max-width:100%;padding:8px 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink)}.fp-setup input{width:132px}.fp-setup select:focus-visible,.fp-setup input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(max-width:480px){.fp-quality{padding:8px}.fp-garden{padding:6px 0}.fp-quality .board{gap:8px}.fp-toolbar{justify-content:center}.fp-goal{gap:6px}.fp-goal-label{font-size:14px}.fp-selection{gap:8px}.fp-slot{width:34px;height:34px}.fp-connection{font-size:14px}.fp-setup .field{margin:8px 4px}.fp-rack{gap:2px}}

.article .howto-shot{position:relative;max-width:390px;margin:auto}.article .howto-shot img{display:block;width:100%;height:auto}.howto-shot>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.article figcaption{font-size:16px;line-height:1.65}

.fp-quality .flower-cell svg text{font-size:20px}.fp-slot::before{content:attr(data-type);position:absolute;top:-6px;left:-6px;background:var(--surface);border:1px solid var(--line-strong);border-radius:6px;min-width:18px;line-height:18px;text-align:center;font-size:14px;font-weight:700;color:var(--ink)}
