:root{--ink:#241b45;--dark:#17162f;--panel:#242246;--line:#423960;--pink:#ff79b1;--mint:#84e7d1;--yellow:#ffe17e;--white:#fff8f0;--muted:#bbb2d5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 20% 0%,#49316e 0%,transparent 41%),radial-gradient(ellipse at 80% 75%,#294b62 0%,transparent 52%),#15142d;color:var(--white);font-family:Trebuchet MS,Verdana,sans-serif;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}.page-grain{pointer-events:none;position:fixed;inset:0;background-image:radial-gradient(#fff2 1px,transparent 1px);background-size:29px 29px;opacity:.32}.wrap{position:relative;width:min(1150px,calc(100% - 32px));margin:0 auto}.masthead{min-height:112px;display:flex;align-items:center;justify-content:space-between;gap:15px}.back-link{font-size:12px;font-weight:900;letter-spacing:1px;text-decoration:none;color:var(--mint);border-bottom:1px solid #84e7d155;padding-bottom:5px}.logo-block{text-align:center;line-height:1;position:relative}.logo-block h1{font-family:Verdana,sans-serif;font-size:clamp(25px,4.3vw,48px);letter-spacing:-2px;margin:0;font-weight:1000;text-shadow:3px 4px #100d29,0 6px 0 #5a3c75}.logo-block h1 span{color:var(--pink)}.logo-block small{letter-spacing:6px;color:var(--yellow);font-size:10px;font-weight:900}.spark{position:absolute;top:0;left:-30px;font-size:30px;color:var(--yellow)}.icon-btn,.outline-btn,.secondary-btn,.tiny-btn{color:var(--white);background:#312c54;border:2px solid #615781;border-radius:12px;padding:12px 14px;font-weight:900;box-shadow:0 4px #13112c;letter-spacing:.2px}.icon-btn{font-size:11px;white-space:nowrap}.menu-frame{background:linear-gradient(160deg,#32284e,#1e213c 65%);border:3px solid #60527f;box-shadow:0 16px 0 #0d0d22,0 25px 55px #08091b8c;border-radius:26px;overflow:hidden;margin-bottom:38px}.menu-visual{height:224px;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;background:radial-gradient(ellipse at 50% 60%,#7f67b3 0%,#4e568d 34%,#273456 70%,#192241);border-bottom:6px solid #b28bb0}.menu-visual:before,.menu-visual:after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;border:34px solid #ffffff0b;left:-130px;top:33px;box-shadow:0 0 0 38px #ffffff05}.menu-visual:after{left:auto;right:-180px;top:-180px}.pixel-stars{font-size:43px;color:#fff3a6;letter-spacing:30px;position:absolute;top:18px;opacity:.7;white-space:nowrap}.island{width:400px;height:130px;position:relative;top:14px;border-radius:50% 50% 18% 18%;background:linear-gradient(#83d9ca 12%,#467c9d 30%,#32557b 40%,#1d2b5d 90%);border:6px solid #b3f7dc;box-shadow:0 19px 0 #17143d,0 21px 30px #15142a}.mini-hero{position:absolute;top:-47px;width:75px;height:82px;border:6px solid #fff;border-radius:35% 35% 21% 21%;font-size:37px;text-align:center;line-height:72px;box-shadow:5px 8px #15142b}.mini-hero.pink{background:#ff8bbb;left:64px;color:#fff0a1}.mini-hero.mint{background:#77d9c6;right:64px;color:#fff2b8}.mini-bomb{position:absolute;left:180px;top:-18px;background:#3c3258;width:46px;height:46px;border:5px solid #f2dc93;border-radius:50%;display:grid;place-items:center;color:#ffe891;box-shadow:0 5px #15142b}.banner-ribbon{position:absolute;bottom:17px;background:#f9ca65;color:#47305b;transform:rotate(-2deg);padding:6px 30px;font-weight:1000;font-size:12px;letter-spacing:1px;box-shadow:4px 4px #17142a}.menu-body{padding:clamp(18px,4vw,37px);max-width:1020px;margin:0 auto}.eyebrow{font-size:11px;letter-spacing:2.8px;font-weight:1000;color:var(--mint);margin:0 0 10px}.menu-body h2,.play-top h2{font-size:clamp(23px,3.5vw,34px);margin:0 0 10px;letter-spacing:-1px}.menu-body>p:not(.eyebrow){line-height:1.65;color:#d0c8e1;margin:0 0 23px;max-width:770px}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.mode-card{display:flex;flex-direction:column;text-align:left;min-height:187px;border:2px solid #65527c;border-radius:18px;color:var(--white);background:linear-gradient(165deg,#49375d,#302949);padding:20px;transition:transform .15s,border-color .15s;box-shadow:0 6px #161227}.mode-card:hover,.mode-card:focus-visible{transform:translateY(-4px);border-color:var(--mint)}.mode-card.featured{border-color:#df82ad;background:linear-gradient(165deg,#604062,#412d59)}.mode-icon{font-size:38px;color:var(--yellow);line-height:1.1;margin-bottom:14px}.mode-card strong{font-size:17px}.mode-card span:not(.mode-icon):not(.arrow){font-size:12px;color:#d3c4d8;margin:7px 0;line-height:1.4}.mode-card .arrow{color:var(--mint);font-size:11px;font-weight:900;letter-spacing:1px;margin-top:auto;padding-top:12px}.option-panel{margin-top:24px;padding:23px;border-radius:18px;background:#181b35;border:2px dashed #74628b}.option-panel>p{margin-top:0;line-height:1.6;color:#dfd6e7}.option-panel label{display:block;font-size:12px;font-weight:900;color:var(--yellow);margin-bottom:14px}.option-panel input,.option-panel select{margin-top:7px;width:100%;height:42px;background:#2e2a4c;border:2px solid #645682;border-radius:9px;color:white;padding:8px}.option-panel input:focus,.option-panel select:focus{outline:2px solid var(--mint)}.primary-btn{border:0;border-radius:12px;padding:14px 22px;min-height:47px;color:#34234c;background:linear-gradient(135deg,#ffe78e,#ff9b9e);font-weight:1000;box-shadow:0 5px #a66780;letter-spacing:.6px}.primary-btn:hover{filter:brightness(1.1)}.secondary-btn{min-height:47px}.online-actions{display:grid;grid-template-columns:1fr 1fr;gap:22px}.online-actions>div{display:flex;flex-direction:column}.online-actions button{margin-top:auto}.small-note{color:#afa6c4!important;font-size:12px;margin:20px 0 0!important}.game-section{position:relative;margin:16px 0 42px}.play-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}.play-top h2{margin:0}.game-chips{display:flex;gap:9px;flex-wrap:wrap}.game-chip{font-size:11px;letter-spacing:1px;padding:11px 13px;border:2px solid #625983;border-radius:10px;background:#252542;font-weight:900;white-space:nowrap}.game-chip.clock{background:#38485b;color:#9cffe1}.play-grid{display:grid;grid-template-columns:minmax(0,720px) minmax(220px,1fr);gap:18px}.board-side{min-width:0}.board-border{position:relative;border:7px solid #7c699a;border-bottom-color:#4d4173;border-right-color:#51457b;border-radius:14px;overflow:hidden;background:#1e283d;box-shadow:0 10px 0 #090d21}canvas{display:block;width:100%;height:auto;aspect-ratio:15/11;image-rendering:pixelated;touch-action:none}.side-panel{display:flex;flex-direction:column;gap:14px}.panel-head{background:#332b52;border:2px solid #655985;border-radius:12px;padding:14px;font-weight:900;font-size:13px;letter-spacing:1px}.panel-head span{color:#ffe58c;margin-right:6px}.player-list{display:flex;flex-direction:column;gap:9px}.player-row{background:#24223e;border:2px solid #4c426a;border-radius:12px;padding:10px;display:flex;align-items:center;gap:10px;min-width:0}.player-row.out{opacity:.45}.player-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;box-shadow:inset 0 -5px #0002;color:#2c2747;font-weight:1000;font-size:18px}.player-row .details{display:flex;min-width:0;flex-direction:column;gap:5px;flex:1}.player-row strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-row small{color:var(--muted);font-size:10px}.player-row .win{font-size:13px;color:var(--yellow);font-weight:900}.side-card{background:#24223e;border:2px solid #4c426a;border-radius:12px;padding:14px}.side-card .eyebrow{margin-bottom:5px}.room-code{text-align:center;letter-spacing:7px;font-size:25px;font-weight:1000;color:var(--yellow);margin:10px 0}.tiny-btn{width:100%;padding:9px;font-size:11px}.instructions h3{color:var(--pink);font-size:12px;letter-spacing:2px;margin:0 0 7px}.instructions p{font-size:12px;line-height:1.6;color:#e0d9eb;margin:0 0 13px}.legend{display:flex;gap:7px;flex-direction:column;color:#d6cae8;font-size:11px}.legend b{color:#ffe59e}.outline-btn{margin-top:auto;font-size:11px}.touch-pad{display:none;justify-content:space-between;align-items:center;gap:12px;margin-top:17px;touch-action:none;user-select:none}.dpad{display:grid;grid-template-columns:repeat(3,53px);grid-template-rows:repeat(3,44px);gap:3px;place-items:stretch}.touch{background:#494260;color:white;border:2px solid #a49aca;border-radius:11px;font-size:21px;font-weight:900;touch-action:none;box-shadow:0 4px #16122b}.touch:active,.touch.pressed{transform:translateY(3px);box-shadow:none;background:#7263a3}.touch.up{grid-column:2;grid-row:1}.touch.left{grid-column:1;grid-row:2}.touch.down{grid-column:2;grid-row:3}.touch.right{grid-column:3;grid-row:2}.bomb-touch{width:100px;height:96px;border:4px solid #ffc7a1;border-radius:50%;background:linear-gradient(#ffbb85,#ff709e);color:#3a2852;font-size:13px;font-weight:1000;box-shadow:0 8px #9a4b82;touch-action:none}.bomb-touch span{display:block;font-size:35px}.bomb-touch:active{transform:translateY(5px);box-shadow:0 3px #9a4b82}.toast{min-height:24px;padding:8px 0;color:#ffe894;font-size:12px;font-weight:900;letter-spacing:.3px}.overlay{position:absolute;inset:0;background:#10142bcc;z-index:5;display:grid;place-items:center;padding:14px;backdrop-filter:blur(5px);border-radius:16px}.modal{width:min(450px,100%);background:linear-gradient(150deg,#44325e,#24223f);border:4px solid #e8c79a;border-radius:22px;padding:30px;text-align:center;box-shadow:0 16px #0d0c22,0 25px 60px #0008}.modal-star{font-size:45px;color:var(--yellow)}.modal h2{font-size:clamp(22px,4vw,31px);margin:10px 0;color:white}.modal p{color:#d5cde6;line-height:1.55;font-size:14px}.modal-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}.lobby-list{margin:16px 0;text-align:left;background:#1b1d36;padding:13px;border-radius:12px}.lobby-list .lobby-member{padding:7px;font-weight:bold;font-size:13px;border-bottom:1px solid #4b4366}.lobby-list .lobby-member:last-child{border:0}footer{display:flex;justify-content:space-between;gap:10px;color:#a9a1c4;border-top:1px solid #4a3f62;font-size:10px;letter-spacing:1px;padding:18px 0 30px}.small-note a{color:var(--mint)}@media (max-width:850px){.play-grid{grid-template-columns:1fr}.side-panel{display:grid;grid-template-columns:1fr 1fr}.panel-head,.player-list,.outline-btn{grid-column:1/-1}.touch-pad{display:flex}}@media (max-width:670px){.masthead{min-height:95px}.logo-block h1{font-size:27px;letter-spacing:-1px}.logo-block small{font-size:8px;letter-spacing:2px}.spark{display:none}.back-link{font-size:9px}.icon-btn{font-size:9px;padding:9px}.menu-visual{height:165px}.island{transform:scale(.7)}.banner-ribbon{font-size:9px}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:92px;padding:14px;display:grid;grid-template-columns:50px 1fr;grid-template-rows:auto auto auto;column-gap:10px;align-items:center}.mode-icon{grid-column:1;grid-row:1/4;margin:0;text-align:center}.mode-card strong{grid-column:2;font-size:16px}.mode-card span:not(.mode-icon):not(.arrow){grid-column:2;margin:0}.mode-card .arrow{grid-column:2;padding:3px 0 0}.online-actions{grid-template-columns:1fr;gap:8px}.play-top{align-items:flex-start;flex-direction:column}.side-panel{grid-template-columns:1fr 1fr;gap:9px}.instructions{grid-column:1/-1}.side-card{padding:10px}.room-code{font-size:19px;letter-spacing:3px}.modal{padding:20px}.wrap{width:calc(100% - 18px)}footer{font-size:9px;flex-wrap:wrap}.dpad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,41px)}.bomb-touch{width:90px;height:90px}}
@media (pointer:coarse){.touch-pad{display:flex}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Diagnóstico de latência para partidas online */
.game-chip.network-slow{border-color:#e79b8e;color:#ffd5bb;background:#57394b}