:root{--warm-coffee: #6B4A2B;--deep-coffee: #3A2115;--cream: #FFF4D5;--dawn-gold: #FFD97A;--panel-gold: #D49A3D;--hard-shadow: #2B2B2B;--warm-red: #C62828;--green: #2E7D32;--pixel-shadow: 4px 4px 0 var(--hard-shadow);--pixel-border: 2px solid var(--hard-shadow)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;background:radial-gradient(circle at 50% 8%,rgba(255,217,122,.24),transparent 32%),linear-gradient(180deg,#6f4426,#2f1b13);color:var(--warm-coffee);font-family:JetBrains Mono,SF Mono,ui-monospace,Menlo,monospace;-webkit-font-smoothing:antialiased;overflow:hidden}#app{width:100%;min-height:100%;height:100dvh;max-width:430px;margin:0 auto;background:linear-gradient(90deg,rgba(255,247,221,.08) 1px,transparent 1px),linear-gradient(180deg,#7a4b2d,#59331f 44%,#2d1a12);background-size:24px 24px,auto;position:relative;overflow:hidden;border-left:3px solid #2a160e;border-right:3px solid #2a160e}.loading{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;background:var(--cream)}.loading p{margin-top:1.25rem;color:var(--warm-coffee);font-family:JetBrains Mono,SF Mono,ui-monospace,Menlo,monospace;font-size:.95rem;letter-spacing:.05em}.pixel-spinner{display:grid;grid-template-columns:repeat(2,14px);gap:5px}.pixel-spinner div{width:14px;height:14px;background-color:var(--dawn-gold);border:2px solid var(--hard-shadow);animation:pixel-blink 1.4s infinite ease-in-out both}.pixel-spinner div:nth-child(1){animation-delay:-.32s}.pixel-spinner div:nth-child(2){animation-delay:-.16s}.pixel-spinner div:nth-child(3){animation-delay:0s}.pixel-spinner div:nth-child(4){animation-delay:-.48s}@keyframes pixel-blink{0%,80%,to{opacity:.25;transform:scale(.85);background-color:var(--dawn-gold)}40%{opacity:1;transform:scale(1);background-color:var(--warm-coffee)}}.unavailable{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;background:var(--cream)}.unavailable .pixel-icon{font-size:4rem;margin-bottom:1.25rem;filter:drop-shadow(3px 3px 0 var(--hard-shadow))}.unavailable h1{font-size:1.25rem;margin-bottom:.75rem;color:var(--warm-coffee);font-family:JetBrains Mono,SF Mono,ui-monospace,Menlo,monospace;font-weight:700;letter-spacing:.05em}.unavailable p{color:var(--warm-coffee);font-size:.95rem;margin-bottom:.5rem;font-family:JetBrains Mono,SF Mono,ui-monospace,Menlo,monospace}.unavailable .sub{color:var(--warm-coffee);font-size:.8rem;opacity:.7;margin-top:.5rem}.player-container{width:100%;height:100%;position:relative;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;align-content:start;padding:clamp(1rem,4vh,1.75rem) 1rem 1rem;overflow:hidden;isolation:isolate}.brand-header{position:relative;z-index:2;display:grid;justify-items:center;gap:.18rem;width:100%;min-height:104px;pointer-events:none}.brand-board{width:min(67vw,258px);image-rendering:pixelated;filter:drop-shadow(0 5px 0 rgba(39,22,14,.75))}.plan-board{width:min(41vw,158px);margin-top:-.42rem;image-rendering:pixelated;filter:drop-shadow(0 3px 0 rgba(39,22,14,.62))}.ambient-sprite,.sparkle-sprite,.coffee-cup{position:absolute;image-rendering:pixelated;pointer-events:none;z-index:1}.ambient-note-one{width:42px;top:9.5rem;left:1.65rem;opacity:.48;transform:rotate(-10deg)}.ambient-note-two{width:40px;top:12.9rem;right:1.1rem;opacity:.54;transform:rotate(9deg)}.ambient-bean{width:46px;left:1.5rem;bottom:3.7rem;opacity:.42;transform:rotate(-16deg)}.coffee-cup{width:clamp(76px,21vw,94px);right:.18rem;bottom:.42rem;z-index:4;opacity:.96;filter:drop-shadow(0 4px 0 rgba(38,22,14,.45))}.player-card{position:relative;z-index:3;width:min(90vw,348px);min-height:min(68vh,540px);margin-top:.3rem;padding:0;background-image:url(/assets/h5/main_container.png);background-repeat:no-repeat;background-position:center;background-size:100% 100%;filter:drop-shadow(0 8px 0 rgba(37,21,13,.56))}.sparkle-top{width:34px;top:1.65rem;right:3rem;opacity:.64}.vinyl-container{position:absolute;width:clamp(150px,42vw,178px);height:clamp(150px,42vw,178px);top:16%;left:50%;transform:translate(-50%);margin:0}.vinyl{width:100%;height:100%;display:block;image-rendering:pixelated;filter:drop-shadow(0 5px 0 rgba(33,20,15,.48))}.vinyl-center{position:absolute;width:31%;height:31%;left:50%;top:50%;transform:translate(-50%,-50%);image-rendering:pixelated;pointer-events:none}.vinyl.spinning{animation:spin 3s linear infinite}.tonearm{position:absolute;top:-1.25rem;right:-.15rem;width:clamp(34px,9vw,40px);height:auto;image-rendering:pixelated;transform-origin:top center;transform:rotate(-14deg);transition:transform .25s ease}.tonearm.playing{transform:rotate(2deg) translate(-.25rem,.4rem)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.track-info{position:absolute;top:48%;left:0;text-align:center;margin:0;width:100%}.aroma-frame{width:min(78%,270px);min-height:54px;position:relative;display:grid;place-items:center;margin:0 auto}.aroma-frame img{width:100%;height:100%;min-height:54px;position:absolute;top:0;right:0;bottom:0;left:0;image-rendering:pixelated}.aroma-frame span{position:relative;z-index:1;max-width:78%;color:#52301d;font-size:clamp(.84rem,3.65vw,1rem);font-weight:700;line-height:1.1;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fallback-badge{display:inline-block;margin-top:.5rem;padding:.3rem .75rem;background:var(--cream);color:var(--warm-coffee);font-size:.75rem;font-weight:700;border:var(--pixel-border);font-family:JetBrains Mono,SF Mono,ui-monospace,Menlo,monospace;letter-spacing:.05em}.controls{position:absolute;top:64%;left:50%;transform:translate(-50%);margin:0;display:flex;gap:1rem;align-items:center}.control-btn{width:58px;height:60px;padding:0;border-radius:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s,filter .1s}.control-btn img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 0 rgba(54,31,18,.42))}.control-btn:active{transform:translateY(3px);filter:brightness(.94)}.control-btn:focus{outline:none}.control-btn:focus-visible{filter:drop-shadow(0 0 0 #f9ce67) drop-shadow(0 0 6px rgba(255,217,122,.85))}.skip-btn{width:40px;height:42px}.skip-btn svg{width:100%;height:100%;filter:drop-shadow(0 3px 0 rgba(54,31,18,.42))}.skip-btn:active svg{filter:drop-shadow(0 1px 0 rgba(54,31,18,.42))}.progress-section{position:absolute;top:74%;left:50%;transform:translate(-50%);width:min(78%,270px);display:flex;flex-direction:column;gap:.4rem}.progress-bar-container{width:100%;height:28px;padding:10px 0;cursor:pointer;touch-action:none}.progress-bar-track{position:relative;width:100%;height:8px;background:#3d2418;border:2px solid #2b180f;box-shadow:inset 0 1px 2px #0006}.progress-bar-fill{position:absolute;top:0;left:0;height:100%;width:0%;background:linear-gradient(180deg,#d4a84a,#b8832a);transition:width .1s linear}.progress-bar-thumb{position:absolute;top:50%;left:0%;transform:translate(-50%,-50%);width:18px;height:18px;background:var(--cream);border:3px solid #2b180f;box-shadow:3px 3px #25140c99;pointer-events:none}.progress-time{display:flex;justify-content:space-between;padding:0 2px;font-size:.72rem;font-weight:700;color:#58331f;font-family:JetBrains Mono,SF Mono,ui-monospace,Menlo,monospace}.share-section{position:absolute;left:50%;bottom:8%;transform:translate(-50%);margin-top:0;width:min(70%,242px)}.share-btn{width:100%;min-height:46px;padding:.62rem 1rem;border:3px solid #2b180f;background:linear-gradient(180deg,#b97832,#8b5228 52%,#5b321d);color:var(--cream);font-size:.92rem;font-weight:800;cursor:pointer;box-shadow:0 5px #25140cc7,inset 0 0 0 2px #ffde8b61;font-family:JetBrains Mono,SF Mono,ui-monospace,Menlo,monospace;letter-spacing:.04em;transition:transform .1s,box-shadow .1s;display:flex;align-items:center;justify-content:center;gap:.5rem}.share-btn:active{transform:translateY(3px);box-shadow:0 2px #25140cc7,inset 0 0 0 2px #ffde8b52}.share-btn:focus{outline:none}.share-btn:focus-visible{box-shadow:0 5px #25140cc7,inset 0 0 0 2px #ffde8b61,0 0 0 3px #ffd97a8c}.share-loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#2b2b2bd9;display:flex;align-items:center;justify-content:center}.share-loading-content{display:flex;flex-direction:column;align-items:center;gap:1.25rem}.share-loading-content p{color:var(--cream);font-family:JetBrains Mono,SF Mono,ui-monospace,Menlo,monospace;font-size:1rem;font-weight:700;letter-spacing:.05em}.share-hint{margin-top:.5rem;font-size:.7rem;color:var(--warm-coffee);opacity:.75;font-family:JetBrains Mono,SF Mono,ui-monospace,Menlo,monospace;letter-spacing:.05em}.share-fallback{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;padding:1rem;background:#2b2b2bc7;display:flex;align-items:center;justify-content:center}.share-fallback-panel{width:min(100%,390px);max-height:92vh;padding:.85rem;background:#4f2d1d;border:3px solid #23130c;box-shadow:0 6px #1c0f09d9;position:relative;overflow:auto}.share-fallback-panel p{padding:.35rem 2.2rem .75rem 0;color:#ffe7b0;font-size:.9rem;font-weight:700;letter-spacing:.04em}.share-fallback-panel img{width:100%;display:block;border:3px solid #23130c;background:var(--warm-coffee)}.share-fallback-close{position:absolute;top:.6rem;right:.6rem;width:32px;height:32px;border:var(--pixel-border);background:var(--dawn-gold);color:var(--hard-shadow);font-size:1.2rem;font-weight:700;line-height:1;box-shadow:2px 2px 0 var(--hard-shadow)}@media(max-height:760px){.player-container{padding-top:.65rem}.brand-header{min-height:82px}.brand-board{width:min(62vw,222px)}.plan-board{width:min(38vw,136px)}.player-card{width:min(88vw,320px);min-height:470px}.vinyl-container{width:138px;height:138px;top:16%}.track-info{top:48%}.controls{top:64%}.share-section{bottom:8%}.coffee-cup{width:78px}}