:root{--pink-bg: #f5a2ef;--hot-pink: #ec10c9;--deep-pink: #c407bc;--button-pink: #f30ab8;--button-purple: #bc0bcc;--yellow: #ffff1f;--white: #ffffff;--ink: #342437;--shadow: rgba(98, 0, 89, .28);--panel-gap: clamp(12px, 1.6vw, 24px);font-family:Hiragino Maru Gothic ProN,Yu Gothic,YuGothic,Meiryo,system-ui,sans-serif;color:var(--ink);background:var(--pink-bg)}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0;overflow-x:hidden;overscroll-behavior-x:none}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;filter:grayscale(.35) brightness(.9);opacity:.68}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%)}.app{min-height:100svh;overflow-x:clip}.title-screen{display:grid;place-items:center;background:#17121a}.title-hero{position:relative;width:100vw;min-height:100svh;display:grid;overflow:hidden;isolation:isolate}.title-background{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}.title-background-mobile{display:none}.title-brand-lockup{z-index:4;display:grid;gap:clamp(2px,.5vw,8px);justify-items:center}.title-brand-lockup-desktop{position:absolute;left:clamp(40px,3vw,58px);top:clamp(150px,17svh,190px);width:clamp(820px,56vw,1030px);transform:none}.title-logo{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 12px rgba(91,0,91,.2))}.title-logo-subtitle{margin:clamp(-12px,-.8vw,-5px) 0 0;color:var(--white);font-size:clamp(34px,3vw,58px);font-weight:950;line-height:1;letter-spacing:0;text-align:center;text-shadow:none;-webkit-text-stroke:clamp(6px,.56vw,10px) #e40782;paint-order:stroke fill}.title-brand-lockup-desktop .title-logo-subtitle{margin-top:-6px;font-size:clamp(42px,3.75vw,68px);-webkit-text-stroke:clamp(8px,.72vw,12px) #e40782}.title-pointer{position:absolute;right:clamp(78px,9vw,180px);bottom:clamp(120px,14vh,190px);width:clamp(130px,10vw,190px);transform:rotate(-30deg);filter:drop-shadow(0 10px 8px rgba(0,0,0,.32))}.title-about-button{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));z-index:12;display:grid;place-items:center;width:48px;height:48px;padding:0;border:3px solid rgba(255,255,255,.96);border-radius:50%;background:linear-gradient(180deg,#ffffff47,#fff0 48%),linear-gradient(180deg,#ff47cc,#ec10c9 62%,#b900b8);color:var(--white);box-shadow:inset 0 -3px #6000692e,0 8px 18px #28002a4d}.title-about-mark{display:block;font-size:30px;font-weight:950;line-height:1;transform:translateY(-1px)}.about-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;padding:18px;background:#17121ab8}.about-modal{width:min(92vw,620px);max-height:calc(100svh - 36px);overflow:auto;border:4px solid rgba(255,255,255,.96);border-radius:8px;background:#fffffff7;color:#1d1520;box-shadow:0 18px 38px #2a002e5c}.about-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 10px;border-bottom:2px solid rgba(236,16,201,.22)}.about-modal-header h1{margin:0;color:var(--hot-pink);font-size:clamp(22px,2vw,30px);font-weight:950;line-height:1}.about-modal-close{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;padding:0;border:0;border-radius:50%;background:#f2e8f3;color:#1d1520}.about-modal-close .material-icons{font-size:25px;line-height:1}.about-modal-close:hover,.about-modal-close:focus-visible{background:var(--hot-pink);color:var(--white)}.about-modal-body{display:grid;gap:14px;padding:16px;font-size:clamp(15px,1.35vw,18px);font-weight:700;line-height:1.65}.about-modal-body p{margin:0}.about-modal-body a{color:var(--deep-pink);font-weight:900;overflow-wrap:anywhere}.about-highlight{color:var(--hot-pink);font-weight:950}.title-selection-area{position:absolute;left:clamp(54px,4.4vw,82px);top:clamp(540px,55svh,640px);bottom:auto;z-index:6;display:grid;width:min(50vw,720px);gap:10px;justify-items:start}.age-panel{position:fixed;right:clamp(18px,3vw,58px);bottom:clamp(16px,3vh,42px);z-index:8;width:min(38vw,620px);color:var(--white);text-align:right;text-shadow:none}.age-panel p{margin:0;font-size:clamp(15px,1.35vw,21px);font-weight:800;line-height:1.5}.title-character-picker{display:grid;width:100%;gap:10px;justify-items:start}.title-character-picker h1{margin:0;color:var(--white);font-size:clamp(20px,1.55vw,30px);font-weight:950;line-height:1;text-align:left;text-shadow:0 2px 4px rgba(40,22,42,.62);-webkit-text-stroke:0;paint-order:normal}.title-thumb-grid{width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px}.title-thumb-button{position:relative;flex:0 0 clamp(104px,7vw,130px);aspect-ratio:1 / 1;overflow:hidden;min-width:0;padding:0;border:3px solid rgba(255,255,255,.94);border-radius:8px;background:#f416b83d;box-shadow:0 8px 18px #6c006738;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.title-thumb-button img{display:block;width:100%;height:100%;object-fit:cover}.title-thumb-button:hover,.title-thumb-button:focus-visible{transform:translateY(-3px);border-color:var(--hot-pink);box-shadow:0 12px 24px #6c006747}.title-thumb-button:active{transform:translateY(0)}.title-credit{display:inline-flex;align-items:center;justify-self:start;gap:3px;max-width:100%;margin-top:2px;color:#fffffff0;font-size:clamp(12px,1vw,16px);font-weight:900;line-height:1.1;text-align:left;text-decoration:none;text-shadow:0 2px 4px rgba(34,18,36,.72),0 0 2px rgba(34,18,36,.72)}.title-credit:hover,.title-credit:focus-visible{color:#fffffff0;text-decoration:none}.title-credit-label,.title-credit-url{text-decoration:none}.title-credit:hover .title-credit-label,.title-credit:focus-visible .title-credit-label,.title-credit:hover .title-credit-url,.title-credit:focus-visible .title-credit-url{text-decoration:none}.title-credit-icon.material-icons{flex:0 0 auto;margin-left:1px;font-size:18px;line-height:1;text-decoration:none;text-shadow:0 2px 4px rgba(34,18,36,.72),0 0 2px rgba(34,18,36,.72);transform:translateY(1px)}.mega-button{position:relative;display:grid;place-items:center;overflow:hidden;min-height:82px;padding:12px 20px;border:4px solid rgba(255,255,255,.96);border-radius:8px;background:linear-gradient(180deg,#ffffff57,#fff0 42%),linear-gradient(180deg,#ff43c7,#eb03bd 60%,#b900b8);color:var(--yellow);font-size:clamp(26px,2.4vw,42px);font-weight:900;letter-spacing:0;line-height:1;text-align:center;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;text-shadow:0 1px 0 rgba(121,0,126,.42);box-shadow:inset 0 -4px #6c007124,0 8px 18px #62005933;transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease,filter .17s ease}.mega-button:after{content:"";position:absolute;inset:-28% auto -28% -48%;width:34%;transform:translate(0) skew(-18deg);background:linear-gradient(90deg,#fff0,#ffffff8c,#fff0);opacity:0;pointer-events:none;transition:transform 0ms linear,opacity .15s ease}.mega-button:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 -2px #71007b29,0 5px 12px #62005933}@media (hover: hover) and (pointer: fine) and (min-width: 761px){.mega-button:hover:not(:disabled){transform:translateY(-2px);border-color:var(--white);filter:brightness(1.03) saturate(1.04);box-shadow:inset 0 -4px #6c00711f,0 10px 18px #62005940,0 0 0 2px #ffffff5c}.mega-button:hover:not(:disabled):after{transform:translate(360%) skew(-18deg);opacity:.42;transition:transform .52s ease,opacity .15s ease}}@media (hover: none),(pointer: coarse){.title-thumb-button{transition:none}.title-thumb-button:hover,.title-thumb-button:active{transform:none;border-color:#fffffff0;box-shadow:0 8px 18px #6c006738}.mega-button{transition:none}.mega-button:hover:not(:disabled),.mega-button:active:not(:disabled){transform:none;border-color:#fffffff5;filter:none;box-shadow:inset 0 -4px #6c007124,0 8px 18px #62005933}.mega-button:after,.mega-button:hover:not(:disabled):after,.mega-button:active:not(:disabled):after{display:none;opacity:0}}.game-screen{background:linear-gradient(90deg,#f5a2efc2,#f5a2ef8a 42%,#f5a2ef57),var(--office-background),var(--pink-bg);display:grid;align-items:stretch;padding:clamp(10px,1.4vw,24px)}.game-layout{width:min(100%,1280px);min-height:calc(100svh - clamp(28px,4vw,80px));margin:0 auto;display:grid;grid-template-columns:minmax(250px,.58fr) minmax(420px,.95fr);gap:clamp(18px,3vw,48px);align-items:center;justify-content:center}.panel{min-width:0}.control-panel{display:grid;gap:clamp(16px,2.1vw,34px);align-content:center}.profile-plate{width:min(100%,480px);min-height:92px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 12px;justify-self:center;padding:14px 16px;border:0;border-radius:8px;background:#fffffff5;color:#1d1520;text-shadow:none}.profile-kicker{align-self:center;padding:4px 8px;border-radius:999px;background:#ec10c9;color:var(--yellow);font-size:11px;font-weight:950;line-height:1;text-shadow:none}.profile-main{display:grid;min-width:0;gap:6px}.profile-name{min-width:0;color:#1d1520;font-size:clamp(32px,2.35vw,44px);font-weight:950;line-height:1;white-space:nowrap;text-shadow:none}.profile-age{color:#1d1520;font-size:clamp(16px,1.2vw,20px);font-weight:400;line-height:1;white-space:nowrap;text-shadow:none}.profile-department{color:#504752;font-size:clamp(15px,1.05vw,18px);font-weight:800;line-height:1;white-space:nowrap;text-shadow:none}.playfield-profile{display:none}.brush-block{display:grid;width:min(100%,480px);gap:8px;justify-items:center}.brush-block h1{margin:0;color:#db0aa9;font-size:clamp(25px,2.2vw,38px);font-weight:950;line-height:1;text-align:center;-webkit-text-stroke:clamp(4px,.46vw,6px) var(--white);paint-order:stroke fill}.brush-block h1 span{display:inline}.range-row{width:min(100%,340px);display:grid;grid-template-columns:1fr 42px;align-items:center;gap:10px}.range-row output{color:var(--white);font-size:clamp(18px,1.25vw,22px);font-weight:950;line-height:1;white-space:nowrap;-webkit-text-stroke:clamp(1.2px,.14vw,1.7px) #d500b9;paint-order:stroke fill;text-shadow:0 1px 2px rgba(92,0,104,.35)}.brush-range{width:100%;height:30px;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;touch-action:none;-webkit-user-select:none;user-select:none}.brush-range::-webkit-slider-runnable-track{height:10px;border:1px solid rgba(99,74,103,.68);border-radius:999px;background:linear-gradient(180deg,#fff,#cfc9d4);box-shadow:inset 0 1px 2px #4a2c4c38}.brush-range::-webkit-slider-thumb{width:26px;height:26px;margin-top:-9px;border:3px solid var(--white);border-radius:999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(180deg,#ff63d2,#d800be);box-shadow:0 2px 5px #5f005c47,inset 0 2px #ffffff5c}.brush-range::-moz-range-track{height:10px;border:1px solid rgba(99,74,103,.68);border-radius:999px;background:linear-gradient(180deg,#fff,#cfc9d4);box-shadow:inset 0 1px 2px #4a2c4c38}.brush-range::-moz-range-thumb{width:20px;height:20px;border:3px solid var(--white);border-radius:999px;background:linear-gradient(180deg,#ff63d2,#d800be);box-shadow:0 2px 5px #5f005c47,inset 0 2px #ffffff5c}.button-stack{display:grid;gap:18px}.control-panel .mega-button{width:100%;min-height:clamp(76px,6.2vw,106px);font-size:clamp(22px,2vw,34px)}.reset-button,.reveal-button,.auto-button,.download-button,.title-back-button{grid-column:1 / -1}.download-button{margin-top:clamp(18px,4vh,44px)}.title-back-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;line-height:1.08}.title-back-button span{display:block;line-height:1.06}.auto-button{gap:0;line-height:.9}.reveal-button{display:flex;align-items:center;justify-content:center}.reveal-button span{display:inline}.auto-button span{display:block;line-height:.92;white-space:nowrap}.title-back-button small{display:block;color:var(--white);font-size:clamp(16px,1.3vw,26px);font-weight:950;line-height:1.06}.playfield{display:grid;gap:clamp(8px,1vw,14px);align-content:center;justify-items:center;min-width:0}.playfield-brush{display:none}.canvas-stage{display:contents}.canvas-frame{position:relative;width:min(100%,860px);aspect-ratio:864 / 1304;max-height:calc(100svh - clamp(20px,2.8vw,48px));background:transparent;overflow:hidden}.scratch-canvas{display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none}.canvas-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#291f2ce0;color:var(--white);font-size:28px;font-weight:900}.title-thumb-button:focus-visible,.mega-button:focus-visible,.brush-range:focus-visible{outline:4px solid #2d86ff;outline-offset:4px}@media (max-width: 1180px){.game-layout{grid-template-columns:minmax(230px,.7fr) minmax(380px,1fr);grid-template-areas:"controls stage";align-items:center}.control-panel{grid-area:controls}.playfield{grid-area:stage}.canvas-frame{width:min(62vw,690px);max-height:80svh}}@media (min-width: 761px) and (max-height: 900px){.title-brand-lockup-desktop{top:clamp(54px,8svh,72px);width:clamp(560px,47vw,800px)}.title-selection-area{top:clamp(340px,43svh,410px);width:min(50vw,680px)}.title-thumb-button{flex-basis:clamp(96px,6.4vw,118px)}}@media (max-width: 760px){.title-hero{display:flex;min-height:100svh;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;padding:14px 16px}.title-hero:after{content:"";position:absolute;top:34%;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(180deg,#17121a00,#17121a57 38%,#17121a9e);pointer-events:none}.title-background{object-position:center}.title-background-desktop{display:none}.title-background-mobile{display:block;object-position:center center}.title-brand-lockup-desktop{display:none}.title-brand-lockup-mobile{position:absolute;left:clamp(10px,2.8vw,18px);right:auto;top:clamp(54px,8svh,84px);z-index:4;display:grid;width:clamp(176px,44vw,220px);margin:0;transform:none}.title-brand-lockup-mobile .title-logo{filter:drop-shadow(0 8px 6px rgba(92,0,91,.28))}.title-logo-subtitle{margin-top:8px;font-size:clamp(19px,5.2vw,27px);text-shadow:none;-webkit-text-stroke-width:clamp(3px,.9vw,4px)}.title-pointer{display:none}.title-about-button{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:42px;height:42px;border-width:2px}.title-about-mark{font-size:27px;transform:translateY(0)}.about-modal-backdrop{padding:12px}.about-modal{width:min(94vw,520px);max-height:calc(100svh - 24px);border-width:3px}.about-modal-header{padding:12px 12px 9px}.about-modal-close{width:34px;height:34px}.about-modal-body{gap:12px;padding:13px 12px 14px;font-size:clamp(14px,3.7vw,16px);line-height:1.55}.title-selection-area{position:relative;top:auto;left:auto;bottom:auto;width:100%;max-width:560px;gap:12px;justify-items:start}.age-panel{position:static;right:auto;bottom:auto;z-index:auto;width:100%;justify-self:start;text-align:left;transform:translateY(8px);margin-bottom:10px;text-shadow:none;-webkit-text-stroke:0;paint-order:normal}.age-panel p{font-size:clamp(11px,2.9vw,13px);line-height:1.35}.title-character-picker{width:100%;gap:8px;justify-items:start}.title-character-picker h1{color:var(--white);text-align:left;font-size:clamp(19px,5.2vw,22px);-webkit-text-stroke-width:0;text-shadow:0 2px 4px rgba(40,22,42,.62)}.title-thumb-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.title-thumb-button{flex-basis:auto;border-width:2px}.title-credit{gap:3px;margin-top:-1px;font-size:clamp(11px,2.8vw,13px);line-height:1.15}.title-credit-icon.material-icons{font-size:16px}.game-screen{align-items:start;padding:0 0 calc(12px + env(safe-area-inset-bottom))}.game-layout{width:100vw;min-height:auto;grid-template-columns:1fr;grid-template-rows:max-content max-content;grid-template-areas:"stage" "controls";gap:0;align-items:start;align-content:start}.playfield{gap:5px;align-content:start;position:relative}.control-profile,.playfield-brush{display:none}.mobile-profile-stack{position:absolute;top:0;right:max(8px,calc((100vw - 390px)/2 + 4px));z-index:6;display:grid;justify-items:center;gap:0}.playfield-profile{position:absolute;top:10px;right:max(14px,calc((100vw - 390px)/2 + 10px));z-index:4;width:auto;min-height:0;max-height:calc(100svh - 24px);display:grid;grid-template-columns:auto auto;align-items:start;justify-content:flex-start;gap:2px;margin:0;padding:6px 3px 8px;writing-mode:horizontal-tb;text-orientation:mixed;border-radius:8px;background:#ffffffeb;box-shadow:0 5px 12px #2f00342e}.mobile-profile-stack .playfield-profile{position:static;top:auto;right:auto;z-index:auto;padding-bottom:22px;background:#ffffffeb;box-shadow:0 5px 12px #2f00342e}.profile-kicker{padding:4px 2px;font-size:9px}.playfield-profile>.profile-kicker{grid-column:2;grid-row:1 / 4;align-self:start;margin-left:3px;writing-mode:vertical-rl;text-orientation:upright;line-height:.88;letter-spacing:-.08em;transform:none}.playfield-profile>.profile-main{display:contents}.playfield-profile .profile-name{grid-column:1;grid-row:1;writing-mode:vertical-rl;text-orientation:upright;font-size:clamp(15px,4vw,18px);line-height:.95;letter-spacing:.04em}.playfield-profile .profile-department{grid-column:1;grid-row:2;justify-self:center;margin-top:3px;writing-mode:vertical-rl;text-orientation:upright;font-size:clamp(10px,2.75vw,12px);line-height:.9;letter-spacing:.02em}.playfield-profile>.profile-age{grid-column:1;grid-row:3;justify-self:center;margin-top:3px;writing-mode:vertical-rl;text-orientation:upright;color:#1d1520;font-size:clamp(11px,3vw,13px);line-height:.9;letter-spacing:.02em}.canvas-frame{width:min(88vw,390px);max-height:none}.canvas-stage{position:relative;display:block;width:min(88vw,390px);margin-top:-16px;margin-bottom:4px}.canvas-stage .canvas-frame{width:100%}.canvas-icon-button{position:absolute;z-index:6;display:grid;place-items:center;width:42px;height:42px;padding:0;border:3px solid rgba(255,255,255,.96);border-radius:999px;background:linear-gradient(180deg,#ffffff59,#fff0 44%),linear-gradient(180deg,#ff42c7,#e706bb 62%,#bb00b9);color:var(--yellow);box-shadow:inset 0 -3px #6c007129,0 5px 12px #31003747;text-shadow:0 1px 0 rgba(121,0,126,.42)}.canvas-icon-button .material-icons{color:var(--white);font-size:26px;line-height:1}.canvas-home-button{position:fixed;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));bottom:auto}.canvas-download-button{right:-12px;bottom:10px;grid-template-rows:21px 10px;align-content:center;row-gap:0}.mobile-profile-stack .canvas-download-button{position:relative;right:auto;bottom:auto;z-index:1;margin-top:-20px}.canvas-download-button .material-icons{font-size:22px;transform:translateY(1px)}.canvas-download-label{color:var(--white);font-size:11px;font-weight:950;line-height:1;letter-spacing:0}.control-panel{grid-area:controls;width:min(100% - 14px,420px);justify-self:center;gap:8px;margin-top:4px;padding:0 0 8px;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.control-brush{display:grid;grid-row:2;width:100%;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;margin-top:2px;padding:2px 4px 0}.control-brush h1{font-size:clamp(16px,4.4vw,20px);line-height:1.03;text-align:left;-webkit-text-stroke-width:4px}.control-brush h1 span{display:block;white-space:nowrap}.control-brush h1 span+span{margin-top:1px}.range-row{width:100%;grid-template-columns:minmax(0,1fr) 34px;gap:8px}.range-row output{color:var(--white);font-size:22px;-webkit-text-stroke:1.6px #d500b9;text-shadow:0 1px 2px rgba(92,0,104,.35)}.button-stack{width:min(100%,620px);justify-self:center;grid-row:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.reset-button,.reveal-button,.auto-button{grid-column:auto}.control-panel .mega-button,.title-back-button{min-height:62px;border-width:4px;padding:6px 5px;font-size:clamp(15px,4vw,18px);transition:none}.control-panel .mega-button:after{display:none}.control-panel .mega-button:active:not(:disabled){transform:none;box-shadow:inset 0 -4px #6c007124,0 8px 18px #62005933}.auto-button{gap:0;line-height:.9}.auto-button span{line-height:.9}.reveal-button{flex-direction:column;gap:1px;line-height:1.04}.reveal-button span{display:block;line-height:1.05;white-space:nowrap}.control-panel .download-button{grid-column:1 / 2;margin-top:0}.control-panel .title-back-button{grid-column:2 / -1;gap:2px;min-height:62px;font-size:clamp(15px,4vw,18px);line-height:1;margin-top:0}.title-back-button small{font-size:clamp(12px,3.4vw,15px);line-height:1}}@media (max-width: 430px){.title-hero{gap:8px;padding:10px 14px 12px}.title-pointer{display:none}.control-panel .mega-button{min-height:62px;font-size:clamp(15px,4vw,17px)}.control-panel .title-back-button{font-size:clamp(15px,4vw,17px)}.title-character-picker h1{font-size:clamp(18px,5vw,21px);-webkit-text-stroke-width:0}.title-thumb-grid{gap:5px}}