:root{--bg-dark:#121212;--bg-card:#1e1e1e;--text-main:#f0f0f0;--text-muted:#888;--accent:#ff6b6b;--accent-hover:#ff8787;--board-bg:#e4aa69;--stone-black:#222;--stone-white:#f5f5f5;--line-color:#5a3c1e}body{background-color:var(--bg-dark);color:var(--text-main);flex-direction:column;min-height:100vh;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex}#root{flex-direction:column;min-height:100vh;display:flex}.container{box-sizing:border-box;width:100%;max-width:800px;margin:0 auto;padding:2rem}h1,h2,h3{margin-bottom:1rem;font-weight:600}.card{background:var(--bg-card);border-radius:12px;padding:2rem;box-shadow:0 8px 24px #0003}.btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;padding:.8rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s;display:inline-flex}.btn:hover{background:var(--accent-hover);transform:translateY(-2px)}.btn-group{flex-wrap:wrap;gap:1rem;display:flex}.go-board-wrapper{perspective:1000px;justify-content:center;align-items:center;margin:2rem 0;display:flex}.go-board{background-color:var(--board-bg);aspect-ratio:1;-webkit-user-select:none;user-select:none;box-sizing:border-box;border-radius:4px;grid-template-rows:repeat(19,1fr);grid-template-columns:repeat(19,1fr);width:100%;max-width:600px;padding:1rem;display:inline-grid;position:relative;box-shadow:0 10px 30px #00000080,inset 0 0 20px #0000001a}@media (width>=768px),(orientation:landscape){.trainer-layout{flex-direction:row;width:100vw;height:100vh;display:flex;overflow:hidden}.board-column{box-sizing:border-box;justify-content:center;align-items:center;height:100vh;padding:2vh;display:flex}.go-board-wrapper{height:100%;margin:0}.go-board{width:auto;max-width:none;height:100%}.sidebar-column{box-sizing:border-box;flex-direction:column;flex:1;justify-content:center;padding:2rem 4rem;display:flex;overflow-y:auto}}@media (width>=768px) and (aspect-ratio<=1.2){.board-column{flex:0 0 60vw;max-width:60vw;padding:2vh}.go-board{width:55vw;max-width:100%;height:55vw;max-height:85vh}.sidebar-column{padding:2rem}}@media (width<=767px) and (orientation:portrait){.trainer-layout{box-sizing:border-box;flex-direction:column;width:100vw;min-height:100vh;display:flex;overflow-x:hidden}.sidebar-column{display:contents}.stats-header{background:var(--bg-dark);z-index:10;order:-1;padding:1rem}.board-column{order:0;justify-content:center;width:100%;padding:0;display:flex}.go-board-wrapper{width:100%;margin:0}.go-board{border-radius:0;width:100vw;max-width:100vw;height:100vw;padding:.5rem}.interaction-footer{box-sizing:border-box;order:1;width:100%;padding:1rem}.trainer-legal{order:2;padding:2rem 0}}.go-board:before{content:"";pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");border-radius:4px;position:absolute;inset:0}.go-cell{cursor:crosshair;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.go-cell:before,.go-cell:after{content:"";background-color:var(--line-color);z-index:1;position:absolute}.go-cell:before{width:100%;height:1px;top:50%;transform:translateY(-50%)}.go-cell:after{width:1px;height:100%;left:50%;transform:translate(-50%)}.go-cell.edge-top:after{height:50%;top:50%}.go-cell.edge-bottom:after{height:50%;top:0}.go-cell.edge-left:before{width:50%;left:50%}.go-cell.edge-right:before{width:50%;left:0}.go-cell.star-point .star-dot{background-color:var(--line-color);z-index:2;border-radius:50%;width:20%;height:20%;position:absolute}.stone{z-index:3;border-radius:50%;width:90%;height:90%;position:absolute;box-shadow:2px 2px 4px #0006}.stone.B{background:radial-gradient(circle at 30% 30%,#555,#111)}.stone.W{background:radial-gradient(circle at 30% 30%,#fff,#ddd)}.ghost-stone{z-index:2;opacity:0;pointer-events:none;border-radius:50%;width:90%;height:90%;position:absolute}.ghost-stone.B{background:radial-gradient(circle at 30% 30%,#555,#111)}.ghost-stone.W{background:radial-gradient(circle at 30% 30%,#fff,#ddd)}.go-cell:not(.has-stone):hover .ghost-stone{opacity:.5}.marker{z-index:4;border-radius:50%;width:40%;height:40%;position:absolute}.marker-blue{background-color:#3498db;box-shadow:0 0 10px #3498db}.marker-cyan{background-color:#1abc9c;box-shadow:0 0 10px #1abc9c}.marker-green{background-color:#2ecc71;box-shadow:0 0 10px #2ecc71}.marker-wrong{background-color:#e74c3c;box-shadow:0 0 10px #e74c3c}.marker-target{background:0 0;border:2px solid #e74c3c}.last-move-marker{box-sizing:border-box;z-index:5;background-color:#0000;border:3px solid;border-radius:50%;width:75%;height:75%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.stone.B .last-move-marker{border-color:#ffffffd9}.stone.W .last-move-marker{border-color:#000000d9}.marker-ko{z-index:4;background-color:#0000;border:2px solid #ffffff80;border-radius:2px;width:30%;height:30%;position:absolute}.marker-ko:before,.marker-ko:after{content:"";background:#fffc;position:absolute}.modal-backdrop{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-content{background:var(--bg-card);border-radius:12px;width:90%;max-width:500px;padding:2rem;animation:.3s cubic-bezier(.16,1,.3,1) modalIn;box-shadow:0 10px 30px #00000080}@keyframes modalIn{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.btn-primary{background:#2ecc71}.btn-primary:hover{background:#27ae60}.custom-tooltip{color:#fff;pointer-events:none;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000d9;border:1px solid #ffffff1a;border-radius:6px;padding:.5rem .8rem;font-size:.85rem;box-shadow:0 4px 12px #0000004d}.custom-tooltip div{margin:2px 0}