/* Art v3: native CSS toy board, preserving all gameplay selectors. */
:root{color-scheme:light;color:#274d66;background:#eafbff;font-family:"Segoe UI","Microsoft YaHei",sans-serif}body{background:radial-gradient(ellipse at 15% 10%,#fff 0,transparent 50%),linear-gradient(160deg,#ecfbff,#dcf5f4);color:#274d66}.app{max-width:1100px;padding-top:22px}header{border-color:#b8dfe5;padding-bottom:14px}.brand{color:#277595;letter-spacing:1px}.brand span{color:#6c98a7;letter-spacing:1px}.quiet{background:#fff;color:#36617b;border:2px solid #c6e3ea;border-radius:14px;box-shadow:0 3px 0 #bedde6;padding:10px 16px;font-weight:600;min-height:44px}.quiet:hover{background:#f4fcff}button:active:not(:disabled){transform:translateY(2px)}button:focus-visible,select:focus-visible{outline:3px solid #f69b36;outline-offset:3px}.intro{margin:22px 0 14px;position:relative}h1{font-family:inherit;font-size:38px;font-weight:850;letter-spacing:2px;color:#205575;margin:5px 0;text-shadow:0 2px #fff}h1 span{font-size:13px;color:#6a8e9c;letter-spacing:1px;margin-top:9px}.eyebrow{color:#399baf;font-size:11px;letter-spacing:1px;font-weight:700}.record{color:#5d8696;font-size:12px}.record strong{color:#ad6b17;background:#fff2cc;border:2px solid #f0d48d;padding:7px 12px;border-radius:14px;font-size:18px;margin-top:5px}.layout{grid-template-columns:220px minmax(0,1fr);gap:36px;align-items:center}.panel{background:#ffffffcf;border:2px solid #c5e3e8;box-shadow:0 5px 0 #c6e5e7;border-radius:23px;padding:20px;gap:15px}.players{border-color:#d9ecef;gap:17px;padding-bottom:16px}.players>div{color:#355a70;font-weight:650;font-size:13px}.players b{color:#7b9aa6}.dot{width:20px;height:20px;border:2px solid #a56b1e;box-shadow:inset 0 2px #fff8}.amber{background:#ffc85e}.mint{background:#58cbb4;border-color:#218b83}label{color:#588295;font-size:12px;font-weight:600}select{background:#f1fbff;color:#315d73;border:2px solid #c6e3e9;border-radius:12px;padding:10px;min-height:44px;font-weight:600}.primary{background:#ffc65e;color:#61451f;border:2px solid #e3a23b;border-radius:14px;box-shadow:0 4px 0 #d69836;min-height:46px}.note{color:#618592;font-size:12px}.save{color:#6d939d;font-size:10px}.status{margin-bottom:12px;padding:0 9px;font-size:12px;color:#668c9b}.status strong{color:#2c627d;font-size:15px}.live{background:#f6b741;border:1px solid #d79929;width:9px;height:9px}.board{position:relative;background:linear-gradient(150deg,#6fcee8,#45a9d5);border:3px solid #2788b7;border-radius:25px;padding:18px;gap:9px;box-shadow:inset 0 5px 0 #c3f2ff,0 8px 0 #267eab,0 16px 25px #3a8ba72b;isolation:isolate}.board:before{content:'';position:absolute;left:12%;right:12%;height:10px;bottom:-14px;background:#267eab;border-radius:0 0 10px 10px;z-index:-1}.column{gap:9px;border-radius:30px}.column:hover:not(:disabled){background:#d3f6ff50}.cell{background:#dff5f9;border:2px solid #2993bf;box-shadow:inset 0 4px 5px #296d8d40,0 1px #d6f8ff;overflow:visible;font-size:clamp(12px,2vw,23px);color:transparent}.cell.p1{background:radial-gradient(circle at 35% 28%,#ffe9a3,#ffc654 65%,#f0ad3d);border:2px solid #bd7d26;color:#a5661f;box-shadow:inset 0 0 0 4px #ffe7a4, inset 0 -5px 0 #e3a23f,0 3px 2px #28658138}.cell.p2{background:radial-gradient(circle at 35% 28%,#b9f4da,#62d1b6 65%,#40ac9b);border:2px solid #258e87;color:#238477;box-shadow:inset 0 0 0 4px #acf0d5,inset 0 -5px #37a997,0 3px 2px #28658138}.cell.p1:before,.cell.p2:before{content:'';position:absolute;top:14%;left:22%;width:31%;height:13%;border-radius:50%;background:#fff9;transform:rotate(-25deg)}.cell.last:after{border-color:#fff;box-shadow:0 0 0 1px #0002;width:26%;height:26%}.cell.win{outline:3px solid #fff;outline-offset:2px;filter:none;box-shadow:0 0 0 5px #ffda67,0 0 16px #fff8}.boardFooter{color:#5e8c9d;margin-top:23px;font-size:11px}.contentControls{background:#ffffff9c;border:1px solid #c5e4e9;border-radius:16px;padding:9px 12px;margin:12px 0 22px;gap:10px;color:#507d90}.contentControls label{font-weight:600;color:#548195;white-space:nowrap}.contentControls select{padding:8px 10px;min-height:40px;font-size:12px}.contentControls>span{font-size:11px;line-height:1.6}.contentControls button{font-size:11px;min-height:40px;padding:7px 11px}.contentControls button:last-child{background:transparent;box-shadow:none;border-color:transparent}footer{color:#7b9eaa;margin-top:28px}dialog{color:#2c5d74;background:#f5fdff;border:3px solid #a8dce6;border-radius:22px;box-shadow:0 10px 0 #4b8d9b33;padding:24px;max-height:86dvh;overflow:auto}dialog::backdrop{background:#1c566d75;backdrop-filter:blur(3px)}dialog h2{color:#2b6e8c;font-size:23px}.close{color:#4f8a9c;min-width:40px;min-height:40px}dialog p{color:#527c8d;font-size:13px;line-height:1.8}.toyMark{width:66px;height:55px;position:absolute;left:230px;top:15px;transform:rotate(10deg);pointer-events:none}.toyMark svg{width:100%;height:100%}
@media(max-width:640px){.app{padding-top:13px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}header{padding-bottom:10px}.brand{font-size:14px}h1{font-size:30px}.intro{margin:17px 0 12px}h1 span{font-size:11px}.record strong{font-size:14px;padding:6px 8px}.record{font-size:10px}.eyebrow{font-size:9px}.toyMark{display:none}.contentControls{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px;margin-bottom:18px}.contentControls label{grid-column:1/-1;font-size:11px}.contentControls select{flex:1;width:auto}.contentControls>span{grid-column:1/-1;font-size:11px;min-width:0}.contentControls button{min-height:40px;font-size:11px}.layout{display:flex;flex-direction:column-reverse;gap:23px}.panel{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;width:100%;border-radius:19px}.players{grid-column:1/-1;display:flex;justify-content:space-between;gap:8px}.players>div{font-size:12px}.note{display:none}.save{grid-column:1/-1}.board{padding:12px;gap:6px;border-radius:20px}.column{gap:6px}.cell{border-width:1.5px}.cell.p1,.cell.p2{border-width:1.5px;box-shadow:inset 0 0 0 3px #ffffff60, inset 0 -3px #0001,0 2px 2px #28658138}.status strong{font-size:13px}.boardFooter{font-size:10px}.quiet{padding:9px 12px}footer{font-size:9px;margin-top:22px}}
@media(min-width:641px) and (min-height:601px){.play{width:min(100%,520px)}}
@media(min-aspect-ratio:13/10) and (max-height:600px){.app{padding:8px max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}header{height:34px;padding-bottom:5px}.brand{font-size:12px}.brand span,.record,.eyebrow,h1 span,.toyMark,footer{display:none}.intro{position:absolute;top:11px;left:43%;margin:0}h1{font-size:20px;margin:0;letter-spacing:1px}header .quiet{min-height:30px;padding:4px 10px;font-size:11px;border-radius:10px;box-shadow:0 2px 0 #bddce5}.contentControls{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0;padding:0;border:0;background:none;border-radius:0}.contentControls label{flex:1;font-size:10px;gap:5px}.contentControls select{flex:1;width:auto;font-size:11px;padding:4px 6px;min-height:32px;border-radius:9px}.contentControls>span{flex-basis:100%;order:4;min-width:0;font-size:10px;line-height:15px}.contentControls button{font-size:10px;min-height:32px;padding:4px 8px;border-radius:9px;box-shadow:none}.layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:start;margin-top:4px}.panel{display:flex;gap:8px;padding:11px;border-radius:16px;max-height:calc(100dvh - 110px);overflow:auto}.players{display:grid;gap:7px;padding-bottom:8px;flex:none}.players>div{font-size:10px;gap:5px}.players b{display:none}.dot{width:15px;height:15px}.panel label{font-size:10px}.panel select{font-size:10px;padding:4px;min-height:32px;margin-top:4px}.panel button{font-size:11px;min-height:34px;padding:6px;box-shadow:none;border-radius:10px}.note,.save{display:none}.play{width:min(100%,420px);align-self:start;justify-self:center}.status{margin-bottom:6px;padding:0 4px;font-size:10px}.status strong{font-size:11px}.board{height:calc(100dvh - 140px);aspect-ratio:auto;padding:7px;gap:5px;border-radius:16px;border-width:2px;box-shadow:inset 0 3px #c3f2ff,0 5px #267eab,0 9px 16px #3a8ba721}.board:before{display:none}.column{gap:4px;justify-items:center}.cell{width:min(100%,calc((100dvh - 181px)/6));font-size:11px;justify-self:center}.cell.p1,.cell.p2{box-shadow:inset 0 0 0 2px #ffffff55,0 2px 2px #28658138}.boardFooter{margin-top:10px;font-size:9px}.live{width:7px;height:7px}.contentControls button:last-child{border:1px solid #badce6}}
button,a,select{-webkit-tap-highlight-color:transparent}@media(max-width:640px) and (orientation:portrait){.contentControls{grid-template-columns:minmax(0,1fr) auto auto;gap:7px}.contentControls label{grid-column:auto;min-width:0;gap:5px;font-size:11px}.contentControls select{min-width:0;width:100%;font-size:11px;padding:6px}.contentControls>span{grid-column:1/-1;order:4;font-size:10px}.contentControls button{font-size:10px;padding:7px 9px}}
#levelLabel[style*="visibility: hidden"]{display:none!important}.panel{scrollbar-width:thin;scrollbar-color:#92c9d6 #effbff}@media(max-width:360px) and (orientation:portrait){h1 span{display:none}.intro{margin:12px 0}.eyebrow{margin-bottom:5px}}@media(min-aspect-ratio:13/10) and (max-height:600px){.panel{padding:8px;gap:6px}.players{gap:5px;padding-bottom:6px}.panel button{min-height:32px}.panel select{min-height:30px}}
@media(max-width:640px) and (orientation:portrait){.panel .primary{font-size:13px;white-space:nowrap}}