@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}
:root{--bg:#f5f3ef;--surface:#fff;--surface2:#f0ede7;--text:#25231f;--muted:#77736c;--border:#ded9d0;--purple:#531f6f;--purple2:#3d1653;--purpleLight:#eee5f3;--board:#d8a85e;--line:#4d341c;--danger:#b84444;--shadow:0 15px 40px rgba(50,40,25,.1);--header:#fffffff2;--input:#fff;--rulesAccent:#f7f0fa}
:root[data-theme="dark"]{--bg:#111016;--surface:#1b1920;--surface2:#27242d;--text:#f1eef4;--muted:#aaa4b0;--border:#38333f;--purple:#b46bd5;--purple2:#8d49ad;--purpleLight:#34243d;--board:#b98245;--line:#392514;--danger:#f07a7a;--shadow:0 18px 50px rgba(0,0,0,.35);--header:#17151cf2;--input:#24212a;--rulesAccent:#29202f}
html,body{margin:0;min-height:100%;font-family:Inter,sans-serif;background:var(--bg);color:var(--text);transition:background .2s,color .2s}button,select{font:inherit}.hidden{display:none!important}

main section {
    transition: opacity 0.25s ease;
}

.topbar{height:70px;background:var(--header);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 6vw;position:sticky;top:0;z-index:100;backdrop-filter:blur(10px)}
.logo{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800}.logo>span>span{color:var(--purple)}.logo-stone{width:24px;height:24px;border-radius:50%;display:inline-block}.black-stone{background:radial-gradient(circle at 35% 30%,#555,#111 55%,#000);box-shadow:inset -3px -4px 5px #0008,0 2px 5px #0005}.topbar nav{display:flex;gap:25px;align-items:center}.topbar nav a{text-decoration:none;color:var(--muted);font-size:14px;font-weight:600;transition:color 0.2s}.topbar nav a:hover,.topbar nav a.active{color:var(--purple)}
.theme-toggle{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:18px;display:grid;place-items:center;transition:.15s}.theme-toggle:hover{border-color:var(--purple);color:var(--purple);transform:rotate(10deg)}
main{max-width:1180px;margin:auto;padding:55px 25px 70px}.setup-screen{max-width:720px;margin:auto}.hero{text-align:center;margin-bottom:35px}.eyebrow{color:var(--purple);font-size:11px;letter-spacing:2px;font-weight:800;margin-bottom:12px}.hero h1,.rules-header h1{margin:0;font-size:clamp(38px,6vw,58px);letter-spacing:-2px}.hero p,.rules-header p{color:var(--muted);margin-top:14px}.setup-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:32px;box-shadow:var(--shadow)}.setting-group{padding:22px 0;border-bottom:1px solid var(--border)}.setting-group:first-child{padding-top:0}.setting-group:last-of-type{border-bottom:0}.setting-group h3{font-size:14px;margin:0 0 13px}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice,.color-choice,.handicap-buttons button,.board-size-buttons button{border:1px solid var(--border);background:var(--input);color:var(--text);cursor:pointer;transition:.15s}.choice:hover,.color-choice:hover,.handicap-buttons button:hover,.board-size-buttons button:hover,.choice.active,.color-choice.active,.handicap-buttons button.active,.board-size-buttons button.active{border-color:var(--purple)}.choice.active,.color-choice.active,.handicap-buttons button.active,.board-size-buttons button.active{background:var(--purpleLight)}.choice{min-height:82px;border-radius:12px;padding:13px;text-align:left;display:grid;grid-template-columns:36px 1fr;column-gap:10px}.choice-icon{grid-row:span 2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface2)}.choice strong{font-size:14px}.choice small{color:var(--muted);margin-top:3px}.board-size-buttons,.handicap-buttons{display:flex;gap:8px;flex-wrap:wrap}.board-size-buttons button,.handicap-buttons button{padding:10px 16px;border-radius:9px}.color-buttons{display:flex;gap:8px}.color-choice{padding:10px 15px;border-radius:9px;display:flex;align-items:center;gap:8px}.preview-stone{width:22px;height:22px;border-radius:50%;display:inline-block}.black-preview{background:radial-gradient(circle at 35% 30%,#555,#151515 55%,#000);box-shadow:inset -3px -4px 6px #0009,1px 2px 4px #0005}.white-preview{background:radial-gradient(circle at 35% 30%,#fff,#eee 55%,#ccc);border:1px solid #aaa;box-shadow:inset -2px -3px 5px #0002,1px 2px 4px #0004}.komi{margin-top:13px;font-size:13px}.komi span{display:block;color:var(--muted);font-size:11px;margin-top:4px}.setting-group select{width:100%;padding:11px;border-radius:9px;border:1px solid var(--border);background:var(--input);color:var(--text)}.start-button{width:100%;margin-top:20px;padding:14px;border:0;border-radius:10px;background:var(--purple);color:#fff;font-weight:800;cursor:pointer;transition:background 0.2s}.start-button:hover{background:var(--purple2)}.tip{font-size:12px;color:var(--muted);text-align:center;margin-top:16px}
.handicap-buttons button:disabled{opacity:.45;cursor:not-allowed}.handicap-recipient{display:grid;grid-template-columns:1fr minmax(140px,1fr);align-items:center;gap:8px 14px;margin-top:16px;font-size:13px}.handicap-recipient label,.komi-setting label{font-weight:600}.handicap-recipient select,.komi-setting select{width:100%}.handicap-recipient select:disabled{opacity:.55;cursor:not-allowed}.komi-setting{display:grid;grid-template-columns:1fr minmax(140px,1fr);align-items:center;gap:8px 14px;margin-top:18px;font-size:13px}.komi-setting span,.handicap-note{grid-column:1/-1;margin:0;color:var(--muted);font-size:11px}.handicap-note{margin-top:8px}
.join-room{margin-top:20px;font-size:13px}.join-room label{display:block;font-weight:600;margin-bottom:8px}.join-room>div{display:flex;gap:8px}.join-room input{min-width:0;flex:1;padding:11px;border:1px solid var(--border);border-radius:9px;background:var(--input);color:var(--text);text-transform:uppercase}.join-room button,.room-code-card button{padding:10px 14px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);font-weight:600;cursor:pointer}.join-room button:hover,.room-code-card button:hover{border-color:var(--purple);color:var(--purple)}.online-settings .start-button{margin-top:0}.online-status{min-height:18px;margin:10px 0 0;color:var(--purple);font-size:12px;font-weight:600}.room-code-card{margin-top:14px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);text-align:center}.room-code-card span,.room-code-card p{display:block;color:var(--muted);font-size:12px}.room-code-card strong{display:block;margin:8px 0;font-size:30px;letter-spacing:5px;color:var(--purple)}.room-code-card p{margin:10px 0}
.learning-consent{display:flex;align-items:flex-start;gap:9px;margin-top:14px;color:var(--text);font-size:12px;line-height:1.5;cursor:pointer}.learning-consent input{margin:2px 0 0;accent-color:var(--purple)}
.timer-settings{display:grid;grid-template-columns:1fr minmax(180px,1fr);align-items:center;gap:8px 14px;margin-top:14px;font-size:13px}.timer-settings>label{font-weight:600}.timer-inputs{display:flex;align-items:center;gap:7px;color:var(--muted)}.timer-inputs input{width:72px;padding:9px;border:1px solid var(--border);border-radius:8px;background:var(--input);color:var(--text)}.timer-inputs input:disabled{opacity:.55}
.timer-display{display:inline-block;margin-top:7px;color:var(--purple);font-size:14px;font-variant-numeric:tabular-nums;font-weight:800}
.game-notice{width:min(100%,600px);margin:0 0 12px;padding:12px 16px;border:1px solid var(--purple);border-radius:10px;background:var(--purpleLight);color:var(--text);text-align:center;font-size:13px;font-weight:700}.finish-response{display:flex;justify-content:center;gap:8px;margin-top:10px}.finish-response button{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer}.finish-response button:first-child{background:var(--purple);border-color:var(--purple);color:#fff}

/* Правила */
.rules-screen{max-width:980px;margin:auto}.rules-header{text-align:center;margin-bottom:38px}.rules-header h1{font-size:clamp(36px,5vw,52px)}.rules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.rule-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:25px 25px 25px 76px;box-shadow:var(--shadow);min-height:155px}.rule-number{position:absolute;left:24px;top:25px;color:var(--purple);font-weight:800;font-size:12px;letter-spacing:1px}.rule-card h2{margin:0 0 9px;font-size:18px}.rule-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}.rule-main{background:linear-gradient(135deg,var(--surface),var(--rulesAccent))}.rules-tip{margin-top:18px;padding:20px 24px;border:1px solid var(--border);border-radius:14px;background:var(--surface);display:flex;gap:18px;align-items:center}.rules-tip strong{color:var(--purple);white-space:nowrap}.rules-tip span{color:var(--muted);font-size:13px;line-height:1.6}

/* Игровой экран */
.game-screen{max-width:1100px;margin:auto}.game-layout{display:grid;grid-template-columns:230px 1fr;gap:35px;align-items:start}.player-panel{padding-top:35px}.player-card{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:14px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px}.player-card strong{display:block;font-size:13px}.player-card span{display:block;color:var(--muted);font-size:11px;margin-top:3px}.player-stone{width:34px;height:34px;border-radius:50%}.black-player-stone{background:radial-gradient(circle at 35% 30%,#555,#151515 55%,#000);box-shadow:inset -4px -5px 8px #000a,2px 3px 5px #0004}.white-player-stone{background:radial-gradient(circle at 35% 30%,#fff,#eee 55%,#ccc);border:1px solid #aaa;box-shadow:inset -3px -4px 7px #0002,2px 3px 5px #0004}.captured{text-align:right}.captured small{font-size:9px}.captured b{font-size:16px}.vs{text-align:center;color:var(--muted);font-size:10px;font-weight:800;padding:9px}.game-info{margin-top:15px;border-top:1px solid var(--border);padding-top:15px;display:flex;justify-content:space-between}.game-info span{display:block;color:var(--muted);font-size:10px}.game-info strong{display:block;margin-top:3px;font-size:13px}.board-area{display:flex;flex-direction:column;align-items:center}.turn-indicator{margin-bottom:18px;font-size:14px;display:flex;align-items:center;gap:8px}.turn-stone{width:20px;height:20px;border-radius:50%}
#board-wrapper{width:min(70vw,650px);aspect-ratio:1;padding:25px;background:#d8a85e;border-radius:4px;box-shadow:0 20px 50px #3c280f33,inset 0 0 20px #50280a2e}#board{position:relative;width:100%;height:100%;cursor:pointer}.board-line{position:absolute;background:#3c2917cc;pointer-events:none}.board-horizontal{left:0;width:100%;height:1px}.board-vertical{top:0;height:100%;width:1px}.star-point{position:absolute;width:8px;height:8px;border-radius:50%;background:#4a3018;transform:translate(-50%,-50%);pointer-events:none}.stone{position:absolute;width:var(--stone-size);height:var(--stone-size);border-radius:50%;transform:translate(-50%,-50%);z-index:5;animation:place .12s ease-out}.stone.black{background:radial-gradient(circle at 35% 28%,#555,#151515 55%,#000);box-shadow:inset -5px -6px 9px #000a,2px 3px 6px #0005}.stone.white{background:radial-gradient(circle at 35% 28%,#fff,#eee 55%,#ccc);border:1px solid #aaa;box-shadow:inset -4px -5px 8px #0002,2px 3px 6px #0005}.last-move{outline:2px solid #d62c2c;outline-offset:2px}@keyframes place{from{transform:translate(-50%,-50%) scale(.7);opacity:.5}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.game-controls button:disabled{opacity:.45;cursor:not-allowed}
.game-controls{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap;justify-content:center}.game-controls button,.modal-buttons button{border:1px solid var(--border);background:var(--surface);color:var(--text);padding:10px 17px;border-radius:9px;cursor:pointer;font-weight:600}.game-controls button:hover,.modal-buttons button:hover{border-color:var(--purple);color:var(--purple)}.game-controls .primary,.modal-buttons .primary{background:var(--purple);color:#fff;border-color:var(--purple)}.game-controls .danger{color:var(--danger)}.status-message{min-height:20px;margin-top:10px;color:var(--danger);font-size:12px;font-weight:600;text-align:center}
.live-score{width:min(100%,520px);display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:14px;padding:11px 16px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:13px}.live-score>strong{color:var(--muted);font-size:12px}.live-score span{white-space:nowrap}.live-score b{font-size:15px}.live-score small{color:var(--muted)}

/* Модальное окно */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 14, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 20px;
    padding-bottom: 40px;
    z-index: 1000;
}
.modal-card {
    width: min(460px, 100%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.result-icon{width:48px;height:48px;margin:0 auto 12px;border-radius:50%;background:var(--purpleLight);color:var(--purple);display:grid;place-items:center;font-size:22px}.modal-card h2{margin:5px 0 18px}.final-score{display:flex;justify-content:center;align-items:center;gap:25px;margin-bottom:15px}.final-score div:not(.score-divider){display:flex;flex-direction:column;gap:5px}.final-score span{color:var(--muted);font-size:12px}.final-score strong{font-size:26px}.score-divider{color:var(--muted)}#resultDescription{color:var(--muted);font-size:13px}.modal-buttons{display:flex;justify-content:center;gap:8px;margin-top:20px}

footer{border-top:1px solid var(--border);padding:25px 6vw;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;gap:20px}footer div{display:flex;align-items:center;gap:12px}footer img{max-width:190px;height:auto;display:block}
@media(max-width:850px){.topbar{padding:0 20px}.topbar nav{gap:10px}.game-layout{grid-template-columns:1fr;gap:25px}.player-panel{order:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.game-info{grid-column:1/-1}#board-wrapper{width:min(92vw,600px);padding:16px}.rules-grid{grid-template-columns:1fr}}
@media(max-width:550px){.setup-card{padding:20px}.choice-grid{grid-template-columns:1fr}.color-buttons{flex-direction:column}.hero h1,.rules-header h1{font-size:40px}.player-card{grid-template-columns:30px 1fr}.captured{display:none}.rules-tip{display:block}.rules-tip span{display:block;margin-top:8px}.topbar nav a{font-size:13px}footer{flex-direction:column;gap:12px}}

/* Маркеры территории */
.territory-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 6;
    pointer-events: none;
    font-weight: 800;
    font-size: clamp(10px, 2vw, 16px);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.territory-black {
    color: #111111;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.9), 0 0 5px rgba(255, 255, 255, 0.8);
}
.territory-white {
    color: #ffffff;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 5px rgba(0, 0, 0, 0.8);
}
.score-breakdown{display:grid;gap:6px;text-align:left;background:var(--surface2);border-radius:10px;padding:12px 14px;margin:12px 0;font-size:12px;color:var(--text)}

/* Smooth screen changes and an inline result keep the final board in view. */
.view-entering {
    animation: view-enter 260ms ease both;
}
@keyframes view-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.modal {
    position: static;
    inset: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 28px 0 0;
    background: transparent;
    backdrop-filter: none;
    z-index: auto;
}
.modal-card {
    width: min(620px, 100%);
}
.territory-marker {
    font-size: var(--marker-size);
}
@media(max-width:550px) {
    .player-card {
        grid-template-columns: 28px minmax(0, 1fr) auto;
    }
    .captured {
        display: block;
    }
    .captured small {
        font-size: 8px;
    }
}
@media(prefers-reduced-motion:reduce) {
    .view-entering {
        animation-duration: 1ms;
    }
}

.guide-button {
    display: block;
    margin: 20px auto 0;
    padding: 10px 16px;
    border: 1px solid var(--purple);
    border-radius: 9px;
    background: var(--surface);
    color: var(--purple);
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.guide-button:hover {
    background: var(--purpleLight);
}
.examples-section {
    margin-top: 42px;
}
.examples-heading {
    margin-bottom: 20px;
    text-align: center;
}
.examples-heading h2 {
    margin: 0;
    font-size: clamp(24px, 4vw, 32px);
}
.examples-heading p,
.guide-actions > p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}
.examples-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.example-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.example-board {
    width: min(100%, 220px);
    aspect-ratio: 1;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    background-color: #d8a85e;
    background-image:
        linear-gradient(to right, transparent calc(50% - .5px), #4d341c calc(50% - .5px), #4d341c calc(50% + .5px), transparent calc(50% + .5px)),
        linear-gradient(to bottom, transparent calc(50% - .5px), #4d341c calc(50% - .5px), #4d341c calc(50% + .5px), transparent calc(50% + .5px));
    background-size: 25% 25%;
    border: 1px solid #4d341c;
}
.example-board > span {
    z-index: 1;
    place-self: center;
}
.demo-stone {
    width: 76%;
    aspect-ratio: 1;
    border-radius: 50%;
}
.demo-black {
    background: radial-gradient(circle at 35% 28%, #555, #151515 55%, #000);
    box-shadow: 1px 2px 4px #0007;
}
.demo-white {
    background: radial-gradient(circle at 35% 28%, #fff, #eee 55%, #ccc);
    border: 1px solid #aaa;
}
.demo-liberty {
    width: 20%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #eee5f3;
    box-shadow: 0 0 0 2px #531f6f;
}
.demo-eye {
    width: 28%;
    aspect-ratio: 1;
    border: 2px solid #531f6f;
    border-radius: 50%;
    background: #fff4c9;
    box-shadow: 0 0 0 2px #ffffffa8;
}
.demo-captured {
    color: #b84444;
    font-size: 24px;
    font-weight: 800;
}
.demo-territory {
    color: #531f6f;
    font-size: 14px;
    font-weight: 800;
    text-shadow: 0 0 2px #fff;
}
.example-card h3 {
    margin: 0 0 7px;
    font-size: 16px;
}
.example-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
}
.guide-actions {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    text-align: center;
}
.guide-actions .start-button {
    max-width: 360px;
}
@media(max-width:850px) {
    .examples-grid {
        grid-template-columns: 1fr;
    }
    .example-card {
        display: grid;
        grid-template-columns: minmax(110px, 180px) 1fr;
        align-items: center;
    }
}
@media(max-width:500px) {
    .example-card {
        grid-template-columns: 1fr;
    }
    .example-board {
        width: min(100%, 220px);
    }
}