*{box-sizing:border-box}
body{margin:0;overflow:hidden;background:#c8dac0;color:#342c31}
#field{position:fixed;inset:0;overflow:hidden;isolation:isolate;background-image:url('/meadow.svg'),radial-gradient(ellipse at 45% 40%,#e1e9c8 0,#c7dcbf 75%,#bbd4b7 100%);background-size:368px 291px,cover}
.spud{position:absolute;top:0;left:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;will-change:transform;outline:none;user-select:none}
.spud:focus-visible{outline:3px dashed #534169;border-radius:45%;outline-offset:1px}
.shadow{position:absolute;bottom:10%;left:20%;width:64%;height:13%;background:#68876f50;border-radius:50%}
.hopper,.turn,.face,.back{position:absolute;inset:0;display:block}
.turn{transform-style:preserve-3d;transition:transform .46s cubic-bezier(.23,.8,.32,1)}
.flipped .turn{transform:rotateY(180deg)}
.face,.back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.back{transform:rotateY(180deg)}
.spud svg{width:100%;height:100%;overflow:visible}
.chosen{filter:drop-shadow(0 0 6px #fff6ac)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:10000;overflow:hidden}
#confetti i{position:absolute;top:-5vh;width:11px;height:18px;border-radius:4px;animation:fall var(--time) linear infinite}
@keyframes fall{to{transform:translate(var(--drift),110vh) rotate(440deg)}}
#again{position:fixed;z-index:10001;bottom:24px;right:24px;border:2px solid #423936;background:#fff5da;color:#493e39;border-radius:50%;width:48px;height:48px;cursor:pointer}
#again svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.turn{transition:none}#confetti i{animation:none;top:var(--quiet-y)}}
.note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);display:grid;place-items:center;width:clamp(134px,10vw,168px);min-height:86px;padding:16px 12px 14px;background:linear-gradient(150deg,#fff5a7,#ffe277);color:#3a2d36;font:600 clamp(16px,1.2vw,19px)/1.18 "Marker Felt","Trebuchet MS",sans-serif;text-align:center;text-wrap:balance;box-shadow:1px 4px 5px #46352a36;border-radius:1px 2px 9px 2px}
.note::before{content:"";position:absolute;width:36px;height:11px;top:-5px;left:calc(50% - 18px);transform:rotate(3deg);background:#f1d5a9e8}
.note::after{content:"";position:absolute;right:0;bottom:0;border:5px solid transparent;border-top-color:#eac455;border-left-color:#eac455}
#verdict{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;align-content:center;pointer-events:none;background:radial-gradient(ellipse at center,transparent 30%,#2c4a2e26 100%)}
#verdict[hidden]{display:none}
.verdict-big{font:900 clamp(56px,14vw,150px)/1.05 "PingFang SC","Microsoft YaHei","Trebuchet MS",sans-serif;letter-spacing:.02em;text-align:center;background:linear-gradient(90deg,#e33,#f93,#e6c200,#3c6,#39f,#93c,#e33);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:verdict-slide 4s linear infinite,verdict-pop .45s cubic-bezier(.2,1.6,.4,1)}
.verdict-sub{margin-top:14px;font:700 clamp(15px,3.4vw,22px)/1.3 "PingFang SC","Microsoft YaHei",sans-serif;color:#42352a;background:#fff5daee;border:2px solid #423936;border-radius:999px;padding:8px 20px;animation:verdict-pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes verdict-slide{to{background-position:200% 0}}
@keyframes verdict-pop{from{transform:scale(.4) rotate(-6deg);opacity:0}}
.note.fake-note{background:linear-gradient(150deg,#e9e5da,#d8d2c2);color:#6b6252}
.fake-stamp{position:absolute;top:-13px;right:-9px;transform:rotate(16deg);width:36px;height:36px;display:grid;place-items:center;border:3px solid #d43a2f;border-radius:50%;color:#d43a2f;background:#fffdf4e6;font:900 19px/1 "PingFang SC","Microsoft YaHei",sans-serif}
@media(prefers-reduced-motion:reduce){.verdict-big,.verdict-sub{animation:none}}
#startscreen{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:16px;background:#2c4a2e59}
#startscreen[hidden]{display:none}
.start-card{background:linear-gradient(160deg,#fffbe9,#ffedb5);border:2px solid #423936;border-radius:14px;box-shadow:0 12px 32px #2c2c2c45;max-width:520px;width:100%;max-height:92vh;overflow:auto;padding:22px 20px 16px;text-align:center}
.start-title{font:900 clamp(24px,6vw,32px)/1.2 "PingFang SC","Microsoft YaHei",sans-serif;color:#342c31}
.start-hint{margin:8px 0 0;font:600 14px/1.5 "PingFang SC","Microsoft YaHei",sans-serif;color:#6d5b45}
.tpl-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.tpl{border:2px solid #b9a86a;border-radius:10px;background:#fffdf4;padding:12px 10px;cursor:pointer;text-align:center;font:inherit;color:#342c31}
.tpl.selected{border-color:#d43a2f;background:#fff3c4;box-shadow:0 0 0 2px #d43a2f30}
.tpl-tag{display:block;font:800 12px/1.3 "PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.25em;color:#a33327}
.tpl-name{display:block;font:900 22px/1.3 "PingFang SC","Microsoft YaHei",sans-serif;margin:4px 0 2px}
.tpl-desc{display:block;font:500 12px/1.4 "PingFang SC","Microsoft YaHei",sans-serif;color:#7a6a55}
#customname{width:100%;margin:2px 0;border:0;border-bottom:2px dashed #b9a86a;background:transparent;font:700 16px/1.5 "PingFang SC","Microsoft YaHei",sans-serif;text-align:center;color:#342c31;outline:none;padding:2px 0}
#customname:focus{border-bottom-color:#d43a2f}
#nameerror{margin:0 0 10px;font:700 13px/1.5 "PingFang SC","Microsoft YaHei",sans-serif;color:#d43a2f}
#nameerror[hidden]{display:none}
#startbtn{background:#d43a2f;color:#fff;border:2px solid #8f241c;border-radius:999px;padding:12px 46px;font:900 20px/1.2 "PingFang SC","Microsoft YaHei",sans-serif;cursor:pointer;box-shadow:0 4px 0 #8f241c}
#startbtn:active{transform:translateY(2px);box-shadow:0 2px 0 #8f241c}
.disclaimer{margin:16px 0 0;font:500 11.5px/1.7 "PingFang SC","Microsoft YaHei",sans-serif;color:#8a7a5f;text-align:left}
@media(max-width:520px){
.note{width:clamp(112px,36vw,168px);min-height:74px;font-size:15px;padding:13px 9px 11px}
#again{width:44px;height:44px;bottom:16px;right:16px}
.verdict-sub{padding:7px 14px;max-width:92vw;text-align:center}
.fake-stamp{width:30px;height:30px;font-size:16px;border-width:2.5px}
}
