.costume-cutting-demo { position:relative; display:grid; width:calc(100% - 20px); min-height:58px; margin:10px; padding:8px 54px 8px 12px; place-content:center; border:2px solid #ffd77b; border-radius:14px; color:#fff; background:linear-gradient(145deg,#bd3e6f,#762c88 60%,#263978); box-shadow:inset 0 3px rgba(255,255,255,.22),inset 0 -5px rgba(0,0,0,.16),0 4px 0 #351546,0 8px 16px rgba(0,0,0,.3); font-family:"Baloo 2",sans-serif; text-align:center; cursor:pointer; }
.costume-cutting-demo small,.costume-cutting-demo strong { display:block; }.costume-cutting-demo small { color:#ffd8ec; font-size:.48rem; font-weight:900; letter-spacing:.1em; }.costume-cutting-demo strong { margin-top:2px; font-size:.9rem; line-height:1; }.costume-cutting-demo > span { position:absolute; top:50%; right:9px; padding:6px 8px; border:1px solid #fff0a8; border-radius:8px; color:#5a3405; background:#ffd85d; box-shadow:0 2px 0 #8d510b; font-size:.53rem; font-weight:900; transform:translateY(-50%); }
.cutting-game { width:100%; height:100dvh; padding:max(7px,env(safe-area-inset-top)) 7px max(7px,env(safe-area-inset-bottom)); color:#fff; background:radial-gradient(circle at 50% 0,rgba(210,83,146,.22),transparent 35%),#080b20; font-family:"Baloo 2",sans-serif; }
.cutting-game__panel { display:grid; grid-template-rows:auto 6px minmax(0,1fr) auto; width:min(100%,680px); height:100%; margin:auto; overflow:hidden; border:2px solid #e765a5; border-radius:22px; background:#10172d; box-shadow:0 0 0 3px #17132d,0 18px 55px #000; }
.cutting-game__header { display:grid; grid-template-columns:1fr auto; min-height:76px; padding:9px 12px; align-items:center; gap:9px; background:linear-gradient(135deg,#7b2458,#4a276f 62%,#172955); }.cutting-game__header small,.cutting-game__header h1 { display:block; margin:0; }.cutting-game__header small { color:#ffc1df; font-size:.5rem; font-weight:900; letter-spacing:.11em; }.cutting-game__header h1 { font-size:clamp(1.15rem,5vw,1.55rem); line-height:.95; }
.cutting-game__score { display:grid; min-width:64px; height:54px; padding:5px; place-content:center; border:2px solid #ffd87a; border-radius:13px; color:#fff4cb; background:rgba(50,19,55,.75); text-align:center; }.cutting-game__score b { font-size:1.35rem; line-height:.8; }.cutting-game__score small { margin-top:6px; color:#ffd478; font-size:.38rem; }
.cutting-game__progress { background:#251f3d; }.cutting-game__progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,#f04478,#ffd552,#54e5bd); box-shadow:0 0 9px #ff66a3; }
.cutting-game__stage { position:relative; min-height:0; overflow:hidden; background:radial-gradient(circle at 18% 15%,rgba(255,255,255,.08),transparent 20%),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 34px),#563548; touch-action:none; user-select:none; -webkit-user-select:none; }.cutting-game__stage canvas { display:block; width:100%; height:100%; touch-action:none; }
.cutting-game__stage canvas[hidden],.cutting-game__stage .cutting-game__scissors[hidden] { display:none; }
.cutting-game__scissors { position:absolute; z-index:4; top:70%; left:50%; width:64px; height:74px; pointer-events:none; transform:translate(-50%,-44%); filter:drop-shadow(0 5px 3px rgba(0,0,0,.42)); }
.cutting-game__scissor-half { position:absolute; top:2px; left:50%; width:11px; height:47px; border:1px solid #66758a; border-radius:90% 16% 42% 42%; background:linear-gradient(90deg,#6f7d8d 0,#f5fbff 42%,#9aa9b8 66%,#536171 100%); box-shadow:inset 2px 0 2px rgba(255,255,255,.75),inset -2px 0 2px rgba(24,34,48,.45); transform-origin:50% 31px; }
.cutting-game__scissor-half::after { content:""; position:absolute; top:39px; left:50%; width:23px; height:28px; border:7px solid #ed4e6d; border-radius:48% 48% 54% 54%; background:#65253b; box-shadow:inset 0 0 0 2px #ff91a5,0 2px 2px rgba(0,0,0,.38); transform:translateX(-50%); }
.cutting-game__scissor-half--left { transform:translateX(-50%) rotate(-11deg); }.cutting-game__scissor-half--right { transform:translateX(-50%) rotate(11deg); }
.cutting-game__scissor-pivot { position:absolute; z-index:2; top:28px; left:50%; width:13px; height:13px; border:2px solid #566373; border-radius:50%; background:radial-gradient(circle at 38% 35%,#fff 0 13%,#dce6ec 16% 40%,#778695 44% 100%); box-shadow:0 1px 2px rgba(0,0,0,.55); transform:translateX(-50%); }
.cutting-game__stage.is-cutting .cutting-game__scissors { filter:drop-shadow(0 5px 3px rgba(0,0,0,.42)) drop-shadow(0 0 7px #ffd548); }
.cutting-game__stage.is-cutting .cutting-game__scissor-half--left { animation:cuttingScissorsLeft .18s ease-in-out infinite alternate; }.cutting-game__stage.is-cutting .cutting-game__scissor-half--right { animation:cuttingScissorsRight .18s ease-in-out infinite alternate; }
.cutting-game__stage.is-cutting .cutting-game__scissors::after { content:""; position:absolute; top:48%; left:45%; width:5px; height:5px; border-radius:50%; background:#ffe267; box-shadow:8px -5px #fff1a0,-7px -7px #ffce4a; animation:cuttingFibres .4s linear infinite; }
.cutting-game__scrap { position:absolute; z-index:5; inset:0; width:100%; height:100%; pointer-events:none; transform-origin:50% 0; }.cutting-game__scrap--left { animation:clothFallLeft 1.05s cubic-bezier(.48,.02,.88,.52) forwards; }.cutting-game__scrap--right { animation:clothFallRight 1.05s cubic-bezier(.48,.02,.88,.52) forwards; }
.cutting-game__countdown { position:absolute; z-index:8; inset:0; display:grid; place-items:center; color:#fff; background:rgba(22,12,34,.55); font-size:clamp(4rem,22vw,7rem); font-weight:900; text-shadow:0 5px 0 #7e255a,0 9px 20px #000; }.cutting-game__countdown[hidden] { display:none; }
.cutting-game__intro,.cutting-game__result { position:absolute; z-index:7; inset:0; display:grid; padding:24px; place-content:center; justify-items:center; color:#1c2640; background:linear-gradient(rgba(255,255,255,.9),rgba(250,236,227,.96)); text-align:center; }.cutting-game__intro[hidden],.cutting-game__result[hidden] { display:none; }.cutting-game__intro small,.cutting-game__result small { color:#ba2f6d; font-size:.55rem; font-weight:900; letter-spacing:.12em; }.cutting-game__intro h2,.cutting-game__result h2 { margin:4px 0 7px; font-size:1.4rem; line-height:1; }.cutting-game__intro p,.cutting-game__result p { max-width:360px; margin:0 0 16px; font-size:.76rem; font-weight:700; line-height:1.3; }.cutting-game__result > strong { color:#c83270; font-size:4rem; line-height:1; text-shadow:0 3px #f5b9d4; }
.cutting-game__intro button,.cutting-game__result button { width:min(100%,310px); min-height:48px; margin-top:8px; border:2px solid #fff0a5; border-radius:12px; color:#4c2d08; background:linear-gradient(#ffd95b,#f4a916); box-shadow:inset 0 3px rgba(255,255,255,.38),0 4px #9b620a; font:900 .7rem/1 "Baloo 2",sans-serif; }.cutting-game__intro button + button,.cutting-game__result button + button { border-color:#8da0bb; color:#fff; background:linear-gradient(#526781,#26374f); box-shadow:inset 0 2px rgba(255,255,255,.16),0 4px #111c2c; }
.cutting-game__footer { display:flex; min-height:52px; padding:8px 10px; align-items:center; justify-content:center; gap:14px; border-top:1px solid #453452; background:#11172d; }.cutting-game__footer span { color:#d6c4d5; font-size:clamp(.4rem,1.7vw,.5rem); font-weight:900; line-height:1.1; }.cutting-game__footer b { color:#ffd552; font-size:.78rem; }
@keyframes cuttingScissorsLeft { from { transform:translateX(-50%) rotate(-15deg); } to { transform:translateX(-50%) rotate(-3deg); } }
@keyframes cuttingScissorsRight { from { transform:translateX(-50%) rotate(15deg); } to { transform:translateX(-50%) rotate(3deg); } }
@keyframes cuttingFibres { from { opacity:1; transform:translate(0,0) scale(1); } to { opacity:0; transform:translate(10px,-12px) scale(.3); } }
@keyframes clothFallLeft { 35% { transform:translate(-3%,5%) rotate(-3deg); } to { opacity:0; transform:translate(-34%,110%) rotate(-15deg); } }
@keyframes clothFallRight { 35% { transform:translate(3%,5%) rotate(3deg); } to { opacity:0; transform:translate(34%,110%) rotate(15deg); } }
@media (prefers-reduced-motion:reduce) { .cutting-game__scissors { transition:none; } .cutting-game__stage.is-cutting .cutting-game__scissor-half { animation:none; } .cutting-game__scrap { animation-duration:.25s; } }

.pattern-game { width:100%; height:100dvh; padding:max(7px,env(safe-area-inset-top)) 7px max(7px,env(safe-area-inset-bottom)); color:#fff; background:radial-gradient(circle at 50% 0,rgba(210,83,146,.22),transparent 35%),#080b20; font-family:"Baloo 2",sans-serif; }
.pattern-game__panel { display:grid; grid-template-rows:auto minmax(0,1fr) auto; width:min(100%,680px); height:100%; margin:auto; overflow:hidden; border:2px solid #e765a5; border-radius:22px; background:#10172d; box-shadow:0 0 0 3px #17132d,0 18px 55px #000; }
.pattern-game__header { display:grid; grid-template-columns:1fr auto; min-height:76px; padding:9px 12px; align-items:center; gap:9px; background:linear-gradient(135deg,#7b2458,#4a276f 62%,#172955); }.pattern-game__header small,.pattern-game__header h1 { display:block; margin:0; }.pattern-game__header small { color:#ffc1df; font-size:.5rem; font-weight:900; letter-spacing:.11em; }.pattern-game__header h1 { font-size:clamp(1.12rem,5vw,1.55rem); line-height:.95; }
.pattern-game__score { display:grid; min-width:68px; height:54px; padding:5px; place-content:center; border:2px solid #ffd87a; border-radius:13px; color:#fff4cb; background:rgba(50,19,55,.75); text-align:center; }.pattern-game__score b { font-size:1.12rem; line-height:.8; }.pattern-game__score small { margin-top:6px; color:#ffd478; font-size:.36rem; }
.pattern-game__score b.is-dropping { animation:patternScoreDrop .28s ease-out; }
.pattern-game__board { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto 8px minmax(0,1fr); min-height:0; padding:8px 7px 10px; gap:6px; overflow:hidden; background:linear-gradient(rgba(20,28,56,.91),rgba(13,18,40,.96)),url("https://revoseo1.ams3.digitaloceanspaces.com/fallamania/assets/costumes-background.png") center/cover; touch-action:none; user-select:none; -webkit-user-select:none; }
.pattern-game__instruction { position:relative; z-index:4; grid-column:1/-1; min-height:27px; padding:6px 8px; border:1px solid #936991; border-radius:9px; color:#ffe0a1; background:rgba(28,18,48,.88); font-size:clamp(.43rem,2vw,.56rem); font-weight:900; line-height:1.1; text-align:center; letter-spacing:.04em; }
.pattern-game__timer { position:relative; z-index:4; grid-column:1/-1; overflow:visible; border:1px solid #506583; border-radius:999px; background:#111a31; box-shadow:inset 0 1px 3px #050914; }.pattern-game__timer i { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#39dca1,#55dfee); box-shadow:0 0 7px #42e6cd; transition:background .2s; }.pattern-game__timer b { position:absolute; top:50%; right:4px; display:grid; width:20px; height:20px; place-items:center; border:1px solid #fff0a0; border-radius:50%; color:#402506; background:#ffd75a; font-size:.48rem; transform:translateY(-50%); }.pattern-game__timer.is-urgent i { background:linear-gradient(90deg,#ffb72e,#ff4e63); box-shadow:0 0 8px #ff4e63; }.pattern-game__timer.is-idle { opacity:.28; }
.pattern-game__row-wrap { position:relative; z-index:2; display:grid; grid-template-rows:auto minmax(0,1fr); min-height:0; padding:4px 5px 6px; border:1px solid rgba(123,163,194,.28); border-radius:12px; background:rgba(9,19,43,.56); }.pattern-game__row-wrap > small { color:#83ddf3; font-size:.38rem; font-weight:900; letter-spacing:.12em; }
.pattern-game__row { display:grid; grid-template-rows:repeat(5,minmax(0,1fr)); min-height:0; align-items:stretch; gap:6px; }
.pattern-game__card { position:relative; min-width:0; min-height:0; width:100%; height:100%; padding:0; overflow:hidden; border:2px solid #7892aa; border-radius:11px; background:linear-gradient(#263c58,#14243d); box-shadow:inset 0 2px rgba(255,255,255,.16),0 3px 0 #071121; touch-action:none; }.pattern-game__card img { width:100%; height:100%; object-fit:contain; object-position:center bottom; pointer-events:none; transform:scale(1.13); transform-origin:center bottom; }.pattern-game__card b { position:absolute; right:2px; bottom:2px; left:2px; overflow:hidden; padding:2px 1px; border-radius:5px; color:#fff; background:rgba(7,14,31,.88); font-size:clamp(.31rem,1.55vw,.46rem); line-height:1; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.pattern-game__card::after { content:"?"; position:absolute; inset:0; display:grid; place-items:center; color:#587189; background:linear-gradient(145deg,#253b54,#101e35); font-size:clamp(1.4rem,8vw,2.6rem); font-weight:900; text-shadow:0 3px #091321; opacity:0; pointer-events:none; transition:opacity .25s,transform .35s; }.pattern-game__card.is-concealed::after { opacity:1; }.pattern-game__card.is-revealing::after { transform:rotateY(90deg); opacity:0; }
.pattern-game__card.is-selected { border-color:#ffd95b; box-shadow:0 0 0 2px #a65b1b,0 0 16px #ffd149; transform:translateY(-2px); }.pattern-game__card.is-complete { border-color:#45e5a6; filter:saturate(.75); }.pattern-game__card.is-complete::before { content:"✓"; position:absolute; z-index:2; top:3px; right:3px; display:grid; width:18px; height:18px; place-items:center; border-radius:50%; color:#073827; background:#54edaf; font-size:.65rem; font-weight:900; box-shadow:0 2px 0 #137953; }
.pattern-game__threads { position:absolute; z-index:3; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }.pattern-game__threads line { stroke:#ffd65a; stroke-width:5; stroke-linecap:round; filter:drop-shadow(0 0 4px #ffb325); }.pattern-game__threads line.is-correct { stroke:#4cf0ae; }.pattern-game__threads line.is-wrong { stroke:#ff4e63; animation:patternThreadBreak .35s ease forwards; }
.pattern-game__intro,.pattern-game__result { position:absolute; z-index:8; inset:0; display:grid; padding:24px; place-content:center; justify-items:center; color:#1c2640; background:linear-gradient(rgba(255,255,255,.93),rgba(250,236,227,.97)); text-align:center; }.pattern-game__intro[hidden],.pattern-game__result[hidden] { display:none; }.pattern-game__intro small,.pattern-game__result small { color:#ba2f6d; font-size:.55rem; font-weight:900; letter-spacing:.12em; }.pattern-game__intro h2,.pattern-game__result h2 { margin:4px 0 7px; font-size:1.4rem; line-height:1; }.pattern-game__intro p,.pattern-game__result p { max-width:360px; margin:0 0 16px; font-size:.76rem; font-weight:700; line-height:1.3; }.pattern-game__result > strong { color:#c83270; font-size:4rem; line-height:.85; text-shadow:0 3px #f5b9d4; }.pattern-game__result > span { margin:5px 0 8px; color:#7f3b67; font-size:.55rem; font-weight:900; }
.pattern-game__intro button,.pattern-game__result button { width:min(100%,310px); min-height:48px; margin-top:8px; border:2px solid #fff0a5; border-radius:12px; color:#4c2d08; background:linear-gradient(#ffd95b,#f4a916); box-shadow:inset 0 3px rgba(255,255,255,.38),0 4px #9b620a; font:900 .7rem/1 "Baloo 2",sans-serif; }.pattern-game__intro button + button,.pattern-game__result button + button { border-color:#8da0bb; color:#fff; background:linear-gradient(#526781,#26374f); box-shadow:inset 0 2px rgba(255,255,255,.16),0 4px #111c2c; }
.pattern-game__footer { display:grid; min-height:48px; padding:8px 10px; place-items:center; color:#d6c4d5; border-top:1px solid #453452; background:#11172d; font-size:clamp(.4rem,1.7vw,.5rem); font-weight:900; text-align:center; }
@keyframes patternThreadBreak { 40% { opacity:1; stroke-dasharray:7 6; } to { opacity:0; stroke-dasharray:2 10; } }
@keyframes patternScoreDrop { 0% { color:#ff5269; transform:scale(1.35); text-shadow:0 0 10px #ff334f; } 100% { color:#fff4cb; transform:scale(1); text-shadow:none; } }