:root{--bg:#f4f2ed;--fg:#2a2118;--card:#fff;--bd:#d9cfbc;--btn:#f0ece3;--wood:#dcae62}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1e1b17;--fg:#f1eadb;--card:#2a2621;--bd:#4a4235;--btn:#38322a}}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,"Segoe UI",Tahoma,sans-serif;padding:12px}
h1{font-size:18px;text-align:center;margin:4px 0 10px}
.bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:10px}
button{font:inherit;font-size:14px;color:var(--fg);background:var(--btn);border:2px solid var(--bd);border-radius:12px;padding:8px 12px}
#area{position:relative;direction:ltr;margin:14px auto 0;touch-action:none}
#tray{position:absolute;border-radius:14px;background:linear-gradient(#ebc680,#d9a85a);border:2px solid #b07d3c;box-shadow:0 6px 0 #9a6c32}
.hole{position:absolute;background:#c99b52;box-shadow:inset 2px 2px 3px rgba(80,50,10,.45)}
.p{position:absolute;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;will-change:left,top}
.p i{position:absolute;box-sizing:border-box;border:2px solid #4a2c1a;border-radius:3px}
.p i b{position:absolute;left:25%;top:25%;width:50%;height:50%;border-radius:50%;background:#3b2018;box-shadow:0 0 0 3px #53302a}

#hlp{border-radius:50%;width:40px;height:40px;padding:0;font-size:18px}
#msg{text-align:center;margin-top:12px;font-weight:700;min-height:22px}