:root{color-scheme:dark;--bg:#080d19;--panel:#101a2b;--line:#243249;--muted:#9aacc3;--blue:#4094ff;--cyan:#6adee8;--white:#eff6ff;--green:#63ddb2;--red:#f6a2ad;font-family:Inter,Segoe UI,Arial,sans-serif;font-size:15px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 0,#172b4c 0,transparent 55%),var(--bg);color:var(--white);min-height:100vh}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--line);background:#142238;color:var(--white);border-radius:10px;padding:10px 14px;transition:background .18s,transform .18s}button:hover{background:#203552}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--blue);color:#071226;border-color:var(--blue);font-weight:700}button.quiet{background:transparent;color:var(--muted);padding:7px 10px}a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}.shell{max-width:1600px;margin:auto;padding:26px 34px 32px}.topbar{display:flex;gap:24px;align-items:center;justify-content:space-between;margin-bottom:24px}.brand{display:flex;align-items:center;gap:12px;color:var(--white)}.brand img{width:44px;height:44px;object-fit:contain;border-radius:12px}.brand strong{font-size:21px;letter-spacing:3px}.brand small{display:block;letter-spacing:1px;color:var(--muted);font-size:10px;margin-top:4px}.nav{display:flex;gap:6px;background:#0b1321;border:1px solid var(--line);padding:5px;border-radius:14px}.nav button{background:transparent;border:0;color:var(--muted);min-width:105px}.nav button.active{background:#244675;color:var(--white)}.utility{display:flex;gap:8px;align-items:center;font-size:12px}.dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:var(--green);margin-right:7px}.demo-banner,.alert{padding:12px 16px;border-radius:12px;background:#142844;border:1px solid #365c8b;color:#c5ddff;margin-bottom:18px;font-size:13px}.alert{border-color:#805e46;background:#30231e;color:#ffdbad}.hero{min-height:172px;position:relative;background:linear-gradient(90deg,#101f38 10%,#101f38dd 55%,#101f3860),url('/assets/puzzle.jpg') right 44%/360px auto;border:1px solid #2c4970;border-radius:22px;padding:30px 34px;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:26px;margin-bottom:26px}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:11px;color:var(--cyan);font-weight:700}h1{font-size:34px;line-height:1.12;letter-spacing:-1px;margin:12px 0}h2{font-size:20px;margin:0;letter-spacing:-.4px}h3{font-size:16px;margin:0}.muted{color:var(--muted)}p{line-height:1.6}.hero p{margin:0;color:#adbed5}.hero-actions{display:flex;gap:10px;flex-shrink:0}.columns{display:grid;grid-template-columns:minmax(260px,1fr) minmax(320px,1.25fr) minmax(340px,1.1fr);gap:22px;align-items:start}.panel{background:linear-gradient(145deg,#132138,#0f1828);border:1px solid var(--line);border-radius:18px;padding:22px;min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.panel-head small{display:block;color:var(--muted);font-size:12px;margin-top:7px}.section-label{display:flex;gap:8px;align-items:center;text-transform:uppercase;font-size:10px;letter-spacing:1.4px;color:var(--muted);margin:22px 0 12px}.chip{border:1px solid #345c8b;color:#a8cdff;border-radius:6px;padding:4px 7px;font-size:10px;font-weight:600;white-space:nowrap}.goal-card{border:1px solid var(--line);border-radius:12px;background:#0b1526;padding:17px;margin-top:12px}.goal-card button{text-align:left;font-weight:600;display:block;width:100%;padding:0;background:none;border:none;line-height:1.4}.goal-card p{font-size:12px;color:var(--muted);margin:10px 0}.goal-card .goal-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.progress-meta{display:flex;justify-content:space-between;font-size:11px;margin-top:12px}progress{appearance:none;width:100%;height:5px;border:none;background:#223147;border-radius:8px;display:block;margin-top:8px}progress::-webkit-progress-bar{background:#223147;border-radius:8px}progress::-webkit-progress-value{background:linear-gradient(90deg,#3673df,#64d6ff);border-radius:8px}.empty{padding:23px 10px;color:var(--muted);font-size:13px;line-height:1.7;text-align:center;border:1px dashed var(--line);border-radius:12px;margin-top:12px}.week-controls,.date-controls{display:flex;align-items:center;justify-content:space-between;gap:8px}.week-controls{background:#0b1526;border-radius:10px;padding:6px;margin-bottom:18px;font-size:12px}.week-controls button{border:0;background:transparent;padding:6px 10px}.task{display:flex;align-items:flex-start;gap:10px;padding:14px 0;border-bottom:1px solid #223148}.task:last-child{border:0}.check{padding:0;width:22px;height:22px;border-radius:7px;flex-shrink:0;background:#0b1423}.check.done{background:var(--blue);border-color:var(--blue);color:#061329}.task-body{min-width:0;flex:1}.task-title{background:none;border:0;padding:0;text-align:left;font-size:13px;font-weight:600;line-height:1.5}.task.done .task-title{color:var(--muted);text-decoration:line-through}.task small{display:block;color:var(--muted);font-size:11px;margin-top:6px}.task .overdue{color:var(--red)}.add-wide{width:100%;margin-top:15px;border-style:dashed;background:transparent;color:#a5cfff}.habit{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid #223148}.habit-title{background:none;border:0;padding:0;color:var(--white);font-size:12px;text-align:left;line-height:1.4;flex:1}.habit-actions{display:flex;gap:5px}.habit-actions button{font-size:11px;padding:5px 8px;border-radius:6px;color:var(--muted);background:#0b1423}.habit-actions .yes{background:#153c39;border-color:#337b6a;color:var(--green)}.habit-actions .no{background:#3b2632;border-color:#774653;color:var(--red)}.habit-actions .clear{border:0;background:transparent;color:var(--muted);padding:5px}.day-progress{background:#0c1524;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:9px}.day-progress b{font-size:23px;color:var(--cyan)}.day-progress span{font-size:12px;color:var(--muted)}.day-progress .row{display:flex;justify-content:space-between;align-items:center}.lower{display:grid;grid-template-columns:1fr 1.4fr;gap:22px;margin-top:22px}.monster-card p{font-size:12px;color:var(--muted);max-width:60%}.monster-card h3{font-size:21px;max-width:60%;line-height:1.3}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:center;padding:26px}.stat b{display:block;font-size:28px;font-weight:650;margin:9px 0;color:var(--white)}.stat small{font-size:11px;color:var(--muted);line-height:1.5}.stat label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--cyan)}.footer{display:flex;justify-content:space-between;gap:20px;margin-top:28px;font-size:11px;color:var(--muted)}.view-bar{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:22px 0;flex-wrap:wrap}.view-bar .filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.goal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.matrix-wrap{overflow:auto;margin-top:20px;border:1px solid var(--line);border-radius:12px}table{border-collapse:collapse;font-size:11px;width:100%;min-width:1080px}th,td{padding:8px 3px;text-align:center;border-bottom:1px solid #213047}th{color:var(--muted);font-weight:400}th:first-child,td:first-child{text-align:left;min-width:195px;padding:12px;background:#111c2f;position:sticky;left:0;z-index:1}.cell{width:25px;height:25px;border-radius:5px;padding:0;background:#152136;border:1px solid #2a3a52;font-size:11px;color:#7990b1}.cell.yes{background:#16483e;border-color:#287361;color:#8affcc}.cell.no{background:#462d39;border-color:#6d4353;color:#ffc1cb}.cell.future{background:transparent;border-style:dashed;opacity:.3}.today-col{color:var(--cyan);font-weight:bold}.legend{display:flex;gap:22px;margin-top:16px;font-size:11px;color:var(--muted);flex-wrap:wrap}.legend .yes{color:var(--green)}.legend .no{color:var(--red)}.auth{max-width:450px;margin:8vh auto;padding:34px}.auth .brand{margin-bottom:35px}.auth h1{font-size:29px}.auth form{margin-top:28px}label.field{display:block;font-size:12px;color:var(--muted);margin:17px 0}input,select,textarea{background:#0a1322;color:var(--white);border:1px solid #344660;border-radius:9px;padding:11px 12px;width:100%;margin-top:7px;min-width:0}textarea{resize:vertical;min-height:110px;line-height:1.5}.filters input,.filters select,.date-controls input{width:auto;margin:0;padding:8px}.auth button{width:100%}.loading{padding:80px;text-align:center;color:var(--muted)}dialog{background:#101b2e;color:var(--white);border:1px solid #3e5573;border-radius:20px;padding:26px;width:560px;max-width:calc(100vw - 30px);max-height:90vh}dialog::backdrop{background:#030915bb;backdrop-filter:blur(5px)}dialog .panel-head{margin-bottom:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px}.form-actions .danger{margin-right:auto;color:var(--red)}.form-error{color:var(--red);font-size:12px;min-height:18px}.sync-status{max-width:200px;text-align:right}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:20;padding:13px 20px;border:1px solid #4b729f;background:#172b45;border-radius:12px;font-size:13px;max-width:90%;display:none;box-shadow:0 10px 40px #0008}#toast.show{display:block}.busy{opacity:.7;pointer-events:none}.wide-tasks{max-width:980px;margin:auto}.archived{opacity:.5}.note{font-size:12px;color:var(--muted);line-height:1.6}.spacer{margin-top:24px}.icon-button{font-size:20px;padding:6px 11px}.inline-link{font-size:11px}.task-summary{display:flex;justify-content:space-between;align-items:center;margin-top:15px;font-size:11px;color:var(--muted)}
@media(min-width:1500px){.shell{padding-top:34px}.columns{gap:26px}.panel{padding:26px}.hero{min-height:200px}}
@media(max-width:1100px){.shell{padding:20px}.columns{grid-template-columns:1fr 1fr}.columns>section:last-child{grid-column:1/-1}.habit-list{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.utility .sync-status{display:none}.nav button{min-width:75px}.goal-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:29px}}
@media(max-width:700px){.shell{padding:15px}.topbar{flex-wrap:wrap;gap:16px}.nav{order:3;width:100%;justify-content:space-between}.nav button{min-width:0;flex:1}.utility{margin-left:auto}.hero{padding:24px;min-height:220px;display:block;background-size:auto,240px auto}.hero-actions{margin-top:20px}.hero h1{font-size:29px}.hero p{font-size:13px;max-width:85%}.columns,.lower,.goal-grid{grid-template-columns:1fr}.columns>section:last-child{grid-column:auto}.habit-list{display:block}.panel{padding:20px}.stats{padding:20px;gap:12px}.stat b{font-size:25px}.footer{flex-wrap:wrap}.form-row{grid-template-columns:1fr;gap:0}.auth{margin:25px auto}.week-controls{font-size:11px}.hero-actions button{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
body::before{content:"";position:fixed;z-index:0;pointer-events:none;left:-4.5vw;top:48%;transform:translateY(-45%);width:clamp(270px,37vw,590px);height:91vh;background:url('/assets/monster-inward.png') left center/contain no-repeat;opacity:.20;filter:saturate(.75) contrast(1.1)}
.shell{position:relative;z-index:1}.panel{background:linear-gradient(145deg,#132138e8,#0f1828e8)}.lower{grid-template-columns:1fr}.brand{gap:0}.range-bar{gap:24px;align-items:end}.range-bar>div{flex:1}.range-bar .eyebrow{margin-bottom:12px}.range-controls{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.range-preset,.range-date{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:11px;min-width:122px}.range-preset{min-width:225px}.range-controls select,.range-controls input{margin:0;width:100%;padding:9px}.range-date input{color-scheme:dark}.date-controls .inline-link{white-space:nowrap}.day-progress .row>div b{font-size:15px;color:var(--white)}.habit-actions button:disabled{opacity:.35}@media(max-width:700px){body::before{left:-22vw;top:49%;width:78vw;height:78vh;opacity:.12}.range-bar{align-items:stretch}.range-controls{display:grid;grid-template-columns:1fr 1fr}.range-preset{grid-column:1/-1;min-width:0}.range-date{min-width:0}.date-controls{flex-wrap:wrap}.panel{background:linear-gradient(145deg,#132138f0,#0f1828f0)}}

.outside-range{background:#070e1d55}.outside-range .cell{opacity:.6}.add-wide:disabled{opacity:.45;cursor:default}
.focus-session-list>div>span{flex:1}.focus-session-remove{color:var(--red)!important;flex:none;font-size:11px;padding:6px 8px!important}.focus-session-list>div{flex-wrap:wrap;align-items:center}.focus-session-list>div>b{white-space:nowrap}

/* Character progression and the enlarged upper-left watermark. */
body::before{left:-5vw;top:-4vh;transform:none;width:clamp(400px,48vw,760px);height:clamp(500px,94vh,1020px);background-position:left top;opacity:.2}
.xp-dashboard{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;margin:24px 0}.xp-level-top{display:flex;gap:18px;align-items:center}.xp-level-top>.chip{margin-left:auto;font-size:9px}.level-badge{width:70px;height:78px;flex:none;background:linear-gradient(150deg,#1e5681,#152345);border:1px solid #5db6ec;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 25px #398bed22}.level-badge small{font-size:8px;letter-spacing:1.5px;color:#a3dbff}.level-badge b{font-size:36px;line-height:1.3;color:#c3f2ff}.xp-level h2{margin:8px 0;font-size:20px}.xp-level-top p{font-size:12px;color:var(--muted);margin:0}.xp-level>.progress-meta{margin-top:24px}.xp-level>progress{height:8px}.level-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:21px}.level-steps span{display:flex;flex-direction:column;align-items:center;gap:7px;color:#7189a6}.level-steps b{display:grid;place-items:center;width:27px;height:27px;border:1px solid #354661;border-radius:50%;font-size:11px}.level-steps small{font-size:9px}.level-steps .earned b{color:#b9eeff;background:#245c82;border-color:#66c9ff}.level-steps .earned small{color:var(--cyan)}.xp-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.xp-value{font-size:32px;display:block;color:var(--cyan);margin-top:18px;font-weight:650}.xp-value small{font-size:12px;color:var(--muted)}.xp-split{display:grid;gap:12px;margin-top:24px}.xp-split>span{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.xp-split b{color:var(--white)}.xp-meter{display:grid;grid-template-columns:1fr auto;gap:5px;margin-top:13px;font-size:11px;color:var(--muted)}.xp-meter b{color:var(--white);font-weight:500}.xp-meter progress{grid-column:1/-1;margin:0}.xp-preview{font-size:12px;padding:5px 0;color:var(--cyan)}.task-rank{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid #405c7c;border-radius:5px;font-size:10px;font-weight:700;margin-right:4px}.rank-A{color:#92e7ff;background:#1c3c55;border-color:#4d9dc0}.rank-B{color:#c1c4ff;background:#2b2c4b;border-color:#65688b}.rank-C{color:#acbdcf;background:#202c3a}.preview-clock{border-top:1px solid var(--line);margin-top:20px}
@media(max-width:1100px){.xp-dashboard{grid-template-columns:1fr}.xp-level-top>.chip{font-size:8px}.xp-detail-grid{gap:22px}}
@media(max-width:700px){body::before{left:-17vw;top:-2vh;width:105vw;height:76vh;opacity:.13}.xp-dashboard{gap:15px}.xp-detail-grid{gap:12px}.xp-detail-grid>.panel{padding:16px}.xp-level-top{flex-wrap:wrap;gap:12px}.xp-level-top>.chip{margin-left:0}.xp-level h2{font-size:18px}.xp-value{font-size:27px}.level-steps small{font-size:8px}.xp-period .eyebrow,.xp-today .eyebrow{font-size:9px;letter-spacing:1px}}

/* Keep the dark character visible in the upper-right over panel surfaces. */
body::before{z-index:2;left:auto;right:-60px;top:-95px;transform:none;width:670px;height:670px;background-position:right top;background-size:contain;opacity:.34;filter:brightness(1.3) saturate(1.1);mix-blend-mode:screen;mask-image:linear-gradient(270deg,#000 45%,#000c 72%,transparent 100%);pointer-events:none}
.focus-bar{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(360px,1.5fr) minmax(160px,.65fr);gap:28px;align-items:center;margin-bottom:24px;background:linear-gradient(115deg,#122746e8,#0d1a2be8)}
.live-clock{display:flex;flex-direction:column;gap:9px}.live-clock time{font-size:34px;font-weight:650;letter-spacing:1px;font-variant-numeric:tabular-nums}.live-clock>span:last-child{font-size:12px;color:var(--muted)}
.focus-session{border-left:1px solid var(--line);padding-left:28px}.focus-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.focus-status{color:var(--muted);font-size:11px}.focus-status.running{color:var(--green)}.focus-main{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:12px}.focus-timer{font-size:38px;letter-spacing:2px;font-variant-numeric:tabular-nums;color:#b8eaff}.focus-buttons{display:flex;gap:8px}.focus-buttons button{font-size:12px;white-space:nowrap}.focus-session .note{font-size:11px;margin:12px 0 0}.focus-today{display:flex;flex-direction:column;gap:14px;text-align:right}.focus-today strong{font-size:22px;font-variant-numeric:tabular-nums}.focus-today button{align-self:flex-end;padding:0}
.focus-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:22px}.focus-stat strong{font-size:28px;font-variant-numeric:tabular-nums;display:block;margin-top:15px}.focus-stat .note{margin-bottom:0}.focus-history{max-width:1200px;margin:auto}.focus-month{font-size:11px;color:var(--muted)}.focus-month input{margin-top:5px;padding:8px}.focus-week{display:flex;gap:12px;align-items:center;background:#0c1626;border-radius:12px;padding:12px;margin-bottom:18px}.focus-week span{flex:1;font-size:12px;color:var(--muted)}.focus-week b{display:block;color:var(--white);font-size:21px;margin-top:7px}.focus-day{border-bottom:1px solid var(--line)}.focus-day summary{display:grid;grid-template-columns:145px 1fr 125px 95px;gap:16px;align-items:center;cursor:pointer;padding:16px 4px;font-size:12px;list-style:none}.focus-day summary::-webkit-details-marker{display:none}.focus-day summary>span:first-child:before{content:'›';margin-right:10px;color:var(--cyan)}.focus-day[open] summary>span:first-child:before{content:'⌄'}.focus-day.current summary>span:first-child{color:var(--cyan)}.focus-day summary>b{text-align:right;font-variant-numeric:tabular-nums}.focus-day summary small{text-align:right;color:var(--muted)}.focus-day-track progress{margin:0;height:7px}.focus-session-list{margin:0 0 16px 24px;padding-left:15px;border-left:2px solid #315477}.focus-session-list>div{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);padding:9px 0}.focus-session-list b{color:var(--white);font-variant-numeric:tabular-nums}.nav button{min-width:90px}
@media(max-width:1100px){.focus-bar{grid-template-columns:1fr 2fr;gap:20px}.focus-today{grid-column:1/-1;flex-direction:row;align-items:center;text-align:left;gap:20px;border-top:1px solid var(--line);padding-top:16px}.focus-today button{margin-left:auto;align-self:center}.focus-main{flex-wrap:wrap;gap:12px}.focus-timer{font-size:32px}.focus-stat strong{font-size:24px}.nav button{min-width:65px}}
@media(max-width:700px){body::before{left:auto;right:-40px;top:-65px;width:440px;height:440px;opacity:.25}.focus-bar{grid-template-columns:1fr;gap:20px;padding:20px}.live-clock{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}.live-clock .eyebrow{font-size:9px}.live-clock time{font-size:25px}.live-clock>span:last-child{width:100%}.focus-session{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}.focus-title .eyebrow{font-size:10px}.focus-today{grid-column:auto;flex-wrap:wrap;gap:12px}.focus-today .eyebrow{font-size:9px}.focus-today strong{font-size:18px}.focus-today button{font-size:11px}.focus-main{gap:10px}.focus-timer{font-size:29px}.focus-buttons button{padding:10px}.focus-stat-grid{grid-template-columns:1fr;gap:12px}.focus-stat strong{font-size:25px}.focus-day summary{grid-template-columns:1fr 100px;gap:9px}.focus-day-track{grid-column:1}.focus-day summary>b{grid-column:2;grid-row:1}.focus-day summary small{grid-column:2;grid-row:2}.focus-history .panel-head{align-items:flex-start}.focus-week{gap:8px;padding:10px}.focus-week span{font-size:10px}.focus-week>button:last-child{font-size:10px;max-width:60px}.nav button{min-width:0;padding:10px 6px}.sync-status{display:none}}

.habit-edit{color:var(--cyan);flex:none;padding:6px 8px;min-width:32px;display:inline-flex;align-items:center;justify-content:center}.habit-edit:hover{background:#18354a}.range-controls{flex-wrap:wrap}

body[data-view="habits"] .hero,body[data-view="goals"] .hero,body[data-view="achievements"] .hero{background:linear-gradient(110deg,#12243e,#0e192b)}
body[data-view="tasks"]::before,body[data-view="goals"]::before,body[data-view="achievements"]::before{display:none}
.achievement-summary{display:flex;align-items:center;justify-content:space-between;gap:32px}.achievement-summary h2{font-size:34px;margin-top:12px}.achievement-summary p{margin-bottom:0}.achievement-summary progress{max-width:360px;height:9px}
.achievement-suit{margin:32px 0 40px}.achievement-suit .panel-head{margin-bottom:14px}.suit-symbol{color:var(--cyan);margin-right:8px;font-size:25px}.achievement-grid{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:9px}
.achievement-card{position:relative;display:block;aspect-ratio:2/3;border:0;border-radius:13px;padding:0;background:none;opacity:.58;transition:opacity .2s,transform .2s,filter .2s;overflow:hidden}.achievement-card:hover,.achievement-card:focus-visible{opacity:1;transform:translateY(-5px);background:none}.achievement-card.active{opacity:.88}.achievement-card.earned{opacity:1;filter:drop-shadow(0 0 9px #2ccffd55)}
.card-face{display:block;position:relative;width:100%;height:100%;background:url('/assets/card-frame.png') center/100% 100% no-repeat}.playing-card-art{display:block;width:100%;height:100%;object-fit:contain}.card-corner{position:absolute;left:14%;top:12%;display:flex;flex-direction:column;align-items:center;line-height:1}.card-corner b{font-family:Georgia,serif;font-size:clamp(16px,2.2vw,32px);font-weight:600;color:#eff6ff}.card-corner>span{font-size:clamp(13px,1.8vw,26px);color:#20cef2;margin-top:4px}.card-corner-bottom{left:auto;top:auto;right:14%;bottom:12%;transform:rotate(180deg)}.card-symbol{position:absolute;left:24%;top:20%;width:52%;height:52%;filter:drop-shadow(0 0 4px #169cde88)}.card-divider{position:absolute;left:29%;right:29%;top:77%;height:1px;background:#28d8fb;opacity:.65}.card-earned{position:absolute;right:8%;top:5%;color:#baffdf;background:#123a30;border:1px solid #66dcb2;border-radius:50%;width:18px;height:18px;display:grid;place-items:center;font-size:11px}.card-active{position:absolute;right:12%;top:8%;width:6px;height:6px;border-radius:50%;background:#64ddff;box-shadow:0 0 10px #32cfff}
.achievement-editor-art{width:145px;aspect-ratio:2/3;position:relative;margin:0 auto 12px}.achievement-editor-art .card-corner b{font-size:27px}.achievement-editor-art .card-corner>span{font-size:22px}.nav{overflow:auto}.nav button{white-space:nowrap}
.card-back-pattern{position:absolute;inset:12% 12%;border-radius:4px;background:repeating-linear-gradient(45deg,transparent 0 11px,#2085bb12 11px 12px),repeating-linear-gradient(-45deg,transparent 0 11px,#2085bb12 11px 12px)}.card-back-emblem{position:absolute;left:25%;top:24%;width:50%;height:52%;color:#35ccf3;filter:drop-shadow(0 0 4px #1c9bd866)}.achievement-card.planned{opacity:.78}
@media(max-width:1100px){.achievement-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.card-corner b{font-size:clamp(20px,3.3vw,32px)}.card-corner>span{font-size:clamp(18px,2.7vw,27px)}}
@media(max-width:700px){.achievement-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.achievement-summary{display:block}.achievement-summary progress{max-width:none;margin-top:20px}.achievement-summary h2{font-size:28px}.achievement-suit .panel-head{gap:8px}.achievement-suit h2{font-size:18px}.achievement-suit .chip{font-size:9px}.card-corner b{font-size:clamp(16px,5vw,25px)}.card-corner>span{font-size:clamp(13px,4vw,20px)}.nav{justify-content:flex-start}.nav button{flex:0 0 auto;padding:10px}.topbar{gap:12px}}