.yw-play { --yw-ink:#10120f; --yw-lime:#d5ff45; --yw-purple:#d5c4ff; --yw-paper:#f1f0e9; color:var(--yw-paper); background:var(--yw-ink); padding:clamp(18px,3.2vw,40px); font-family:Arial,"Microsoft YaHei",sans-serif; box-sizing:border-box; overflow:hidden; width:100%; position:relative; }
.yw-play *, .yw-play *::before, .yw-play *::after { box-sizing:border-box; }
.yw-play button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.yw-play button:focus-visible { outline:2px solid var(--yw-purple); outline-offset:5px; }
.yw-play__header { max-width:650px; }
.yw-play__eyebrow { color:var(--yw-lime); font:10px/1.4 ui-monospace,Consolas,monospace; letter-spacing:.15em; margin:0 0 15px; }
.yw-play__title { font-size:clamp(31px,5vw,62px); line-height:1.05; letter-spacing:-.05em; font-weight:400; margin:0 0 14px; }
.yw-play__subtitle { color:#c3c8bd; font-size:13px; line-height:1.6; margin:0; }
.yw-play__hud { margin:25px 0 0; padding:16px 0; border-top:1px solid #ffffff24; display:flex; align-items:center; gap:22px; }
.yw-play__score { display:flex; align-items:center; gap:14px; flex:none; }
.yw-play__progress-label { font-size:10px; letter-spacing:.1em; color:#b7beaf; }
.yw-play__score strong { font:21px/1 ui-monospace,Consolas,monospace; color:var(--yw-lime); }
.yw-play__denominator { font-size:12px; color:#90978a; }
.yw-play__meter { display:flex; gap:4px; flex:1; max-width:200px; }
.yw-play__meter i { height:3px; background:#ffffff26; flex:1; transition:background .25s,box-shadow .25s; }
.yw-play__meter i.is-on { background:var(--yw-lime); box-shadow:0 0 8px #d5ff4544; }
.yw-play__reset { margin-left:auto; min-height:44px; border:0; border-bottom:1px solid #ffffff45; color:#c3c8bd; background:none; padding:0 0 0 6px; font-size:11px!important; white-space:nowrap; }
.yw-play__reset:hover { color:var(--yw-lime); border-color:var(--yw-lime); }
.yw-play__board { --pointer-x:50%; --pointer-y:50%; min-height:300px; height:clamp(300px,43vh,410px); width:100%; position:relative; overflow:hidden; background:radial-gradient(ellipse at var(--pointer-x) var(--pointer-y),#d5c4ff0d,transparent 45%),radial-gradient(ellipse at 50% 115%,#bfff1512,transparent 65%); border:1px solid #ffffff12; isolation:isolate; }
.yw-play__grid { position:absolute; width:160%; height:160%; left:-30%; top:-10%; background-image:linear-gradient(#d5ff4511 1px,transparent 1px),linear-gradient(90deg,#d5ff4511 1px,transparent 1px); background-size:42px 42px; transform:perspective(420px) rotateX(54deg); transform-origin:center 65%; mask-image:linear-gradient(transparent,#000 45%,#0009); -webkit-mask-image:linear-gradient(transparent,#000 45%,#0009); pointer-events:none; }
.yw-play__constellation { position:absolute; inset:0; opacity:0; transition:opacity 1s; pointer-events:none; }
.yw-play__constellation svg { width:100%; height:100%; }
.yw-play__constellation path { fill:none; stroke:var(--yw-lime); stroke-width:.7; stroke-dasharray:4 8; }
.yw-play__targets { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); height:100%; padding:20px 10px; gap:10px; transition:opacity .5s,filter .5s; }
.yw-play__cell { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; min-width:0; }
.yw-play__target { width:76px; height:76px; min-width:44px; min-height:44px; position:relative; border:1px solid #d5ff4544; background:#11160b55; color:var(--yw-lime); border-radius:50%; display:grid; place-items:center; animation:yw-thought-float 4.8s ease-in-out var(--phase) infinite; transition:background .35s,border-color .35s,box-shadow .35s; }
.yw-play__target::after { content:""; position:absolute; inset:8px; border:1px dashed currentColor; border-radius:50%; opacity:.22; transform:rotate(var(--tilt)); }
.yw-play__target--1,.yw-play__target--3 { color:var(--yw-purple); border-color:#d5c4ff45; background:#24183155; }
.yw-play__target:hover { background:#d5ff4517; border-color:currentColor; box-shadow:0 0 30px #d5ff451c; }
.yw-play__target:hover,.yw-play__target:focus-visible { animation-play-state:paused; }
.yw-play__target:focus-visible { animation:none; transform:none; outline-offset:3px; }
.yw-play__target:active { background:#d5ff4533; }
.yw-play__halo { position:absolute; inset:-11px; border:1px solid currentColor; border-radius:50%; opacity:.08; transform:rotateX(54deg) rotateZ(var(--tilt)); pointer-events:none; }
.yw-play__glyph { font:37px/1 Arial,sans-serif; text-shadow:0 0 17px currentColor; transition:transform .35s,opacity .25s; }
.yw-play__target--1 .yw-play__glyph { font-size:47px; }
.yw-play__target--3 .yw-play__glyph { font-size:48px; font-weight:200; }
.yw-play__check { position:absolute; font:29px/1 Arial,sans-serif; opacity:0; transform:scale(.5) rotate(-40deg); transition:transform .35s,opacity .35s; }
.yw-play__concept { font-size:10px; letter-spacing:.08em; color:#aeb5a4; white-space:nowrap; }
.yw-play__cell.is-collected .yw-play__target { animation:none; background:#d5ff4511; color:var(--yw-lime); border-color:#d5ff45; box-shadow:none; }
.yw-play__cell.is-collected .yw-play__glyph { opacity:0; transform:scale(1.6) rotate(30deg); }
.yw-play__cell.is-collected .yw-play__halo { opacity:0; }
.yw-play__cell.is-collected .yw-play__check { opacity:1; transform:scale(1) rotate(0); }
.yw-play__cell.is-collected .yw-play__concept { color:var(--yw-lime); }
.yw-play__complete[hidden] { display:none; }
.yw-play__complete { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; background:#10120fe8; backdrop-filter:blur(8px); animation:yw-thought-appear .5s ease both; }
.yw-play__complete-mark { font:64px/1 Arial,sans-serif; color:var(--yw-lime); margin-bottom:22px; }
.yw-play__complete-title { font-size:clamp(24px,4vw,42px); line-height:1.2; letter-spacing:-.04em; margin:0 0 14px; }
.yw-play__complete-body { color:#b7beaf; font-size:12px; line-height:1.75; max-width:380px; margin:0 0 25px; }
.yw-play__again { background:var(--yw-lime); color:#10120f; min-height:48px; border:0; padding:0 24px; font-size:12px!important; }
.yw-play__again:hover { background:#e6ff97; }
.yw-play--complete .yw-play__constellation { opacity:.5; }
.yw-play--complete .yw-play__targets { opacity:.2; filter:blur(3px); pointer-events:none; }
.yw-play__instruction { color:#a1aa97; font-size:11px; line-height:1.7; margin:15px 0 20px; }
.yw-play__footer { border-top:1px solid #ffffff1c; padding-top:15px; color:#77816d; font:9px/1.6 ui-monospace,Consolas,monospace; letter-spacing:.1em; }
.yw-play__sr-only { width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; position:absolute; }
@keyframes yw-thought-float { 0%,100% { transform:translateY(4px) rotate(-3deg); } 50% { transform:translateY(-4px) rotate(3deg); } }
@keyframes yw-thought-appear { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
@media(max-width:600px) { .yw-play__hud { gap:12px; padding:10px 0; margin-top:19px; } .yw-play__score { gap:8px; } .yw-play__meter { gap:3px; } .yw-play__reset { font-size:10px!important; } .yw-play__board { min-height:388px; height:388px; } .yw-play__targets { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); padding:12px 15px; row-gap:4px; } .yw-play__target { width:56px; height:56px; } .yw-play__cell { gap:6px; } .yw-play__glyph { font-size:29px; } .yw-play__target--1 .yw-play__glyph,.yw-play__target--3 .yw-play__glyph { font-size:38px; } .yw-play__concept { font-size:9px; } .yw-play__constellation { display:none; } .yw-play__instruction { margin-bottom:14px; } }
@media(prefers-reduced-motion:reduce) { .yw-play *, .yw-play *::before, .yw-play *::after { animation:none!important; transition:none!important; } .yw-play__board { background:radial-gradient(ellipse at 50% 115%,#bfff1512,transparent 65%); } }