/* OneSquare — CSS escopado do game (cores próprias do game preservadas).
   Layout de tela cheia via modo stage. */
.jg-onesquare{position:absolute;inset:0;width:100%;height:100%;}
.jg-onesquare canvas{background:transparent;box-shadow:none;border-radius:0;}

:root {
            --anim-speed: 0.3s;
            --safe-bottom: env(safe-area-inset-bottom, 1.25rem);
            --node-size: 5.3125rem;
            --grid-gap: 0.3125rem;
        }
.jg-onesquare [data-theme="oled"] {
            --bg-app: #000000; --bg-panel: #111111;
            --text-main: #ffffff; --text-muted: #a0a0a0;
            --accent: #00e5ff;
            --cell-bg: #222222; --cell-active: #333333; --cell-border: #333333;
            --p1-color: #00e5ff; --p1-shadow: 0 0 0.625rem #00e5ff;
            --p2-color: #ff0055; --p2-shadow: 0 0 0.625rem #ff0055;
            --map-line: #333333;
            --node-bg: #111111; --node-border: #ffffff; --node-locked: #222222;
        }
.jg-onesquare [data-theme="paper"] {
            --bg-app: #f4f4f4; --bg-panel: #ffffff;
            --text-main: #000000; --text-muted: #555555;
            --accent: #000000;
            --cell-bg: #ffffff; --cell-active: #e0e0e0; --cell-border: #000000;
            --p1-color: #000000; --p1-shadow: none;
            --p2-color: #d32f2f; --p2-shadow: none;
            --map-line: #cccccc;
            --node-bg: #ffffff; --node-border: #000000; --node-locked: #e0e0e0;
        }
.jg-onesquare [data-theme="dracula"] {
            --bg-app: #282a36; --bg-panel: #44475a;
            --text-main: #f8f8f2; --text-muted: #bfbfbf;
            --accent: #bd93f9;
            --cell-bg: #6272a4; --cell-active: #53618d; --cell-border: #44475a;
            --p1-color: #8be9fd; --p1-shadow: 0 0.125rem 0 rgba(0,0,0,0.3);
            --p2-color: #ff79c6; --p2-shadow: 0 0.125rem 0 rgba(0,0,0,0.3);
            --map-line: #6272a4;
            --node-bg: #44475a; --node-border: #f8f8f2; --node-locked: #363845;
        }
.jg-onesquare * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
.jg-onesquare .view {
            position: absolute; inset: 0;
            display: flex; flex-direction: column;
            background: var(--bg-app);
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
            z-index: 10;
        }
.jg-onesquare .view.active { transform: translateX(0); z-index: 20; }
.jg-onesquare .view.background { transform: translateX(-20%); z-index: 5; filter: brightness(0.5); }
.jg-onesquare .btn-main {
            background: var(--bg-panel); color: var(--text-main);
            border: 0.125rem solid var(--cell-border); border-radius: 1rem;
            padding: 1.125rem; font-weight: 800; font-size: 1.1rem;
            width: 100%; display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 0.75rem; box-shadow: 0 0.25rem 0.625rem rgba(0,0,0,0.1);
            transition: transform 0.1s, border-color 0.2s;
        }
.jg-onesquare .btn-main:active { transform: scale(0.97); }
.jg-onesquare .btn-main:hover { border-color: var(--accent); }
.jg-onesquare .btn-icon {
            width: 2.75rem; height: 2.75rem; border-radius: 50%;
            border: 0.125rem solid var(--cell-border); background: var(--bg-panel);
            color: var(--text-main); display: flex; align-items: center; justify-content: center;
            font-size: 1.1rem; transition: transform 0.1s;
        }
.jg-onesquare .btn-icon:active { transform: scale(0.9); background: var(--cell-active); }
.jg-onesquare #splash { justify-content: center; padding: 2rem; }
.jg-onesquare .logo-title {
            font-size: clamp(2.2rem, 10vw, 3.5rem); line-height: 1; font-weight: 900;
            background: linear-gradient(135deg, var(--p1-color), var(--p2-color));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            letter-spacing: -0.125rem; margin-bottom: 0.625rem;
        }
.jg-onesquare #map { overflow-y: auto; scroll-behavior: smooth; }
.jg-onesquare .map-header {
            position: sticky; top: 0; z-index: 50;
            background: rgba(0,0,0,0.8); backdrop-filter: blur(10px);
            padding: 0.9375rem 1.25rem; border-bottom: 1px solid var(--cell-border);
            display: flex; justify-content: space-between; align-items: center;
        }
.jg-onesquare [data-theme="paper"] .map-header { background: rgba(255,255,255,0.95); }
.jg-onesquare .map-content {
            padding: 3rem 1rem 8rem 1rem;
            display: flex; flex-direction: column-reverse;
            align-items: center; position: relative;
        }
.jg-onesquare .path-line {
            position: absolute; top: 0; bottom: 0; left: 50%; width: 0.25rem;
            background: var(--map-line); transform: translateX(-50%); z-index: 0; border-radius: 0.25rem;
        }
.jg-onesquare .node {
            width: var(--node-size); height: var(--node-size);
            background: var(--node-bg); border: 0.1875rem solid var(--node-border);
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-size: 1.8rem; font-weight: 800; position: relative; z-index: 2; margin: 1.25rem 0;
            box-shadow: 0 0.3125rem 0.9375rem rgba(0,0,0,0.3); transition: transform 0.2s;
        }
.jg-onesquare .node:nth-child(odd) { transform: translateX(-3.125rem); }
.jg-onesquare .node:nth-child(even) { transform: translateX(3.125rem); }
.jg-onesquare .node:active { transform: scale(0.9) !important; }
.jg-onesquare .node.locked { background: var(--node-locked); border-color: var(--map-line); color: var(--text-muted); box-shadow: none; }
.jg-onesquare .node.current { border-color: var(--p1-color); box-shadow: 0 0 1.5625rem var(--p1-color); animation: pulse 2s infinite; }
.jg-onesquare .node.p1-owned { background: var(--p1-color); color: #000; border-color: #fff; }
.jg-onesquare .node.p2-owned { background: var(--p2-color); color: #fff; border-color: #fff; }
.jg-onesquare .node-stars { position: absolute; bottom: -1.375rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.125rem; }
.jg-onesquare .star { color: #ffd700; font-size: 1rem; text-shadow: 0 0.0625rem 0.1875rem rgba(0,0,0,0.8); }
@keyframes pulse{ 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
.jg-onesquare #game { display: grid; grid-template-rows: auto 1fr auto; }
.jg-onesquare .game-header { padding: 0.9375rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--cell-border); }
.jg-onesquare .timer-bar { height: 0.25rem; width: 100%; background: var(--cell-border); }
.jg-onesquare .timer-progress { height: 100%; width: 100%; background: var(--accent); transition: width 1s linear; }
.jg-onesquare .game-board-container { display: flex; align-items: center; justify-content: center; padding: 1.25rem; overflow: hidden; }
.jg-onesquare .grid {
            display: grid; grid-template-columns: repeat(var(--grid-size), 1fr); gap: var(--grid-gap);
            width: 100%; max-width: 31.25rem; aspect-ratio: 1 / 1;
            background: var(--bg-panel); padding: 0.625rem; border-radius: 1rem; border: 1px solid var(--cell-border);
        }
.jg-onesquare .cell { background: var(--cell-bg); border: 1px solid var(--cell-border); border-radius: 0.375rem; position: relative; }
.jg-onesquare .cell:active { background: var(--cell-active); }
.jg-onesquare .piece { position: absolute; inset: 12%; border-radius: 50%; animation: bounceIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.jg-onesquare .cell.p1 .piece { background: var(--p1-color); box-shadow: var(--p1-shadow); }
.jg-onesquare .cell.p2 .piece { background: var(--p2-color); box-shadow: var(--p2-shadow); }
.jg-onesquare [data-theme="paper"] .cell.p1 .piece { border-radius: 0.25rem; }
.jg-onesquare [data-theme="paper"] .cell.p2 .piece { background: transparent; border: 0.25rem solid var(--p2-color); }
.jg-onesquare .cell.win { background: rgba(0, 255, 128, 0.2); border-color: #00ff80; }
@keyframes bounceIn{ from { transform: scale(0); } to { transform: scale(1); } }
.jg-onesquare .game-controls {
            padding: 1.25rem; padding-bottom: calc(1.25rem + var(--safe-bottom));
            display: flex; justify-content: center; gap: 1.25rem;
        }
.jg-onesquare .modal-content { background: var(--bg-panel); color: var(--text-main); border: 1px solid var(--cell-border); border-radius: 1.25rem; }
.jg-onesquare .modal-header, .jg-onesquare .modal-footer { border-color: var(--cell-border); }
.jg-onesquare .form-select, .jg-onesquare .form-control { background: var(--bg-app); border-color: var(--cell-border); color: var(--text-main); }
.jg-onesquare .form-select:focus { background: var(--bg-app); color: var(--text-main); border-color: var(--accent); box-shadow: none; }
.jg-onesquare .rule-card {
            background: var(--bg-app); border: 1px solid var(--cell-border);
            border-radius: 0.75rem; padding: 0.9375rem; margin-bottom: 0.625rem;
            display: flex; align-items: center; gap: 0.9375rem; text-align: left;
        }
.jg-onesquare .rule-icon { font-size: 1.5rem; color: var(--accent); }