*{box-sizing:border-box}body{margin:0;background:#f6f1e4;color:#405038;font:15px/1.7 'Hiragino Sans',sans-serif}header{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 4%;background:#fffbef}a{color:#546d3e;text-underline-offset:4px}button,select{font:inherit;color:inherit}button{border:1px solid #acb990;border-radius:18px;padding:10px 17px;background:#fffbef;cursor:pointer;min-height:44px}button:disabled{opacity:.65;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible,select:focus-visible{outline:3px solid #8a5a2b;outline-offset:3px}.sample{text-align:center;font-size:12px;background:#e8ebd9;padding:9px}.game-frame{position:relative;width:100%;height:min(73vh,760px);min-height:460px;overflow:hidden;background:#d6e5c1}canvas{display:block;width:100%;height:100%;outline:none}.place-label{position:absolute;top:20px;left:4%;pointer-events:none;background:#fff9e6e0;padding:12px 20px;border-radius:25px;max-width:65%}.place-label p{font-size:11px;margin:0}.place-label h1{font-size:22px;margin:4px 0}.metrics{position:absolute;right:3%;top:20px;display:flex;flex-direction:column;gap:8px;font-size:11px;background:#fff9e6df;padding:10px;border-radius:14px}.metrics select{max-width:140px;font-size:12px;background:#fffaf0;border:1px solid #adba95;border-radius:8px;padding:7px}#hint{position:absolute;left:50%;bottom:85px;transform:translateX(-50%);background:#fff9e6e6;max-width:70%;width:max-content;border-radius:20px;padding:9px 17px;font-size:13px;text-align:center}#interact{position:absolute;right:4%;bottom:20px;background:#58753c;color:white;border:0;min-width:170px;box-shadow:0 5px 0 #496330}.pad{position:absolute;left:4%;bottom:20px;display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:7px}.pad button{padding:0;font-size:23px;background:#fff9e8e8;touch-action:none;user-select:none}.pad button[data-dir=up]{grid-column:2}.pad button[data-dir=left]{grid-column:1;grid-row:2}.pad button[data-dir=down]{grid-column:2;grid-row:2}.pad button[data-dir=right]{grid-column:3;grid-row:2}.pad button.active{background:#bfd29b}#loading{position:absolute;inset:30%;background:#fff9e9;padding:20px;text-align:center;border-radius:25px}.under{padding:20px 4%;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.under p{font-size:12px;margin:0}dialog{width:min(620px,92vw);max-height:85vh;overflow:auto;border:2px solid #d3c29c;border-radius:30px;background:#fffbef;color:#405038;padding:30px}dialog::backdrop{background:#31432988}#close-detail{float:right;border:0;font-size:25px}.badge{font-size:12px;background:#eee4cf;padding:5px 12px;display:inline-block;border-radius:13px}.photo-placeholder{padding:35px;border:1px dashed #b8bda5;border-radius:20px;background:#eef0df;text-align:center}.cards{display:grid;grid-template-columns:1fr 1fr;gap:15px}.cards button{text-align:left}h2{font-size:25px}.fallback{max-width:850px;margin:35px auto;padding:0 6%}.fallback article{padding:24px;background:#fffaf0;border-radius:25px;margin-bottom:20px}@media(max-width:600px){header{font-size:11px;flex-wrap:wrap;gap:9px;padding:10px 4%}header span{order:-1;width:100%}.sample{font-size:10px}.game-frame{height:67vh;min-height:480px}.place-label{max-width:90%;padding:8px 12px;top:12px}.place-label h1{font-size:16px}.place-label p{font-size:9px}.metrics{top:88px;font-size:10px}.pad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:5px;bottom:14px}#interact{min-width:0;width:43%;font-size:11px;padding:12px 8px;bottom:17px}#hint{bottom:128px;width:90%;max-width:90%;font-size:11px}.under{gap:12px}.cards{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}