:root{--bg-color: #0f172a;--grid-bg: #1e293b;--cell-empty: #334155;--cell-filled: #38bdf8;--accent: #22d3ee;--text-main: #f8fafc;--glass: rgba(30, 41, 59, .7)}body{margin:0;background-color:var(--bg-color);color:var(--text-main);font-family:Inter,system-ui,sans-serif;overflow:hidden;touch-action:none}#root{display:flex;flex-direction:column;height:100dvh;justify-content:space-between;align-items:center;padding:20px 10px;box-sizing:border-box}.game-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;max-width:400px;margin-bottom:15px;gap:10px}.logo-container{flex:1;display:flex;justify-content:center}.logo{max-width:100px;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));animation:logo-float 6s ease-in-out infinite}@keyframes logo-float{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.score-box{background:var(--glass);padding:10px 20px;border-radius:12px;text-align:center;border:1px solid rgba(255,255,255,.1);min-width:100px}.label{font-size:.8rem;color:#94a3b8;text-transform:uppercase;letter-spacing:1px}.value{font-size:1.5rem;font-weight:700;color:var(--accent)}.board-container{position:relative;width:100%;max-width:400px;aspect-ratio:1;background:var(--grid-bg);border-radius:8px;padding:5px;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:2px}.cell{background-color:var(--cell-empty);border-radius:2px;width:100%;height:100%;transition:background-color .1s}.cell.style-1,.mini-cell.style-1{background-color:#38bdf8;box-shadow:0 0 5px #38bdf880}.cell.style-2,.mini-cell.style-2{background-color:#a78bfa;background-image:linear-gradient(45deg,#8b5cf6 25%,transparent 25%,transparent 50%,#8b5cf6 50%,#8b5cf6 75%,transparent 75%,transparent);background-size:10px 10px;box-shadow:0 0 5px #a78bfa80}.cell.style-3,.mini-cell.style-3{background-color:#4ade80;background-image:radial-gradient(#22c55e 20%,transparent 20%);background-size:8px 8px;box-shadow:0 0 5px #4ade8080}.cell.style-4,.mini-cell.style-4{background:linear-gradient(135deg,#fb923c,#ea580c);box-shadow:0 0 5px #fb923c80}.cell.style-5,.mini-cell.style-5{background-color:#f472b6;background-image:repeating-linear-gradient(0deg,transparent,transparent 4px,#db2777 4px,#db2777 6px);box-shadow:0 0 5px #f472b680}.cell.style-pearl,.mini-cell.style-pearl{background-color:#fef08a;background-image:radial-gradient(circle at 30% 30%,#fff,#facc15);box-shadow:0 0 10px 2px #facc1599;border-radius:50%}.cell.ghost{background-color:#38bdf866}.cell.ghost.invalid{background-color:#ef444480;box-shadow:0 0 5px #ef44444d}.tray-container{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:400px;height:120px;margin-top:20px;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:16px;border:1px solid rgba(255,255,255,.1);padding:10px;box-sizing:border-box}.tray-slot{flex:1;display:flex;justify-content:center;align-items:center;height:100%}.draggable-wrapper{touch-action:none;cursor:grab;position:relative;padding:15px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.draggable-wrapper:active{cursor:grabbing}.mini-cell{width:20px;height:20px;background-color:var(--cell-filled);margin:1px;border-radius:2px;display:flex}.shape-row{display:flex}.game-over-overlay{position:absolute;inset:0;background:#000c;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:2000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.game-over-title{font-size:3rem;color:#ef4444;margin-bottom:20px;text-transform:uppercase}.btn-restart{background:var(--accent);color:var(--bg-color);border:none;padding:15px 40px;font-size:1.2rem;border-radius:50px;font-weight:700;cursor:pointer;margin-top:20px;box-shadow:0 0 20px #22d3ee66}.particle{width:100%;height:100%;background-color:#fff;border-radius:50%;animation:pop-fade .6s ease-out forwards;opacity:0;pointer-events:none;z-index:10}@keyframes pop-fade{0%{transform:scale(.5);opacity:1;background-color:#fff}50%{transform:scale(1.5);opacity:.8;background-color:var(--accent)}to{transform:scale(2);opacity:0}}.underwater-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:#0f172a;overflow:hidden}.water-level{position:absolute;bottom:0;left:0;width:100%;background:linear-gradient(to top,#1e3a8a,#38bdf8);transition:height 2s ease-in-out;overflow:hidden;box-shadow:0 0 50px #38bdf833}.water-surface{position:absolute;top:0;left:0;width:100%;height:10px;background:#ffffff4d;animation:surface-shimmer 3s infinite linear}.fish{position:absolute;font-size:24px;opacity:.8}.fish.left{left:-50px;animation:swim-left linear infinite}.fish.right{right:-50px;transform:scaleX(-1);animation:swim-right linear infinite}@keyframes swim-left{0%{transform:translate(0) scaleX(1);left:110%}to{transform:translate(-120vw) scaleX(1);left:-20%}}@keyframes swim-right{0%{transform:translate(0) scaleX(-1);right:110%}to{transform:translate(120vw) scaleX(-1);right:-20%}}.ocean-floor{position:absolute;bottom:0;left:0;width:100%;height:20px;background:#0f172a}.sea-plant{position:absolute;bottom:0;width:8px;background:#22c55e;border-radius:4px 4px 0 0;transform-origin:bottom center;animation:sway 3s ease-in-out infinite alternate;opacity:.6}@keyframes sway{0%{transform:rotate(-5deg)}to{transform:rotate(5deg)}}.sea-plant-svg{position:absolute;bottom:0;transform-origin:bottom center;animation:sway 4s ease-in-out infinite alternate}.sea-weed{position:absolute;bottom:0;width:20px;transform-origin:bottom center;animation:sway 3s ease-in-out infinite alternate;opacity:.7}.bubbles{position:absolute;bottom:0;width:100%;height:100%;pointer-events:none}.bubble{position:absolute;bottom:-10px;width:10px;height:10px;background:#ffffff4d;border-radius:50%;animation:rise linear infinite}@keyframes rise{0%{transform:translateY(0);opacity:0}50%{opacity:.6}to{transform:translateY(-100vh);opacity:0}}.logo-container.clickable{cursor:pointer;transition:transform .2s ease,filter .2s ease}.logo-container.clickable:hover{transform:scale(1.05);filter:brightness(1.1)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:2000;padding:20px;box-sizing:border-box}.modal-content{background:#ffffff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:24px;padding:30px;max-width:500px;width:95%;max-height:85vh;overflow-y:auto;color:#fff;position:relative;box-shadow:0 20px 40px #0006;animation:modal-pop .3s cubic-bezier(.34,1.56,.64,1);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.modal-content::-webkit-scrollbar{width:6px}.modal-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}@keyframes modal-pop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.modal-content h2{margin-top:0;font-size:1.8rem;background:linear-gradient(135deg,#fff,#a5f3fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:20px}.instruction-section{text-align:left;line-height:1.6}.instruction-section ul{padding-left:20px;margin-bottom:0}.instruction-section li{margin-bottom:12px}.modal-divider{border:0;height:1px;background:linear-gradient(to right,#fff0,#fff3,#fff0);margin:25px 0}.close-button{position:absolute;top:15px;right:20px;background:none;border:none;color:#ffffff80;font-size:2rem;cursor:pointer;transition:color .2s}.close-button:hover{color:#fff}.got-it-button{margin-top:30px;padding:12px 40px;background:linear-gradient(135deg,#0ea5e9,#2563eb);border:none;border-radius:12px;color:#fff;font-weight:700;font-size:1rem;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 15px #2563eb4d}.got-it-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2563eb66}.got-it-button:active{transform:translateY(0)}