:root{--sea: #2fb6e8;--sea-dark: #1f8fbd;--sand: #ffd66b;--sand-dark: #e8b93f;--ink: #3b2a1a;--paper: #fff8ea;--leaf: #3aa15a;--danger: #e2543f;--outline: 3px;--radius: 14px;--touch: 44px}*{box-sizing:border-box}html,body{margin:0;padding:0;overflow-x:hidden;width:100%}body{font-family:Rubik,system-ui,sans-serif;background:linear-gradient(180deg,var(--sea) 0%,#7ed2ef 100%);color:var(--ink);min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3{font-weight:700;margin:0 0 .5em}a{color:inherit}button,input,select{font-family:inherit;font-size:1rem}.app-loading{display:flex;align-items:center;justify-content:center;min-height:100vh;font-size:1.25rem;font-weight:700;color:var(--ink)}.app-shell{display:flex;flex-direction:column;min-height:100vh}.app-header{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 16px;background:var(--paper);border-bottom:var(--outline) solid var(--ink)}.app-header .brand{font-weight:900;font-size:1.25rem;text-decoration:none;color:var(--ink);margin-right:auto}.app-nav{display:flex;gap:8px;flex-wrap:wrap}.app-nav a{padding:8px 14px;border-radius:var(--radius);text-decoration:none;font-weight:500;min-height:var(--touch);display:flex;align-items:center}.app-nav a.active{background:var(--sand);border:2px solid var(--ink)}.app-user{display:flex;align-items:center;gap:10px;font-weight:500}.app-main{flex:1;padding:16px;max-width:960px;width:100%;margin:0 auto}.card{background:var(--paper);border:var(--outline) solid var(--ink);border-radius:var(--radius);padding:16px;margin-bottom:16px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}.muted{color:#6b5a45}tr.user-disabled td{opacity:.6}.muted.small{font-size:.85rem}.error-text{color:var(--danger);font-weight:500;background:#fdeceb;border:2px solid var(--danger);border-radius:var(--radius);padding:10px 14px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);min-width:var(--touch);padding:8px 18px;border-radius:var(--radius);border:var(--outline) solid var(--ink);background:#fff;color:var(--ink);font-weight:700;cursor:pointer;transition:transform .05s ease-in-out}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--sand)}.btn-ghost{background:transparent}.btn-danger{border-color:var(--danger);color:var(--danger)}.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;font-weight:500}.field input,.field select{min-height:var(--touch);padding:8px 12px;border-radius:var(--radius);border:2px solid var(--ink);background:#fff}.field-checkbox{flex-direction:row;align-items:center;gap:8px;min-height:44px}.field-checkbox input{width:28px;height:28px;min-height:0}.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}.auth-card{width:100%;max-width:360px;text-align:center}.game-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.game-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:0}.seat-list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:10px}.seat-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:0;border-left-width:10px}.seat-white{border-left-color:#e8e8e8}.seat-yellow{border-left-color:var(--sand-dark)}.seat-black{border-left-color:#333}.seat-red{border-left-color:#c0392b}.seat-color{font-weight:700;min-width:90px}.seat-occupant{flex:1}.seat-actions{display:flex;gap:8px;flex-wrap:wrap}.badge{background:var(--leaf);color:#fff;border-radius:999px;padding:4px 10px;font-size:.8rem;font-weight:700}.room-actions{display:flex;gap:10px;flex-wrap:wrap}.stat-table{width:100%;border-collapse:collapse;background:var(--paper);border:var(--outline) solid var(--ink);border-radius:var(--radius);overflow:hidden}.stat-table th,.stat-table td{padding:8px 12px;text-align:left;border-bottom:1px solid #e0d3ba}.stat-table tr.me-row{background:#fff2cf}.admin-actions{display:flex;gap:6px;flex-wrap:wrap}.stat-grid{list-style:none;display:flex;flex-wrap:wrap;gap:16px;padding:0;margin:8px 0 0}.stat-grid li{display:flex;flex-direction:column;align-items:center;min-width:80px}.stat-value{font-size:1.5rem;font-weight:900}.stat-label{font-size:.8rem;color:#6b5a45}@media (max-width: 819px){.app-header{flex-wrap:nowrap;gap:4px;padding:4px 8px;border-bottom-width:2px}.app-header .brand{font-size:1.05rem;margin-right:4px;flex-shrink:0}.app-nav{flex-wrap:nowrap;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none;flex:1}.app-nav a{padding:4px 8px;min-height:36px;font-size:.9rem;white-space:nowrap}.app-user{gap:2px;flex-shrink:0}.app-user-name{display:none}.app-header .btn{min-height:36px;min-width:36px;padding:4px 8px;font-size:.9rem}}@media (max-width: 400px){.brand-tail{display:none}}.btn-icon{padding:4px 8px;font-size:1.1rem}@media (max-width: 640px){.seat-row,.game-row{flex-direction:column;align-items:stretch}}.app-main:has(>.game-page){max-width:1400px}.btn-small{min-height:36px;min-width:36px;padding:4px 10px;font-size:.85rem}.app-shell:has(.game-page){height:100vh;height:100dvh;min-height:0;overflow:hidden}.app-main:has(>.game-page){flex:1;min-height:0;display:flex;flex-direction:column}.game-page{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:minmax(0,1fr);gap:12px}.game-page.game-loading{display:block}.game-main,.game-side{min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}.game-side{overflow-y:auto}.game-main .board-wrap{flex:1}.log-panel,.chat-panel{flex:1 1 0;min-height:160px;display:flex;flex-direction:column;padding:10px 12px}.log-panel h3,.chat-panel h3{margin-bottom:6px}.feed{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;font-size:.9rem;line-height:1.3;padding-right:4px}.feed p{margin:0 0 4px;overflow-wrap:anywhere}.log-line{display:flex;gap:6px;align-items:baseline}.log-line .color-dot{flex-shrink:0;width:10px;height:10px;border-width:1px;transform:translateY(1px)}.log-turn{font-weight:700;margin-top:6px!important}.log-over{font-weight:900;color:#1b7f3a}.chat-time{color:#8a7a62;font-size:.8rem}.chat-mine b{color:#1b7f3a}.chat-form{display:flex;gap:6px;margin-top:6px}.chat-form input{flex:1;min-width:0;min-height:40px;padding:6px 10px;border-radius:var(--radius);border:2px solid var(--ink);background:#fff}.small{font-size:.85rem}.game-side .card{margin-bottom:0}.panel h3{font-size:1.05rem}.board-wrap{position:relative;min-height:0;display:flex;flex-direction:column}.board-viewport{position:relative;width:100%;flex:1;min-height:240px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:var(--sea-dark);border:var(--outline) solid var(--ink);border-radius:var(--radius);cursor:grab}.board-viewport:active{cursor:grabbing}.board{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}.board img{pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none}.board-tools{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:3}.board-tools .btn{background:#fff8eaeb}.cell{position:absolute;overflow:hidden}.cell-img,.cell-peek{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.cell-used .cell-img{filter:grayscale(.7) brightness(.9)}.cell-peek{top:18%;right:18%;bottom:18%;left:18%;width:64%;height:64%;opacity:.85;border-radius:8px;outline:3px dashed #fff}.cell-peek-full{top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:1;outline:none}.ship,.item-launched{position:absolute}.item{position:absolute;pointer-events:none}.item img{width:100%;height:100%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}.item-count{position:absolute;right:-4px;bottom:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;line-height:18px;text-align:center}.piece{position:absolute;border-radius:50%;border:3px solid var(--piece-color, #fff);background:#ffffff59;box-shadow:0 2px 3px #00000073;transition:left var(--move-ms, .25s) ease-in-out,top var(--move-ms, .25s) ease-in-out}.piece img{width:100%;height:100%}.piece-white{--piece-color: #f4f4f4}.piece-yellow{--piece-color: #f5c21b}.piece-black{--piece-color: #222}.piece-red{--piece-color: #d63a2b}.piece-selectable{cursor:pointer;box-shadow:0 0 0 3px #ffffffd9,0 2px 3px #00000073}.piece-selected{box-shadow:0 0 0 5px #3aff6a,0 0 14px 4px #3aff6acc;z-index:2}.piece-cave{opacity:.5}.piece-badge{position:absolute;right:-6px;top:-6px;font-size:14px;line-height:1}.hl{position:absolute;pointer-events:none;border-radius:10px;box-sizing:border-box}.hl-step{border-radius:50%}.hl-move{border:4px solid #3aff6a;background:#3aff6a38}.hl-attack{border:4px solid #ff3b30;background:#ff3b3040}.hl-rumMove{border:4px solid #b06bff;background:#b06bff40}.hl-choice{border:4px solid #ffd60a;background:#ffd60a4d;animation:hl-pulse 1s ease-in-out infinite alternate}.hl-option{border:3px dashed #fff;background:#ffffff26}.hl-picked{border:5px solid #ff8a00;background:#ff8a0059}.hl-swap{border:5px solid #00d0ff;background:#00d0ff4d}.hl-rumGive{border:4px solid #b06bff;border-radius:50%}.hl-label{position:absolute;left:3px;top:1px;font-weight:900;font-size:16px;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000}@keyframes hl-pulse{0%{opacity:.65}to{opacity:1}}.turn-status{font-weight:700;font-size:1.05rem;margin:0 0 6px}.turn-mine{color:#1b7f3a}.turn-clock{font-weight:700;white-space:nowrap}.turn-clock.timer-urgent{color:var(--danger)}.turn-actions,.choice-actions,.popup-options{display:flex;flex-wrap:wrap;gap:8px}.turn-panel p,.carry-row{margin:4px 0 8px}.carry-row-label{font-weight:700;margin:0 0 4px}.choice-bar{background:var(--paper);border:var(--outline) solid var(--ink);border-radius:var(--radius);padding:10px 12px;display:flex;flex-direction:column;gap:8px}.choice-bar p{margin:0}.choice-hint{font-weight:700}.choice-error{color:var(--danger);font-weight:500}.choice-wait{font-weight:500;color:#6b5a45}.choice-caramba{background:#ffe1dc;border-color:var(--danger)}.caramba-btn{width:100%;min-height:72px;font-size:1.8rem;font-weight:900;letter-spacing:1px;background:#e2231a;color:#fff;border-color:#7a0c07;animation:caramba-shake .4s ease-in-out infinite alternate}.caramba-timer{display:inline-block;margin-left:12px;min-width:1.4em;padding:0 6px;border-radius:10px;background:#fff;color:#e2231a}@keyframes caramba-shake{0%{transform:scale(1)}to{transform:scale(1.03)}}.score-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.score-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:4px 6px;border-radius:10px}.score-me{background:#fff2cf}.score-active{outline:2px solid var(--leaf)}.score-name{flex:1;min-width:90px;font-weight:500}.color-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink)}.dot-white{background:#f4f4f4}.dot-yellow{background:#f5c21b}.dot-black{background:#222}.dot-red{background:#d63a2b}.popup-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#00000059;display:flex;align-items:flex-end;justify-content:center;padding:16px}.popup{width:100%;max-width:420px;margin:0 0 24px}.popup-options{flex-direction:column}.popup-options .btn{width:100%}.toast{position:fixed;left:50%;top:16px;transform:translate(-50%);z-index:60;max-width:calc(100vw - 32px);padding:10px 16px;border-radius:var(--radius);border:2px solid var(--danger);background:#fdeceb;color:var(--danger);font-weight:700;box-shadow:0 4px 12px #00000040;cursor:pointer}.ship{transition:left var(--move-ms, .25s) ease-in-out,top var(--move-ms, .25s) ease-in-out}.cell-flip{animation:cell-flip var(--fx-ms, .3s) ease-in-out}@keyframes cell-flip{0%{transform:perspective(200px) rotateY(0);filter:brightness(.6)}50%{transform:perspective(200px) rotateY(90deg);filter:brightness(1.3)}to{transform:perspective(200px) rotateY(0);filter:none}}.piece-flying{z-index:4;animation:piece-fly var(--move-ms, .5s) ease-in-out}@keyframes piece-fly{0%{transform:scale(1)}50%{transform:scale(1.7);box-shadow:0 18px 16px #00000059}to{transform:scale(1)}}.piece-dying{z-index:4;animation:piece-die var(--fx-ms, .45s) ease-in forwards}@keyframes piece-die{0%{transform:scale(1) rotate(0);opacity:1;filter:none}30%{transform:scale(1.25) rotate(-12deg);filter:sepia(1) saturate(4) hue-rotate(-40deg)}to{transform:scale(.2) rotate(40deg);opacity:0}}.fx{position:absolute;pointer-events:none;z-index:5}.fx-sink{border-radius:50%;border:4px solid rgba(255,255,255,.9);animation:fx-sink var(--fx-ms, .45s) ease-out forwards}@keyframes fx-sink{0%{transform:scale(.2);opacity:1}to{transform:scale(1.4);opacity:0;border-width:1px}}.fx-coin{filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));animation:fx-coin var(--fx-ms, .5s) ease-in forwards}@keyframes fx-coin{0%{transform:translate(0) scale(1)}50%{transform:translate(calc(var(--dx) * .5),calc(var(--dy) * .5 - 30px)) scale(1.4)}to{transform:translate(var(--dx),var(--dy)) scale(.8);opacity:.6}}.board-shake{animation:board-shake var(--fx-ms, .5s) linear}@keyframes board-shake{0%,to{translate:0 0}20%{translate:-6px 3px}40%{translate:6px -3px}60%{translate:-4px -2px}80%{translate:4px 2px}}@media (prefers-reduced-motion: reduce){.piece,.ship{transition:none}.cell-flip,.piece-flying,.piece-dying,.board-shake,.hl-choice,.caramba-btn{animation:none}}@media (max-width: 819px){.app-main:has(>.game-page){padding:0}.caramba-btn{font-size:1.4rem;min-height:60px}}.game-mobile{display:flex;flex-direction:column;gap:0}.game-stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}.game-mobile .board-wrap{flex:1}.game-mobile .board-viewport{min-height:0;border-width:0;border-radius:0}.board-overlay{position:absolute;left:6px;right:6px;bottom:6px;z-index:6;display:flex;flex-direction:column;gap:6px;max-height:60%;overflow-y:auto;pointer-events:none}.board-overlay>*{pointer-events:auto}@media (max-width: 819px) and (orientation: landscape){.board-overlay{max-height:40%}}.board-overlay .card,.board-overlay .choice-bar{margin:0;padding:6px 10px;background:#fff8eaf0;box-shadow:0 2px 8px #00000040}.board-overlay .turn-status{font-size:.95rem;margin:0}.board-overlay .turn-panel p{margin:2px 0 4px}.board-overlay .btn{min-height:40px;padding:4px 12px}.tab-sheet{position:absolute;top:0;right:0;bottom:0;left:0;z-index:7;display:flex;flex-direction:column;padding:8px;background:#2fb6e8f5;overflow-y:auto}.tab-sheet>.card{flex:1;margin:0}.tab-sheet>.score-panel{flex:0 0 auto}.game-tabs{flex-shrink:0;display:grid;grid-template-columns:repeat(4,1fr);background:var(--paper);border-top:2px solid var(--ink);padding-bottom:env(safe-area-inset-bottom,0)}.game-tab{position:relative;min-height:48px;border:0;background:transparent;font-weight:700;color:var(--ink);cursor:pointer}.game-tab-active{background:var(--sand);box-shadow:inset 0 3px 0 var(--ink)}.tab-dot{position:absolute;top:8px;margin-left:4px;width:9px;height:9px;border-radius:50%;background:var(--leaf)}.tab-badge{position:absolute;top:4px;margin-left:4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--danger);color:#fff;font-size:11px;line-height:18px}.vote-end{margin-top:10px;padding-top:8px;border-top:1px dashed rgba(107,90,69,.35);display:flex;flex-direction:column;gap:6px;align-items:flex-start}.vote-end p{margin:0}.vote-confirm{display:flex;flex-direction:column;gap:6px}.tile-tooltip{position:fixed;z-index:70;display:flex;gap:10px;align-items:flex-start;width:max-content;max-width:min(320px,calc(100vw - 16px));padding:10px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:0 4px 14px #00000040;pointer-events:none}.tile-tooltip-sticky{pointer-events:auto}.tile-tooltip-img{flex:none;width:48px;height:48px;border-radius:6px}.tile-tooltip-body{min-width:0}.tile-tooltip-title{display:block;margin-bottom:2px}.tile-tooltip-text,.tile-tooltip-contents{margin:0;font-size:.85rem;line-height:1.3}.tile-tooltip-contents{margin-top:4px;font-weight:600}.help-section h2{font-size:1.2rem;margin:16px 0 8px}.help-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}.help-card{display:flex;gap:10px;align-items:flex-start;padding:10px;background:#fff;border:2px solid var(--ink);border-radius:var(--radius)}.help-card-img{flex:none;width:56px;height:56px;border-radius:6px}.help-card h3{font-size:1rem;margin:0 0 4px}.help-card p{margin:0;font-size:.9rem;line-height:1.35}.help-backdrop{align-items:center}.help-dialog{width:100%;max-width:900px;max-height:calc(100dvh - 32px);margin:0;display:flex;flex-direction:column;padding:0;overflow:hidden}.help-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:2px solid var(--ink)}.help-dialog-head h2{margin:0;font-size:1.3rem}.help-dialog-body{overflow-y:auto;overscroll-behavior:contain;padding:0 16px 16px}@media (max-width: 400px){.help-grid{grid-template-columns:1fr}}