#game{cursor:grab;touch-action:none}.dio-card{background:var(--paper);border:2.5px solid var(--ink);width:min(300px,100vw - 32px);padding:24px 18px 14px;font-size:18px;line-height:1.3;position:fixed;top:34px;left:18px;box-shadow:6px 6px #23303a59}.dio-card .tab{background:var(--tab);color:#fff;border:2.5px solid var(--ink);letter-spacing:1px;text-shadow:1.5px 1.5px 0 var(--ink);padding:3px 16px;font-family:Patrick Hand SC,cursive;font-size:22px;position:absolute;top:-22px;left:-12px;box-shadow:4px 4px #23303a59}.dio-card p{margin:0 0 8px}.dio-card .sub{font-size:17px}.dio-card .dim{opacity:.65;font-size:15px}.dio-card .hint{font-size:15px}.dio-card .key{grid-template-columns:1fr 1fr;gap:4px 10px;margin:6px 0 10px;padding:0;font-size:16px;list-style:none;display:grid}.dio-card .key li{align-items:center;gap:8px;display:flex}.dio-card .btns{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.dio-card button,.dio-card a{font:inherit;color:var(--ink);cursor:pointer;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background:#fff;padding:1px 10px;font-size:16px;text-decoration:none}.dio-card button:active,.dio-card a:active{box-shadow:1px 1px 0 var(--ink);transform:translate(1px,1px)}.dio-card button[aria-pressed=true]{background:var(--accent)}.dio-card .gfx{align-items:center;gap:8px;margin-top:10px;font-size:15px;display:flex}.dio-card .gfx select{font:inherit;color:var(--ink);border:2px solid var(--ink);background:#fff;font-size:15px}.dio-card a{background:var(--tab);color:#fff;text-shadow:1px 1px 0 var(--ink);margin-left:auto}.badge{border:2px solid var(--ink);flex:none;width:16px;height:16px;display:inline-block;position:relative}.badge.easy,.badge.novice{background:#4f8fd6;border-radius:50%}.badge.intermediate{background:#d9534a;transform:rotate(45deg)scale(.85)}.badge.advanced,.badge.expert,.badge.freeride{background:#23303a;transform:rotate(45deg)scale(.85)}.badge.freeride{background:#f08a24}.badge.expert{margin-right:10px}.badge.expert:after{content:"";background:inherit;border:2px solid var(--ink);box-sizing:content-box;width:100%;height:100%;margin:-2px;position:absolute;top:-9px;left:7px}.badge.lift{background:var(--accent);border-radius:4px;width:18px;height:12px}.badge.lodge{background:#5f8064;border-radius:6px 6px 1px 1px;width:18px;height:14px}.badge.you{background:var(--accent);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.dio-you{pointer-events:none;letter-spacing:1px;background:var(--accent);border:2.5px solid var(--ink);margin-top:-6px;padding:2px 9px 4px;font-family:Patrick Hand SC,cursive;font-size:17px;line-height:1;position:fixed;top:0;left:0;box-shadow:3px 3px #23303a59}.dio-tip{pointer-events:none;z-index:5;background:var(--paper);border:2.5px solid var(--ink);min-width:150px;max-width:280px;padding:6px 12px 7px;position:fixed;top:0;left:0;box-shadow:4px 4px #23303a59}.dio-tip .head{align-items:center;gap:10px;display:flex}.dio-tip .zh{font-size:22px;line-height:1.15}.dio-tip .en{opacity:.75;margin:1px 0 3px;font-family:Patrick Hand SC,cursive;font-size:16px}.dio-tip .rows{flex-wrap:wrap;gap:0 12px;font-size:15px;display:flex}.dio-tip .rows b{font-size:17px;font-weight:400}.dio-credit{opacity:.6;pointer-events:none;margin:0;font-size:13px;position:fixed;bottom:8px;right:14px}@media (width<=560px){.dio-card{padding:20px 14px 12px;top:auto;bottom:30px;left:16px}.dio-card .key{grid-template-columns:repeat(3,auto);font-size:15px}.dio-card .hint,.dio-card .sub{display:none}.dio-credit{text-align:center;font-size:11px;bottom:6px;left:16px;right:16px}}.dio-pick{z-index:4;background:var(--paper);border:2.5px solid var(--ink);width:min(460px,100vw - 32px);padding:22px 20px 16px;font-size:18px;line-height:1.3;position:fixed;bottom:6vh;left:50%;transform:translate(-50%);box-shadow:6px 6px #23303a59}.dio-pick .tab{background:var(--tab);color:#fff;border:2.5px solid var(--ink);letter-spacing:1px;text-shadow:1.5px 1.5px 0 var(--ink);padding:3px 16px;font-family:Patrick Hand SC,cursive;font-size:20px;position:absolute;top:-22px;left:-12px;box-shadow:4px 4px #23303a59}.dio-pick .x{width:30px;height:30px;font:inherit;color:var(--ink);cursor:pointer;background:0 0;border:0;padding:0;font-size:24px;line-height:1;position:absolute;top:6px;right:8px}.dio-pick .head{align-items:center;gap:10px;padding-right:28px;display:flex}.dio-pick .zh{font-size:26px;line-height:1.15}.dio-pick .en{opacity:.75;margin:1px 0 4px;font-family:Patrick Hand SC,cursive;font-size:17px}.dio-pick .rows{flex-wrap:wrap;gap:0 14px;font-size:16px;display:flex}.dio-pick .rows b{font-size:18px;font-weight:400}.dio-pick .what{margin:8px 0 12px}.dio-pick .acts{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.dio-pick .acts button{font:inherit;color:var(--ink);cursor:pointer;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background:#fff;padding:1px 12px 3px;font-size:18px}.dio-pick .acts button.go{letter-spacing:1px;background:var(--accent);box-shadow:inset 0 -4px 0 #c99a2a, 2px 2px 0 var(--ink);font-family:Patrick Hand SC,cursive;font-size:20px}.dio-pick .acts button.look{box-shadow:none;border-style:dashed;margin-left:auto}.dio-pick .acts button:hover{transform:translateY(-1px)}.dio-pick .acts button:active{box-shadow:1px 1px 0 var(--ink);transform:translate(1px,1px)}.dio-pick button:focus-visible{outline:3px solid var(--tab);outline-offset:2px}@media (width<=560px){body.picking #legend{display:none}.dio-pick{padding:20px 14px 12px;font-size:17px;bottom:26px}.dio-pick .acts button.look{margin-left:0}}#cloud{z-index:8}.dio-card .touch-hint,body.touch .dio-card .hint:not(.touch-hint){display:none}body.touch .dio-card .touch-hint{display:block}body.touch .dio-card button,body.touch .dio-card a{place-items:center;min-height:44px;display:inline-grid}body.touch .dio-tip{display:none!important}body.touch .dio-pick{bottom:calc(26px + env(safe-area-inset-bottom))}body.touch .dio-pick .x{width:44px;height:44px;font-size:28px;top:2px;right:4px}body.touch .dio-pick .acts{flex-direction:column;align-items:stretch}body.touch .dio-pick .acts button{min-height:48px}body.touch .dio-pick .acts button.look{margin-left:0}@media (width<=560px){body.touch .dio-card{top:calc(56px + env(safe-area-inset-top));width:auto;padding:22px 14px 10px;bottom:auto;left:14px;right:14px}body.touch .dio-card .key{margin-bottom:4px}body.touch .dio-card .dim{margin:0}body.touch .dio-card .touch-hint{left:14px;right:14px;bottom:calc(100px + env(safe-area-inset-bottom));text-align:center;border:2px solid var(--ink);background:#fbfaf5eb;margin:0;padding:5px 12px 7px;font-size:16px;line-height:1.25;position:fixed}body.touch .dio-card .btns{left:14px;right:14px;bottom:calc(38px + env(safe-area-inset-bottom));grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid;position:fixed}body.touch .dio-card .btns>*{box-sizing:border-box;height:48px;margin:0;font-size:17px}body.touch .dio-credit{bottom:calc(12px + env(safe-area-inset-bottom))}}.dio-guide{z-index:6;background:#23303a6b;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.dio-guide section{box-sizing:border-box;background:var(--paper);border:2.5px solid var(--ink);width:min(354px,100%);padding:30px 16px 16px;position:relative;box-shadow:6px 6px #23303a59}.dio-guide .tab{background:var(--tab);color:#fff;border:2.5px solid var(--ink);letter-spacing:1px;text-shadow:1.5px 1.5px 0 var(--ink);padding:3px 16px 5px;font-family:Patrick Hand SC,cursive;font-size:21px;position:absolute;top:-22px;left:-8px;box-shadow:4px 4px #23303a59}.dio-guide .moves{grid-template-columns:64px 1fr;align-items:center;gap:12px 14px;margin-bottom:14px;display:grid}.dio-guide .moves p{margin:0;font-size:17px;line-height:1.25}.dio-guide svg{fill:none;width:64px;height:56px;stroke:var(--ink);stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round}.dio-guide .ok{cursor:pointer;letter-spacing:2px;width:100%;height:52px;color:var(--ink);background:var(--accent);border:2.5px solid var(--ink);padding:0 0 4px;font-family:Patrick Hand SC,cursive;font-size:22px;display:block;box-shadow:inset 0 -5px #c99a2a,3px 3px #23303a59}
