:root{color-scheme:dark;--bg:#080415;--panel:rgba(24,10,48,0.78);--panel-strong:rgba(44,16,91,0.88);--line:rgba(224,176,255,0.5);--text:#fff7ff;--muted:#d8b9ee;--pink:#ff7bea;--violet:#a966ff;--cyan:#7deaff;--gold:#ffd86f;--shadow:0 0 22px rgba(172,78,255,0.62)}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;display:grid;place-items:center;background:radial-gradient(circle at 12% 12%,rgba(145,73,255,0.26),transparent 32%),radial-gradient(circle at 84% 18%,rgba(255,102,226,0.18),transparent 28%),linear-gradient(145deg,#070313 0%,#14072d 48%,#070315 100%);color:var(--text);font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",Arial,sans-serif}button,input,textarea{font:inherit}button{border:0}body.is-locked .app-shell,body.is-locked .toast{visibility:hidden}.access-gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 20%,rgba(169,102,255,0.28),transparent 32%),radial-gradient(circle at 80% 24%,rgba(255,123,234,0.22),transparent 30%),linear-gradient(145deg,#070313 0%,#14072d 48%,#070315 100%)}.access-card{width:min(92vw,360px);display:grid;gap:14px;padding:24px;border-radius:12px;border:1px solid rgba(233,193,255,0.52);background:rgba(24,10,48,0.88);box-shadow:var(--shadow);text-align:center}.access-card h2,.access-card p{margin:0}.access-card p{color:var(--muted);font-size:14px}.access-card input{width:100%;min-height:44px;border-radius:8px;border:1px solid rgba(223,184,255,0.58);outline:none;padding:9px 12px;color:var(--text);background:rgba(10,3,28,0.78)}.access-card input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(125,234,255,0.12)}.access-error{min-height:18px;color:#ff9fcf;font-size:13px;font-weight:700}.app-shell{position:relative;width:min(100vw,calc(100vh * 1647 / 955));height:min(100vh,calc(100vw * 955 / 1647));margin:0 auto;padding:0;overflow:hidden;background:#070313 url("./assets/board.png") center / 100% 100% no-repeat}.topbar{position:absolute;top:1.8%;left:2.6%;right:2.6%;z-index:30;display:grid;justify-items:end;justify-content:flex-end;gap:8px;margin-bottom:0;pointer-events:none}.topbar>div{display:none}.topbar .view-tabs{pointer-events:auto}.top-reset-button{min-width:66px;pointer-events:auto}.eyebrow{margin:0 0 2px;color:var(--cyan);font-size:12px}h1,h2{margin:0;letter-spacing:0}h1{font-size:clamp(22px,3vw,38px)}h2{font-size:clamp(22px,3vw,34px)}.view-tabs,.settings-actions,.dice-buttons{display:flex;align-items:center;gap:10px}.tab-button,.secondary-button,.primary-button{min-height:clamp(30px,4.1vh,42px);border-radius:8px;padding:0 clamp(10px,1.25vw,18px);color:var(--text);border:1px solid var(--line);background:rgba(50,19,94,0.72);box-shadow:inset 0 0 16px rgba(210,151,255,0.18);cursor:pointer;transition:transform 160ms ease,border-color 160ms ease,background 160ms ease}.tab-button:hover,.secondary-button:hover,.primary-button:hover,.dice-button:hover{transform:translateY(-1px)}.tab-button.is-active,.primary-button{border-color:rgba(255,255,255,0.82);background:linear-gradient(180deg,rgba(184,93,255,0.9),rgba(113,48,213,0.9));box-shadow:var(--shadow)}.view{display:none}.view.is-active{display:block}main{position:absolute;inset:0;min-height:0}#gameView.view.is-active{height:100%;min-height:0;display:block}#settingsView.view.is-active{height:100%;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:10px;padding:calc(clamp(30px,4.1vh,42px)+2.8%) 2.6% 2.6%;overflow:hidden}.board-scroll{position:absolute;inset:0;width:100%;max-height:none;overflow:hidden;border-radius:0;border:0;background:transparent;box-shadow:none}.board-wrap{position:relative;width:100%;height:100%;min-width:0;aspect-ratio:auto;overflow:hidden;background:transparent}.board-image{display:none}.cell-layer{position:absolute;inset:0;z-index:3}.cell-layer::before{content:"";position:absolute;inset:26% 2.6% 2.5%;z-index:0;border-radius:8px;background:transparent;opacity:0;pointer-events:none}.route-line{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}.route-line polyline{fill:none;stroke:rgba(255,244,255,0.78);stroke-width:0.32;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1.2 1.15;filter:drop-shadow(0 0 0.45px rgba(185,87,255,0.95))}.board-cell{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0.58% 0.5% 0.42%;border-radius:12px;color:#fff;text-align:center;font-weight:900;line-height:1.1;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 112%,rgba(255,143,247,0.34),transparent 38%),radial-gradient(circle at 28% 20%,rgba(255,255,255,0.16),transparent 26%),linear-gradient(180deg,rgba(83,34,145,0.98) 0%,rgba(48,14,98,0.98) 48%,rgba(30,8,68,0.99) 100%);border:2px solid rgba(232,178,255,0.92);text-shadow:0 2px 0 rgba(38,0,74,0.95),0 0 8px rgba(255,255,255,0.42),0 0 15px rgba(145,64,255,0.55);box-shadow:inset 0 0 0 2px rgba(116,48,202,0.72),inset 0 10px 24px rgba(255,255,255,0.08),inset 0 -18px 30px rgba(24,4,59,0.68),0 0 0 1px rgba(83,21,149,0.95),0 0 14px rgba(179,91,255,0.72),0 8px 14px rgba(0,0,0,0.34);cursor:pointer;transform-origin:center}.board-cell::before{content:"";position:absolute;inset:6% 7% auto;height:28%;z-index:-1;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,0.34),rgba(255,255,255,0));opacity:0.72}.board-cell::after{content:none;display:none}.board-cell span{position:relative;z-index:1;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:clamp(18px,2vw,34px);overflow-wrap:anywhere}.board-cell.is-current{border-color:var(--gold);animation:currentPulse 950ms ease-in-out infinite}.board-cell.step-flash{animation:stepFlash 520ms ease-in-out}.piece{position:absolute;z-index:5;width:clamp(44px,5.1vw,78px);height:clamp(44px,5.1vw,78px);display:grid;place-items:center;border-radius:50%;background:rgba(28,6,64,0.46);border:3px solid rgba(255,255,255,0.92);box-shadow:0 0 0 5px rgba(130,62,255,0.24),0 0 28px rgba(255,112,232,0.95),0 8px 16px rgba(0,0,0,0.34);transition:left 360ms cubic-bezier(0.2,0.8,0.2,1),top 360ms cubic-bezier(0.2,0.8,0.2,1),transform 180ms ease}.pieces-layer{position:absolute;inset:0;z-index:5;pointer-events:none}.pieces-layer .piece{pointer-events:auto;cursor:pointer}.piece.is-active{z-index:7;border-color:var(--gold);box-shadow:0 0 0 5px rgba(255,216,111,0.24),0 0 30px rgba(255,216,111,0.95),0 8px 16px rgba(0,0,0,0.34)}.piece.is-on-start{transform:translate(-50%,-50%)}.piece.is-on-cell{transform:translate(-50%,-50%)}.piece img{width:100%;height:100%;display:block;border-radius:inherit;object-fit:contain;background:rgba(255,255,255,0.12)}.piece::after{content:"";position:absolute;left:4px;bottom:-9px;width:45%;height:16px;border-radius:999px;background:rgba(125,234,255,0.72);filter:blur(6px);transform:rotate(-22deg)}.piece.is-hopping{animation:pieceHop 420ms ease-in-out}.piece-settings{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(180px,260px) auto;align-items:center;gap:14px;margin-bottom:14px;padding:14px;border-radius:8px;border:1px solid rgba(214,162,255,0.34);background:var(--panel)}.piece-settings-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:12px}.piece-setting-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;padding:10px;border-radius:8px;border:1px solid rgba(214,162,255,0.34);background:rgba(10,3,28,0.38)}.piece-setting-body{display:grid;gap:8px;min-width:0}.piece-setting-body strong{color:var(--text);font-size:14px}.piece-preview{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;border:2px solid rgba(235,196,255,0.72);background:rgba(10,3,28,0.76);box-shadow:0 0 18px rgba(172,78,255,0.4)}.piece-preview img{width:100%;height:100%;display:block;object-fit:contain}.background-preview{width:112px;height:72px;display:grid;place-items:center;border-radius:8px;border:2px solid rgba(235,196,255,0.72);color:var(--muted);font-size:14px;font-weight:700;background:linear-gradient(rgba(10,3,28,0.62),rgba(10,3,28,0.62)),url("./assets/board.png") center / cover no-repeat;box-shadow:0 0 18px rgba(172,78,255,0.4)}.background-preview.has-image{background-position:center;background-size:cover;background-repeat:no-repeat}.background-preview.has-image span{display:none}.setting-field{display:grid;gap:7px;color:var(--muted);font-size:14px}.setting-field input{min-height:42px;width:100%;border-radius:8px;border:1px solid rgba(223,184,255,0.5);outline:none;padding:8px 10px;color:var(--text);background:rgba(10,3,28,0.76)}.setting-field input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(125,234,255,0.12)}.control-panel{position:absolute;left:3.2%;right:3.2%;bottom:1.4%;z-index:20;display:grid;grid-template-columns:minmax(180px,1fr) auto auto auto auto auto auto auto;align-items:center;gap:14px;margin-top:0;padding:clamp(6px,0.8vh,9px) clamp(8px,0.9vw,12px);border-radius:8px;border:1px solid rgba(214,162,255,0.34);background:var(--panel);box-shadow:0 12px 34px rgba(0,0,0,0.28)}.piece-picker{display:flex;align-items:center;gap:7px;min-height:48px}.piece-select{position:relative;width:46px;height:46px;padding:0;border-radius:50%;border:2px solid rgba(235,196,255,0.72);background:rgba(10,3,28,0.76);box-shadow:0 0 13px rgba(172,78,255,0.38);cursor:pointer;overflow:hidden}.piece-select img{width:100%;height:100%;display:block;object-fit:cover}.piece-select span{position:absolute;right:-1px;bottom:-1px;min-width:18px;height:18px;display:grid;place-items:center;border-radius:999px;color:#210032;background:var(--gold);font-size:11px;font-weight:900}.piece-select.is-active{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,216,111,0.22),0 0 20px rgba(255,216,111,0.72)}.add-piece-button:disabled,.delete-piece-button:disabled,.reset-current-button:disabled{cursor:not-allowed;opacity:0.52}.reverse-control{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 4px;color:var(--text);font-size:12px;font-weight:700;cursor:pointer;user-select:none}.reverse-control input{position:absolute;opacity:0;pointer-events:none}.reverse-control i{position:relative;width:38px;height:22px;border-radius:999px;background:rgba(13,4,34,0.92);border:1px solid rgba(210,166,255,0.72);box-shadow:inset 0 2px 5px rgba(0,0,0,0.52),0 0 8px rgba(137,63,224,0.28);transition:background 160ms ease,box-shadow 160ms ease}.reverse-control i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:linear-gradient(180deg,#fff,#d8bbff);box-shadow:0 1px 3px rgba(0,0,0,0.45),0 0 7px rgba(255,255,255,0.7);transition:transform 160ms ease}.reverse-control input:checked+i{background:linear-gradient(90deg,#9d45ef,#ec76e4);border-color:rgba(255,226,255,0.94);box-shadow:inset 0 1px 3px rgba(255,255,255,0.24),0 0 13px rgba(223,103,244,0.78)}.reverse-control input:checked+i::after{transform:translateX(17px)}.status-box{display:grid;gap:4px;min-width:0}.status-label,#stepText{color:var(--muted);font-size:12px}#positionText{min-width:0;font-size:clamp(16px,1.5vw,22px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dice-buttons{flex-wrap:wrap;justify-content:center}.dice-button{width:48px;min-height:48px;display:grid;place-items:center;gap:2px;padding:5px;border-radius:8px;color:var(--text);border:1px solid rgba(255,255,255,0.6);background:linear-gradient(180deg,rgba(95,34,169,0.95),rgba(46,13,96,0.95));box-shadow:inset 0 0 16px rgba(255,255,255,0.12),0 0 18px rgba(143,72,255,0.22);cursor:pointer;transition:transform 160ms ease,box-shadow 160ms ease,opacity 160ms ease}.dice-button:disabled{cursor:not-allowed;opacity:0.55;transform:none}.die-face{width:23px;height:23px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;padding:4px;border-radius:7px;background:#f7eaff;box-shadow:inset 0 -2px 4px rgba(80,24,122,0.28)}.pip{width:4px;height:4px;align-self:center;justify-self:center;border-radius:50%;background:#7c36ce}.dice-label{font-size:11px;color:#fff}.settings-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:0;padding:12px;border-radius:8px;border:1px solid rgba(214,162,255,0.34);background:var(--panel)}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;min-height:0;overflow:auto}.setting-card{display:grid;gap:8px;padding:14px;border-radius:8px;border:1px solid rgba(214,162,255,0.34);background:var(--panel-strong);box-shadow:inset 0 0 20px rgba(172,78,255,0.15)}.setting-card label{color:var(--muted);font-size:14px}.setting-card textarea{width:100%;min-height:74px;resize:vertical;border-radius:8px;border:1px solid rgba(223,184,255,0.5);outline:none;padding:10px 12px;color:var(--text);background:rgba(10,3,28,0.76)}.setting-card textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(125,234,255,0.12)}.toast{position:fixed;left:50%;bottom:22px;z-index:10;max-width:min(92vw,380px);padding:11px 16px;border-radius:8px;color:var(--text);background:rgba(24,8,52,0.92);border:1px solid rgba(233,193,255,0.46);box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity 180ms ease,transform 180ms ease}.toast.is-visible{opacity:1;transform:translate(-50%,0)}@keyframes currentPulse{0%,100%{box-shadow:inset 0 0 0 2px rgba(116,48,202,0.72),inset 0 10px 24px rgba(255,255,255,0.08),inset 0 -18px 30px rgba(24,4,59,0.68),0 0 0 0 rgba(255,216,111,0.1),0 0 18px rgba(255,216,111,0.7),0 8px 14px rgba(0,0,0,0.34)}50%{box-shadow:inset 0 0 0 2px rgba(255,238,176,0.95),inset 0 0 30px rgba(255,216,111,0.38),inset 0 -18px 30px rgba(24,4,59,0.58),0 0 0 6px rgba(255,216,111,0.16),0 0 34px rgba(255,216,111,0.92),0 8px 16px rgba(0,0,0,0.34)}}@keyframes stepFlash{0%,100%{filter:brightness(1);transform:scale(1)}45%{filter:brightness(1.55);transform:scale(1.06)}}@keyframes pieceHop{0%,100%{margin-top:0}45%{margin-top:-18px}}@media (max-width:920px){.app-shell{padding:12px}.topbar,.settings-head{align-items:stretch;flex-direction:column}.view-tabs,.settings-actions{width:100%}.tab-button,.settings-actions button{flex:1}.control-panel{grid-template-columns:1fr}.dice-buttons{justify-content:flex-start}.piece-settings{grid-template-columns:1fr}.piece-preview{justify-self:start}}