*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}:root{--bg: #ffffff;--bg2: #f5f5f5;--surface: #eeeeee;--border: #dedede;--border2: #c8c8c8;--text: #111111;--text2: #555555;--text3: #999999;--radius: 10px;--font: "Inter", system-ui, sans-serif;--max: 680px}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;-webkit-font-smoothing:antialiased;min-height:100vh}@keyframes shake{0%,to{transform:translate(0)}15%{transform:translate(-9px)}30%{transform:translate(9px)}45%{transform:translate(-6px)}60%{transform:translate(6px)}75%{transform:translate(-3px)}90%{transform:translate(3px)}}@keyframes spring-in{0%{transform:scale(0) rotate(-8deg);opacity:0}55%{transform:scale(1.2) rotate(3deg);opacity:1}78%{transform:scale(.94)}to{transform:scale(1) rotate(0)}}@keyframes burst{0%{r:10px;fill-opacity:.5}to{r:72px;fill-opacity:0}}@keyframes hover-pulse{0%,to{fill-opacity:.11}50%{fill-opacity:.2}}@keyframes wave{0%,to{transform:scale(1) translateY(0)}40%{transform:scale(1.1) translateY(-5px)}70%{transform:scale(.96) translateY(2px)}}@keyframes label-pop{0%{opacity:0;transform:translateY(-3px) scale(.9)}60%{transform:translateY(1px) scale(1.02)}to{opacity:1;transform:none}}@keyframes wrong-glow{0%,to{outline-color:#dc262680}50%{outline-color:#dc2626e6}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes reveal-label{0%{opacity:.45}to{opacity:1}}.app{display:flex;flex-direction:column;align-items:center;min-height:100vh}.app.dragging{-webkit-user-select:none;user-select:none}header{width:100%;max-width:var(--max);display:flex;align-items:center;justify-content:space-between;padding:16px 20px;position:relative;border-bottom:1px solid var(--border)}.header-center{position:absolute;left:50%;transform:translate(-50%);text-align:center;pointer-events:none}.header-right{display:flex;gap:6px;align-items:center}.logo{font-size:1.1rem;font-weight:800;letter-spacing:.2em;color:var(--text)}.header-sub{font-size:.72rem;color:var(--text3);margin-top:3px;letter-spacing:.04em}.icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:.95rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--font);transition:border-color .15s,background .15s}.icon-btn:hover{border-color:var(--border2);background:var(--bg2)}.loading{display:flex;align-items:center;justify-content:center;height:50vh}.spinner{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--border);border-top-color:var(--text2);animation:spin .85s linear infinite}.prev-banner{width:100%;max-width:var(--max);background:#fffbeb;border-bottom:1px solid #fde68a;padding:9px 20px;font-size:.82rem;color:#92400e;display:flex;align-items:center;gap:8px}.banner-link{background:none;border:none;font-family:var(--font);font-weight:700;font-size:inherit;color:inherit;cursor:pointer;text-decoration:underline;padding:0}.ad-unit{overflow:hidden;text-align:center}.ad-unit-header{width:100%;max-width:var(--max);min-height:90px;background:var(--bg2);border-bottom:1px solid var(--border)}.ad-unit-left,.ad-unit-right{display:none;position:fixed;top:50%;transform:translateY(-50%);width:160px;min-height:600px;background:var(--bg2)}.ad-unit-left{left:0}.ad-unit-right{right:0}.ad-unit-below-puzzle{width:100%;max-width:var(--max);min-height:90px;background:var(--bg2);border-radius:var(--radius)}.ad-unit-modal{width:100%;min-height:60px;background:var(--bg2);border-radius:var(--radius);margin:4px 0}@media (min-width: 1080px){.ad-unit-left,.ad-unit-right{display:block}}main{width:100%;max-width:var(--max);padding:14px 20px 36px;display:flex;flex-direction:column;gap:14px}.game-info{display:flex;align-items:center;justify-content:flex-end;min-height:28px}.lives{display:flex;align-items:center;justify-content:center;gap:5px}.life{font-size:1.1rem;color:#dc2626;transition:opacity .3s}.life.gone{opacity:.15}.hard-tag{font-size:.65rem;font-weight:700;letter-spacing:.1em;background:#111;color:#fff;padding:2px 7px;border-radius:4px;margin-left:4px}.timer{font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text2);letter-spacing:.04em}.timer.done{color:var(--text3)}.venn-wrap{width:100%;position:relative}.venn-wrap.shake{animation:shake .65s cubic-bezier(.36,.07,.19,.97)}.venn-svg{width:100%;height:auto;display:block;overflow:visible}.region-hover{animation:hover-pulse 1s ease-in-out infinite}.burst{animation:burst .5s ease-out forwards}.circle-labels{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.clabel{position:absolute;max-width:22%;font-size:.7rem;font-weight:700;letter-spacing:.04em;line-height:1.35;text-align:center;opacity:.5;transition:opacity .4s}.circle-labels.revealed .clabel{opacity:1;animation:label-pop .4s cubic-bezier(.34,1.4,.64,1) both}.clabel-a{top:3%;left:50%;transform:translate(-50%)}.clabel-b{bottom:3%;left:6%}.clabel-c{bottom:3%;right:6%}.region-cell{display:flex;flex-direction:column;align-items:center;gap:4px}.region-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.region-cell-overlay{position:absolute;transform:translate(-50%,-50%);width:20%}.region-cell-overlay .placed-chip{pointer-events:auto;touch-action:none}.region-badge{font-family:var(--font);font-size:.62rem;font-weight:700;letter-spacing:.05em;padding:2px 9px;border-radius:20px;border:1.5px solid var(--c);color:var(--c);background:#ffffffeb;white-space:nowrap;display:inline-block;transition:background .25s,color .25s}.region-badge.badge-full{background:var(--c);color:#fff}.region-badge.empty{opacity:.28;border-style:dashed}.chip-pile{display:flex;flex-wrap:wrap;gap:3px;align-items:center;justify-content:center}.placed-chip{font-family:var(--font);font-size:.64rem;font-weight:600;padding:3px 8px;border-radius:5px;cursor:grab;background:var(--c);color:#fff;white-space:nowrap;-webkit-user-select:none;user-select:none;animation:spring-in .38s cubic-bezier(.34,1.56,.64,1) both;transition:opacity .15s,filter .15s}.placed-chip:hover{filter:brightness(.88)}.placed-chip:active{cursor:grabbing}.placed-chip.ghost{opacity:.22}.placed-chip.wrong{outline:2px solid #dc2626;outline-offset:1px;animation:spring-in .38s both,wrong-glow 2s ease-in-out .3s infinite}.placed-chip.wave{animation:spring-in .38s both,wave .6s ease calc(var(--i) * 60ms) both}.drag-ghost{position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-50%) rotate(3deg) scale(1.06);background:var(--text);color:var(--bg);font-family:var(--font);font-size:.88rem;font-weight:600;padding:8px 16px;border-radius:var(--radius);box-shadow:0 8px 28px #0000002e;white-space:nowrap;will-change:transform}.status{text-align:center;font-size:.88rem;min-height:22px;color:var(--text3);transition:color .2s}.status.error{color:#dc2626}.status.success{color:#16a34a;font-weight:600}.dots{display:flex;gap:6px;justify-content:center}.attempt-heart{font-size:1.1rem;color:var(--surface);transition:color .2s}.attempt-heart.win{color:#16a34a}.attempt-heart.miss{color:#dc2626}.start-panel{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px 0 4px}.toggle-switch{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.toggle-switch input{position:absolute;opacity:0;width:0;height:0}.toggle-track{width:40px;height:22px;border-radius:11px;background:var(--surface);border:1px solid var(--border2);position:relative;flex-shrink:0;transition:background .2s}.toggle-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--text3);transition:transform .2s,background .2s}.toggle-on .toggle-track{background:var(--text);border-color:var(--text)}.toggle-on .toggle-thumb{transform:translate(18px);background:#fff}.toggle-label{font-size:.88rem;font-weight:500;color:var(--text);white-space:normal}.toggle-sub{color:var(--text3);font-weight:400}.btn-start{background:var(--text);color:var(--bg);font-family:var(--font);font-weight:700;font-size:1rem;padding:13px 40px;border-radius:var(--radius);border:none;cursor:pointer;letter-spacing:.04em;transition:background .15s,transform .1s}.btn-start:hover{background:#333;transform:translateY(-1px)}.btn-start:active{transform:none}.controls{display:flex;gap:8px;justify-content:center}button{font-family:var(--font);cursor:pointer;border:none;border-radius:var(--radius)}button:disabled{opacity:.32;cursor:default}.btn-primary{background:var(--text);color:var(--bg);font-weight:700;font-size:.9rem;padding:11px 26px;transition:background .15s,transform .1s}.btn-primary:hover:not(:disabled){background:#333}.btn-primary:active:not(:disabled){transform:scale(.98)}.btn-primary.ready{background:#16a34a}.btn-secondary{background:var(--bg2);color:var(--text2);font-weight:600;font-size:.9rem;padding:11px 20px;border:1px solid var(--border);transition:background .15s}.btn-secondary:hover:not(:disabled){background:var(--surface)}.btn-share{background:transparent;color:var(--text2);font-weight:600;font-size:.9rem;padding:11px 16px;border:1px solid var(--border);transition:background .15s,border-color .15s}.btn-share:hover{background:var(--bg2);border-color:var(--border2)}.bank-label{font-size:.68rem;letter-spacing:.16em;color:var(--text3);text-align:center;margin-bottom:8px}.bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:16px 14px;min-height:56px}.chip{background:var(--bg);color:var(--text);font-size:.88rem;font-weight:500;padding:8px 15px;border-radius:22px;border:1px solid var(--border2);cursor:grab;-webkit-user-select:none;user-select:none;transition:background .12s,border-color .12s,transform .1s,opacity .2s}.chip:hover:not(.placed){background:var(--bg2);border-color:#aaa}.chip:active:not(.placed){cursor:grabbing}.chip.placed{opacity:.25;cursor:default;pointer-events:none}.chip.selected{background:var(--text);color:var(--bg);border-color:var(--text)}.chip.dragging{opacity:.15}footer{margin-top:auto;padding:24px 20px 16px;text-align:center;font-size:.68rem;color:var(--text3);opacity:.45;letter-spacing:.05em}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:flex-end;justify-content:center;animation:fade-in .2s ease}@media (min-height: 620px){.backdrop{align-items:center}}.modal{background:var(--bg);border:1px solid var(--border);border-radius:18px 18px 0 0;padding:28px 22px 36px;width:100%;max-width:460px;animation:slide-up .3s cubic-bezier(.34,1.1,.64,1) both}@media (min-height: 620px){.modal{border-radius:18px;max-height:88vh;overflow-y:auto}}.modal-title{font-size:1.1rem;font-weight:800;letter-spacing:.14em;text-align:center;margin-bottom:6px}.modal-sub{font-size:.84rem;color:var(--text2);text-align:center;line-height:1.5;margin-bottom:20px}.share-icon{font-size:2.4rem;text-align:center;margin-bottom:8px}.share-stats{display:flex;align-items:center;justify-content:center;gap:20px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px 20px;margin-bottom:18px}.stat{text-align:center}.stat-n{display:block;font-size:1.8rem;font-weight:800}.stat-l{font-size:.62rem;color:var(--text3);letter-spacing:.14em;text-transform:uppercase}.stat-sep{width:1px;height:40px;background:var(--border)}.reveal-block,.emoji-block{margin-bottom:16px}.block-label{font-size:.62rem;letter-spacing:.16em;color:var(--text3);text-transform:uppercase;text-align:center;margin-bottom:8px}.reveal-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;border:1px solid var(--c);color:var(--c);font-size:.84rem;font-weight:600;margin-bottom:6px;animation:spring-in .3s calc(var(--i) * 80ms) both}.reveal-dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex-shrink:0}.emoji-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}.emoji-n{font-size:.7rem;color:var(--text3);width:22px;flex-shrink:0}.share-pre{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:.76rem;color:var(--text2);font-family:monospace;white-space:pre;overflow-x:auto;margin-bottom:14px}.btn-outline{background:transparent;color:var(--text2);font-size:.85rem;font-weight:600;padding:10px;border:1px solid var(--border);border-radius:var(--radius);transition:background .15s;font-family:var(--font);cursor:pointer}.btn-outline:hover{background:var(--bg2)}.full{width:100%;display:block}.mt8{margin-top:8px}.help-regions{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.help-row{display:flex;align-items:center;gap:8px;font-size:.84rem}.help-list{font-size:.84rem;color:var(--text2);line-height:1.8;padding-left:1.2em;margin-bottom:20px}.help-list strong{color:var(--text)}.archive-list{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}.archive-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg);text-align:left;font-size:.88rem;color:var(--text);cursor:pointer;transition:background .12s,border-color .12s;width:100%;font-family:var(--font)}.archive-row:hover{background:var(--bg2);border-color:var(--border2)}.archive-row.current{border-color:var(--text);font-weight:600}.arc-date{flex:1}.arc-id{color:var(--text3);font-size:.8rem}.arc-result{margin-left:auto;font-size:.8rem}.res-win{color:#16a34a;font-weight:700}.res-loss{color:#dc2626;font-weight:700}.res-now{color:var(--text3);font-style:italic}.res-none{color:var(--text3)}.demo{max-width:300px;margin:0 auto 4px}.demo-venn{position:relative}.demo-bank{display:flex;justify-content:center;gap:8px;padding:8px 0 2px}.demo-chip{pointer-events:none;transition:opacity .35s}.demo-caption{text-align:center;font-size:.8rem;color:var(--text2);min-height:18px;padding:4px 0 6px;line-height:1.4}.demo-dots{display:flex;gap:5px;justify-content:center;padding-bottom:14px}.demo-dot{width:5px;height:5px;border-radius:50%;background:var(--border2);transition:background .25s}.demo-dot.active{background:var(--text2)}@media (max-width: 640px){.ad-unit-header{display:none}.ad-unit-below-puzzle{min-height:60px}}@media (max-width: 440px){:root{--max: 100% }header{padding:12px 16px}main{padding:10px 10px 28px;gap:12px}.venn-wrap{margin-left:-6px;margin-right:-6px;width:calc(100% + 12px)}.logo{font-size:.95rem}.game-info{min-height:22px}.chip{font-size:.82rem;padding:7px 12px}.placed-chip{font-size:.7rem;padding:3px 7px}.region-cell-overlay{width:22%}.btn-start{font-size:.95rem;padding:12px 32px}.controls{gap:6px}.btn-primary,.btn-secondary,.btn-share{font-size:.85rem;padding:10px 18px}}html.dark{--bg: #111111;--bg2: #1c1c1c;--surface: #2a2a2a;--border: #333333;--border2: #484848;--text: #efefef;--text2: #aaaaaa;--text3: #666666}html.dark body{background:var(--bg)}html.dark .region-badge{background:#000000b3}html.dark .modal{background:var(--bg2)}html.dark .prev-banner{background:#2a1f00;border-color:#5a3e00;color:#f0c060}html.dark .drag-ghost{background:var(--text);color:var(--bg)}