*{box-sizing:border-box}body{margin:0;color:#edf4f8;background:#0b1724 url('assets/art/background/coast/scene.png') center/cover fixed;font:16px/1.4 'Microsoft YaHei',system-ui;height:100dvh;overflow:hidden}body:before{content:'';position:fixed;inset:0;background:#07101e75;z-index:-1}button{font:inherit;color:#f5f6f6;border:1px solid #70849a;border-radius:8px;background:linear-gradient(#354b62,#182a3d);padding:8px 16px;cursor:pointer;box-shadow:0 2px 4px #0006}button:hover:not(:disabled){filter:brightness(1.2)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.42;cursor:default}.primary{color:#241b0b;background:linear-gradient(#ffe0a0,#dca94d);border-color:#ffe7af;font-weight:700}header{height:66px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 22px;background:#081421e8;box-shadow:0 3px 15px #0006}.brand{font-size:23px;font-weight:800;color:#ffdc92}.brand small{display:block;font-size:11px;color:#acbfce;font-weight:400}#hud{font-size:18px;text-align:center;font-weight:700}main{height:calc(100dvh - 166px);display:flex;align-items:center;justify-content:center}#surface{position:relative;flex:none}#board{display:block;width:100%;height:100%}#cells{position:absolute;inset:4%;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr)}button.cell{background:none;border:0;border-radius:0;box-shadow:none;padding:0;min-width:0;min-height:0;color:transparent}button.cell:active{transform:none}button.cell:focus-visible{outline:2px solid #fff;outline-offset:-3px}footer{height:100px;padding:3px 12px;background:#081421df;display:flex;flex-direction:column;align-items:center;gap:7px}#context{height:40px;display:flex;align-items:center;gap:8px;max-width:100%;overflow:auto;white-space:nowrap;font-size:14px}#context button{padding:5px 12px;font-size:14px}.actions{display:flex;gap:12px}#end{color:#ffe7af;border-color:#d3ac60}#toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#0c1c2bef;border:1px solid #8299aa;border-radius:9px;padding:9px 18px;pointer-events:none;opacity:0;z-index:200;max-width:90%;font-size:17px;text-align:center;transition:opacity .15s}#toast.show{opacity:1}.cover{position:fixed;inset:0;background:#091321;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.cover section{width:min(510px,95vw);text-align:center;padding:30px;border:2px solid #637a91;border-radius:18px;background:linear-gradient(#233448,#101d2b);box-shadow:0 15px 65px #0009}.cover h1{font-size:29px;margin:12px 0}.cover p{color:#c7d5e1}.eyebrow{font-size:14px;letter-spacing:3px}.cover button{margin-top:15px;min-height:44px}#loading{z-index:1100}progress{width:90%;height:18px;accent-color:#5bcfe8}[hidden]{display:none!important}dialog{width:min(470px,92vw);max-height:92dvh;overflow:auto;background:linear-gradient(#25394f,#101d2a);color:#f4f6f8;border:2px solid #a5bac9;border-radius:14px;box-shadow:0 15px 60px #000b;padding:22px;text-align:center}dialog::backdrop{background:#03101bc9}dialog h2{margin:0 0 15px;font-size:25px}dialog p{font-size:19px;white-space:pre-line}.dialog-actions{display:flex;justify-content:center;gap:14px;margin-top:22px}.dice-space{height:110px;perspective:420px;display:grid;place-items:center}.die{position:relative;width:60px;height:60px;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(20deg);transition:transform .18s ease-out}.face{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,#fff,#c2ccd2);color:#142334;border:1px solid #75899a;border-radius:9px;font:56px/1 system-ui;backface-visibility:hidden}.f1{transform:translateZ(30px)}.f2{transform:rotateY(90deg) translateZ(30px)}.f3{transform:rotateX(90deg) translateZ(30px)}.f4{transform:rotateX(-90deg) translateZ(30px)}.f5{transform:rotateY(-90deg) translateZ(30px)}.f6{transform:rotateY(180deg) translateZ(30px)}.rolling{animation:roll .72s ease-in-out infinite}@keyframes roll{0%{transform:translateY(0) rotateX(0) rotateY(0)}45%{transform:translateY(-15px) rotateX(200deg) rotateY(260deg)}100%{transform:translateY(0) rotateX(360deg) rotateY(540deg)}}@media(max-height:550px){header{height:46px;padding:4px 12px}.brand{font-size:18px}.brand small{font-size:9px}#hud{font-size:14px}header button{font-size:12px;padding:5px 9px}main{height:calc(100dvh - 122px)}footer{height:76px;gap:3px}#context{height:32px;font-size:12px}.actions button{font-size:13px;padding:6px 12px}#context button{font-size:12px;padding:4px 9px}dialog{padding:12px}dialog h2{font-size:21px;margin-bottom:8px}dialog p{font-size:16px;margin:9px 0}.dice-space{height:86px}.cover section{padding:18px}.cover h1{font-size:25px}#toast{font-size:16px;top:50%}}
#piece-actions{position:fixed;z-index:70;display:flex;flex-direction:column;gap:5px;padding:7px;border:1px solid #d4b66f;border-radius:10px;background:linear-gradient(#263c50f5,#0c1a29fa);box-shadow:0 5px 18px #0009;max-width:230px;overflow:auto;min-width:106px}#piece-actions button{font-size:17px;font-weight:700;padding:8px 12px;min-height:38px;white-space:normal}#piece-actions .piece-hint{text-align:center;color:#bcffdb;font-size:14px}#piece-actions[data-direction=left]{border-right:3px solid #ffdf8f}#piece-actions[data-direction=right]{border-left:3px solid #ffdf8f}#toast{box-shadow:0 6px 25px #0009;max-width:min(540px,90vw);font-size:20px}#toast:not(.show){visibility:hidden}body:has(dialog[open]) #toast{visibility:hidden}@media(max-height:550px){#piece-actions{padding:5px;gap:4px;min-width:96px}#piece-actions button{font-size:15px;min-height:32px;padding:5px 9px}#toast{font-size:16px}}