:root{color:#13282b;background:#edf7f4;font-family:Inter,PingFang SC,Microsoft YaHei,Noto Sans SC,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:linear-gradient(180deg,#edf7f4eb,#fdf1dde0),radial-gradient(circle at top left,rgba(236,111,74,.18),transparent 34%),#edf7f4}button{min-height:48px;border:0;border-radius:8px;font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation}button:disabled{cursor:not-allowed;opacity:.46}#app{min-height:100vh}.screen{width:min(100%,520px);min-height:100vh;margin:0 auto;padding:max(22px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom))}.start-screen{display:flex;flex-direction:column;justify-content:center;gap:18px}.badge{width:fit-content;margin:0;padding:7px 11px;border:1px solid rgba(19,40,43,.13);border-radius:999px;background:#ffffffb8;color:#31615e;font-size:.82rem;font-weight:800}h1{margin:0;color:#14383d;font-size:2.8rem;line-height:1.02;letter-spacing:0}.intro{margin:0;color:#36585b;font-size:1rem;line-height:1.75}.game-screen{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;gap:16px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.round{margin:0;color:#31615e;font-size:.95rem;font-weight:900}.game-screen h1{font-size:1.7rem}.pixel-frame{align-self:center;width:min(100%,420px);margin:0 auto;padding:14px;border:1px solid rgba(19,40,43,.12);border-radius:8px;background:linear-gradient(135deg,#ffffffe0,#e2f7f0c7),#fff;box-shadow:0 18px 48px #1e535926}.pixel-art{display:grid;aspect-ratio:1 / 1;width:100%;overflow:hidden;border:4px solid #183c42;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px #ffffff61;grid-template-columns:repeat(var(--pixel-size),1fr);grid-template-rows:repeat(var(--pixel-size),1fr);image-rendering:pixelated}.pixel{display:block;min-width:0;min-height:0}.compass-panel{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:78px;padding:10px 12px;border:1px solid rgba(19,40,43,.1);border-radius:8px;background:#ffffffb8}.compass{position:relative;width:58px;height:58px;border:2px solid rgba(20,56,61,.42);border-radius:999px;background:linear-gradient(90deg,transparent 48%,rgba(20,56,61,.18) 49% 51%,transparent 52%),linear-gradient(0deg,transparent 48%,rgba(20,56,61,.18) 49% 51%,transparent 52%),#f7fffb}.compass:before{position:absolute;top:4px;left:50%;color:#c65f38;content:"N";font-size:.68rem;font-weight:900;transform:translate(-50%)}.compass-needle{position:absolute;top:50%;left:50%;width:9px;height:27px;border-radius:999px 999px 2px 2px;background:#e55f3f;transform:translate(-50%,-90%);transform-origin:50% 90%;transition:transform .18s ease-out}.compass-needle:after{position:absolute;right:1px;bottom:-18px;left:1px;height:18px;border-radius:2px 2px 999px 999px;background:#173b45;content:""}.compass-center{position:absolute;top:50%;left:50%;width:11px;height:11px;border:2px solid #f7fffb;border-radius:999px;background:#173b45;transform:translate(-50%,-50%)}.compass-info{min-width:0}.compass-label,.compass-text{margin:0}.compass-label{color:#31615e;font-size:.76rem;font-weight:900}.compass-text{overflow-wrap:anywhere;color:#243f42;font-size:.95rem;font-weight:800;line-height:1.35}.compass-button{min-height:38px;padding:0 13px;background:#f2c466;color:#173b45;font-size:.86rem;box-shadow:none}.hint-panel{display:grid;align-content:center;min-height:122px;padding:18px;border:1px solid rgba(19,40,43,.1);border-radius:8px;background:#ffffffc7}.waiting,.hint-label,.hint-text,.answer{margin:0}.waiting{color:#5a7273;font-weight:700}.hint-label{margin-bottom:8px;color:#c65f38;font-size:.82rem;font-weight:900}.hint-text{color:#243f42;font-size:1.02rem;line-height:1.65}.answer{color:#14383d;font-size:2rem;font-weight:900;line-height:1.15}.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.primary-button{background:#e55f3f;color:#fffaf1;box-shadow:0 10px 24px #bc462a38}.secondary-button{border:1px solid rgba(20,56,61,.18);background:#173b45;color:#f7fffb}.ghost-button{min-height:38px;padding:0 14px;border:1px solid rgba(20,56,61,.16);background:#ffffff9e;color:#173b45;font-size:.9rem}@media (max-width: 380px){.screen{padding-right:14px;padding-left:14px}h1{font-size:2.35rem}.controls{grid-template-columns:1fr}.compass-panel{grid-template-columns:54px minmax(0,1fr)}.compass{width:50px;height:50px}.compass-button{grid-column:1 / -1}.answer{font-size:1.65rem}}