:root{font-family:Segoe UI,Yu Gothic UI,Arial,sans-serif;color:#e8efff;background:#04060e;font-synthesis:none;text-rendering:geometricprecision;--cyan: #08d6f3;--cyan-dim: #087995;--panel: rgba(10, 17, 34, .88);--border: rgba(9, 201, 234, .38);--puyo-red: #ef4444;--puyo-green: #22c55e;--puyo-blue: #3b82f6;--puyo-yellow: #facc15;--puyo-purple: #a855f7;--puyo-ojama: #e2e8f0}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}button{color:inherit;cursor:pointer}button:disabled{cursor:not-allowed}.app{min-height:100vh;overflow:hidden;position:relative;isolation:isolate;background:radial-gradient(ellipse 430px 90% at 57% 46%,rgba(8,194,231,.17),transparent 74%),radial-gradient(ellipse 470px 100% at 100% 30%,rgba(239,29,153,.15),transparent 63%),linear-gradient(135deg,#050811,#03040a 60%,#08040f)}.background-grid{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-image:linear-gradient(rgba(0,196,230,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(0,196,230,.065) 1px,transparent 1px);background-size:68px 68px;-webkit-mask-image:radial-gradient(ellipse at top,black,transparent 83%);mask-image:radial-gradient(ellipse at top,black,transparent 83%)}.analysis-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#000c;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px}.analysis-overlay p{margin:0;color:#22d3ee;font-weight:700;font-size:20px;letter-spacing:.14em;animation:status-pulse 1s ease-in-out infinite alternate}.spinner{width:64px;height:64px;border:5px solid rgba(34,211,238,.2);border-top-color:#22d3ee;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes status-pulse{to{opacity:.45}}.layout{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;gap:44px;padding:24px 24px 10px}.control-panel{width:330px;flex-shrink:0;min-height:620px;border:1px solid var(--border);border-radius:18px;padding:26px;background:linear-gradient(150deg,#070d1aeb,#0d1428e0);box-shadow:inset 0 0 40px #0bc5eb09,0 0 42px #01c0ef0e;display:flex;flex-direction:column;gap:26px}.chain-display{height:121px;position:relative;overflow:hidden;border:1px solid rgba(0,213,247,.52);border-radius:13px;background:#00030acc}.scan-beam{position:absolute;top:8px;width:92%;height:3px;background:linear-gradient(90deg,transparent,#04d9fa,transparent);box-shadow:0 0 14px #04d9fa;animation:scan 2.8s ease-out infinite}@keyframes scan{0%{transform:translateY(0);opacity:.9}to{transform:translateY(98px);opacity:0}}.chain-value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;font:800 51px/1 Consolas,Courier New,monospace;letter-spacing:-.08em;color:#f1f3f4;text-shadow:0 0 14px rgba(255,255,255,.65)}.chain-value span{margin-left:10px;color:var(--cyan);font:600 18px/1 Consolas,monospace;letter-spacing:0;text-shadow:0 0 9px rgba(0,219,247,.7)}.status{position:absolute;left:0;right:0;bottom:19px;text-align:center;font:12px/1 Consolas,monospace;letter-spacing:.15em;color:#06d9ff}.status.active{color:#ffce3b;text-shadow:0 0 8px rgba(255,197,0,.8)}.score-display{height:99px;border:1px solid rgba(229,178,14,.38);border-radius:13px;background:linear-gradient(110deg,#0c121fb3,#1d2738e6);display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center}.score-label{display:flex;align-items:center;gap:5px;color:#f4bd09;font:700 13px/1 Consolas,monospace;letter-spacing:.1em}.score-value{font:500 34px/1 Consolas,monospace;color:#ffc800;text-shadow:0 0 12px rgba(244,190,4,.7)}.calculation{border:1px solid rgba(29,205,244,.28);background:#0c1628f0;border-radius:10px;padding:10px;color:#becfe5;font:11px/1.5 Consolas,monospace;margin-bottom:-12px}.calculation strong{color:#14d8ff;display:block;border-bottom:1px solid rgba(74,107,134,.5);margin-bottom:4px}.calculation div{display:flex;justify-content:space-between}.calculation .total{margin-top:3px;border-top:1px solid rgba(74,107,134,.5);color:#ffd13b}.palette{min-height:138px;margin-top:auto;padding:14px 15px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:12px 10px;border-radius:13px;border:1px solid rgba(166,76,235,.38);background:#01030b87;transition:opacity .18s}.palette.locked{opacity:.36;pointer-events:none}.palette-puyo{height:45px;width:45px;padding:0;justify-self:center;border:2px solid transparent;background:none}.palette-puyo.selected{border-color:#ecfeff;box-shadow:0 0 13px #f6ffff,0 0 17px #03d7f4e6;transform:scale(1.08)}.puyo{position:relative;display:block;width:100%;height:100%;border-radius:50%;transition:transform 75ms,opacity 75ms}.palette .palette-puyo{width:45px;height:45px;aspect-ratio:1}.cell .puyo:not(.color-0):before{content:"";position:absolute;left:18%;top:9%;width:25%;height:15%;border-radius:100%;transform:rotate(-18deg);background:#fff9;filter:blur(1px)}.cell .puyo:not(.color-0):after{content:"";position:absolute;right:16%;bottom:14%;width:15%;height:15%;border-radius:50%;background:#ffffff4d;filter:blur(2px)}.color-0{background:transparent}.color-1{background:var(--puyo-red);border:1px solid #f87171;box-shadow:0 0 15px #ef4444cc,inset 0 0 10px #ffc8c880}.color-2{background:var(--puyo-green);border:1px solid #4ade80;box-shadow:0 0 15px #22c55ecc,inset 0 0 10px #c8ffc880}.color-3{background:var(--puyo-blue);border:1px solid #60a5fa;box-shadow:0 0 15px #3b82f6cc,inset 0 0 10px #c8c8ff80}.color-4{background:var(--puyo-yellow);border:1px solid #fde047;box-shadow:0 0 15px #facc15cc,inset 0 0 10px #ffffc880}.color-5{background:var(--puyo-purple);border:1px solid #c084fc;box-shadow:0 0 15px #a855f7cc,inset 0 0 10px #f0c8ff80}.color-6{background:var(--puyo-ojama);border:1px solid #fff;box-shadow:0 0 15px #fff9,inset 0 0 10px #fffc;color:#45505f8c;display:flex;justify-content:center;align-items:center}.erase{grid-column:3 / 5;height:44px;border-radius:22px;border:2px solid #64748c;background:#202c40;color:#c3cfde;display:flex;justify-content:center;align-items:center;gap:7px;font-size:16px}.erase.selected{border-color:var(--cyan);box-shadow:0 0 12px #05d5f599}.icon{height:17px;width:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.actions{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:5px}.actions button{height:51px;border-radius:12px;border:1px solid;font-weight:700;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;gap:8px}.auto{border-color:#ff72cfcc!important;background:linear-gradient(120deg,#ed258c,#a221d0);box-shadow:0 0 20px #eb279680,inset 0 1px #ffffff47}.step{color:#12daf7;border-color:#42546c!important;background:#1d293af2}.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.tools button,.tools label{height:35px;border-radius:8px;border:1px solid rgba(67,86,113,.75);background:#162030cc;display:flex;align-items:center;justify-content:center;color:#c6d2e0}.tools button:disabled{opacity:.35}.tools label{color:#26e8fe;cursor:pointer}.tools label:has(input:disabled){opacity:.5;pointer-events:none}.tools label:nth-last-child(2){color:#43e3ad}.tools input{display:none}.effect-toggle{height:42px;margin-top:-8px;padding:0 10px;border:1px solid rgba(6,182,212,.3);border-radius:9px;background:#0f172ac2;color:#c2cedc;font-size:12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.effect-toggle>span:first-child{color:#22d3ee;display:flex;align-items:center;gap:6px;font-weight:700;letter-spacing:.05em}.effect-toggle .icon{width:14px;height:14px}.effect-toggle input{position:absolute;opacity:0;pointer-events:none}.effect-toggle.disabled{opacity:.45;cursor:not-allowed}.effect-toggle input:checked+.toggle-track{background:#06b6d4}.effect-toggle input:checked+.toggle-track span{transform:translate(20px)}.field-frame{width:min(396px,calc((100vh - 28px)/2));height:calc(100vh - 18px);min-height:620px;max-height:793px;padding:23px;border:2px solid rgba(0,207,245,.54);border-radius:18px;background:#0b1122cc;position:relative;box-shadow:-60px 0 62px #00d2f81f,38px 0 55px #f01fa721}.field{width:100%;height:100%;border:1px solid rgba(0,213,246,.45);border-radius:12px;overflow:hidden;background:#020612e6;display:grid;grid-template:repeat(13,minmax(0,1fr)) / repeat(6,minmax(0,1fr));position:relative}.cell{position:relative;z-index:2;padding:1px;background:transparent;border:1px solid rgba(0,152,188,.32);min-height:0;min-width:0}.cell .color-0{border:1px solid rgba(36,61,89,.32);background:radial-gradient(circle,rgba(9,70,89,.18) 2px,transparent 2.5px)}.cell:hover .color-0{border-color:#05d2f570;background-color:#00c5ee12}.cell .puyo:not(.color-0){transform:scale(.95)}.cell .puyo.erasing{animation:puyo-erase .48s steps(4,end) forwards}@keyframes puyo-erase{0%{opacity:1;transform:scale(.95);filter:brightness(1)}25%{opacity:.22;transform:scale(1.05);filter:brightness(2.2)}50%{opacity:1;transform:scale(1.1);filter:brightness(1.8)}75%{opacity:.18;transform:scale(1.17);filter:brightness(2.5)}to{opacity:0;transform:scale(1.28);filter:brightness(2.8)}}.cell .puyo.falling{animation:puyo-fall .36s cubic-bezier(.2,.82,.3,1)}@keyframes puyo-fall{0%{transform:translateY(calc(var(--fall-rows) * -103%)) scale(.95);filter:brightness(1.12)}84%{transform:translateY(5%) scaleY(.9)}to{transform:translateY(0) scale(.95);filter:brightness(1)}}.phrase-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:flex;flex-direction:column;justify-content:center;align-items:center;mix-blend-mode:screen}.phrase{color:transparent;background:linear-gradient(to bottom,#fff,#fef08a 48%,#eab308);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:2px rgba(255,255,0,.5);font:italic 900 clamp(52px,5vw,72px)/1 "Segoe UI",Arial,sans-serif;white-space:nowrap;filter:drop-shadow(0 0 20px rgba(255,255,0,.8));text-shadow:0 0 10px #fff,0 0 20px #ff0,0 0 30px #ff0,0 0 40px #ff0;animation:announce .5s ease-out}@keyframes announce{0%{opacity:0;transform:scale(.5) rotate(12deg) translateY(40px)}to{opacity:1;transform:scale(1.1) rotate(-5deg) translateY(0)}}.chain-badge{margin-top:16px;padding:9px 25px;border:2px solid #f87171;border-radius:999px;background:linear-gradient(to right,#dc2626,#db2777);box-shadow:0 0 30px #f00c;color:#fff;font-weight:900;font-size:22px;display:flex;align-items:center;gap:6px;animation:badge-in .5s ease-out}@keyframes badge-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#00020ae6;display:flex;justify-content:center;align-items:center;padding:12px 16px}.modal-panel{display:flex;flex-direction:column;align-items:center;max-height:calc(100vh - 16px);color:#dae5f3}.modal-panel h2{margin:0 0 6px;display:flex;gap:10px;align-items:center;color:var(--cyan);font-size:23px}.modal-panel p{margin:0 0 15px;color:#a0afc4}.image-stage{position:relative;line-height:0;border:1px solid #29364a;background:#000}.image-stage img{height:min(62vh,720px);width:auto;max-height:calc(100vh - 245px);max-width:calc(100vw - 32px);object-fit:contain;display:block}.crop{position:absolute;border:2px solid var(--cyan);background:#04d0f31f;cursor:move;display:grid;grid-template:repeat(12,1fr) / repeat(6,1fr)}.crop span{border:1px solid rgba(15,225,249,.46)}.resize{position:absolute;right:-2px;bottom:-2px;width:19px;height:19px;padding:0;border:0;background:var(--cyan);cursor:nwse-resize}.resize:after{content:"";position:absolute;height:2px;width:14px;background:#05313c;left:4px;top:9px;transform:rotate(-45deg)}.scan-settings{margin:10px 0;width:min(492px,100%);padding:12px 14px;border:1px solid #344359;border-radius:10px;background:#1e293bd1;color:#12dbf9;font-size:12px;font-weight:700}.settings-title{display:flex;justify-content:space-between;align-items:center}.sensitivity-label{display:flex;align-items:center;gap:5px}.sensitivity-label .icon{width:13px;height:13px}.settings-title output{color:#fff;font:12px Consolas,monospace}.scan-settings input[type=range]{display:block;width:100%;height:8px;margin:10px 0 8px;accent-color:var(--cyan)}.sensitivity-scale{display:flex;justify-content:space-between;color:#94a3b8;font-size:10px;font-weight:400;margin-bottom:12px}.ojama-toggle{border-top:1px solid rgba(71,85,105,.5);padding:10px 8px 5px;display:flex;justify-content:space-between;align-items:center;color:#c2cedc;cursor:pointer;font-weight:400}.ojama-toggle>span:first-child{display:flex;align-items:center;gap:5px}.ojama-toggle .icon{width:13px;height:13px}.ojama-toggle input{position:absolute;opacity:0;pointer-events:none}.toggle-track{position:relative;width:42px;height:22px;border-radius:999px;background:#64748b;transition:background .18s}.toggle-track span{position:absolute;top:4px;left:4px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .18s}.ojama-toggle input:checked+.toggle-track{background:#06b6d4}.ojama-toggle input:checked+.toggle-track span{transform:translate(20px)}.modal-actions{display:flex;gap:15px}.modal-actions button{height:45px;padding:0 20px;display:flex;align-items:center;gap:7px;border-radius:9px;border:1px solid #53647b;background:#243145}.modal-actions .apply{border-color:#20d9fb;background:linear-gradient(110deg,#057fbd,#083ab5);box-shadow:0 0 16px #00cff666}.crt{pointer-events:none;position:fixed;z-index:40;top:0;right:0;bottom:0;left:0;opacity:.26;background-image:linear-gradient(transparent 50%,#0000005c 50%);background-size:100% 4px}@media(max-width:800px){.app{overflow:auto}.layout{min-height:100vh;flex-direction:column;align-items:center;gap:22px;padding:14px}.control-panel{width:min(100%,395px);min-height:auto}.field-frame{width:min(100%,396px);height:min(calc(100vh - 24px),793px);min-height:690px}}
