:root{--sable:#f4e4cf;--terre:#d9a28a;--turq:#8fcfc8;--lav:#b9a9dc;--ink:#5b4a52;--card:#fff8efcc}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#f3d9c6;font-family:Trebuchet MS,system-ui,sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none;touch-action:manipulation}#app{position:fixed;top:0;right:0;bottom:0;left:0;background:center/cover no-repeat}#app:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#fff6ee40,#f7d2b833);pointer-events:none}.feathers{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:1}.feathers i{position:absolute;top:-60px;width:26px;height:60px;opacity:.5;animation:fall linear infinite}@keyframes fall{0%{transform:translate(0) rotate(-20deg)}50%{transform:translate(40px,55vh) rotate(25deg)}to{transform:translate(-20px,115vh) rotate(-15deg)}}.screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex}button{font:inherit;color:var(--ink);background:var(--card);border:2px solid #fff;border-radius:14px;padding:.55em 1em;cursor:pointer;box-shadow:0 3px 10px #a0706024;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}button:hover{background:#fffaf4}button:active{transform:scale(.97)}button.main{background:linear-gradient(#f6b9a4,#e99a86);color:#fff;border-color:#fde3d8;font-size:1.15em;text-shadow:0 1px 2px #a0605088}.menu{align-items:center;justify-content:center;gap:4vmin;padding:3vmin;overflow:auto}.menu .left{text-align:center;max-width:46vmin}.menu .left img{width:min(38vmin,300px);border-radius:50%;box-shadow:0 0 40px #fff8;mix-blend-mode:multiply}.menu h1{margin:.1em 0;font-size:clamp(28px,6vmin,56px);color:#b06f74;letter-spacing:.04em;text-shadow:0 2px 0 #fff8}.menu p.sub{margin:0 0 1em;opacity:.85}.panel{background:var(--card);border-radius:22px;padding:2.4vmin 3vmin;border:2px solid #fff;max-width:560px;width:min(560px,92vw);box-shadow:0 8px 30px #a0706030;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.panel h2{margin:.1em 0 .5em;font-size:1.1em;color:#a76a6f}.layouts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.layouts button{padding:.5em .3em;font-size:.85em;line-height:1.1}.layouts button.sel{background:#d8efeb;border-color:#8fcfc8}.layouts small{display:block;opacity:.6;font-size:.8em}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.dc-box{display:flex;gap:14px;align-items:center;margin-top:10px}.dc-box svg{width:110px;height:150px;flex:none}.game{flex-direction:column}.hud{display:flex;align-items:center;gap:6px;padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left));z-index:5}.hud .info{background:var(--card);border-radius:12px;padding:.35em .8em;border:2px solid #fff;font-size:.95em;white-space:nowrap}.hud .sp{flex:1}.hud button{padding:.4em .75em;font-size:.95em}.hud .mini{width:40px;height:52px}.board-wrap{flex:1;position:relative;overflow:hidden}.board{position:absolute;left:0;top:0;transform-origin:0 0}.tile{position:absolute;width:60px;height:80px;border-radius:10px;cursor:pointer;transition:transform .15s,opacity .35s,filter .2s;background:linear-gradient(145deg,#fffdf6,#fbf3e2 55%,#efe1c6);border:1px solid #e6d5b5;box-shadow:inset 0 0 0 2px #fffaf0,inset -2px -3px 4px #d9c6a233,1px 1px #e9dcc2,2px 2px #e2d2b4,3px 3px #7cc6bd,4px 4px #5fb3aa,5px 5px #4aa39a,6px 6px #3d9088,7px 7px #33807a,8px 10px 10px #4a2a2059}.tile svg{position:absolute;left:5px;top:7px;width:50px;height:66px;overflow:visible}.tile.blocked{filter:brightness(.87) sepia(.18) saturate(.8)}.tile.sel{background:linear-gradient(145deg,#fff6d6,#ffe39a);border-color:#f0a030;transform:translate(-2px,-4px);box-shadow:0 0 0 3px #ff9f2e,0 0 16px 4px #ffc46b,3px 3px #7cc6bd,5px 5px #4aa39a,7px 7px #33807a,10px 14px 14px #4a2a2066}.tile.hint{animation:glow 1s ease-in-out infinite}@keyframes glow{50%{background:#e2fff9;box-shadow:0 0 0 4px #2fc0b0,0 0 14px 4px #7fe0d4,5px 5px #4aa39a,7px 7px #33807a}}.tile.gone{opacity:0;transform:scale(.6) translateY(-20px);pointer-events:none}.tile.shake{animation:shake .3s}@keyframes shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}.fast .tile{transition:none}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#f6dccd88;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.overlay .panel{text-align:center;max-width:440px}.overlay h2{font-size:1.5em}.toast{position:absolute;left:50%;bottom:16px;transform:translate(-50%);background:var(--card);padding:.5em 1em;border-radius:12px;border:2px solid #fff;z-index:15;transition:opacity .4s;pointer-events:none}@media(max-height:500px){.hud{padding-top:4px;padding-bottom:4px}.hud button{padding:.3em .55em;font-size:.85em}.hud .info{font-size:.85em}.hud .mini{height:40px;width:30px}.hud .lbl{display:none}}@media(max-width:600px){.hud .lbl,.hud .nm{display:none}.menu{flex-direction:column}.layouts{grid-template-columns:repeat(2,1fr)}}@media(orientation:portrait){.menu{flex-direction:column}}@media(max-height:500px)and (orientation:landscape){.game{flex-direction:row-reverse}.hud{flex-direction:column;justify-content:flex-start;padding:4px max(6px,env(safe-area-inset-right)) 4px 4px;gap:4px;overflow:auto}.hud .sp{display:none}.hud .info{font-size:.75em;padding:.25em .5em}.hud .nm{display:none}.hud button{padding:.3em .5em}}@media(orientation:portrait){.hud{flex-wrap:wrap;justify-content:center}.hud .sp{display:none}}