*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
body{margin:0;min-height:100vh;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.55),rgba(0,0,0,.35) 75%),repeating-linear-gradient(90deg,#b9bcc0 0,#cfd2d6 2px,#aeb1b5 4px);
display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-x:hidden}
.device{background:linear-gradient(160deg,#3a3a3a,#050505 40%,#1a1a1a);border-radius:56px;padding:90px 22px 100px;position:relative;
box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 2px 2px rgba(255,255,255,.25),inset 0 0 0 3px #222}
.device:before{content:"";position:absolute;top:45px;left:50%;width:60px;height:6px;margin-left:-30px;border-radius:4px;background:#111;box-shadow:inset 0 1px 2px #000,0 1px 0 #333}
.homebtn{position:absolute;bottom:22px;left:50%;margin-left:-28px;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#2a2a2a,#050505);box-shadow:inset 0 2px 3px #000,0 1px 0 #444;cursor:pointer;display:flex;align-items:center;justify-content:center}
.homebtn span{width:18px;height:18px;border:2px solid #666;border-radius:5px}
.screen{width:320px;height:480px;position:relative;overflow:hidden;background:#000}
.statusbar{height:20px;background:linear-gradient(#444,#000);color:#fff;font-size:12px;font-weight:bold;display:flex;align-items:center;justify-content:space-between;padding:0 5px;position:relative;z-index:50}
.pane{position:absolute;top:20px;left:0;right:0;bottom:0;display:flex;flex-direction:column}
.slide-in{animation:slin .35s ease-out}@keyframes slin{from{transform:translateX(100%)}to{transform:none}}
.slide-back{animation:slback .35s ease-out}@keyframes slback{from{transform:translateX(-100%)}to{transform:none}}
.zoom-in{animation:zin .45s ease-out}@keyframes zin{from{transform:scale(.1);opacity:0}to{transform:none;opacity:1}}
.zoom-out{animation:zout .4s ease-out}@keyframes zout{from{transform:scale(1.6);opacity:0}to{transform:none;opacity:1}}
.linen{background:radial-gradient(ellipse at 50% 40%,#2a2f3a,#000 80%),repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.icon{width:57px;height:57px;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;cursor:pointer}
.icon:after{content:"";position:absolute;left:-10%;right:-10%;top:-40%;height:85%;border-radius:0 0 50% 50%;background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.12))}
.iconlbl{color:#fff;font-size:11px;text-align:center;text-shadow:0 1px 2px #000;margin-top:4px;white-space:nowrap}
.navbar{height:44px;flex:none;background:linear-gradient(#b0bccd,#8a9bb3 50%,#7b8fa9 50%,#6d84a2);border-bottom:1px solid #2d3642;display:flex;align-items:center;justify-content:center;position:relative;color:#fff;font-weight:bold;font-size:19px;text-shadow:0 -1px 0 rgba(0,0,0,.5)}
.backbtn{position:absolute;left:6px;height:30px;padding:0 10px 0 14px;font-size:12px;font-weight:bold;color:#fff;background:linear-gradient(#8fa1bb,#5b7396 50%,#4a6489 50%,#56709a);border:1px solid #2f3e55;border-radius:5px;clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);cursor:pointer;text-shadow:0 -1px 0 rgba(0,0,0,.5)}
.wood{background:linear-gradient(rgba(60,25,5,.25),rgba(0,0,0,.5)),repeating-linear-gradient(92deg,#7a4a24 0,#8b5a2f 6px,#6b3d1b 11px,#94643a 17px,#7a4a24 24px)}
.logo{font-family:Georgia,serif;font-weight:bold;font-style:italic;font-size:30px;background:linear-gradient(#fff6c8,#e6b84a 50%,#a8741c);-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 2px 1px rgba(0,0,0,.8));text-align:center;line-height:1}
.pill{display:block;width:240px;margin:0 auto 9px;height:40px;border-radius:20px;border:1px solid #3a1d07;color:#fff;font-weight:bold;font-size:16px;text-shadow:0 -1px 0 rgba(0,0,0,.6);background:linear-gradient(#c98a4e,#9a5a26 50%,#7d4318 50%,#8e5222);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 3px rgba(0,0,0,.5);cursor:pointer}
.pill:active{background:linear-gradient(#5b7fbf,#2f5aa8 50%,#1f4a98 50%,#2a56a6)}
.pill:disabled{opacity:.5}
.pinstripe{background:repeating-linear-gradient(90deg,#c5ccd4 0 5px,#cbd2d9 5px 7px)}
.group{background:#fff;border:1px solid #a9abae;border-radius:9px;margin:0 9px 16px;overflow:hidden}
.cell{min-height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-weight:bold;font-size:15px;border-top:1px solid #d9d9d9;color:#000}
.cell:first-child{border-top:none}
.gh{font-size:15px;font-weight:bold;color:#4c566c;text-shadow:0 1px 0 #fff;margin:12px 20px 6px}
.switch{width:94px;height:27px;border-radius:6px;border:1px solid #888;overflow:hidden;cursor:pointer;position:relative;font-size:15px;font-weight:bold}
.switch .track{position:absolute;top:0;height:100%;width:160px;display:flex;transition:left .2s}
.switch .on{width:66px;background:linear-gradient(#2a64d3,#4f8ef7);color:#fff;display:flex;align-items:center;justify-content:center}
.switch .knob{width:28px;background:linear-gradient(#fff,#ccc);border-radius:6px;border:1px solid #999}
.switch .off{width:66px;background:linear-gradient(#e6e6e6,#fff);color:#777;display:flex;align-items:center;justify-content:center}
.seg{display:flex;border:1px solid #7b7b7b;border-radius:6px;overflow:hidden}
.seg div{padding:5px 8px;font-size:12px;font-weight:bold;background:linear-gradient(#fff,#ddd);color:#555;border-left:1px solid #999;cursor:pointer}
.seg div:first-child{border-left:none}
.seg div.sel{background:linear-gradient(#7fa3db,#3b6fc4 50%,#2860bd 50%,#3a72cf);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.4)}
.toolbar{height:44px;flex:none;background:linear-gradient(rgba(70,70,70,.95),rgba(10,10,10,.95) 50%,rgba(0,0,0,.95));border-top:1px solid #000;display:flex;justify-content:space-around;align-items:center}
.tbtn{color:#fff;font-size:10px;text-align:center;cursor:pointer;text-shadow:0 -1px 0 #000;min-width:50px}
.tbtn b{display:block;font-size:19px;line-height:20px}
.strip{height:26px;flex:none;display:flex;align-items:center;padding:0 6px;gap:6px;color:#fff;font-size:12px;font-weight:bold;background:linear-gradient(#3b2414,#1e1209);text-shadow:0 -1px 0 #000}
.avatar{width:20px;height:20px;border-radius:4px;background:linear-gradient(#e0457b,#8a1440);display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.boardwrap{flex:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(#2a180c,#150b05)}
.board{display:grid;grid-template-columns:repeat(8,36px);border:4px solid #3b200c;box-shadow:inset 0 0 0 1px #c98a4e,0 3px 8px #000;position:relative}
.sq{width:36px;height:36px;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
.piece{font-size:30px;line-height:1;position:relative;z-index:2;transition:transform .1s}
.piece.w{color:#fdfaf2;text-shadow:0 0 1px #000,0 0 1px #000,0 2px 3px rgba(0,0,0,.7)}
.piece.b{color:#1a1410;text-shadow:0 0 1px #c9b7a0,0 2px 3px rgba(0,0,0,.7)}
.dot{position:absolute;width:12px;height:12px;border-radius:50%;background:rgba(30,90,220,.55);z-index:3;box-shadow:0 0 3px #fff}
.ring{position:absolute;inset:2px;border-radius:50%;border:3px solid rgba(30,90,220,.55);z-index:3}
.sel{box-shadow:inset 0 0 0 3px #4fa3ff,inset 0 0 10px #4fa3ff}
.last:before{content:"";position:absolute;inset:0;background:rgba(255,230,60,.38)}
.hint:before{content:"";position:absolute;inset:0;background:rgba(80,255,120,.45)}
.check:before{content:"";position:absolute;inset:0;background:radial-gradient(#ff2a2a,rgba(255,0,0,0) 75%);animation:flash .6s infinite alternate}
@keyframes flash{from{opacity:1}to{opacity:.3}}
.coord{position:absolute;font-size:8px;font-weight:bold;opacity:.7;z-index:1}
.movelist{height:22px;flex:none;background:linear-gradient(#e8e2d2,#cfc6b0);font:11px Menlo,Monaco,monospace;color:#333;display:flex;align-items:center;padding:0 6px;overflow-x:auto;white-space:nowrap;box-shadow:inset 0 2px 3px rgba(0,0,0,.4)}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:100;display:flex;align-items:center;justify-content:center}
.alert{width:280px;border-radius:10px;padding:14px 12px 10px;color:#fff;text-align:center;background:linear-gradient(rgba(130,150,190,.96),rgba(30,50,100,.96) 40%,rgba(20,35,80,.96));border:2px solid #e8edf5;box-shadow:0 4px 20px #000;position:relative;overflow:hidden;animation:pop .35s}
.alert:before{content:"";position:absolute;left:-20%;right:-20%;top:-30px;height:60px;border-radius:50%;background:rgba(255,255,255,.18)}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.07)}100%{transform:none;opacity:1}}
.alert h3{font-size:17px;font-weight:bold;margin:0 0 6px;text-shadow:0 -1px 0 #000}
.alert p{font-size:14px;margin:0 0 12px;text-shadow:0 -1px 0 #000}
.abtn{flex:1;height:40px;border-radius:7px;border:1px solid #15203a;color:#fff;font-weight:bold;font-size:16px;background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.12) 50%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.15));text-shadow:0 -1px 0 #000;cursor:pointer}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:101;padding:14px 18px 10px;background:linear-gradient(rgba(70,70,70,.95),rgba(15,15,15,.95));border-top:1px solid #888;animation:sup .3s ease-out}
@keyframes sup{from{transform:translateY(100%)}to{transform:none}}
.sbtn{display:block;width:100%;height:42px;margin-bottom:8px;border-radius:9px;font-weight:bold;font-size:17px;background:linear-gradient(#fff,#dcdcdc);border:1px solid #333;cursor:pointer}
.sbtn.cancel{background:linear-gradient(#5a5a5a,#222);color:#fff}
.spinner{width:20px;height:20px;border-radius:50%;background:conic-gradient(#fff,rgba(255,255,255,0));-webkit-mask:radial-gradient(circle,transparent 5px,#000 6px);animation:spin .8s steps(12) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.iad{height:50px;flex:none;background:linear-gradient(#333,#000);color:#fff;display:flex;align-items:center;gap:8px;padding:0 10px;font-size:12px;cursor:pointer;border-top:1px solid #555}
.footer{color:#333;font-size:12px;text-align:center;margin:18px 10px;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.footer a{color:#1a3e8a;font-weight:bold}
.mobile body,.mobile{background:#000}