:root { --ink:#17233d; --muted:#7d899f; --line:#e5eaf2; --blue:#5276f5; --blue-dark:#365be5; --lavender:#eef1ff; --red:#f36c82; --green:#42b889; --shadow:0 28px 70px rgba(29,43,86,.2); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif; background:radial-gradient(circle at 18% 18%,#dfe8ff,transparent 30%),radial-gradient(circle at 85% 78%,#d9f4e9,transparent 28%),#f5f7fc; }
button { font:inherit; }
.app-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.phone { position:relative; width:min(420px,100%); min-height:760px; overflow:hidden; border:9px solid #172039; border-radius:43px; background:#fff; box-shadow:var(--shadow); }
.notch { position:absolute; z-index:4; top:9px; left:50%; width:108px; height:24px; border-radius:0 0 18px 18px; background:#172039; transform:translateX(-50%); }
.screen { min-height:742px; position:relative; overflow:hidden; background:#fbfcff; }
.is-hidden { display:none!important; }
.status-bar { display:flex; justify-content:space-between; align-items:center; padding:16px 22px 8px; font-size:.7rem; font-weight:800; letter-spacing:.02em; }
.start-screen { background:linear-gradient(155deg,#f1f3ff 0%,#fff 53%,#ecfbf6 100%); }
.start-screen::before { content:""; position:absolute; width:230px; height:230px; border-radius:50%; right:-100px; top:90px; background:#dfe5ff; opacity:.65; }
.start-content { position:relative; padding:60px 32px 30px; }
.app-mark { display:grid; place-items:center; width:54px; height:54px; border-radius:18px; color:#fff; font-size:2rem; background:linear-gradient(135deg,#7693ff,#4668e8); box-shadow:0 12px 22px #b8c6ff; }
.eyebrow { margin:0 0 8px; color:var(--blue); font-size:.65rem; font-weight:900; letter-spacing:.15em; }
.start-content .eyebrow { margin-top:24px; }
h1,h2,h3,p { margin:0; } h1 { font-size:3.8rem; line-height:.97; letter-spacing:-.09em; } h1 em { color:var(--blue); font-style:normal; } h2 { font-size:1.45rem; letter-spacing:-.05em; } h3 { font-size:1.08rem; letter-spacing:-.05em; }
.intro { margin-top:18px; color:var(--muted); font-size:.95rem; line-height:1.65; }
.mini-storage { margin-top:34px; padding:18px; border:1px solid #e2e7f4; border-radius:21px; background:rgba(255,255,255,.78); box-shadow:0 14px 30px rgba(70,88,151,.08); }
.mini-storage-head,.storage-card-head,.storage-card-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; } .mini-storage-head { font-size:.76rem; font-weight:800; } .mini-storage-head strong { color:var(--blue); font-size:.82rem; }
.progress,.large-progress { overflow:hidden; border-radius:99px; background:#e9edf5; } .progress { height:9px; margin-top:14px; } .progress i,.large-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5d7cf5,#7891fb); } .mini-caption { display:block; margin-top:9px; color:var(--muted); font-size:.7rem; text-align:right; }
.primary-button { width:100%; min-height:54px; margin-top:25px; border:0; border-radius:17px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); box-shadow:0 12px 20px #c2cdfc; font-size:.95rem; font-weight:900; cursor:pointer; transition:transform .18s,box-shadow .18s; } .primary-button span { margin-left:30px; font-size:1.2rem; } .primary-button:hover { transform:translateY(-2px); box-shadow:0 16px 25px #b7c4fb; }
.rule-hint { margin-top:18px; color:#a5afc0; font-size:.68rem; text-align:center; }
.record-strip { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:12px; padding:12px 14px; border:1px solid #e2e7f4; border-radius:16px; background:rgba(255,255,255,.64); }
.record-strip div { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.record-strip span { color:var(--muted); font-size:.68rem; }
.record-strip strong { color:var(--blue); font-size:.78rem; }
.home-indicator { position:absolute; bottom:9px; left:50%; width:112px; height:4px; border-radius:99px; background:#172039; transform:translateX(-50%); }
.game-screen { padding-bottom:28px; background:#f7f8fc; overflow-y:auto; } .game-header { display:flex; justify-content:space-between; align-items:start; padding:18px 22px 12px; } .game-header h2 { font-size:1.3rem; } .reset-button,.icon-button { border:0; color:var(--muted); background:transparent; font-size:.7rem; font-weight:800; cursor:pointer; } .icon-button { font-size:1.7rem; line-height:1; padding:0 12px 0 0; }
.danger-overlay { position:absolute; z-index:8; inset:0; display:grid; place-items:center; border:7px solid transparent; background:rgba(238,42,64,.14); opacity:0; pointer-events:none; transition:opacity .15s; } .danger-overlay span { padding:10px 18px; border:2px solid #e9354d; border-radius:999px; color:#b91f36; background:rgba(255,244,246,.94); box-shadow:0 8px 24px rgba(185,31,54,.2); font-size:1rem; font-weight:1000; letter-spacing:.04em; transform:translateY(-8px); } .danger-overlay.is-active { opacity:1; animation:dangerFlash .55s infinite alternate; } .danger-overlay.is-active span { animation:dangerText .55s infinite alternate; }
.particle-layer { position:absolute; z-index:9; inset:0; overflow:hidden; pointer-events:none; } .particle { position:absolute; left:50%; top:48%; width:10px; height:10px; border-radius:3px; background:var(--particle-color,#5276f5); animation:burst 900ms cubic-bezier(.15,.7,.25,1) forwards; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; padding:0 18px 14px; } .stats div { padding:10px 4px; border:1px solid var(--line); border-radius:14px; background:#fff; text-align:center; } .stats span { display:block; color:var(--muted); font-size:.61rem; } .stats strong { display:block; margin-top:3px; font-size:.82rem; } .hearts { color:var(--red); letter-spacing:.03em; font-size:.74rem!important; } .timer-text { color:var(--blue); } .timer-text.is-urgent { color:var(--red); animation:pulse .65s infinite alternate; }
.storage-card { margin:0 18px; padding:17px; border-radius:22px; color:#fff; background:linear-gradient(135deg,#415bd5,#6e82ed); box-shadow:0 13px 24px #c5cdf1; } .storage-card .label { display:block; margin-bottom:4px; color:#dce3ff; font-size:.68rem; } .storage-card-head strong { font-size:1.9rem; letter-spacing:-.06em; } .total-text { color:#e0e5ff; font-size:.7rem; } .large-progress { height:10px; margin:15px 0 10px; background:rgba(255,255,255,.28); } .large-progress i { width:75%; background:#fff; transition:width .3s; } .storage-card-foot { color:#dce3ff; font-size:.66rem; } .storage-card-foot b { color:#fff; } .storage-card-foot span:last-child { text-align:right; }
.choice-heading { display:flex; justify-content:space-between; align-items:end; padding:24px 20px 12px; } .choice-heading .eyebrow { margin-bottom:4px; } .choice-heading > span { color:var(--muted); font-size:.68rem; font-weight:800; }
.card-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:0 18px; } .capacity-card { min-height:134px; padding:14px; border:2px solid transparent; border-radius:20px; color:var(--ink); background:#fff; box-shadow:0 7px 18px rgba(54,73,125,.08); text-align:left; cursor:pointer; transition:transform .17s,border-color .17s,box-shadow .17s; } .capacity-card:hover,.capacity-card:focus-visible { border-color:#91a5ff; outline:0; transform:translateY(-3px); box-shadow:0 12px 23px rgba(77,104,214,.17); } .capacity-card .file-icon { display:grid; place-items:center; width:34px; height:34px; margin-bottom:11px; border-radius:11px; color:#fff; font-size:1rem; background:#fb9a67; } .capacity-card:nth-child(2) .file-icon { background:#52a6ed; } .capacity-card:nth-child(3) .file-icon { background:#8f75ed; } .capacity-card:nth-child(4) .file-icon { background:#55c18c; } .capacity-card .file-name { display:block; font-size:.75rem; font-weight:800; } .capacity-card .file-size { display:block; margin-top:5px; color:var(--blue); font-size:1.12rem; font-weight:900; } .game-message { min-height:42px; padding:12px 20px 0; color:var(--muted); font-size:.73rem; line-height:1.35; text-align:center; }
.capacity-card.is-wrong { border-color:var(--red); animation:shake .3s ease; } .capacity-card.is-selected { border-color:var(--green); background:#effbf6; } .capacity-card.is-correct { border-color:var(--blue); box-shadow:0 0 0 3px #dce4ff,0 12px 23px rgba(77,104,214,.2); } .game-screen.is-danger .storage-card { background:linear-gradient(135deg,#d65d70,#ef8795); }
.item-grid .capacity-card { min-height:112px; padding:12px; } .item-grid .file-icon { width:30px; height:30px; margin-bottom:8px; } .deliver-button { width:calc(100% - 36px); margin:18px 18px 0; } .deliver-button:disabled { opacity:.55; cursor:wait; }
.result-screen { background:linear-gradient(155deg,#f1f3ff,#fff 55%,#ecfbf6); } .result-content { padding:90px 32px 30px; text-align:center; } .result-icon { display:grid; place-items:center; width:72px; height:72px; margin:0 auto 24px; border-radius:25px; color:#fff; background:var(--green); font-size:2rem; font-weight:900; } .result-screen.failed .result-icon { background:var(--red); } .result-content h2 { font-size:2rem; } .result-copy { margin-top:10px; color:var(--muted); font-size:.85rem; } .result-score { margin-top:28px; padding:20px; border:1px solid #e2e7f4; border-radius:20px; background:#fff; } .result-score span { display:block; color:var(--muted); font-size:.72rem; } .result-score strong { display:block; margin-top:5px; color:var(--blue); font-size:2rem; } .record-result { min-height:18px; margin-top:10px; color:var(--green); font-size:.75rem; font-weight:900; } .text-button { margin-top:18px; border:0; color:var(--muted); background:transparent; font-size:.75rem; font-weight:800; cursor:pointer; }
.result-summary { margin-top:10px; color:var(--muted); font-size:.72rem; }
@keyframes shake { 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} } @keyframes pulse { to { transform:scale(1.12); } } @keyframes dangerFlash { from { border-color:rgba(235,45,67,.1); background:rgba(238,42,64,.08); } to { border-color:rgba(235,45,67,.82); background:rgba(238,42,64,.22); } } @keyframes dangerText { to { transform:translateY(-8px) scale(1.06); } } @keyframes burst { 0% { opacity:1; transform:translate(-50%,-50%) rotate(0) scale(.7); } 100% { opacity:0; transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--rotate)) scale(1); } } @media(max-width:460px){ .app-shell{padding:0}.phone{width:100%;min-height:100vh;border:0;border-radius:0}.screen{min-height:100vh}.notch{top:0}.start-content{padding-top:72px} }