:root{--cream:#fff6f1;--berry:#e63950;--berry-deep:#b0213a;--pink:#ffb3c1;--blush:#ffe3e8;--leaf:#3a9d5d;--seed:#ffd36b;--ink:#4a1520;--muted:#9a5a66;--header-h:96px;color:var(--ink);font-family:"M PLUS Rounded 1c",Hiragino Maru Gothic ProN,system-ui,sans-serif}*{box-sizing:border-box}html,body{height:100%}body{background:radial-gradient(circle at 12px 12px, #e6395012 3px, transparent 4px) 0 0 / 48px 48px, radial-gradient(circle at 36px 36px, #3a9d5d0f 3px, transparent 4px) 0 0 / 48px 48px, var(--cream);grid-template-rows:var(--header-h) minmax(0, 1fr);margin:0;display:grid;overflow:hidden}header{background:linear-gradient(180deg, var(--berry), var(--berry-deep));color:#fff;box-shadow:0 6px 0 var(--pink);z-index:2;align-items:center;gap:24px;padding:0 28px;display:flex;position:relative}.brand{align-items:center;gap:14px;display:flex}.logo{filter:drop-shadow(0 3px #00000026);font-size:56px;animation:3s ease-in-out infinite bob}.name{letter-spacing:.5px;font-size:40px;font-weight:800;line-height:1}.tagline{opacity:.85;margin-top:4px;font-size:16px}.round-badge{background:#ffffff29;border:2px solid #ffffff59;border-radius:999px;align-items:center;gap:12px;margin:0 auto;padding:8px 20px;font-size:22px;display:flex}.round-badge span{opacity:.85;font-size:18px}.score{align-items:center;gap:12px;display:flex}.score-label{text-align:right;font-size:18px;font-weight:800;line-height:1.1}.score-label small{opacity:.8;letter-spacing:2px;font-size:12px}.score strong{min-width:72px;height:72px;color:var(--berry);box-shadow:0 4px 0 var(--pink);background:#fff;border-radius:50%;place-items:center;font-size:36px;display:grid}main{grid-template-columns:minmax(0,1fr) 340px;gap:24px;min-height:0;padding:24px 28px;display:grid}.stage{background:var(--ink);box-shadow:0 10px 0 var(--pink), 0 20px 40px #b0213a40;border:8px solid #fff;border-radius:28px;place-self:center;min-width:480px;min-height:270px;position:relative;overflow:hidden}.stage video{max-width:100%;max-height:calc(100vh - var(--header-h) - 64px);display:block;transform:scaleX(-1)}.stage canvas{width:100%;height:100%;position:absolute;inset:0}.status{text-align:center;color:#fff;background:var(--berry);place-content:center;gap:6px;padding:20px;font-size:28px;font-weight:800;display:grid;position:absolute;inset:0}.status small{opacity:.85;font-size:18px;font-weight:500;display:block}.prompt{text-align:center;width:max-content;max-width:92%;box-shadow:0 6px 0 var(--pink);border:4px solid var(--berry);background:#fffffff0;border-radius:24px;padding:14px 32px;transition:border-color .2s,transform .2s;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.prompt .ja{color:var(--berry-deep);font-size:clamp(26px,3.2vw,46px);font-weight:800;line-height:1.25}.prompt .en{color:var(--muted);margin-top:2px;font-size:clamp(16px,1.7vw,24px)}body.matching .prompt{border-color:var(--leaf);transform:translate(-50%)scale(1.04)}.celebrate{opacity:0;pointer-events:none;background:#fff;position:absolute;inset:0}.celebrate.flash{animation:.7s ease-out flash}.photo{z-index:50;opacity:0;visibility:hidden;background:#4a15208c;place-items:center;padding:24px;transition:opacity .3s,visibility .3s;display:grid;position:fixed;inset:0}.photo.show{opacity:1;visibility:visible}.polaroid{--rot:-2deg;border:6px solid var(--berry);width:min(880px,100%);max-height:100%;box-shadow:0 12px 0 var(--pink), 0 30px 60px #00000059;transform:rotate(var(--rot));background:#fff;border-radius:22px;flex-direction:column;gap:12px;padding:18px 22px 16px;display:flex}.photo.show .polaroid{animation:.7s cubic-bezier(.2,1.4,.4,1) develop}.photo-head{text-align:center;justify-content:center;align-items:center;gap:18px;display:flex}.photo-head .ja{color:var(--berry);text-shadow:0 4px 0 var(--blush);font-size:clamp(34px,4.4vw,64px);font-weight:800;line-height:1.05}.photo-head .en{color:var(--muted);font-size:clamp(18px,2vw,28px);font-weight:800}.photo-logo{font-size:clamp(32px,4vw,56px);animation:3s ease-in-out infinite bob}.photo-frame{background:radial-gradient(circle at 8px 8px, var(--seed) 2px, transparent 3px) 0 0 / 22px 22px, linear-gradient(135deg, #ff5470, var(--berry-deep));border-radius:16px;align-self:center;max-width:100%;min-height:0;padding:10px;position:relative}.photo-frame canvas{background:var(--ink);border-radius:10px;width:auto;max-width:100%;height:auto;max-height:calc(100vh - 380px);display:block}.corner{filter:drop-shadow(0 3px #0003);font-size:38px;position:absolute}.corner.tl{top:-18px;left:-16px;transform:rotate(-25deg)}.corner.tr{top:-18px;right:-16px;transform:rotate(25deg)}.corner.bl{bottom:-18px;left:-16px;transform:rotate(-155deg)}.corner.br{bottom:-18px;right:-16px;transform:rotate(155deg)}.photo-caption{flex-direction:column;align-items:center;gap:8px;display:flex}.photo-caption .kind{color:var(--muted);letter-spacing:1px;font-size:18px;font-weight:800}.chips{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.chip{--c:var(--berry);background:var(--blush);border:3px solid var(--c);border-radius:999px;align-items:center;gap:10px;padding:6px 18px 6px 8px;display:inline-flex}.chip b{background:var(--c);color:#fff;border-radius:999px;padding:2px 10px;font-size:18px}.chip i{font-size:40px;font-style:normal;line-height:1}.chip>span{text-align:left;flex-direction:column;line-height:1.1;display:flex}.chip .cj{color:var(--berry-deep);font-size:clamp(22px,2.4vw,32px);font-weight:800}.chip .ce{color:var(--muted);font-size:clamp(14px,1.4vw,18px);font-weight:500}.photo-foot{color:var(--muted);justify-content:space-between;font-size:15px;font-weight:800;display:flex}.photo-timer{background:var(--blush);border-radius:99px;height:6px;overflow:hidden}.photo-timer div{background:var(--berry);transform-origin:0;width:100%;height:100%}.photo.show .photo-timer div{animation:linear forwards drain}.side{flex-direction:column;gap:22px;min-height:0;display:flex}.jar-wrap{flex-direction:column;align-items:center;gap:12px;display:flex}.jar{flex-direction:column;align-items:center;display:flex}.lid{background:repeating-linear-gradient(90deg, var(--berry) 0 18px, #fff 18px 36px);border:4px solid var(--berry-deep);z-index:1;border-radius:10px 10px 4px 4px;width:150px;height:30px;position:relative}.glass{width:180px;height:210px;box-shadow:inset 0 0 0 3px var(--pink), 0 8px 0 var(--pink);background:#ffffff8c;border:6px solid #fff;border-radius:26px 26px 40px 40px;margin-top:-4px;position:relative;overflow:hidden}.jam{background:radial-gradient(circle at 20% 30%, #ffd36bb3 2px, transparent 3px) 0 0 / 22px 22px, linear-gradient(180deg, #ff5470, var(--berry-deep));height:0;transition:height .15s linear;position:absolute;bottom:0;left:0;right:0}.jam:before{content:"";background:radial-gradient(at 50% 100%,#ff5470 60%,#0000 62%) 0 0/40px 20px repeat-x;width:120%;height:20px;animation:1.2s linear infinite wave;position:absolute;top:-10px;left:-10%}.jar-label{width:92px;height:92px;box-shadow:0 0 0 4px var(--pink);background:#fff;border-radius:50%;place-items:center;font-size:52px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}body.matching .jar-label{animation:.5s ease-in-out infinite wiggle}.jar-caption{text-align:center}.jar-caption .ja{color:var(--berry-deep);font-size:22px;font-weight:800}.jar-caption .en{color:var(--muted);font-size:15px}.people{flex-direction:column;gap:10px;display:flex;overflow:hidden}.person{border-left:10px solid var(--c);box-shadow:0 4px 0 var(--blush);background:#fff;border-radius:20px;align-items:center;gap:12px;padding:10px 14px;display:flex}.tag{color:var(--c);width:34px;font-size:20px;font-weight:800}.face{font-size:40px;line-height:1}.info{flex:1}.emo-name{margin-bottom:6px;font-size:20px;font-weight:800}.emo-name small{color:var(--muted);margin-left:4px;font-size:14px;font-weight:500}.bar{background:var(--blush);border-radius:99px;height:14px;overflow:hidden}.fill{background:var(--berry);border-radius:99px;height:100%;transition:width .15s linear}.fill.full{background:var(--leaf)}.gear{opacity:.15;cursor:pointer;background:0 0;border:0;font-size:22px;position:fixed;bottom:10px;right:10px}.gear:hover{opacity:.8}dialog{width:min(480px,92vw);color:var(--ink);background:var(--cream);box-shadow:0 10px 0 var(--pink);border:0;border-radius:24px;padding:24px 28px}dialog::backdrop{background:#4a152066}dialog h2{color:var(--berry-deep);margin:0 0 8px}dialog label{margin-top:14px;font-weight:500;display:block}dialog input[type=range],dialog select{width:100%;accent-color:var(--berry);margin-top:6px}dialog select,dialog button{font:inherit;border:2px solid var(--pink);color:var(--ink);background:#fff;border-radius:12px;padding:8px 12px}dialog .check{align-items:center;gap:8px;display:flex}dialog .buttons{justify-content:space-between;margin-top:20px;display:flex}dialog button:last-child{background:var(--berry);color:#fff;border-color:var(--berry)}.hint{color:var(--muted);margin-bottom:0;font-size:14px}@keyframes bob{50%{transform:translateY(-4px)rotate(-6deg)}}@keyframes wave{to{background-position-x:40px}}@keyframes wiggle{50%{transform:translate(-50%,-50%)rotate(8deg)scale(1.08)}}@keyframes flash{0%{opacity:.9}to{opacity:0}}@keyframes develop{0%{opacity:0;transform:rotate(8deg)scale(.4)}}@keyframes drain{to{transform:scaleX(0)}}@media (width<=1000px){:root{--header-h:80px}main{grid-template-columns:1fr;overflow:auto}body{overflow:auto}.stage{width:100%;min-width:0}.stage video{width:100%}.round-badge{display:none}.name{font-size:30px}}.waiting{color:var(--muted);font-size:13px}.status~.prompt{display:none}.round-badge:empty{visibility:hidden}.stage:has(.status){aspect-ratio:16/9;width:min(100%,960px)}.person .goal{background:var(--blush);border:2px dashed var(--c);border-radius:14px;flex-direction:column;align-items:center;padding:6px 10px;font-size:34px;line-height:1;display:flex}.person .goal small{color:var(--berry-deep);margin-top:4px;font-size:12px;font-weight:800}.person .goal small.en{color:var(--muted);margin-top:2px;font-weight:500}.saved-cards{margin-top:20px}.saved-cards button{width:100%}#cardStatus{color:var(--muted);white-space:pre-line;margin:8px 0 0;font-size:13px}#cardStatus.unsaved{color:var(--berry-deep)}