*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}body{font-family:ui-rounded,'Hiragino Maru Gothic ProN',system-ui,sans-serif;color:#314e49;background:#edf2e6}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:1px solid #bccfc1;border-radius:18px;background:#f7faf2;padding:10px 15px;cursor:pointer;min-height:44px}button:hover{background:#dfebdc}button:focus-visible,a:focus-visible{outline:3px solid #b67b44;outline-offset:2px}#app{height:100%;height:100dvh;max-width:1920px;margin:auto;padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:64px}header div{display:flex;gap:5px}header button{font-size:12px;padding:8px 10px}#brand{font-weight:700;font-size:17px;letter-spacing:.08em;color:inherit;text-decoration:none}#field{position:relative;flex:1;min-height:0;overflow:hidden;border:1px solid #c9d8c4;border-radius:28px;background:#f5f7ed}canvas{width:100%;height:100%;display:block;touch-action:none}#hud{position:absolute;top:15px;left:20px;right:20px;display:flex;justify-content:space-between;font-size:12px;font-weight:600;pointer-events:none}#tip{position:absolute;top:45px;left:12px;right:12px;text-align:center;font-size:12px;pointer-events:none}#panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f2f6e9ed;padding:22px;text-align:center;overflow:auto}#panel.hidden{display:none}#panel .eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#63877b}h1{font-size:clamp(30px,6vw,54px);font-weight:500;letter-spacing:.08em;margin:15px 0}#panel p{line-height:1.9;font-size:14px;max-width:360px;margin:12px 0 24px;white-space:pre-line}.primary{background:#355f50;color:white;border-color:#355f50;min-width:190px}.primary:hover{background:#48745f}.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.stage-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:20px 0}.stage-grid button{min-width:48px;padding:10px 5px}.rating{display:block;font-size:10px;margin-top:5px;color:#956a2a}footer{text-align:center;min-height:28px;padding:6px;font-size:10px;letter-spacing:.08em;color:#728479}.stars{font-size:38px;color:#b78641;letter-spacing:.15em;margin-bottom:14px}@media(max-width:450px){#brand{font-size:13px;letter-spacing:0}header{min-height:58px}header button{padding:7px 8px}#panel{padding:16px}.stage-grid{gap:5px}#hud{left:12px;right:12px;font-size:11px}}@media(max-height:500px){header{min-height:46px}footer{display:none}h1{font-size:26px;margin:4px}#panel p{margin:5px;font-size:12px}.stage-grid{margin:5px}#panel{padding:8px}}

/* Side gardens occupy only the space outside the maximally fitted board. */
.garden-side{position:absolute;top:76px;bottom:20px;width:calc(var(--wing) - 28px);min-width:0;padding:clamp(12px,2vw,28px);border:1px solid #d3dfca;border-radius:24px;background:linear-gradient(160deg,#e6eedc,#f7eed9);overflow:auto;white-space:pre-line;pointer-events:none}
#garden-guide{left:14px}#garden-blooms{right:14px}
.garden-side h2{font-size:clamp(16px,1.6vw,24px);font-weight:500;margin:0 0 16px}.garden-side p{font-size:14px;line-height:1.8;margin:12px 0}.garden-side small{font-size:12px;color:#647e68}
#field:not([data-mode="play"]) .garden-side{display:none}
#hud,#tip{left:calc(var(--wing) + 8px);right:auto;width:calc(var(--board-width) - 16px);overflow-wrap:anywhere}
#hud{display:block;text-align:center;font-size:clamp(10px,1.2vw,12px)}
#field[data-wide="true"][data-mode="play"] #tip{display:none}
@media(max-height:500px){.garden-side{top:16px;bottom:16px;padding:12px}.garden-side h2{font-size:16px;margin-bottom:8px}.garden-side p{font-size:12px;line-height:1.5;margin:8px 0}.garden-side small{font-size:11px}}
#tip[data-board="true"]{visibility:hidden}