:root{color:#21170f;--board-size:min(92vw, 560px);--board-min-size:480px;--wood:#d8a45f;--line:#532f108c;background:#f6ead8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button{color:#fffaf3;cursor:pointer;background:#2f2115;border:0;border-radius:999px;min-height:44px;padding:0 18px;font-weight:700}button:disabled{cursor:not-allowed;opacity:.45}.secondary{color:#2f2115;background:#fff7eb;border:1px solid #8c6239}.homePage,.gamePage{min-height:100vh;padding:max(20px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom))}.homePage{place-items:center;display:grid}.heroCard{text-align:center;background:#fffaf3e0;border-radius:32px;width:min(680px,100%);padding:36px;box-shadow:0 24px 70px #43260e2e}.heroCard h1{margin:8px 0 12px;font-size:clamp(44px,10vw,88px)}.heroCard p{font-size:18px;line-height:1.7}.heroActions,.modalActions,.gameActions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.eyebrow{color:#8c4f1f;letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:13px;font-weight:800}.icpText{color:#8c6239;margin:20px 0 0;font-size:13px;font-weight:700}.gamePage{max-width:900px;margin:0 auto}.statusBar{justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px;display:flex}.statusBar h1{margin:4px 0 0;font-size:clamp(26px,7vw,44px)}.moveCount{color:#6f4a2c;margin:0;font-weight:700}.boardSection{margin:0 auto}.scrollHint{color:#8c4f1f;text-align:center;margin:0 0 8px;font-size:14px;font-weight:700;display:none}.boardScroller{overscroll-behavior-x:contain;padding:8px 0 14px;overflow-x:auto}.boardFrame{grid-template-areas:".top.""left board right"".bottom.";grid-template-columns:28px var(--board-size) 28px;grid-template-rows:24px var(--board-size) 24px;width:calc(var(--board-size) + 56px);min-width:calc(var(--board-min-size) + 56px);color:#5b3619;margin:0 auto;font-size:12px;font-weight:800;display:grid}.axisLabels{pointer-events:none;-webkit-user-select:none;user-select:none;place-items:center;display:grid}.axisLabels.top{grid-area:top;grid-template-columns:repeat(15,1fr)}.axisLabels.bottom{grid-area:bottom;grid-template-columns:repeat(15,1fr)}.axisLabels.left{grid-area:left;grid-template-rows:repeat(15,1fr)}.axisLabels.right{grid-area:right;grid-template-rows:repeat(15,1fr)}.board{width:var(--board-size);height:var(--board-size);min-width:var(--board-min-size);min-height:var(--board-min-size);background-color:var(--wood);background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);--preview-shadow:#3721102e;background-size:7.14286% 7.14286%;border:14px solid #b87932;border-radius:18px;grid-area:board;margin:0 auto;padding:0;position:relative;overflow:visible;box-shadow:inset 0 0 0 1px #ffffff59,0 16px 40px #502d0e3d}.board.preview-black{--preview-shadow:#28385052}.board.preview-white{--preview-shadow:#f5d27885}.centerStar{pointer-events:none;background:#140e08d1;border-radius:50%;width:9px;height:9px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #ffebbe33}.intersection{width:7.14286%;min-width:32px;height:7.14286%;min-height:32px;color:inherit;opacity:1;background:0 0;border-radius:0;place-items:center;padding:0;display:grid;position:absolute;transform:translate(-50%,-50%)}.intersection:disabled{opacity:1}.intersection:not(:disabled):active:after,.intersection:not(:disabled):hover:after{content:"";background:var(--preview-shadow);width:42%;height:42%;box-shadow:0 0 16px 6px var(--preview-shadow);border-radius:50%}.intersection.black:not(:disabled):after,.intersection.black:before{background:#08060438}.intersection.white:not(:disabled):after,.intersection.white:before{background:#fffaf3b8}.intersection.occupied:before{content:"";border-radius:50%;width:34%;height:34%;position:absolute;box-shadow:0 0 0 1px #41271224}.stone{z-index:1;border-radius:50%;width:72%;height:72%;position:relative;box-shadow:0 4px 10px #00000040}.black .stone{background:radial-gradient(circle at 35% 30%,#5a514a,#080604 70%)}.white .stone{background:radial-gradient(circle at 35% 30%,#fff,#e7dccb 72%);border:1px solid #8d806f}.lastMove .stone{outline-offset:2px;outline:4px solid #38bdf8}.winningPoint .stone{box-shadow:0 0 0 5px #fbbf24,0 4px 12px #00000047}.gameActions{padding:14px 0 max(10px, env(safe-area-inset-bottom));background:linear-gradient(#f6ead800,#f6ead8 28%);margin-top:18px;position:sticky;bottom:0}.modalOverlay{z-index:20;background:#20140a75;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:#fffaf3;border-radius:24px;width:min(440px,100%);padding:26px;box-shadow:0 30px 80px #00000040}.modal h2{margin-top:0}.modal p{line-height:1.6}@media (width<=520px){:root{--board-size:92vw}.scrollHint{display:block}.board{margin:0}.statusBar{flex-direction:column;align-items:start}}.modeGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0;display:grid}.modeCard{text-align:left;background:#fff7ebc7;border:1px solid #8c623947;border-radius:24px;gap:10px;padding:22px;display:grid}.modeCard h2{margin:0;font-size:28px}.modeCard p{margin:0;font-size:15px;line-height:1.55}.modeCard.flying{background:linear-gradient(135deg,#fee2e2b8,#dbeafeb8,#dcfce7b8)}.modeCard.ticTacToe{background:linear-gradient(135deg,#e0f2feb8,#f0fdf4b8)}.modeCard.reversi{background:linear-gradient(135deg,#dcfce7b8,#fff7edc2)}.reversiPage{max-width:1180px;min-height:100vh;padding:max(20px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));margin:0 auto}.reversiGameLayout{grid-template-columns:minmax(0,1fr) minmax(280px,320px);align-items:start;gap:20px;display:grid}.reversiSidePanel{gap:14px;display:grid}.reversiBoardSection{justify-items:center;min-width:0;display:grid}.reversiBoardFrame{grid-template:".top"24px"left board"/24px minmax(0,560px);width:min(100%,600px);display:grid}.reversiAxis{color:#24533b;-webkit-user-select:none;user-select:none;place-items:center;font-size:12px;font-weight:900;display:grid}.reversiAxisTop{grid-area:top;grid-template-columns:repeat(8,1fr)}.reversiAxisLeft{grid-area:left;grid-template-rows:repeat(8,1fr)}.reversiBoard{aspect-ratio:1;background:#176140;border:10px solid #17412f;border-radius:20px;grid-area:board;grid-template-columns:repeat(8,1fr);width:min(100vw - 56px,560px);padding:8px;display:grid;box-shadow:inset 0 0 0 1px #ffffff38,0 18px 42px #0d2d1f3d}.reversiCell{min-width:0;min-height:0;color:inherit;background:#197047;border:1px solid #d9f5e26b;border-radius:0;place-items:center;padding:0;display:grid;position:relative}.reversiCell:disabled{opacity:1}.reversiCell:not(:disabled):active{background:#1d7d50}.reversiCell.legalMove:after{content:"";background:#f5f4dcb8;border-radius:50%;width:24%;height:24%;position:absolute;box-shadow:0 0 0 2px #1c402d33}.reversiCell.invalidMove{box-shadow:inset 0 0 0 3px #f87171}.reversiDisc{z-index:1;border-radius:50%;width:76%;height:76%;position:relative;box-shadow:0 5px 12px #00000047}.reversiCell.black .reversiDisc{background:radial-gradient(circle at 35% 28%,#56524c,#090806 70%)}.reversiCell.white .reversiDisc{background:radial-gradient(circle at 35% 28%,#fff,#e8dfd0 74%);border:1px solid #726a5f}.reversiCell.lastMove .reversiDisc{outline-offset:2px;outline:4px solid #fbbf24}.reversiLegalDot{background:#f5f4dcb8;border-radius:50%;width:24%;height:24%}.reversiStatusPanel,.reversiActions{background:#fffaf3eb;border-radius:22px;box-shadow:0 12px 30px #1838261f}.reversiStatusPanel{gap:14px;padding:18px;display:grid}.reversiStatusPanel h2{margin:4px 0 0;font-size:clamp(26px,5vw,38px)}.reversiScoreGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.reversiScoreItem{color:#173226;background:#eef8f0;border-radius:16px;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:12px;display:grid}.reversiScoreDisc{border-radius:50%;width:24px;height:24px;box-shadow:0 3px 8px #0003}.reversiScoreItem.black .reversiScoreDisc{background:#111}.reversiScoreItem.white .reversiScoreDisc{background:#fff;border:1px solid #7a7166}.reversiMeta{color:#4d6a58;margin:0;font-weight:800}.reversiMessage{color:#713f12;background:#fef3c7;border-radius:14px;margin:0;padding:12px;font-weight:900}.reversiActions{grid-template-columns:1fr;gap:10px;padding:16px;display:grid}.reversiActions button{width:100%}.reversiModal p{color:#3e342b}@media (width<=820px){.reversiGameLayout{grid-template-columns:1fr}.reversiSidePanel{order:-1}.reversiActions{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=430px){.reversiPage{padding-left:10px;padding-right:10px}.reversiBoardFrame{grid-template-rows:20px auto;grid-template-columns:20px minmax(0,1fr)}.reversiBoard{border-width:8px;border-radius:16px;width:calc(100vw - 48px);padding:6px}.reversiActions{grid-template-columns:1fr}}.ticTacToePage{max-width:760px;min-height:100vh;padding:max(20px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));margin:0 auto}.ticTacToeStatusBar{background:#fffaf3e0;border-radius:28px;justify-content:space-between;align-items:end;gap:16px;margin-bottom:22px;padding:18px 20px;display:flex;box-shadow:0 14px 38px #43260e1f}.ticTacToeStatusBar h1{margin:4px 0 0;font-size:clamp(30px,8vw,54px)}.ticTacToeLastMove{color:#6f4a2c;margin:8px 0 0;font-weight:700}.ticTacToeBoardSection{place-items:center;display:grid}.ticTacToeBoard{aspect-ratio:1;background:#fff7eb;border:10px solid #2f2115;border-radius:24px;grid-template-columns:repeat(3,1fr);width:min(92vw,420px);padding:10px;display:grid;box-shadow:inset 0 0 0 1px #ffffff6b,0 18px 44px #502d0e38}.ticTacToeCell{color:#2f2115;background:#fffaf3;border:3px solid #2f2115;border-radius:0;min-width:0;min-height:72px;padding:0;font-size:clamp(54px,18vw,92px);font-weight:900;line-height:1}.ticTacToeCell:nth-child(-n+3){border-top:0}.ticTacToeCell:nth-child(3n+1){border-left:0}.ticTacToeCell:nth-child(3n){border-right:0}.ticTacToeCell:nth-child(n+7){border-bottom:0}.ticTacToeCell:not(:disabled):hover{background:#eef8f6}.ticTacToeCell:disabled{opacity:1}.ticTacToeCell.player-x{color:#0f766e}.ticTacToeCell.player-o{color:#be123c}.ticTacToeCell.lastMove{background:#ecfeff}.ticTacToeCell.winningCell{background:#fef3c7;box-shadow:inset 0 0 0 5px #fbbf24}.ticTacToeActions{padding:14px 0 max(10px, env(safe-area-inset-bottom));background:linear-gradient(#f6ead800,#f6ead8 28%);flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px;display:flex;position:sticky;bottom:0}.flyingPage{max-width:1180px;min-height:100vh;padding:max(20px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));margin:0 auto}.flyingHeader{background:#fffaf3db;border-radius:28px;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px;padding:18px 20px;display:flex;box-shadow:0 14px 38px #43260e1f}.flyingHeader h1{margin:4px 0 0;font-size:clamp(30px,7vw,52px)}.flyingLayout{grid-template-columns:minmax(0,1fr) 280px;align-items:start;gap:16px;display:grid}.lineupPanel{background:#fffaf3e0;border-radius:22px;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 16px;padding:14px 16px;display:flex;box-shadow:0 12px 30px #43260e1a}.lineupPanel p{color:#6f4a2c;margin:4px 0 0;font-size:13px;font-weight:700}.lineupOptions{flex-wrap:wrap;gap:8px;display:flex}.lineupOption{background:color-mix(in srgb, var(--player-color) 12%, #fffaf3);min-height:38px;color:var(--player-color);opacity:.58;border:2px solid;padding:0 12px}.lineupOption.selected{background:var(--player-color);color:#fffaf3;opacity:1}.lineupHint{color:#dc2626;font-size:13px;font-weight:800}.flyingBoard{aspect-ratio:1;background:radial-gradient(circle,#fffaf3d6 0 9%,#0000 10%),linear-gradient(135deg,#fee2e26b 0 20%,#0000 20%),linear-gradient(225deg,#fef3c780 0 20%,#0000 20%),linear-gradient(315deg,#dbeafe80 0 20%,#0000 20%),linear-gradient(45deg,#dcfce780 0 20%,#0000 20%),#efd0a3;border:12px solid #b87932;border-radius:28px;width:min(76vw,720px);margin:0 auto;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff52,0 16px 40px #502d0e33}.routeLayer{position:absolute;inset:0}.routePoint,.takeoffPoint,.targetPoint,.approachRoute{border-radius:50%;place-items:center;display:grid;position:absolute;transform:translate(-50%,-50%)}.approachRoute{z-index:0;pointer-events:none;border-radius:999px}.approachRoute.player-red{background:linear-gradient(90deg, color-mix(in srgb, var(--player-color) 32%, transparent), color-mix(in srgb, var(--player-color) 18%, transparent));width:16%;height:3.1%;top:50%;left:13.5%}.approachRoute.player-yellow{background:linear-gradient(180deg, color-mix(in srgb, var(--player-color) 32%, transparent), color-mix(in srgb, var(--player-color) 18%, transparent));width:3.1%;height:16%;top:13.5%;left:50%}.approachRoute.player-blue{background:linear-gradient(270deg, color-mix(in srgb, var(--player-color) 32%, transparent), color-mix(in srgb, var(--player-color) 18%, transparent));width:16%;height:3.1%;top:50%;left:86.5%}.approachRoute.player-green{background:linear-gradient(0deg, color-mix(in srgb, var(--player-color) 32%, transparent), color-mix(in srgb, var(--player-color) 18%, transparent));width:3.1%;height:16%;top:86.5%;left:50%}.routePoint{color:#6f4a2c85;background:#fff7eb;border:1px solid #6f4a2c6b;width:5.2%;height:5.2%;font-size:9px;font-weight:800}.routePoint.approachRoutePoint,.routePoint.homeRoute{z-index:1;border:3px solid color-mix(in srgb, var(--player-color) 78%, #1f130b);background:color-mix(in srgb, var(--player-color) 36%, #fffaf3);color:#1f130b;width:4.8%;height:4.8%;box-shadow:0 0 0 2px #fffaf3, 0 0 0 4px color-mix(in srgb, var(--player-color) 30%, transparent);font-size:10px}.takeoffPoint{z-index:1;color:currentColor;background:#ffffffe0;border:3px solid;width:6.4%;height:6.4%;font-size:11px;font-weight:900}.targetPoint{z-index:2;background:#ffffff42;border:3px dashed;width:8.2%;height:8.2%;box-shadow:0 0 18px}.targetPoint.capture{border-color:#dc2626;box-shadow:0 0 18px #dc2626}.targetPoint.selectedTarget{background:#ffffff6b}.baseLabel{text-align:center;pointer-events:none;background:#ffffff70;border:2px solid;border-radius:16px;place-items:center;width:13%;height:13%;font-size:clamp(10px,1.45vw,13px);font-weight:900;line-height:1.1;display:grid;position:absolute}.baseLabel.inactive{opacity:.28;filter:grayscale(.85)}.inactiveCamp{z-index:1;width:13%;height:13%;color:color-mix(in srgb, var(--player-color) 58%, #5b3619);opacity:.62;pointer-events:none;border-radius:16px;place-items:center;font-size:12px;font-weight:900;display:grid;position:absolute}.inactiveCamp.player-red{top:3.2%;left:3.2%}.inactiveCamp.player-yellow{top:3.2%;right:3.2%}.inactiveCamp.player-blue{bottom:3.2%;right:3.2%}.inactiveCamp.player-green{bottom:3.2%;left:3.2%}.baseLabel.red{color:#ef4444;background:#fee2e294;top:3.2%;left:3.2%}.baseLabel.yellow{color:#f59e0b;background:#fef3c79e;top:3.2%;right:3.2%}.baseLabel.blue{color:#3b82f6;background:#dbeafe9e;bottom:3.2%;right:3.2%}.baseLabel.green{color:#22c55e;background:#dcfce79e;bottom:3.2%;left:3.2%}.flyingFinish{z-index:2;color:#2f2115;pointer-events:none;background:conic-gradient(#fee2e2,#fef3c7,#dbeafe,#dcfce7,#fee2e2);border:1px solid #2f21152e;border-radius:50%;place-items:center;width:8.6%;height:8.6%;font-size:clamp(10px,1.5vw,13px);font-weight:900;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.planeButton{z-index:3;background:var(--player-color);color:#fffaf3;border:2px solid #fffaf3;border-radius:50%;place-items:center;width:6.6%;min-width:40px;height:6.6%;min-height:40px;padding:0;font-size:19px;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 6px 14px #0000002e}.planeButton.inBase{width:5.2%;min-width:32px;height:5.2%;min-height:32px;font-size:16px;box-shadow:0 4px 10px #00000029}.planeButton.inBase:before{content:"";border-radius:50%;position:absolute;inset:-6px}.planeButton:disabled{opacity:.72;cursor:default}.planeButton.selectable{box-shadow:0 0 0 4px color-mix(in srgb, var(--player-color) 32%, transparent), 0 8px 18px #00000038;cursor:pointer;opacity:1;border-color:#fff}.planeButton.selected{outline:3px dashed var(--player-color);outline-offset:4px}.stackBadge{color:#fffaf3;background:#2f2115;border:2px solid #fffaf3;border-radius:999px;min-width:22px;height:22px;padding:0 5px;font-size:11px;line-height:18px;position:absolute;bottom:-6px;right:-6px}.flyingSidePanel{gap:14px;display:grid}.dicePanel,.playerPanel{background:#fffaf3e6;border-radius:24px;padding:18px;box-shadow:0 12px 30px #43260e1a}.dicePanel{text-align:center;justify-items:center;gap:12px;display:grid}.diceValue{background:#fff7eb;border:2px solid #8c6239;border-radius:24px;place-items:center;width:92px;height:92px;font-size:44px;font-weight:900;display:grid}.devDiceControls{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.devDiceControls button{min-width:34px;min-height:34px;padding:0;font-size:12px}.playerPanel{gap:10px;display:grid}.playerCard{background:#fff7eb;border:2px solid #0000;border-radius:18px;justify-content:space-between;align-items:center;gap:10px;padding:12px;display:flex}.playerCard.current{background:color-mix(in srgb, var(--player-color) 10%, #fff7eb);box-shadow:0 0 18px color-mix(in srgb, var(--player-color) 18%, transparent);border-color:currentColor}.playerCard em{color:#fffaf3;background:currentColor;border-radius:999px;padding:4px 8px;font-size:12px;font-style:normal;font-weight:900}.rollInlineButton{background:var(--player-color);color:#fffaf3;min-height:36px;box-shadow:0 8px 18px color-mix(in srgb, var(--player-color) 26%, transparent);padding:0 14px}.player-red{--player-color:#ef4444;color:#ef4444}.player-yellow{--player-color:#f59e0b;color:#f59e0b}.player-blue{--player-color:#3b82f6;color:#3b82f6}.player-green{--player-color:#22c55e;color:#22c55e}.flyingActions{background:0 0;margin-top:0;padding:0;position:static}@media (width<=820px){.modeGrid,.flyingLayout{grid-template-columns:1fr}.flyingHeader{flex-direction:column;align-items:start}.flyingBoard{width:min(92vw,680px)}.ticTacToeStatusBar{flex-direction:column;align-items:start}}