:root{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color:#172337;background:#f3f6fb}*{box-sizing:border-box}body{margin:0}header{background:#fff;border-bottom:1px solid #e5eaf3;display:flex;justify-content:space-between;align-items:center;padding:15px max(20px,calc((100vw - 1150px)/2));gap:12px}.brand{font-size:24px;display:flex;gap:8px;align-items:center;color:#1755ae}.brand small{font-size:12px;color:#6b7890}main{max-width:1150px;margin:32px auto;padding:0 18px}.panel{background:#fff;border:1px solid #e6eaf1;border-radius:23px;padding:26px;box-shadow:0 14px 40px #233d650d}.auth{max-width:440px;margin:auto}h1{font-size:25px;margin:0 0 8px}h2{font-size:18px;margin-top:30px}.muted,small{color:#69788f}.tabs{display:flex;gap:10px;margin:24px 0}.tabs button{flex:1}.tabs .active{background:#1c64c6;color:#fff}button{border:0;border-radius:12px;padding:12px 16px;cursor:pointer;background:#edf2f9;color:#21344c;font:inherit;font-weight:600}button:hover{filter:brightness(.96)}button:disabled{opacity:.55;cursor:not-allowed}.primary{background:#2563c7;color:#fff}.secondary{background:#e8eef7}.danger{background:#fff0ee;color:#b82929}form{display:grid;gap:16px}form button{width:100%}label{font-weight:600;display:grid;gap:7px;font-size:14px}input{width:100%;border:1px solid #ccd6e3;background:#fff;padding:12px;border-radius:10px;font:inherit}input:focus{outline:2px solid #a5c5f7}.modeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:25px 0}.mode{display:flex;flex-direction:column;gap:9px;text-align:left;padding:27px;background:#f4f8ff;border:1px solid #dce7f8}.mode strong{font-size:20px}.emoji{font-size:31px}.history{max-height:280px;overflow:auto}.historyItem{padding:12px;border-bottom:1px solid #e9edf4;display:flex;justify-content:space-between;gap:8px}.gameTop{display:flex;justify-content:space-between;align-items:start;gap:15px}.gameLayout{display:grid;grid-template-columns:minmax(0,590px) minmax(220px,1fr);gap:32px;margin-top:20px}.boardOuter{background:#c89656;padding:12px;border-radius:15px;box-shadow:0 8px 24px #6b4b2b36;align-self:start}canvas{display:block;max-width:100%;height:auto;aspect-ratio:1;touch-action:manipulation;cursor:crosshair}.turnCard{display:flex;gap:13px;align-items:center;padding:19px;border-radius:15px;background:#f5f8fc}.turnCard small,.turnCard strong{display:block}.turnCard strong{font-size:22px}.stone{height:38px;width:38px;border-radius:50%;box-shadow:inset -5px -6px 7px #0004,0 2px 3px #0003}.black{background:#20242b}.white{background:#f8f9fa;border:1px solid #a0a3a8}.stats{display:grid;gap:14px;padding:20px 3px;margin-bottom:14px}.stats div{display:flex;justify-content:space-between;border-bottom:1px solid #e9edf4;padding-bottom:10px}aside>button{display:block;width:100%;margin:9px 0}.hint{font-size:12px;line-height:1.6}.modalBackdrop{position:fixed;inset:0;background:#0e1e35ab;display:grid;place-items:center;padding:20px;z-index:10}.modal{background:#fff;padding:27px;border-radius:20px;width:min(100%,420px);box-shadow:0 20px 60px #0003}.modal>button{width:100%;margin-top:10px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1a314e;color:white;border-radius:12px;padding:12px 20px;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}[hidden]{display:none!important}@media(max-width:760px){.gameLayout{grid-template-columns:1fr}.modeGrid{grid-template-columns:1fr}header{padding:15px}.panel{padding:16px}.gameTop{align-items:center}h1{font-size:21px}}

.settingsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}.settingsGrid label{background:#f6f9fe;padding:16px;border:1px solid #dde7f6;border-radius:14px}select{width:100%;background:white;border:1px solid #cad6e7;border-radius:10px;padding:12px;font:inherit;color:#1a2d46}select:focus{outline:2px solid #a5c5f7}@media(max-width:620px){.settingsGrid{grid-template-columns:1fr}}

.studentFields{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.studentFields label:last-child{grid-column:1/-1}.rankingScroll{overflow-x:auto}.rankingTable{width:100%;border-collapse:collapse;min-width:570px}.rankingTable th,.rankingTable td{text-align:left;padding:12px;border-bottom:1px solid #e5eaf1}.rankingTable th{background:#f2f6fc;color:#415574}.rankingTable td:last-child{font-weight:800;color:#1c64c6}@media(max-width:500px){.studentFields{grid-template-columns:1fr}}

/* Beginner training and iPad/touch accessibility */
.trainingMode{background:#eaf8f0;border-color:#b6e2ca}.modeGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.trainingChoices{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.trainingChoices button.selected{background:#2563c7;color:white}
.trainingSidebar h2{margin-top:0}.trainingSidebar button{display:block;width:100%;margin:10px 0;min-height:48px}.trainingFeedback{min-height:55px;border-radius:12px;background:#f1f7fc;padding:14px;color:#124875;margin:16px 0}
#board,#trainingBoard{width:100%;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.touchHint{display:none}.touchConfirm{width:100%;margin-top:10px;min-height:52px}
@media(pointer:coarse){button,select,input{min-height:46px}.touchHint{display:block}canvas{touch-action:none}.boardOuter{padding:10px}}
@media(max-width:900px){.gameLayout{grid-template-columns:minmax(0,1fr)}.modeGrid{grid-template-columns:1fr 1fr}.boardOuter{max-width:650px;width:100%;margin:0 auto}.trainingChoices button{flex:1 1 40%}}
@media(max-width:620px){.modeGrid{grid-template-columns:1fr}.gameTop{flex-wrap:wrap}main{margin:12px auto;padding:0 10px}.panel{padding:14px;border-radius:16px}.trainingChoices button{font-size:13px;padding:12px 8px}header .brand{font-size:20px}header .brand small{display:none}}

.realForm{margin-top:24px;grid-template-columns:repeat(2,minmax(0,1fr));max-width:850px}.realForm>.realNote,.realForm>button{grid-column:1/-1}.realNote{padding:14px;background:#f1f7fc;border-radius:12px;color:#3c5a79}.realForm label{min-width:0}@media(max-width:650px){.realForm{grid-template-columns:1fr}.realForm>.realNote,.realForm>button{grid-column:1}}


/* GO ARENA Premium play experience — responsive on touch devices and iPad. */
.playPanel{--play-ink:#14243b;position:relative;background:linear-gradient(155deg,#fff 0%,#fafcff 75%);border:1px solid #dfE7f2;box-shadow:0 20px 65px rgba(28,53,93,.09);}
.playPanel .gameTop{align-items:center;padding-bottom:18px;border-bottom:1px solid #e8edf5;}
.playPanel .gameTop h1{color:var(--play-ink);letter-spacing:-.035em;font-size:clamp(22px,2vw,30px);}
.gameTopActions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.gameTopActions button{min-height:46px;white-space:nowrap}
.fullscreenBtn{background:#162c49;color:white;box-shadow:0 4px 13px #162c4924;}
.fullscreenBtn:hover{background:#25476d;filter:none}
.playPanel .gameLayout{grid-template-columns:minmax(0,1.45fr) minmax(235px,.72fr);gap:clamp(16px,2.5vw,34px);align-items:start}
.playPanel .boardOuter{width:100%;max-width:850px;margin:auto;background:linear-gradient(135deg,#c38e50,#f2d09a 30%,#bc854a);padding:clamp(9px,1.2vw,15px);border:1px solid #bc8d5d;border-radius:19px;box-shadow:0 18px 30px #59401b30, inset 0 1px #fff8;}
.playPanel .boardOuter canvas{width:100%;aspect-ratio:1/1;border-radius:5px;display:block;}
.playPanel aside{min-width:0;padding:16px;border:1px solid #e7edf5;border-radius:18px;background:#fff;box-shadow:0 8px 30px #233d650b;}
.playPanel .turnCard{background:linear-gradient(135deg,#f0f5fd,#f9fbff);}
.playPanel .stats{gap:10px}
.playPanel #status{font-weight:600;color:#1d518d;min-height:22px}
/* Browser fullscreen on desktop/Android; fallback class for iPad Safari. */
.playPanel:fullscreen,.playPanel.pseudoFullscreen{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(12px,1.6vw,25px);border:0;border-radius:0;background:#f4f7fc;z-index:500;overflow:auto;overscroll-behavior:contain;}
.playPanel:fullscreen .gameLayout,.playPanel.pseudoFullscreen .gameLayout{max-width:1700px;margin:16px auto 0;grid-template-columns:minmax(0,1fr) minmax(230px,330px);gap:clamp(12px,2vw,30px)}
.playPanel:fullscreen .gameTop,.playPanel.pseudoFullscreen .gameTop{max-width:1700px;margin:auto;}
.playPanel:fullscreen .boardOuter,.playPanel.pseudoFullscreen .boardOuter{width:min(100%,calc(100dvh - 150px));max-width:1100px;margin:0 auto;}
.playPanel:fullscreen aside,.playPanel.pseudoFullscreen aside{max-height:calc(100dvh - 130px);overflow:auto;}
body.gameFullscreenFallback{overflow:hidden;}
@media(max-width:950px){.playPanel .gameLayout{grid-template-columns:1fr}.playPanel aside{width:100%}.playPanel:fullscreen .gameLayout,.playPanel.pseudoFullscreen .gameLayout{grid-template-columns:1fr}.playPanel:fullscreen .boardOuter,.playPanel.pseudoFullscreen .boardOuter{width:min(100%,calc(100dvh - 255px),760px)}.playPanel:fullscreen aside,.playPanel.pseudoFullscreen aside{max-height:none}}
@media(max-width:650px){.playPanel .gameTop{align-items:flex-start}.gameTopActions{width:100%;justify-content:stretch}.gameTopActions button{flex:1}.playPanel .boardOuter{padding:7px;border-radius:12px}.playPanel aside{padding:12px}.playPanel:fullscreen,.playPanel.pseudoFullscreen{padding:10px}.playPanel:fullscreen .boardOuter,.playPanel.pseudoFullscreen .boardOuter{width:min(100%,calc(100dvh - 220px))}}
@media(pointer:coarse){.fullscreenBtn{min-height:50px;touch-action:manipulation}.playPanel button{min-height:48px}}

/* Beginner course UI, touch-first and responsive */
.courseOverview{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:24px}.courseOverview p{margin:6px 0}#courseScore{font-weight:800;color:#1556a6;white-space:nowrap}.courseMeter{height:9px;background:#e7eef7;border-radius:100px;margin:14px 0 18px;overflow:hidden}.courseMeter span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#3987e7,#35bcb2);border-radius:100px;transition:width .25s}.courseLessons{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity}.courseLesson{flex:0 0 auto;scroll-snap-align:start;border:1px solid #d9e4f0;background:#f7f9fc;font-size:13px;min-height:45px}.courseLesson.selected{background:#1d5cba;color:white;border-color:#1d5cba}.courseBadge{display:inline-flex;border-radius:30px;background:#e6f3ff;color:#105a9a;font-weight:700;font-size:12px;padding:6px 12px}.courseTask{background:#f3f7ff;border-left:4px solid #3578dc;padding:14px;border-radius:12px;margin:14px 0}.courseTask p{margin-bottom:0}.courseExplanation{background:#eaf8f0;border:1px solid #b7e7cb;color:#155b3e;padding:14px;border-radius:12px;line-height:1.7}.trainingSidebar{min-width:0}.trainingSidebar p{line-height:1.7}#trainingBoard{width:100%;touch-action:none}.trainingSidebar button{min-height:48px}@media(max-width:760px){.courseOverview{align-items:flex-start;flex-direction:column}.courseLessons{margin-right:-8px}}