:root{color-scheme: light;--page-bg: #f3f6fb;--panel-bg: #ffffff;--text: #17233c;--muted: #5b6578;--board: #1769c2;--board-dark: #0d4f9d;--hole: #e8edf5;--human: #e3484f;--human-dark: #af2530;--computer: #ffd84a;--computer-dark: #c99d00;--focus: #102b56;--win: #30c878;font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;}*{box-sizing: border-box;}body{min-width: 280px;min-height: 100vh;margin: 0;color: var(--text);background: radial-gradient(circle at top, #fff 0, var(--page-bg) 48rem);}a{color: inherit;}#id_layout_root{min-height: 100vh;}#id_layout_content_row{display: flex;align-items: flex-start;justify-content: center;gap: 1.75rem;width: 100%;}#id_layout_main{width: min(100%, 58rem);min-width: 0;}.cls_ad_sidebar{flex: 0 0 11.25rem;min-height: 38.75rem;margin-top: 4.5rem;}.cls_ad_bottom{width: min(calc(100% - 2rem), 60.625rem);min-height: 5.625rem;margin: 1rem auto;}#id_layout_footer{padding: 0.75rem 1rem 1.5rem;color: var(--muted);font-size: 0.85rem;text-align: center;}#id_layout_footer a:hover{color: var(--board-dark);}button{font: inherit;}.game-shell{width: 100%;margin-inline: auto;padding: clamp(1rem, 3vw, 2.5rem) clamp(0.65rem, 3vw, 1.5rem) 2rem;text-align: center;}.game-header h1{margin: 0 0 0.3rem;font-size: clamp(2rem, 7vw, 3.5rem);line-height: 1;}.instructions{margin: 0;}.instructions{color: var(--muted);}.mode-control{display: inline-flex;margin: 0.9rem auto 0;padding: 0.2rem;border: 1px solid #ced8e6;border-radius: 999px;background: #e9eef6;}.mode-control button{min-height: 2.75rem;padding: 0.45rem 1rem;border: 0;border-radius: 999px;color: var(--muted);background: transparent;font-weight: 750;cursor: pointer;}.mode-control button.is-selected{color: #fff;background: var(--focus);box-shadow: 0 0.15rem 0.35rem rgb(16 43 86 / 22%);}.mode-control button:focus-visible{outline: 0.2rem solid #4e9cf0;outline-offset: 0.1rem;}.control-bar{display: flex;align-items: center;justify-content: center;gap: 0.75rem;margin: 0.9rem auto -0.2rem;}.difficulty-control{display: flex;align-items: center;gap: 0.65rem;}.difficulty-control[hidden]{display: none;}.difficulty-label{color: var(--muted);font-size: 0.82rem;font-weight: 700;}.difficulty-options{display: inline-flex;padding: 0.2rem;border: 1px solid #ced8e6;border-radius: 999px;background: #e9eef6;}.difficulty-options button{min-height: 2.5rem;min-width: 4.35rem;padding: 0.4rem 0.7rem;border: 0;border-radius: 999px;color: var(--muted);background: transparent;font-weight: 750;cursor: pointer;touch-action: manipulation;}.difficulty-options button.is-selected{color: #fff;background: var(--focus);box-shadow: 0 0.15rem 0.35rem rgb(16 43 86 / 22%);}.difficulty-options button:focus-visible{outline: 0.2rem solid #4e9cf0;outline-offset: 0.1rem;}.utility-controls{display: flex;gap: 0.4rem;}.audio-control{position: relative;}.utility-button{display: inline-flex;min-width: 2.75rem;min-height: 2.75rem;align-items: center;justify-content: center;gap: 0.35rem;padding: 0.45rem 0.7rem;border: 1px solid #ced8e6;border-radius: 999px;color: var(--focus);background: #fff;font-weight: 750;cursor: pointer;}.utility-button svg{width: 1.25rem;height: 1.25rem;fill: currentcolor;}.icon-button{padding: 0;}.icon-button .sound-waves{fill: none;stroke: currentcolor;stroke-linecap: round;stroke-width: 1.7;}.icon-button.is-muted .sound-waves{display: none;}.icon-button .mute-mark{display: none;fill: none;stroke: currentcolor;stroke-linecap: round;stroke-width: 2;}.icon-button.is-muted .mute-mark{display: initial;}.utility-button:focus-visible,.audio-popover button:focus-visible,.audio-popover input:focus-visible,.share-dialog button:focus-visible,.share-dialog a:focus-visible{outline: 0.2rem solid #4e9cf0;outline-offset: 0.15rem;}.audio-popover{position: absolute;z-index: 5;top: calc(100% + 0.45rem);right: 0;width: 13.5rem;padding: 0.8rem;border: 1px solid #ced8e6;border-radius: 0.85rem;background: #fff;box-shadow: 0 0.75rem 1.8rem rgb(25 52 92 / 18%);text-align: left;}.audio-popover[hidden]{display: none;}.audio-popover label{display: flex;justify-content: space-between;font-size: 0.85rem;font-weight: 700;}.audio-popover input{width: 100%;min-height: 2.75rem;}.audio-popover button,.share-actions button,.share-actions a,.close-dialog{min-height: 2.75rem;padding: 0.5rem 0.9rem;border: 1px solid #bfcbdc;border-radius: 999px;color: var(--focus);background: #fff;font: inherit;font-weight: 750;text-decoration: none;cursor: pointer;}.share-dialog{width: min(calc(100% - 2rem), 24rem);padding: 1.25rem;border: 0;border-radius: 1rem;color: var(--text);text-align: center;box-shadow: 0 1.5rem 4rem rgb(15 35 65 / 30%);}.share-dialog::backdrop{background: rgb(15 35 65 / 45%);}.share-dialog h2,.share-dialog p{margin: 0 0 0.75rem;}.share-actions{display: flex;justify-content: center;gap: 0.6rem;margin-bottom: 0.75rem;}.share-feedback{min-height: 1.4em;color: var(--muted);font-size: 0.85rem;}@media (max-width: 560px) {.game-shell { padding-top: 0.3rem;}  .game-header h1{margin-bottom: 0.05rem;font-size: 2.4rem;line-height: 0.95;}  .instructions{font-size: 0.84rem;line-height: 1.1;}  .mode-control{margin-top: 0.25rem;padding: 0.1rem;}  .mode-control button{min-height: 2.75rem;padding: 0.25rem 0.75rem;}  .control-bar{gap: 0.3rem;margin-top: 0.25rem;}  .difficulty-options{padding: 0.1rem;}  .difficulty-options button{min-width: 3.75rem;padding: 0.2rem 0.55rem;}  .difficulty-label,  #share-game span{position: absolute;width: 1px;height: 1px;overflow: hidden;clip-path: inset(50%);}  #share-game{padding: 0;}}.game-panel{width: min(100%, 39rem);margin: clamp(1.1rem, 4vw, 2rem) auto 1rem;padding: clamp(0.75rem, 2.5vw, 1.25rem);border: 1px solid #d9e0eb;border-radius: 1.25rem;background: var(--panel-bg);box-shadow: 0 1rem 2.5rem rgb(25 52 92 / 10%);}.players{display: flex;justify-content: center;gap: 1.5rem;font-weight: 700;}.player-key{display: inline-flex;align-items: center;gap: 0.4rem;min-height: 2rem;padding: 0.25rem 0.55rem;border: 2px solid transparent;border-radius: 999px;}.player-key.is-active{border-color: #9eb6d3;background: #eaf2fc;font-weight: 850;}.player-key.is-active::after{content: "turn";color: var(--muted);font-size: 0.68rem;font-weight: 700;letter-spacing: 0.04em;text-transform: uppercase;}.key-disc{width: 1.1rem;aspect-ratio: 1;border: 2px solid rgb(0 0 0 / 18%);border-radius: 50%;}.human-disc{background: var(--human);}.computer-disc{background: var(--computer);}.game-status{min-height: 1.5em;margin: 0.8rem 0;font-weight: 750;}.board{display: grid;grid-template-columns: repeat(7, minmax(0, 1fr));width: 100%;aspect-ratio: 7 / 6;padding: clamp(0.28rem, 1.4vw, 0.6rem);overflow: hidden;border: clamp(0.2rem, 0.8vw, 0.35rem) solid var(--board-dark);border-radius: clamp(0.65rem, 2vw, 1.1rem);background: linear-gradient(145deg, #2782df, var(--board));box-shadow: inset 0 -0.4rem 0 rgb(0 0 0 / 12%), 0 0.8rem 1.4rem rgb(18 66 126 / 18%);}.board-column{display: grid;grid-template-rows: repeat(6, minmax(0, 1fr));min-width: 0;min-height: 0;padding: 0;border: 0;border-radius: 0.45rem;color: inherit;background: transparent;cursor: pointer;touch-action: manipulation;-webkit-tap-highlight-color: transparent;}.board-column:hover:not(:disabled){background: rgb(255 255 255 / 13%);}.board-column:focus-visible{z-index: 1;outline: 0.22rem solid #fff;outline-offset: -0.28rem;box-shadow: inset 0 0 0 0.42rem var(--focus);}.board-column:disabled{cursor: default;}.board-cell{display: grid;min-width: 0;min-height: 0;padding: clamp(0.12rem, 0.75vw, 0.28rem);place-items: center;}.disc{width: 100%;max-width: 4.6rem;aspect-ratio: 1;border: clamp(0.12rem, 0.55vw, 0.25rem) solid rgb(8 48 95 / 32%);border-radius: 50%;background: var(--hole);box-shadow: inset 0 0.24rem 0.5rem rgb(18 48 84 / 18%);}.is-player-one .disc{border-color: var(--human-dark);background: radial-gradient(circle at 35% 28%, #ff7b7f, var(--human) 52%, #ca3039);}.is-player-two .disc{border-color: var(--computer-dark);background: radial-gradient(circle at 35% 28%, #fff2a1, var(--computer) 52%, #e8b900);}.is-winning .disc{outline: clamp(0.15rem, 0.7vw, 0.3rem) solid var(--win);outline-offset: clamp(-0.3rem, -0.7vw, -0.15rem);box-shadow: 0 0 0.8rem rgb(48 200 120 / 90%);}.is-new .disc{animation: disc-drop 240ms cubic-bezier(0.2, 0.8, 0.35, 1.15);}@keyframes disc-drop {from { opacity: 0.4;transform: translateY(calc(-600% - 1rem));}  to{opacity: 1;transform: translateY(0);}}.board-wrap{position: relative;}.column-aim-strip{position: relative;display: grid;grid-template-columns: repeat(7, minmax(0, 1fr));height: clamp(2.75rem, 8vw, 3.6rem);padding-inline: clamp(0.28rem, 1.4vw, 0.6rem);}.column-aim-strip > button{position: relative;z-index: 3;min-width: 0;min-height: 44px;padding: 0;border: 0;background: transparent;cursor: pointer;touch-action: manipulation;}.column-aim-strip > button:disabled{cursor: default;}.disc-preview{position: absolute;z-index: 2;inset: 0;display: grid;grid-template-columns: repeat(7, minmax(0, 1fr));width: 100%;padding-inline: clamp(0.28rem, 1.4vw, 0.6rem);pointer-events: none;}.disc-preview span{justify-self: center;width: 58%;aspect-ratio: 1;border: 2px solid transparent;border-radius: 50%;opacity: 0;align-self: center;transform: translateY(0);transition: opacity 100ms ease, transform 100ms ease;}.disc-preview span.is-visible{opacity: 0.62;}.disc-preview.is-player-one span.is-visible{border-color: var(--human-dark);background: var(--human);}.disc-preview.is-player-two span.is-visible{border-color: var(--computer-dark);background: var(--computer);}.endgame-dialog{width: min(calc(100% - 2rem), 23rem);padding: 1.35rem;border: 1px solid #cad5e4;border-radius: 1.1rem;color: var(--text);background: rgb(255 255 255 / 96%);box-shadow: 0 1.25rem 4rem rgb(16 43 86 / 28%);text-align: center;}.endgame-dialog::backdrop{background: rgb(16 35 63 / 42%);}.endgame-dialog h2{margin: 0.25rem 0;font-size: clamp(1.6rem, 7vw, 2.2rem);}.endgame-dialog p{margin: 0.35rem 0 1rem;color: var(--muted);}.endgame-result-mark{color: var(--board);letter-spacing: 0.12rem;}.endgame-actions{display: grid;grid-template-columns: 1fr 1fr;gap: 0.65rem;}.endgame-dialog button{min-height: 44px;border: 1px solid #b8c6d9;border-radius: 999px;background: #fff;font-weight: 750;cursor: pointer;}.endgame-dialog .endgame-primary{border-color: var(--focus);color: #fff;background: var(--focus);}.endgame-dialog .close-dialog{margin-top: 0.75rem;border: 0;color: var(--muted);background: transparent;}.endgame-dialog button:focus-visible{outline: 0.2rem solid #4e9cf0;outline-offset: 0.15rem;}@media (max-width: 360px) {.endgame-dialog { padding: 1rem;}}.game-actions{margin-top: 1rem;}.new-game{min-height: 2.75rem;padding: 0.55rem 1.25rem;border: 0;border-radius: 999px;color: #fff;background: var(--focus);font-weight: 750;cursor: pointer;}.new-game:hover{background: #1d477e;}.new-game:focus-visible{outline: 0.2rem solid #4e9cf0;outline-offset: 0.2rem;}.help-card,.supporting-content{width: min(100%, 39rem);margin: 1rem auto 0;border: 1px solid #d9e0eb;border-radius: 1rem;background: rgb(255 255 255 / 82%);text-align: left;}.help-card summary{min-height: 2.75rem;padding: 0.75rem 1rem;border-radius: 1rem;font-weight: 750;cursor: pointer;}.help-card summary:focus-visible{outline: 0.2rem solid #4e9cf0;outline-offset: 0.15rem;}.help-content{padding: 0 1rem 0.9rem;color: var(--muted);}.help-content ol{margin: 0;padding-left: 1.25rem;}.help-content li + li{margin-top: 0.35rem;}.supporting-content{padding: 1rem;}.supporting-content h2{margin: 0 0 0.35rem;font-size: 1.1rem;}.supporting-content p{margin: 0;color: var(--muted);line-height: 1.55;}@media (max-width: 1180px) {.cls_ad_sidebar { display: none;}  #id_layout_content_row{display: block;}}@media (max-width: 560px) {.game-panel { margin: 0.3rem auto 1rem;padding: 0.3rem 0.75rem 0.75rem;}  .players{gap: 0.65rem;font-size: 0.875rem;}  .player-key{gap: 0.25rem;min-height: 1.65rem;padding: 0.08rem 0.35rem;}  .key-disc{width: 0.9rem;}  .game-status{min-height: 1.15em;margin: 0.15rem 0 0;font-size: 0.9rem;line-height: 1.15;}  .column-aim-strip{height: 2.75rem;}}@media (max-width: 360px) {.game-shell { padding-inline: 0.35rem;}  .game-panel{padding: 0.25rem 0.4rem 0.65rem;border-radius: 0.8rem;}  .players{gap: 0.8rem;font-size: 0.9rem;}  .control-bar{flex-wrap: wrap;gap: 0.25rem;}  .mode-control button{padding-inline: 0.8rem;}  .difficulty-control{gap: 0.35rem;}  .difficulty-label{position: absolute;width: 1px;height: 1px;overflow: hidden;clip-path: inset(50%);}  .difficulty-options button{min-width: 3.75rem;}}@media (prefers-reduced-motion: reduce) {.is-new .disc { animation: none;}}