/* TSUMIAGE 1.6 — compact goal studio and tactile arcade */
.brand-mark { object-fit:cover; border-radius:10px; }
.breakdown-actions .chip-opt{white-space:nowrap;flex:1;}.breakdown-actions .btn-ghost{width:auto;flex:none;white-space:nowrap;}.detail-heading .btn-ghost{width:auto;flex:none;}
.slot-stop-all{margin:0 auto!important;padding:7px 18px!important;min-height:32px;font-size:11px!important;}.hl-odds-note{font-size:10px;line-height:1.6;text-align:center;color:#b7abcc;margin:0 0 10px;}.hl-btn small{font-size:11px;}.catch-game{height:100%;}.catch-message{position:absolute;pointer-events:none;}.catch-stage canvas{position:absolute;inset:0;}
.goal-art { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.dh-emoji .goal-art { width:46px; height:46px; border-radius:15px; }
.goal-studio { width:min(640px,100%); height:min(700px,calc(var(--app-h,100dvh) - 20px)); max-height:calc(var(--app-h,100dvh) - 20px); padding:10px 22px max(12px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; overflow:hidden; }
.goal-studio .sheet-handle { flex:none; margin:0 auto 12px; }
.studio-head { display:flex; align-items:center; justify-content:space-between; flex:none; gap:12px; }
.studio-head small { color:#b4aad3; font-size:11px; letter-spacing:.07em; }
.studio-head h3 { margin:4px 0 14px; font-size:23px; }
.studio-head .icon-btn { align-self:flex-start; }
.studio-tabs { display:flex; gap:4px; padding:4px; border-radius:14px; background:#100d26; flex:none; margin-bottom:16px; }
.studio-tabs button { flex:1; min-height:40px; border:0; color:#b8afd2; background:transparent; border-radius:10px; font-weight:700; }
.studio-tabs button.on { background:#48406b; color:#fff; box-shadow:0 2px 9px #0003; }
.studio-body { flex:1; min-height:0; overflow:hidden; }
.studio-body > section { height:100%; overflow-y:auto; overscroll-behavior:contain; padding:0 1px 8px; }
.studio-body > [hidden], .studio-footer > [hidden] { display:none!important; }
.studio-body > [data-page=plan] { display:flex; flex-direction:column; overflow:hidden; }
.studio-preview { display:flex; align-items:center; gap:14px; padding:16px; border:1px solid #c8b9ff26; background:linear-gradient(110deg,#9c86ff1b,transparent); border-radius:20px; margin-bottom:22px; }
.studio-preview .goal-emoji { width:62px; height:62px; flex:none; box-shadow:none; border-radius:17px; overflow:hidden; }
.studio-preview small { display:block; color:#bcb1d7; font-size:11px; margin-bottom:5px; }
.studio-preview strong { display:block; font-size:17px; line-height:1.5; overflow-wrap:anywhere; }
.goal-studio .field { margin:0 0 15px; }
.goal-studio .field > span { margin-bottom:7px; }
.goal-studio .field input,.goal-studio .field textarea { padding:12px 14px; font-size:16px; }
.goal-studio input:focus-visible,.goal-studio textarea:focus-visible { outline:2px solid #c1b1ff; outline-offset:2px; }
.studio-examples { display:flex; flex-wrap:wrap; gap:6px; margin:-5px 0 20px; }
.studio-examples button { border:1px solid #beb0fa30; background:#ada0ff0b; color:#c9c0df; padding:7px 11px; border-radius:99px; font-size:11px; }
.studio-ai-entry { width:100%; display:flex; align-items:center; gap:12px; text-align:left; padding:17px; color:#eee9ff; background:linear-gradient(120deg,#6c50c955,#37637833); border:1px solid #ad99fb50; border-radius:18px; }
.studio-ai-entry > span { font-size:25px; }.studio-ai-entry > div { flex:1; }.studio-ai-entry b { display:block; font-size:15px; }.studio-ai-entry small { display:block; color:#c0b6da; margin-top:5px; font-size:11px; }.studio-ai-entry i { font-style:normal; }
.studio-note { color:#b2a7ce; font-size:12px; line-height:1.7; margin:18px 1px; }
.studio-footer { flex:none; padding-top:12px; border-top:1px solid #c4b5ff25; display:flex; flex-direction:column; gap:8px; background:linear-gradient(180deg,#191531,#18142f); }
.studio-footer > span { text-align:center; color:#b9adcf; font-size:11px; min-height:15px; }
.studio-footer .btn-primary { width:100%; min-height:48px; margin:0; padding:11px 16px; }
.goal-studio button:disabled { opacity:.48; cursor:default; }.goal-studio button:focus-visible { outline:2px solid #c5b7ff; outline-offset:3px; }
.plan-input { flex:none; }.plan-input .field { margin-bottom:9px; }.plan-input .btn-primary { margin:0; width:100%; padding:10px; min-height:43px; }.plan-input textarea { resize:none; line-height:1.4; }
.coach-status { flex:none; color:#d8c8fc; font-size:12px; line-height:1.6; margin:9px 0; overflow-wrap:anywhere; }
.coach-status:empty { display:none; }.coach-spinner { width:13px; height:13px; display:inline-block; margin-right:8px; border:2px solid #ffffff44; border-top-color:#e8dcff; border-radius:50%; animation:coachSpin .8s linear infinite; vertical-align:-2px; }@keyframes coachSpin {to{transform:rotate(360deg)}}
.coach-results { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:5px 3px 8px 0; }
.coach-empty { min-height:180px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; color:#c4b7dd; }.coach-empty img { border-radius:24px; }.coach-empty b { font-size:14px; }.coach-empty span {font-size:12px;}
.coach-check { display:flex; align-items:center; gap:10px; cursor:pointer; }.coach-check input { flex:none; accent-color:#b4a0ff; width:18px; height:18px; }.coach-check b {font-size:14px;line-height:1.5;}.coach-check img {border-radius:12px;flex:none;}
.first-step {flex:none;color:#c7bedc;font-size:11px;padding:8px 0 0;}
.plan-card { border:1px solid #b1a0ec30; border-radius:17px; padding:13px; margin-bottom:10px; background:#b9a3ff08; }.plan-card p {font-size:12px;line-height:1.6;color:#c1b7d5;margin:10px 0 5px;}.plan-card > small {font-size:11px;line-height:1.6;color:#aee0ce;display:block;}.plan-card-foot {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;}.plan-card-foot span {font-size:10px;color:#b4a8ca;}.plan-card-foot button {font-size:11px;font-weight:700;border:1px solid #b59dff66;background:#b59dff20;color:#ece3ff;padding:8px 10px;border-radius:10px;}.plan-card.added {border-color:#9ee9c650;background:#72d7ac0b;}
.detail-heading {display:flex;align-items:center;justify-content:space-between;margin:2px 0 12px;}.detail-heading b {font-size:13px;}.detail-heading .btn-ghost {font-size:12px;padding:8px 12px;min-height:38px;margin:0;}
.art-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:15px; }.art-grid button {border:2px solid transparent;background:#100e24;border-radius:15px;padding:5px 3px 7px;color:#c4b9d8;display:flex;align-items:center;flex-direction:column;gap:5px;}.art-grid img{width:clamp(40px,10vw,64px);height:clamp(40px,10vw,64px);border-radius:11px;}.art-grid button.sel{border-color:#b6a0ff;box-shadow:0 0 16px #9a73ff20;}.art-grid span{font-size:9px;white-space:nowrap;}
.goal-studio .color-row {gap:10px;margin-bottom:14px;}.goal-studio .color-row button {width:28px;height:28px;}.emoji-options {margin:8px 0 15px;font-size:12px;color:#b9add0;}.emoji-options summary{cursor:pointer;}.emoji-options .emoji-grid{grid-template-columns:repeat(8,1fr);padding-top:10px;gap:5px;}.emoji-options .emoji-grid button{font-size:22px;aspect-ratio:1;}
.breakdown-btn {flex:none;font-size:10px;font-weight:700;line-height:1.3;border:1px solid #ab94ea55;background:#a792ff14;color:#d7c9ff;padding:8px 9px;border-radius:10px;min-height:36px;}.breakdown-btn:hover{background:#a792ff30;}.task-parent{display:block;font-size:10px;color:#b6aaca;font-weight:500;line-height:1.5;margin-bottom:3px;}
.breakdown-studio {height:min(680px,calc(var(--app-h,100dvh) - 20px));}.breakdown-source{flex:none;color:#eee8ff;background:#cab3ff14;border-radius:13px;padding:12px;font-size:14px;margin:0 0 12px;}.breakdown-actions{display:flex;gap:8px;align-items:center;flex:none;}.breakdown-actions button{font-size:11px;min-height:38px;padding:8px 10px;margin:0;}.breakdown-actions .btn-ghost{margin-left:auto;}.step-card{display:flex;align-items:center;gap:8px;border:1px solid #b09eea30;background:#c0a8ff09;border-radius:14px;margin:0 0 9px;padding:11px 10px;}.step-card > div {min-width:0;flex:1;}.step-card input[data-text]{width:100%;color:#f0eafb;background:transparent;border:0;padding:3px;font-size:14px;}.step-card small {display:block;color:#b5aacb;font-size:10px;margin:5px 3px 0;}.step-number{font:700 13px Outfit,sans-serif;color:#bda7f5;}.step-add{background:#ac93f320;border:1px solid #bea9fd44;color:#efe6ff;border-radius:10px;min-width:36px;min-height:36px;}.step-card.added{border-color:#7dd9b444;}
@media(max-width:480px){.goal-studio{padding-left:16px;padding-right:16px;}.studio-head h3{font-size:21px;}.studio-tabs{margin-bottom:12px;}.studio-preview{padding:12px;margin-bottom:18px;}.studio-preview .goal-emoji{width:52px;height:52px;}.studio-preview strong{font-size:15px;}.studio-body .field{margin-bottom:13px;}.studio-ai-entry{padding:13px;}.todo-inner{gap:8px;}.breakdown-btn{font-size:10px;padding:6px;}.goal-studio .color-row{gap:9px;}}
@media(max-height:700px){.goal-studio{height:calc(var(--app-h,100dvh) - 8px);max-height:calc(var(--app-h,100dvh) - 8px);}.studio-head small{display:none;}.studio-head h3{font-size:19px;margin:0 0 10px;}.studio-preview{margin-bottom:13px;padding:10px;}.studio-examples{margin-bottom:12px;}.studio-note{margin:10px 0;font-size:11px;}.studio-tabs{margin-bottom:10px;}.studio-ai-entry small{font-size:10px;}}
@media(prefers-reduced-motion:reduce){.coach-spinner{animation:none;}}
.arc-feature {position:relative;flex:none;min-height:205px;overflow:hidden;border-radius:22px;border:1px solid #c6aaff66;background:#231735;isolation:isolate;order:-1;}
.arc-feature>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:-2;}.arc-feature:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#171027eb 5%,#201532b5 48%,transparent 90%);z-index:-1;}.arc-feature>div{padding:24px;}.arc-feature span{color:#d5c2f7;font-size:10px;letter-spacing:.13em;font-weight:700;}.arc-feature h2{font-size:26px;margin:9px 0;color:#fff1df;}.arc-feature p{font-size:12px;color:#d4c6df;line-height:1.8;margin:0 0 14px;}.arc-feature b{font-size:11px;background:#d7c0ff22;border:1px solid #d7c0ff55;border-radius:99px;padding:8px 14px;display:inline-block;}
.game-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;font-size:10px;color:#bfb2d4;padding:0 2px;}.game-tools button{font-size:10px;color:#d9c5ff;border:1px solid #c5aaff44;border-radius:99px;background:#a58be511;padding:7px 10px;flex:none;}
.catch-game{display:flex;flex-direction:column;gap:9px;min-height:0;}.catch-hud{display:flex;align-items:center;gap:12px;justify-content:space-between;flex:none;padding:0 4px;}.catch-hud>span{font-size:9px;color:#b9a8d1;}.catch-hud b{display:block;font:800 22px Outfit,sans-serif;color:#f3e7ff;margin-top:3px;}.catch-hud b>span{font-size:10px;margin-left:3px;}.catch-hud #catchHearts{color:#f5a1b9;font-size:17px;letter-spacing:2px;}.catch-hud .icon-btn{width:34px;height:34px;}
.catch-stage{flex:1;min-height:180px;position:relative;border:1px solid #c1a5ee44;border-radius:21px;overflow:hidden;background:#171027;}.catch-stage canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-4px;}.catch-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:18px;background:#110d20cd;backdrop-filter:blur(6px);overflow-y:auto;}.catch-overlay[hidden]{display:none;}.catch-overlay>div{text-align:center;width:100%;max-width:330px;}.catch-intro>img{width:85px;height:85px;border-radius:25px;margin:0 auto 12px;display:block;box-shadow:0 8px 45px #b58dff22;}.catch-kicker{display:block;font-size:10px;letter-spacing:.12em;color:#bca4de;font-weight:700;}.catch-overlay h2{font-size:25px;margin:9px 0 13px;color:#f6edff;}.catch-overlay p{font-size:12px;line-height:1.8;color:#cdbbdf;margin:12px 0;}.catch-overlay p>b{color:#ffabc1;}.catch-best{font-size:10px;color:#b7a7ce;margin:15px 0;}.catch-best strong{font:800 19px Outfit,sans-serif;color:#ebd8ff;margin:0 5px;}.catch-overlay .btn-primary,.catch-overlay .btn-ghost{width:100%;margin:6px 0;min-height:44px;padding:10px 14px;font-size:13px;}.catch-intro>small{font-size:9px;color:#b7a6ca;}.catch-result-score{font:900 58px Outfit,sans-serif;color:#ffe0a3;text-shadow:0 0 30px #efad3144;}.catch-reward{background:#fbcf7217;color:#ffe0a5;font-weight:800;padding:12px;border-radius:13px;font-size:15px;}.catch-overlay .catch-advice{font-size:11px;color:#bcabd0;}.catch-upgrade>button{display:block;text-align:left;width:100%;border:1px solid #c4a7f144;background:linear-gradient(110deg,#75619744,#17142c);border-radius:15px;padding:17px;margin:10px 0;color:#eee1ff;}.catch-upgrade b{display:block;font-size:15px;}.catch-upgrade button>span{display:block;color:#bdafd4;font-size:11px;margin-top:6px;}.catch-combo{position:absolute;top:15px;left:0;width:100%;text-align:center;pointer-events:none;font:800 20px Outfit,sans-serif;color:#ffdf9d;text-shadow:0 0 20px #ffba5666;}.catch-energy{position:relative;flex:none;height:21px;overflow:hidden;border-radius:99px;background:#c19de112;border:1px solid #c29af128;}.catch-energy>i{position:absolute;inset:0 auto 0 0;width:0;transition:width .2s;background:linear-gradient(90deg,#786bba,#bea4e9);border-radius:inherit;}.catch-energy>span{position:relative;display:block;text-align:center;line-height:19px;color:#eee3ff;font-size:9px;font-weight:700;}.catch-energy.fever>i{background:linear-gradient(90deg,#de888f,#eec475);}.catch-controls{flex:none;display:flex;align-items:center;justify-content:space-between;gap:9px;}.catch-controls button{min-height:42px;min-width:75px;border:1px solid #b597db44;background:#cba2ef11;border-radius:13px;font-size:22px;color:#e6d2ff;touch-action:none;}.catch-controls>span{font-size:10px;color:#b9a8c9;text-align:center;}.catch-controls button:active{background:#d5a4ff33;}
@media(max-height:720px){.catch-intro>img{width:60px;height:60px;margin-bottom:8px;}.catch-overlay h2{font-size:22px;margin:6px 0 9px;}.catch-overlay p{font-size:11px;margin:7px 0;}.catch-best{margin:10px 0;}.catch-overlay{padding:12px;}.catch-result-score{font-size:44px;}.catch-upgrade>button{padding:12px;}.arc-feature{min-height:185px;}.catch-hud b{font-size:18px;}}
.step-card textarea[data-text]{width:100%;color:#f0eafb;background:transparent;border:0;padding:3px;font-size:13px;line-height:1.6;resize:vertical;min-height:46px;max-height:110px;}
.catch-overlay{z-index:2;} @media(max-width:400px){.gm-head h1{font-size:12px;}}
@media(max-width:480px){.gm-head h1{white-space:normal;overflow:visible;line-height:1.35;font-size:12px;}}