/* GO ARENA — Premium UI v3: full visual refresh, loaded after base stylesheet */
:root{--ga-navy:#101d33;--ga-ink:#15233c;--ga-blue:#2563eb;--ga-gold:#d7ac63;--ga-line:#dde5ef;--ga-muted:#65758e;--ga-radius:22px}
body{background:radial-gradient(ellipse 70% 40% at 15% 0%,#e7eefb 0%,transparent 75%),linear-gradient(160deg,#f1f5fb,#eef2f9 55%,#f8fafc);color:var(--ga-ink);min-height:100dvh}
header{background:rgba(255,255,255,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid #dce5f2;box-shadow:0 3px 18px #142b4b0a;position:relative;z-index:2}
.brand{font-weight:850;letter-spacing:-.05em;color:#163d7b}.brand small{letter-spacing:0;font-weight:500}
main{max-width:1450px;padding-inline:clamp(12px,2.5vw,30px)}
.panel{border:1px solid #e1e8f2;border-radius:26px;box-shadow:0 20px 65px #18315112;background:#fff}
h1{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.045em;font-weight:800}h2{letter-spacing:-.025em;color:#1a2b45}.muted,small{color:var(--ga-muted)}
button{border:1px solid transparent;border-radius:14px;transition:transform .16s ease,background .16s ease,box-shadow .16s ease;min-height:44px}
button:not(:disabled):hover{transform:translateY(-1px);filter:none;box-shadow:0 8px 24px #193d701b}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #7db2ff;outline-offset:3px}
.primary{background:linear-gradient(125deg,#2059bd,#3178ef);box-shadow:0 5px 16px #2364dc33;color:#fff}.secondary{background:#edf2f9;color:#254062;border-color:#e2e9f3}.danger{border:1px solid #ffdde0;background:#fff2f2}
.mode{background:linear-gradient(145deg,#fff,#f6f9fe);border:1px solid #dfe7f2;border-radius:20px;padding:25px;box-shadow:0 9px 28px #16396909}.mode:hover{border-color:#9ebfea;box-shadow:0 14px 38px #183c7420}.trainingMode{background:linear-gradient(140deg,#f3fcf8,#f9fffc);border-color:#bfdecf}
.settingsGrid label{background:#fafcff;border-color:#e0e8f3;border-radius:16px}input,select{border:1px solid #cedae8;border-radius:12px}
/* Unified play environment */
.playPanel{background:linear-gradient(140deg,#fff,#f7faff);border-radius:28px;padding:clamp(14px,2.6vw,34px);box-shadow:0 25px 65px #102c5419}
.playPanel .gameTop{padding:0 0 22px;border-bottom:1px solid #e5ebf4;gap:18px}
.playPanel .gameTop h1{font-size:clamp(24px,2.6vw,34px)}
.playPanel .gameLayout{grid-template-columns:minmax(0,1fr) minmax(285px,350px);gap:clamp(16px,2.8vw,38px);align-items:start}
.playPanel .boardOuter{background:linear-gradient(135deg,#9b6a34,#d8b17b 15%,#edce9d 45%,#b88349);border:1px solid #b7884b;border-radius:23px;padding:clamp(10px,1.8vw,19px);box-shadow:0 25px 44px #4f361f37,inset 0 2px 1px #fff8;max-width:800px}
.playPanel canvas{border-radius:5px;box-shadow:inset 0 0 18px #6b3c1c14;max-height:none}
.playPanel aside{padding:clamp(16px,2vw,26px);border:1px solid #e0e9f2;background:#fff;border-radius:24px;box-shadow:0 12px 35px #18375512}
.playPanel .turnCard{background:#eef4ff;border:1px solid #e0eafc;border-radius:17px}.playPanel .stats{padding-block:15px}.playPanel .stats div{border-color:#e6edf5}
.fullscreenBtn{background:linear-gradient(135deg,#102744,#244875);color:#fff;border:1px solid #31567f;font-weight:700;box-shadow:0 7px 18px #102e5140}
/* Beginner course becomes a clear, multi-step teaching environment */
#trainingPanel .courseOverview{background:linear-gradient(110deg,#152b4b,#203e63);color:white;padding:22px 25px;border-radius:21px;box-shadow:0 12px 30px #122f552c;position:relative;overflow:hidden}
#trainingPanel .courseOverview:after{content:'●  ○  ●';position:absolute;right:12%;top:-26px;font-size:90px;color:#ffffff0b;pointer-events:none;letter-spacing:10px}
#trainingPanel .courseOverview strong{font-size:clamp(20px,2.2vw,27px);font-weight:800;letter-spacing:-.03em}
#trainingPanel .courseOverview .muted{color:#c8daef;font-size:14px}
#trainingPanel #courseScore{padding:10px 16px;display:inline-flex;align-items:center;border-radius:999px;background:#ffffff1d;color:#fff;border:1px solid #ffffff35;z-index:1;font-weight:800}
#trainingPanel .courseMeter{height:12px;background:#e8edf5;border:1px solid #dce6f1;margin:20px 0}
#trainingPanel .courseMeter span{background:linear-gradient(90deg,#2f70ed,#23c9ab);box-shadow:0 0 14px #27c9a64a}
#trainingPanel .courseLessons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;overflow:visible;padding:3px 1px 16px}
#trainingPanel .courseLesson{display:flex;justify-content:center;align-items:center;min-width:0;min-height:60px;text-align:center;white-space:normal;line-height:1.3;border-radius:14px;border:1px solid #dfe8f3;background:#f8faff;color:#2f4665;font-weight:700;box-shadow:0 3px 10px #20385f08}
#trainingPanel .courseLesson.selected{background:linear-gradient(135deg,#1b55bd,#377df1);border-color:#2b6ddf;color:white;box-shadow:0 8px 18px #296de239}
#trainingPanel .courseBadge{background:#ebf2ff;color:#1b54a4;letter-spacing:.02em;padding:8px 14px}
#trainingPanel .trainingSidebar h2{font-size:clamp(22px,2vw,27px);margin:16px 0 8px}
#trainingPanel .courseTask{background:#f0f5ff;border:1px solid #d8e7ff;border-left:5px solid #2d6fe4;border-radius:16px;padding:18px;margin:18px 0;line-height:1.65}
#trainingPanel .courseTask strong{font-size:16px;color:#164a9c}
#trainingPanel .trainingFeedback{background:#f5f8fd;border:1px solid #e2eaf4;border-radius:16px;color:#304e70;line-height:1.7;min-height:65px}
#trainingPanel .courseExplanation{background:#f1fcf6;border:1px solid #bbe9cf;border-radius:16px;padding:18px}
#trainingPanel .trainingSidebar button{min-height:51px;border-radius:13px}
#trainingPanel #trainingConfirm{font-weight:800;letter-spacing:.01em}
#trainingPanel #trainingHint{background:#fff7e7;color:#85571d;border:1px solid #f4dfb4}
#trainingPanel .gameLayout{margin-top:10px}
#trainingPanel .boardOuter{position:relative}
#trainingPanel .boardOuter:before{content:'GO • PRACTICE';position:absolute;top:-11px;left:20px;padding:4px 10px;background:#173353;color:#fff;border-radius:8px;font-size:10px;letter-spacing:.14em;font-weight:800;z-index:1}
/* Tablet portrait and landscape; make play board prominent without horizontal scrolling */
@media(max-width:1120px){.playPanel .gameLayout{grid-template-columns:minmax(0,1fr) minmax(240px,300px)}#trainingPanel .courseLessons{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.playPanel .gameLayout{grid-template-columns:1fr}.playPanel .boardOuter{width:min(100%,700px);margin-inline:auto}.playPanel aside{width:100%}#trainingPanel .courseLessons{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){main{padding:0 9px}.playPanel{padding:14px;border-radius:18px}.playPanel .gameTop{align-items:flex-start}.gameTopActions{width:100%}.gameTopActions button{flex:1;padding:12px 9px}.playPanel .boardOuter{padding:8px;border-radius:14px}.playPanel aside{border-radius:17px;padding:15px}#trainingPanel .courseOverview{padding:17px;border-radius:16px}#trainingPanel .courseLessons{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}#trainingPanel .courseLesson{min-height:56px;padding:9px 5px;font-size:12px}#trainingPanel .courseTask{padding:13px}}
@media(pointer:coarse){.courseLesson,button,select{touch-action:manipulation;min-height:48px}}
@media(prefers-reduced-motion:reduce){button,.courseMeter span{transition:none!important}}
/* fullscreen on browsers and the iPad fallback */
.playPanel:fullscreen,.playPanel.pseudoFullscreen{background:#eef3fa;border-radius:0;padding:clamp(10px,1.5vw,24px)}
.playPanel:fullscreen .gameLayout,.playPanel.pseudoFullscreen .gameLayout{grid-template-columns:minmax(0,1fr) minmax(240px,330px)}
@media(max-width:900px){.playPanel:fullscreen .gameLayout,.playPanel.pseudoFullscreen .gameLayout{grid-template-columns:1fr}}