html{touch-action:pan-y}.player{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.player-header{height:72px;padding:12px 24px}.color-tray{max-width:1400px;margin:auto;padding:5px 20px 0;background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:3}.tray-heading{display:flex;align-items:center;gap:14px;min-height:29px;font-size:11px;color:var(--muted)}#selected-color{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}#selected-color:before{content:'';width:18px;height:18px;border-radius:6px;background:var(--selected-swatch,#f0d3dc);border:1px solid #0002}#palette-toggle{margin-left:auto;padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:10px;color:var(--green)}.color-tray .palette{display:flex;flex-wrap:nowrap;gap:14px;width:100%;height:66px;max-height:none;overflow-x:auto;overflow-y:hidden;padding:9px 7px 16px;scrollbar-width:thin;touch-action:pan-x}.color-tray .swatch{width:36px;height:36px;min-width:36px;border-radius:11px;margin:0;flex-shrink:0;font-size:12px}.swatch small{font-size:8px;bottom:-10px}.swatch.active{outline:3px solid #8f5d7b;outline-offset:3px}.studio{display:flex;flex-direction:column;min-height:0}.canvas-wrap{height:calc(100dvh - 245px);min-height:330px;max-height:none}.player:has(.palette[hidden]) .canvas-wrap{height:calc(100dvh - 180px)}.studio-panel{border-left:0;border-top:1px solid var(--line);padding:10px 18px;display:flex;flex-wrap:wrap;gap:8px 15px;align-items:center}.studio-panel .tools{width:210px;max-width:none;margin:0;flex-shrink:0}.tool{padding:8px 5px;font-size:11px}.tool span{display:inline;font-size:16px;margin-right:5px}.action-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:1;min-width:320px;gap:6px}.action-tools button{padding:9px 7px;font-size:10px;min-height:38px}.studio-panel .toggle{margin:0;padding:5px;font-size:10px;display:inline-flex}.studio-panel .challenge{padding:6px 9px}.studio-panel .studio-tip{width:100%;font-size:10px;margin:0;line-height:1.5}.finish-note{width:100%;max-width:650px;margin:10px auto}.zoom-tools{bottom:12px}.zoom-tools button{padding:8px 12px}.collectible[data-frame],.duel-card[data-frame]:not([data-frame=""]){--frame-color:#b77b52;--frame-paper:#fff5e8;border:3px solid var(--frame-color);background:var(--frame-paper);box-shadow:inset 0 0 0 2px #fff9,0 5px 18px #84614522}.collectible[data-frame="gold"],.duel-card[data-frame="gold"]{--frame-color:#c3973e;--frame-paper:#fff7d9;box-shadow:inset 0 0 0 2px #fff8d5,0 4px 18px #ba8e3c33}.collectible[data-frame="silber"],.duel-card[data-frame="silber"]{--frame-color:#9ca6b8;--frame-paper:#f3f5fb}.collectible[data-frame="atelier"],.duel-card[data-frame="atelier"]{--frame-color:#b789a1;--frame-paper:#fff4f9}.collectible[data-frame] .card-art{border:1px solid var(--frame-color)}.collectible[data-frame] .card-progress{color:var(--frame-color);border-color:var(--frame-color);background:var(--frame-paper)}.collectible[data-frame] .card-number{color:var(--frame-color)}.duel-rank{display:block;text-align:center;font-size:9px;letter-spacing:.1em;padding-top:5px;color:var(--frame-color)}dialog input:not([type=file]),dialog textarea,dialog select{font-size:16px}@media(max-width:760px){.player-header{height:67px;padding:10px;gap:8px}.player-heading h1{font-size:16px;max-width:170px}.player-progress strong{font-size:15px}.color-tray{padding:4px 10px 0}.tray-heading{gap:10px;font-size:10px}#palette-toggle{font-size:9px;padding:6px 8px}.color-tray .palette{height:60px;gap:13px}.color-tray .swatch{width:34px;height:34px;min-width:34px}.canvas-wrap{height:calc(100dvh - 330px);min-height:270px;max-height:none}.player:has(.palette[hidden]) .canvas-wrap{height:calc(100dvh - 270px)}.studio-panel{padding:9px 10px;gap:8px}.studio-panel .tools{width:100%;max-width:340px;margin:0 auto}.action-tools{width:100%;min-width:0;flex:none}.action-tools button{font-size:9px;padding:8px 4px}.studio-panel .toggle{font-size:9px;padding:3px;margin:0}.studio-panel .challenge{padding:5px 7px}.studio-panel .studio-tip{font-size:9px}.collectible[data-frame]{border-width:2px}.duel-rank{font-size:8px}}