/* Secret garden applies only to Tetrasquare; other logic games retain their own layout. */
#logic-puzzle[data-game="shikaku"]{--lp-ink:#304632;--lp-muted:#536b52;--lp-line:#d3c7a7;--lp-purple:#6e4fa2;--lp-region-0:#ddedbe;--lp-region-1:#fae6bd;--lp-region-2:#d7edd5;--lp-region-3:#f7dfdc;--lp-region-4:#e8ddf4;--lp-region-5:#f5ebba;background:#a8c98d url("../shikaku-garden/background.f8e58ef98963.webp") center/cover fixed;min-height:calc(100dvh - var(--classroom-play-height,72px));padding:12px 16px 20px;color:#304632}
#logic-puzzle[data-game="shikaku"] .lp-wrap{max-width:1120px;margin:auto}
html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-layout{display:block}
html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-play-panel{position:relative;display:flex;flex-direction:column;align-items:center;background:transparent;border:0;box-shadow:none;padding:0;min-width:0}
#logic-puzzle[data-game="shikaku"] .garden-toolbar{order:0;display:flex;align-items:center;justify-content:center;gap:12px;width:min(100%,850px);background:#fff9df;border:2px solid #c8aa72;border-radius:24px;padding:8px 12px;box-shadow:0 4px 0 #a38758,0 7px 16px #294c2d38}
#logic-puzzle[data-game="shikaku"] .garden-actions{min-width:0}
html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-actions button{font-size:16px;line-height:1.2;min-height:46px;white-space:nowrap;padding:8px 16px;background:#fff8e9 url("../shikaku-garden/button.518b4c2c46c7.webp") center/100% 100% no-repeat;border:1px solid #bca47a;color:#443d31;box-shadow:0 2px 0 #a78658}
html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-actions button:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px)}
html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-actions button:active:not(:disabled){transform:translateY(1px);box-shadow:none}
html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-actions .lp-hint-button{color:#694318;background-color:#ffe4a2}
#logic-puzzle[data-game="shikaku"] .garden-progress{display:flex;align-items:center;gap:7px;white-space:nowrap;font-weight:800;font-size:14px;color:#385b35}
#logic-puzzle[data-game="shikaku"] .garden-progress progress{width:80px;height:13px;accent-color:#6da951}
#logic-puzzle[data-game="shikaku"] .lp-board-head{order:1;width:min(100%,850px);margin:6px 0!important;display:flex;justify-content:flex-end}
#logic-puzzle[data-game="shikaku"] .lp-board-head>div:first-child{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
#logic-puzzle[data-game="shikaku"] .lp-zoom{background:#fff9dfd9;border-radius:12px;padding:2px 5px}
#logic-puzzle[data-game="shikaku"] .lp-zoom button{min-height:36px;width:36px;padding:0;background:transparent;border:0;font-size:21px}
#logic-puzzle[data-game="shikaku"] .lp-gesture-note{order:2;margin:0 0 6px!important;background:#fff9e5de;border-radius:12px;padding:5px 12px;color:#355436;font-size:14px!important;line-height:1.3!important}
html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-board-layout{order:3;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;width:min(100%,850px)}
html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-board-viewport{width:100%;background:#e0ba7f;border:8px solid #86552f;border-radius:20px;padding:12px;box-shadow:inset 0 0 0 3px #bd8b50,0 6px 0 #674424,0 12px 26px #243f2e4d;max-height:var(--game-board-height,none)}
#logic-puzzle[data-game="shikaku"] .lp-board{border:2px solid #90775b;background:#e5d5b8}
#logic-puzzle[data-game="shikaku"] .lp-board .lp-cell{background:#fff9e9;color:#273a35;border-color:#cdbf9f;font-size:clamp(18px,calc(var(--cell)*.4),34px);text-shadow:0 1px #fff}
#logic-puzzle[data-game="shikaku"] .lp-board .lp-covered{background:linear-gradient(#f7f9df66,#f7f9df66),url("../shikaku-garden/flowers.6fc4f04b7e66.webp") center/cover;color:#243d27;border-color:#b6cb9f}
#logic-puzzle[data-game="shikaku"] .lp-board .lp-edge-top{border-top:3px solid #729e51}#logic-puzzle[data-game="shikaku"] .lp-board .lp-edge-bottom{border-bottom:3px solid #729e51}#logic-puzzle[data-game="shikaku"] .lp-board .lp-edge-left{border-left:3px solid #729e51}#logic-puzzle[data-game="shikaku"] .lp-board .lp-edge-right{border-right:3px solid #729e51}
#logic-puzzle[data-game="shikaku"] .lp-board .lp-preview{background:#d9f1c0;box-shadow:inset 0 0 0 3px #629d4d}#logic-puzzle[data-game="shikaku"] .lp-board .lp-preview-bad{background:#ffe2d9;box-shadow:inset 0 0 0 3px #b9634d}
html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-board-controls{width:100%;display:block;min-width:0}
#logic-puzzle[data-game="shikaku"] .lp-selection:empty{display:none}
#logic-puzzle[data-game="shikaku"] .lp-selection,#logic-puzzle[data-game="shikaku"] .lp-feedback{margin:3px auto 0!important;padding:6px 10px!important;min-height:0;background:#fff9e5eb;color:#365736;border-radius:10px;text-align:center;font-size:14px!important;line-height:1.35!important}
#logic-puzzle[data-game="shikaku"] .lp-feedback.lp-error{background:#fff0e9;color:#8a3829}
#logic-puzzle[data-game="shikaku"] .lp-win{order:4;width:min(100%,850px);background:#fff9df;border:2px solid #aecb8a}
#logic-puzzle[data-game="shikaku"] .garden-mascot{position:fixed;right:2%;bottom:1%;width:clamp(110px,14vw,190px);height:auto;pointer-events:none;z-index:1;animation:garden-sway 4s ease-in-out infinite;transform-origin:center bottom}
@keyframes garden-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-3px)}}
#logic-puzzle[data-garden-motion="off"] .garden-mascot{animation:none}
@media(prefers-reduced-motion:reduce){#logic-puzzle[data-game="shikaku"] .garden-mascot{animation:none!important}#logic-puzzle[data-game="shikaku"] *{transition:none!important}}
html[data-classroom-game="shikaku"] #classroom-play-toolbar{background:#e4d0a4;color:#40392b;border-bottom:2px solid #a88151}
html[data-classroom-game="shikaku"] #classroom-play-toolbar h1{color:#443d2a}
html[data-classroom-game="shikaku"] #classroom-play-toolbar [data-play-part="extras"]{position:relative}
html[data-classroom-game="shikaku"] #classroom-play-toolbar .game-puzzle-options{position:relative;width:auto;background:transparent;border:0}
html[data-classroom-game="shikaku"] #classroom-play-toolbar .game-puzzle-options>summary{display:flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid #baa270;border-radius:12px;background:#fff7e3;color:#4a4732;white-space:nowrap;font-size:16px;list-style:none}
html[data-classroom-game="shikaku"] #classroom-play-toolbar .game-puzzle-options>summary::after{content:'▾';margin-left:7px}
html[data-classroom-game="shikaku"] #classroom-play-toolbar .lp-sidebar{position:absolute;top:calc(100% + 8px);right:0;width:min(310px,calc(100vw - 24px));max-height:calc(100dvh - var(--classroom-play-height,72px) - 24px);overflow:auto;display:block;padding:16px;background:#fff9e9;border:2px solid #c7af81;border-radius:16px;box-shadow:0 10px 24px #273e2b4a;color:#304632;z-index:5}
html[data-classroom-game="shikaku"] #classroom-play-toolbar .lp-sidebar :is(.lp-note,.lp-step,h2){display:none}
html[data-classroom-game="shikaku"] #classroom-play-toolbar .lp-sidebar .lp-tiers{display:flex;gap:6px}
html[data-classroom-game="shikaku"] #classroom-play-toolbar .lp-sidebar button{font:700 15px/1.3 system-ui,sans-serif;min-height:44px;width:auto;height:auto;border:1px solid #bdad8e;padding:8px 12px;background:#fffdf4;color:#334a36}
html[data-classroom-game="shikaku"] #classroom-play-toolbar .lp-sidebar button[aria-pressed="true"]{background:#e6e1f7;color:#513a85}
html[data-classroom-game="shikaku"] #classroom-play-toolbar .lp-sidebar .lp-primary{width:100%;background:#466f42;color:white;margin:8px 0}
html[data-classroom-game="shikaku"] #classroom-play-toolbar .lp-sidebar .lp-stats{display:flex;padding:8px 0;margin:0}
html[data-classroom-game="shikaku"] #classroom-play-toolbar .lp-sidebar .lp-timer-toggle{margin:8px 0}
html[data-classroom-game="shikaku"] #classroom-play-toolbar .lp-sidebar #garden-motion{width:100%;margin-top:8px}
@media(max-width:1100px){#logic-puzzle[data-game="shikaku"] .garden-mascot{width:115px;right:0;bottom:0;opacity:.9}}
@media(max-width:800px){#logic-puzzle[data-game="shikaku"] .garden-mascot{display:none}#logic-puzzle[data-game="shikaku"] .garden-toolbar{width:100%;gap:6px;flex-wrap:wrap;padding:6px}html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-actions button{font-size:14px;padding:6px 10px;min-height:44px}#logic-puzzle[data-game="shikaku"] .garden-progress progress{width:62px}#logic-puzzle[data-game="shikaku"] .lp-gesture-note{font-size:13px!important}html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-board-viewport{border-width:6px;padding:7px}}
@media(max-width:400px){#logic-puzzle[data-game="shikaku"]{padding:8px 8px 16px!important}#logic-puzzle[data-game="shikaku"] .garden-toolbar{border-radius:14px}html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-actions{gap:4px}html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-actions button{font-size:13px;padding:5px 7px}#logic-puzzle[data-game="shikaku"] .garden-progress{font-size:12px}#logic-puzzle[data-game="shikaku"] .garden-progress progress{width:45px}#logic-puzzle[data-game="shikaku"] .lp-zoom button{min-height:36px;width:36px}html[data-classroom-game="shikaku"] #classroom-play-toolbar .game-puzzle-options>summary{font-size:14px;padding:6px 8px}}
/* The frame follows the board, not the wider viewport. Large boards may scroll horizontally. */
html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-board-viewport{width:100%;background:transparent;border:0;border-radius:0;padding:12px;box-shadow:none;max-height:none!important}
html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-board{box-shadow:0 0 0 6px #86552f,0 0 0 10px #c09056,0 8px 0 10px #674424,0 14px 26px 10px #243f2e4d}
#logic-puzzle[data-game="shikaku"] .lp-gesture-note{word-break:keep-all;overflow-wrap:normal}
#logic-puzzle[data-game="shikaku"] .garden-progress progress{appearance:none;border:0;border-radius:99px;background:#dce7cb;overflow:hidden}
#logic-puzzle[data-game="shikaku"] .garden-progress progress::-webkit-progress-bar{background:#dce7cb;border-radius:99px}
#logic-puzzle[data-game="shikaku"] .garden-progress progress::-webkit-progress-value{background:#6aa44a;border-radius:99px}
#logic-puzzle[data-game="shikaku"] .garden-progress progress::-moz-progress-bar{background:#6aa44a;border-radius:99px}
#logic-puzzle[data-game="shikaku"] .lp-board .lp-covered{animation:garden-plant .35s ease-out}
@keyframes garden-plant{from{filter:brightness(1.35);transform:scale(.94)}to{filter:brightness(1);transform:scale(1)}}
#logic-puzzle[data-garden-motion="off"] .lp-board .lp-covered{animation:none}
@media(prefers-reduced-motion:reduce){#logic-puzzle[data-game="shikaku"] .lp-board .lp-covered{animation:none!important}}
#logic-puzzle[data-game="shikaku"] .garden-sign{position:fixed;left:max(2%,calc((100vw - 1380px)/2));top:27%;width:220px;padding:18px 12px;background:#fff5d5 url("../shikaku-garden/button.518b4c2c46c7.webp") center/100% 100% no-repeat;text-align:center;color:#4f3d29;transform:rotate(-3deg);filter:drop-shadow(0 5px 5px #28402555);pointer-events:none}
#logic-puzzle[data-game="shikaku"] .garden-sign strong,#logic-puzzle[data-game="shikaku"] .garden-sign span{display:block}
#logic-puzzle[data-game="shikaku"] .garden-sign strong{font-size:20px;line-height:1.3}
#logic-puzzle[data-game="shikaku"] .garden-sign span{font-size:12px;font-weight:700;line-height:1.4;margin-top:3px}
#logic-puzzle[data-game="shikaku"] .lp-board .lp-covered{background-color:var(--region);background-image:linear-gradient(#ffffff55,#ffffff55),url("../shikaku-garden/flowers.6fc4f04b7e66.webp");background-position:center;background-size:cover;background-blend-mode:normal,multiply}
@media(max-width:1200px){#logic-puzzle[data-game="shikaku"] .garden-sign{display:none}}
#logic-puzzle[data-game="shikaku"] .garden-sign{background-color:transparent}
@media(max-width:1100px){#logic-puzzle[data-game="shikaku"] .garden-mascot{display:none}}
/* Use installed system fonts so action labels render while web fonts load. */
html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-actions button{font-family:system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif}
html[data-classroom-playing] #logic-puzzle[data-game="shikaku"] .lp-actions button:disabled{opacity:.68}