:root { --ink:#362653; --paper:#fffdf8; --pink:#ff5ba7; --purple:#8264e8; --blue:#58c8fa; --yellow:#ffcf4d; --green:#70d69b; --danger:#f46b79; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); font-family:"Microsoft YaHei", "PingFang SC", system-ui, sans-serif; background:linear-gradient(135deg,#fff4b9 0%,#ffc8e2 38%,#baeaff 72%,#d9ffd6 100%); background-attachment:fixed; }
button,input,select { font:inherit; } button { cursor:pointer; }
.app-shell { width:min(100% - 28px, 980px); margin:0 auto; padding:34px 0 52px; }
.hero { text-align:center; margin-bottom:23px; } .eyebrow { margin:0 0 5px; color:#98652a; font-weight:800; letter-spacing:.08em; font-size:.9rem; }
h1 { margin:0; font-size:clamp(2rem,5vw,3.4rem); line-height:1.15; text-shadow:0 3px 0 #fff; } .subtitle { margin:9px 0 0; font-weight:700; color:#604887; }
.scoreboard { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-bottom:23px; }
.player-card { min-width:0; position:relative; padding:24px 16px 17px; text-align:center; border:4px solid rgba(255,255,255,.92); border-radius:30px; box-shadow:0 9px 0 rgba(77,53,116,.14), 0 15px 26px rgba(98,55,116,.14); }
.player-card-a { background:linear-gradient(145deg,#fff2fa,#ffd2eb); }.player-card-b { background:linear-gradient(145deg,#effaff,#c7efff); }
.rank-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); width:max-content; padding:5px 12px; border-radius:999px; background:var(--yellow); box-shadow:0 3px 0 #d39d17; font-size:.82rem; font-weight:900; }
.avatar-button { display:block; margin:3px auto 7px; width:79px; height:79px; padding:0; border:3px solid white; border-radius:50%; background:#fff; box-shadow:0 5px 0 rgba(79,58,113,.18); font-size:3.2rem; line-height:1; transition:transform .18s; }.avatar-button:hover { transform:scale(1.08) rotate(4deg); }
.name-label { display:block; font-weight:800; font-size:.78rem; color:#6e5a82; }.name-label input { display:block; width:min(100%,170px); margin:4px auto 0; padding:5px; border:0; border-bottom:2px dashed #b59cc9; background:transparent; color:var(--ink); font-size:1.14rem; font-weight:900; text-align:center; outline:none; }.name-label input:focus { border-color:var(--pink); }
.score { margin:6px 0 0; font-weight:950; color:#40205e; line-height:1; }.score span { font-size:clamp(2.4rem,7vw,4.2rem); letter-spacing:-.06em; }.score small { margin-left:4px; font-size:1rem; }.score.bump { animation:bump .55s ease; } @keyframes bump { 30% { transform:scale(1.32) rotate(-4deg); color:var(--pink); } 65% { transform:scale(.93); } }
.versus { z-index:1; display:grid; place-items:center; width:50px; height:50px; border:3px solid white; border-radius:50%; background:var(--purple); color:white; box-shadow:0 4px 0 #5e47b4; font-weight:950; }
.panel { padding:24px; border:4px solid rgba(255,255,255,.9); border-radius:30px; background:rgba(255,253,248,.88); box-shadow:0 8px 0 rgba(77,53,116,.12), 0 14px 28px rgba(89,47,115,.1); }.history-panel { margin-top:23px; }
.section-heading { display:flex; align-items:center; gap:12px; margin-bottom:18px; }.heading-icon { display:grid; flex:none; place-items:center; width:46px; height:46px; border-radius:17px; background:#ffe379; font-size:1.65rem; transform:rotate(-6deg); }.section-heading h2 { margin:0; font-size:1.35rem; }.section-heading p { margin:2px 0 0; color:#766787; font-weight:600; font-size:.88rem; }#sync-status { color:#517d67; }.sync-problem { color:#c65a68 !important; }
fieldset { min-width:0; margin:0 0 15px; padding:0; border:0; } legend { margin-bottom:7px; font-weight:900; }.choice-row { display:flex; flex-wrap:wrap; gap:9px; }.pill-choice { display:block; }.pill-choice input { position:absolute; opacity:0; pointer-events:none; }.pill-choice span { display:block; padding:9px 15px; border:2px solid #e5ddeb; border-radius:999px; background:#fff; font-weight:850; transition:.16s; }.pill-choice input:checked + span { transform:translateY(-2px); border-color:var(--purple); background:#ede8ff; box-shadow:0 3px 0 #c6bbf2; }.add-choice input:checked + span { border-color:#e5a919; background:#fff6bf; }.subtract-choice input:checked + span { border-color:#ed8290; background:#ffe9ec; }
.form-grid { display:grid; grid-template-columns:170px 1fr; gap:13px; }.form-grid label,.edit-dialog label { display:grid; gap:6px; font-weight:850; }.form-grid input,.edit-dialog input,.edit-dialog select { width:100%; padding:11px 13px; border:2px solid #ddd1e7; border-radius:13px; background:#fff; color:var(--ink); outline:none; }.form-grid input:focus,.edit-dialog input:focus,.edit-dialog select:focus { border-color:var(--purple); box-shadow:0 0 0 3px #e8e1ff; }
.save-button,.secondary-button,.clear-button,.record-actions button { border:0; border-radius:14px; font-weight:900; }.save-button { width:100%; margin-top:17px; padding:13px 18px; background:linear-gradient(90deg,var(--pink),#ff7c77,#ffbb50); color:white; box-shadow:0 5px 0 #c64484; font-size:1.06rem; transition:transform .16s; }.save-button:hover { transform:translateY(-2px); }.save-button:active { transform:translateY(3px); box-shadow:0 2px 0 #c64484; }.form-error { min-height:1.15em; margin:9px 0 0; color:#c83b55; font-weight:800; font-size:.9rem; }
.history-heading { margin-bottom:12px; }.clear-button { margin-left:auto; padding:8px 11px; background:#fff0f1; color:#bd3d50; }.history-list { display:grid; gap:10px; }.empty-history { margin:14px 0 4px; padding:22px; border:2px dashed #dccfe8; border-radius:17px; color:#7d6b89; text-align:center; font-weight:700; }.record { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:12px; border-radius:18px; background:white; box-shadow:0 3px 0 #eee6f3; }.record-avatar { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:#f7efff; font-size:1.65rem; }.record-main { min-width:0; }.record-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; font-weight:900; }.record-points { white-space:nowrap; }.record-points.add { color:#d87900; }.record-points.subtract { color:#d9495e; }.record-reason { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:3px 0 0; color:#695a76; font-size:.92rem; font-weight:600; }.record-time { margin:4px 0 0; color:#98899f; font-size:.75rem; }.record-actions { display:flex; gap:5px; }.record-actions button { padding:7px 9px; background:#f3edf8; color:#604d70; font-size:.84rem; }.record-actions .delete { background:#fff0f1; color:#c54457; }
.cute-dialog { width:min(92vw,480px); padding:25px; border:4px solid white; border-radius:28px; color:var(--ink); background:#fffafc; box-shadow:0 18px 60px rgba(58,30,91,.3); }.cute-dialog::backdrop { background:rgba(53,31,78,.38); backdrop-filter:blur(3px); }.cute-dialog h2 { margin:0 0 17px; text-align:center; }.dialog-close { position:absolute; top:10px; right:13px; border:0; background:transparent; color:#725d83; font-size:1.9rem; line-height:1; }.avatar-options { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; }.avatar-options button { padding:9px; border:3px solid transparent; border-radius:17px; background:#f5edff; font-size:2.4rem; }.avatar-options button:hover { transform:scale(1.08); border-color:var(--purple); }.edit-dialog form { display:grid; gap:12px; }.edit-dialog h2 { margin-bottom:4px; }.dialog-actions { display:flex; gap:10px; margin-top:3px; }.dialog-actions button { margin-top:0; }.secondary-button { width:40%; padding:12px; background:#ede6f3; color:#5d4a6d; }.dialog-actions .save-button { width:60%; }
.celebration-layer { position:fixed; z-index:10; inset:0; pointer-events:none; overflow:hidden; }.star { position:absolute; font-size:clamp(1.3rem,4vw,2.5rem); animation:fly-star .9s cubic-bezier(.16,.88,.31,1) forwards; }.floating-points { position:absolute; color:#ff5a9e; font-size:1.45rem; font-weight:950; text-shadow:0 2px white; animation:float-points 1s ease-out forwards; } @keyframes fly-star { 0% { opacity:0; transform:translate(0,0) scale(.3) rotate(0); } 25% { opacity:1; } 100% { opacity:0; transform:translate(var(--x),var(--y)) scale(1.2) rotate(160deg); } } @keyframes float-points { to { opacity:0; transform:translateY(-85px) scale(1.18); } }
@media (max-width:600px) { .app-shell { width:min(100% - 18px,980px); padding-top:20px; }.scoreboard { gap:3px; }.player-card { padding:22px 7px 13px; border-radius:24px; }.avatar-button { width:65px; height:65px; font-size:2.65rem; }.versus { width:39px; height:39px; font-size:.82rem; }.name-label input { font-size:1rem; }.panel { padding:18px 14px; border-radius:24px; }.form-grid { grid-template-columns:1fr; gap:11px; }.section-heading { align-items:flex-start; }.history-heading .heading-icon { display:none; }.clear-button { font-size:.78rem; }.record { grid-template-columns:auto 1fr; }.record-actions { grid-column:2; justify-content:flex-start; }.avatar-options { grid-template-columns:repeat(4,1fr); } }