*{box-sizing:border-box}body{margin:0;background-color:#334155;color:#f8fafc;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--header-h: 3.25rem;--avail-vh: calc(98vh - var(--header-h));--bezel: 5px;--panel-header-h: 1.25rem;--grid-size: clamp(280px, min(calc(var(--avail-vh) * .58), calc(42vh + 10vw) ), 580px);--panel-w: calc(var(--grid-size) + 2 * var(--bezel));--panel-h: calc(var(--grid-size) + var(--panel-header-h) + var(--bezel));--remaining: max(0px, calc(var(--avail-vh) - var(--panel-h)));--ratio: calc((var(--remaining) / 1.35) / var(--panel-h));--clamped-ratio: clamp(.45, calc(var(--ratio) * 1.5), .52);--angle: acos(var(--clamped-ratio))}.highlighted{background:#f3f10d}.ship{background:#676c73;color:#fff}.invalid,.hit{background:#e8071a}.water{background:#4287f5}.miss{background:#e2e8f0}.pending{background-color:#fde047;animation:pulse-yellow 1s cubic-bezier(.4,0,.6,1) infinite;cursor:not-allowed}@keyframes pulse-yellow{0%,to{opacity:1}50%{opacity:.5}}.cell{aspect-ratio:1;display:flex;justify-content:center;align-items:center}.ShipPlaceModal{display:flex;flex-direction:column;gap:10px}.board{display:grid;grid-template-columns:repeat(10,40px);gap:2px;justify-content:center;margin:auto}.board div{outline:solid black 2px}.add-buttons{display:flex;justify-content:center;margin:auto}.mobile-only-vert-toggle{display:none;justify-content:center}@media(max-width:768px){.mobile-only-vert-toggle{display:flex;min-width:120px;max-width:150px;margin:auto}}.instructions{display:flex;flex-direction:column;justify-content:flex-start;margin:1rem auto;max-width:480px;gap:2px}.instructions h2,.instructions p{padding:.5rem;margin-top:-1rem}.Game{display:flex;flex-direction:column;margin:0 auto;align-items:center;width:100%;min-height:100vh;box-sizing:border-box;overflow-x:hidden}.hud{width:100%;max-width:100vw;height:var(--header-h);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;background:#111827;padding:3px 8px;margin:0 0 .25rem;box-sizing:border-box;font-size:clamp(.6rem,2.2vw + .05rem,.875rem);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#cbd5e1;-webkit-user-select:none;user-select:none}.player-info{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(.35em,1.2vw,1em);width:100%;max-width:min(100%,960px);white-space:nowrap}.turn-indicator-container{display:flex;justify-content:center;align-items:center;width:.9em;height:.9em;flex-shrink:0}.turn-indicator{border-radius:50%;background:#eab308;width:.55em;height:.55em}.player-name{font-weight:700;width:2.2em;color:#f8fafc;flex-shrink:0}.ships-list{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(.3em,1vw,.9em)}.alive{color:#22c55e;font-weight:600}.dead{color:#ef4444;text-decoration:line-through;opacity:.7}.acc{font-variant-numeric:tabular-nums;color:#94a3b8;flex-shrink:0}.waiting-overlay{position:fixed;inset:0;background-color:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:9998}.waiting-modal{background-color:#1e293b;color:#f8fafc;padding:2.5rem 3.5rem;border-radius:1rem;border:2px solid #334155;box-shadow:0 20px 25px -5px #0009;text-align:center;animation:popIn .4s cubic-bezier(.175,.885,.32,1.275) forwards}.waiting-modal h2{margin:0 0 .5rem;font-size:clamp(1.4rem,2.5vw,2rem);color:#38bdf8}.waiting-modal p{margin:0;color:#94a3b8;font-size:1rem}.clamshell-container{display:flex;justify-content:center;align-items:flex-start;width:100%;perspective:2000px;perspective-origin:50% 75%;overflow:visible}.camera{display:flex;flex-direction:column;align-items:center;transform-style:preserve-3d}.panel{width:var(--panel-w);height:var(--panel-h);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 var(--bezel) var(--bezel) var(--bezel);box-sizing:border-box;background:#000;border:none;position:relative}.panel-header{height:var(--panel-header-h);width:100%;display:flex;justify-content:center;align-items:center;padding:0;margin:0;-webkit-user-select:none;user-select:none}.panel-title{color:#64748b;font-family:sans-serif;font-weight:700;font-size:clamp(.68rem,1.2vw,.78rem);text-transform:uppercase;letter-spacing:1.5px;line-height:1;-webkit-font-smoothing:antialiased}.panel.screen{z-index:2}.panel.base{transform-origin:top center;transform:rotateX(var(--angle));z-index:1}.board-area{width:var(--grid-size);height:var(--grid-size);display:flex;align-items:center;justify-content:center;padding:0;margin:0;box-sizing:border-box}.camera .board{width:var(--grid-size);height:var(--grid-size);aspect-ratio:1;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:2px;margin:0;padding:0;background:#000;box-sizing:border-box}.camera .board .cell{width:100%;height:100%;aspect-ratio:1;outline:solid black 2px;border:none;border-radius:0}.camera .enemy.board .cell{cursor:pointer}.camera .player.board .cell{cursor:default}@media(max-width:768px),(orientation:portrait){:root{--grid-size: min(calc(92vw - 2 * var(--bezel)), calc((98vh - var(--header-h) - 2 * var(--panel-header-h) - 4 * var(--bezel)) / 2));--panel-w: calc(var(--grid-size) + 2 * var(--bezel));--panel-h: calc(var(--grid-size) + var(--panel-header-h) + var(--bezel));--angle: 0deg}.clamshell-container{perspective:none;-webkit-perspective:none}.camera{transform:none;transform-style:flat;-webkit-transform-style:flat}.panel.base{transform:none;transform-origin:initial}}#invite-link-container{display:flex;flex-direction:column;flex-wrap:wrap;gap:10px;justify-content:center;margin:auto;max-width:100%;word-break:break-all}#invite-link{width:100%;overflow:hidden;white-space:nowrap;padding:10px;border:1px solid #ccc;border-radius:4px;background-color:#f9f9f9;font-family:monospace;min-width:0}#invite-link-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.copy-btn .join-btn{padding:10px 15px;cursor:pointer;background-color:#007bff;color:#fff;border:none;border-radius:4px;flex-shrink:0}#qr-code-container{display:flex;align-items:center;justify-content:center}.copy-btn:hover .join-btn:hover{background-color:#0056b3}dialog.result-dialog{position:fixed;inset:0;width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0;padding:0;border:none;background-color:#000000bf;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:9999}.result-modal{background-color:#1e293b;color:#f8fafc;padding:2.5rem 3.5rem;border-radius:1rem;border:2px solid #334155;box-shadow:0 20px 25px -5px #0009;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem;animation:popIn .4s cubic-bezier(.175,.885,.32,1.275) forwards;max-width:90vw;box-sizing:border-box}.result-modal.win{border-color:#22c55e}.result-modal.win h2{color:#22c55e}.result-modal.lose{border-color:#ef4444}.result-modal.lose h2{color:#ef4444}.result-modal h2{margin:0;font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:800;text-transform:uppercase;letter-spacing:2px}.result-modal p{margin:0;color:#94a3b8;font-size:1rem}.result-actions{margin-top:.5rem}.play-again-btn{display:inline-block;padding:.65rem 1.5rem;background-color:#0284c7;color:#fff;border:none;border-radius:.5rem;font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color .15s ease}.play-again-btn:hover{background-color:#0369a1}@keyframes popIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}