:root{font-family:Arial,Helvetica,sans-serif;color:#263e38;background:#faf8f2;font-size:16px}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer;color:inherit;background:#fffdf8;border:1px solid #d8ddd3;border-radius:7px;padding:10px 15px}button:hover{background:#edf0e7}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #b97627;outline-offset:4px}button:disabled{opacity:.4;cursor:default}header{height:84px;border-bottom:1px solid #e2e3d9;display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1240px)/2));gap:20px}.brand{display:flex;align-items:center;font-family:Georgia,serif;font-weight:bold;font-size:31px;text-decoration:none;color:#294b40;letter-spacing:-1px}.brandmark{display:grid;place-items:center;background:#385848;color:#f8db9a;width:37px;height:40px;border-radius:9px;transform:rotate(-7deg);margin-right:12px;font-size:34px}.brand-dot{color:#b97a37}.header-note{font-family:Georgia,serif;font-style:italic;color:#687266;font-size:16px}main{max-width:1240px;margin:auto;padding:29px 28px 0}.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:18px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:bold;margin:0 0 9px;color:#7d816f}select{font-family:Georgia,serif;font-size:30px;color:#2c4338;font-weight:bold;border:none;background:transparent;padding:0 35px 0 0;max-width:100%}#reference{color:#778072;font-size:14px;margin:9px 0 0}.top-actions{display:flex;gap:9px}.frame{padding:11px;background:#76513c;border-radius:12px;box-shadow:0 10px 25px #4932231a,inset 0 0 0 1px #553927,inset 0 0 0 5px #9b7557}#board{position:relative;aspect-ratio:2.15;overflow:hidden;background:#a5c3b1;border-radius:3px;isolation:isolate}#backdrop{position:absolute;width:100%;height:100%;object-fit:cover;pointer-events:none}#pieces{position:absolute;inset:0}#empty{position:absolute;top:37%;left:0;right:0;text-align:center;pointer-events:none;color:#314c3d;text-shadow:0 1px 8px #fff9}#empty span{font:italic 29px Georgia,serif;display:block}#empty small{font-size:14px;display:block;margin-top:10px}.board-foot{display:flex;justify-content:space-between;font-size:13px;color:#76806e;margin:13px 3px 17px}.editbar{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;background:#edf0e6;border:1px solid #dce2d5;border-radius:9px;gap:14px;min-height:61px}#selection{font-size:14px;color:#5a6958}.edit-controls{display:flex;gap:6px}.edit-controls button{font-size:14px;padding:8px 12px}.collection{margin-top:33px}.collection-head{display:flex;justify-content:space-between;align-items:center;gap:12px}h2{font-family:Georgia,serif;font-size:23px;margin:0;font-weight:normal}h2 span{font:12px Arial,sans-serif;padding:4px 7px;border-radius:6px;background:#e9eddf;vertical-align:middle;margin-left:8px}.collection p{font-size:14px;color:#75806e;margin:9px 0 20px}.package-label{font-size:11px;letter-spacing:1.5px;color:#7f876f;font-weight:bold}#tray{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:9px}.tile{padding:5px 3px 10px;display:flex;flex-direction:column;align-items:center;border:1px solid #e2e4d7;border-radius:8px;background:#f2f1e7;min-width:0;touch-action:none;user-select:none}.tile:hover{border-color:#a3b090;background:#e9eddf;transform:translateY(-2px)}.tile .art{width:100%;height:95px}.tile-label{font-size:12px;line-height:1.3}.art{display:block;pointer-events:none;background-repeat:no-repeat;background-size:500% 400%;aspect-ratio:1}.piece{position:absolute;border:1px solid transparent;padding:0;background:none;border-radius:4px;touch-action:none;cursor:grab;transform:translate(-50%,-50%);user-select:none}.piece:hover{background:none}.piece.selected{border:1px dashed #faf5da;outline:1px dashed #426553}.piece .art{width:100%;height:100%;filter:drop-shadow(1px 3px 2px #241f2428)}.piece.dragging{cursor:grabbing}.ghost{position:fixed;z-index:10000;pointer-events:none;width:110px;height:110px;transform:translate(-50%,-50%);filter:drop-shadow(0 5px 5px #3336)}footer{text-align:center;color:#8a8e7a;font:italic 14px Georgia,serif;margin:35px 0 25px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#workarea:fullscreen{background:#faf8f2;padding:20px;display:flex;flex-direction:column;justify-content:center}#workarea:fullscreen .frame{max-height:calc(100vh - 150px);flex:1}#workarea:fullscreen #board{height:100%;aspect-ratio:auto}#workarea:fullscreen .board-foot{margin-bottom:12px}@media(min-width:1500px){main{max-width:1400px}#board{aspect-ratio:2.3}}@media(max-width:800px){header{height:68px;padding:0 20px}.header-note{display:none}main{padding:22px 16px 0}select{font-size:25px}.top-actions button{font-size:13px;padding:9px}#board{aspect-ratio:1.55}#tray{grid-template-columns:repeat(5,minmax(0,1fr))}.editbar{flex-wrap:wrap}.edit-controls{flex-wrap:wrap}.collection-head .package-label{display:none}.board-foot span:last-child{display:none}#empty span{font-size:22px}.frame{padding:8px}.tile .art{height:auto;aspect-ratio:1}.top{align-items:flex-start}.top-actions{flex-direction:column}.brand{font-size:28px}}

.top>div:first-child{min-width:0}select{width:auto;max-width:100%;white-space:normal}.tile-label{font-size:14px}.tile{overflow-wrap:anywhere}.top-actions{flex-shrink:0}@media(max-width:800px){select{font-size:clamp(18px,4vw,25px);width:100%}.top>div:first-child{flex:1}.tile-label{font-size:13px}}
@media(max-width:600px){.top{flex-direction:column;align-items:stretch}.top-actions{flex-direction:row}.top-actions button{flex:1}select{font-size:20px}.collection-head h2{font-size:21px}}

.resize-handle{display:none;position:absolute;right:-13px;top:-13px;width:28px;height:28px;border-radius:50%;background:#fffdf0;border:2px solid #355745;box-shadow:0 2px 6px #213f3a33;color:#284c3e;align-items:center;justify-content:center;font-size:20px;line-height:1;cursor:nesw-resize;touch-action:none;z-index:1}.piece.selected .resize-handle{display:flex}.piece.resizing{cursor:nesw-resize}@media(pointer:coarse){.resize-handle{width:36px;height:36px;right:-17px;top:-17px}}

#sea-backdrop{position:absolute;inset:0;background:#4c7898;overflow:hidden;pointer-events:none}#sea-backdrop .art{position:absolute}#sea-backdrop .cloud{width:28%;height:28%;top:3%;left:7%;opacity:.9}#sea-backdrop .moon{width:9%;height:18%;top:5%;right:11%;opacity:.85}#sea-backdrop .wave{width:53%;height:63%;bottom:-20%;opacity:.75}#sea-backdrop .wave-one{left:-15%}#sea-backdrop .wave-two{left:23%;transform:scaleX(-1)}#sea-backdrop .wave-three{left:64%}#backdrop[hidden],#sea-backdrop[hidden]{display:none}

#board[data-story="water"] #empty{color:#fff7da;text-shadow:0 2px 5px #16364c80}

header .header-note{margin-left:auto}#language-switch{display:flex;flex-shrink:0;border:1px solid #cbd4c5;border-radius:8px;overflow:hidden;background:#fffdf8}#language-switch button{border:0;border-radius:0;padding:9px 12px;font-size:14px;min-width:44px}#language-switch button[aria-pressed="true"]{background:#355745;color:#fffdf0}#language-switch button:focus-visible{outline-offset:-3px}h2 #collection-title{font:inherit;padding:0;border-radius:0;background:none;vertical-align:baseline;margin-left:0}@media(max-width:800px){header{gap:12px}.brand{font-size:26px}#language-switch{margin-left:auto}#language-switch button{padding:9px 10px}}
@media(max-width:420px){header{padding:0 14px;gap:8px}.brand{font-size:24px}.brandmark{width:30px;height:34px;font-size:28px;margin-right:8px}#language-switch button{padding:9px 8px}}

.board-foot{align-items:center;gap:14px;flex-wrap:wrap}.board-foot #status{margin-right:auto}#save-image{font-size:14px;padding:9px 14px;color:#fffdf0;background:#355745;border-color:#355745;white-space:nowrap}#save-image:hover{background:#284536}#save-image:disabled{opacity:.65}

/* The existing lettermark is a textured felt cutout on a small felt board. */
.brandmark{width:44px;height:48px;background:transparent;border-radius:0;transform:rotate(-6deg);overflow:visible;flex-shrink:0;filter:drop-shadow(0 2px 2px #20392d20)}.brandmark svg{display:block;width:100%;height:100%;overflow:visible}@media(max-width:420px){.brandmark{width:34px;height:38px}}