/* Lundi's wardrobe and home only; game styles keep their existing tokens. */
:is(.kokomo-profile,.kokomo-kot){--ld-paper:var(--lu-surface);--ld-bg:var(--lu-bg);--ld-ink:var(--lu-ink);--ld-muted:var(--lu-ink-soft);--ld-brand:var(--lu-primary);--ld-brand-ink:var(--lu-primary-fg);--ld-brand-deep:var(--lu-primary-deep);--ld-tint:var(--lu-bg-tint);--ld-line:#2b2150;--ld-mint:#d5eee3;--ld-sun:#fff0be;--ld-lilac:#e9e0f1;--ld-green:#237f67;background:var(--ld-bg);color:var(--ld-ink)}
[data-theme="dark"] :is(.kokomo-profile,.kokomo-kot){--ld-paper:var(--lu-surface);--ld-bg:var(--lu-bg);--ld-ink:var(--lu-ink);--ld-muted:#cdc0df;--ld-line:#a69ab9;--ld-mint:#294b45;--ld-sun:#544831;--ld-lilac:#44364f;--ld-green:#81d5b7}
:is(.kokomo-profile,.kokomo-kot) :is(.game-header,.lu-leikhaus){background:var(--ld-paper)!important;color:var(--ld-ink);border-bottom:2px solid var(--ld-line);box-shadow:0 4px 0 rgb(43 33 80 / .07)}
:is(.kokomo-profile,.kokomo-kot) :is(.game-header,.lu-leikhaus) :is(h1,.back,.back-link,.sub,.hbtn){color:var(--ld-ink)}
:is(.kokomo-profile,.kokomo-kot) :is(button,a):focus-visible{outline:3px solid var(--lu-ink-accent);outline-offset:4px}
.kokomo-profile .pf-wrap{max-width:1160px;padding:32px 24px 64px}
.kokomo-profile .pf-dressing{display:grid;grid-template-columns:290px minmax(0,1fr);gap:34px;align-items:start}
.kokomo-profile .pf-stage{position:sticky;top:24px;background:var(--ld-paper);border:2px solid var(--ld-line);border-radius:28px 24px 30px 25px;padding:22px 14px 18px;box-shadow:0 5px 0 var(--ld-line)}
.kokomo-profile .pf-hero{margin:0}
.kokomo-profile #pf-avatar{position:relative;display:grid;place-items:center;min-height:280px;background:radial-gradient(ellipse at 50% 48%,var(--ld-brand) 0 55%,transparent 56%)}
.kokomo-profile #pf-avatar::after{content:"";position:absolute;bottom:4px;left:16%;right:16%;height:10px;border:2px solid var(--ld-line);border-radius:50%;background:var(--ld-mint);z-index:0}
.kokomo-profile #pf-avatar .kokomo-avatar{position:relative;z-index:1}
.kokomo-profile #pf-balance{background:var(--ld-sun);border-radius:14px;padding:12px;color:var(--ld-ink)!important}
.kokomo-profile #pf-balance{display:flex;justify-content:center;align-items:center;gap:8px;background:linear-gradient(145deg,#fff8df,#f9d783);color:#2b2150!important;border:1.5px solid #2b2150;box-shadow:0 2px 0 #2b2150,0 0 16px rgb(249 199 89 / .16);font-variant-numeric:tabular-nums}
.kokomo-profile #pf-balance::before{content:"";display:block;width:32px;height:32px;flex:none;background:url('../assets/tak/palmi.svg') center/contain no-repeat}
:is(.kokomo-profile,.kokomo-kot) :is(.pf-item,.item button) img[src*="/palmi.svg"]{height:1.35em!important;vertical-align:-.25em!important}
.kokomo-profile .pf-stage>a{background:var(--ld-brand);color:var(--ld-brand-ink);border:2px solid var(--ld-line);border-radius:14px;box-shadow:0 3px 0 var(--ld-line)}
.kokomo-profile .pf-sec-title{font-size:26px;margin:0 0 12px;color:var(--ld-ink)}
.kokomo-profile .pf-closet>p{font-size:14px!important;line-height:1.6;max-width:58ch;color:var(--ld-muted)!important}
.kokomo-profile .pf-slot{margin:26px 0}
.kokomo-profile .pf-slot h3{font-family:var(--lu-font-display);font-size:19px;color:var(--ld-ink);margin-bottom:12px}
.kokomo-profile .pf-featured-countdown{display:inline-block;padding:7px 10px;border-radius:9px;background:var(--ld-sun);color:var(--ld-ink);font-family:var(--lu-font-ui);font-size:13px;font-weight:800;line-height:1.4}
.kokomo-profile .pf-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kokomo-profile .pf-item{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:8px;border:2px solid var(--ld-line);border-radius:18px 16px 19px 15px;padding:8px 8px 12px;background:var(--ld-paper);color:var(--ld-ink);box-shadow:0 3px 0 var(--ld-line);font-family:inherit;font-size:13px;transition:transform var(--lu-dur-fast) ease,box-shadow var(--lu-dur-fast) ease}
.kokomo-profile .pf-item-art{display:grid;place-items:center;background:transparent;border-radius:11px;padding:5px 0}
.kokomo-profile .pf-item-name{line-height:1.4;margin:auto 0;overflow-wrap:anywhere}
.kokomo-profile .pf-item.owned{border-color:var(--ld-green);box-shadow:0 3px 0 var(--ld-green)}
.kokomo-profile .pf-item.equipped{background:var(--ld-tint);outline:2px solid var(--ld-brand);outline-offset:2px}
.kokomo-profile .pf-item.locked{opacity:1}
.kokomo-profile .pf-item.locked .pf-item-art{opacity:.68}
.kokomo-profile .pf-item-off{justify-content:center;min-height:46px;grid-column:1/-1;background:transparent;box-shadow:none;border-style:dashed}
.kokomo-profile .pf-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin:40px 0 28px;gap:12px}
.kokomo-profile .pf-stat{border:2px solid var(--ld-line);background:var(--ld-paper);border-radius:18px}
@media(hover:hover){.kokomo-profile .pf-item:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--ld-line)}}
@media(max-width:960px){.kokomo-profile .pf-dressing{grid-template-columns:250px minmax(0,1fr);gap:22px}.kokomo-profile .pf-items{grid-template-columns:repeat(3,minmax(0,1fr))}.kokomo-profile #pf-avatar .kokomo-avatar{transform:scale(.9)}}
@media(max-width:720px){.kokomo-profile .pf-wrap{padding:18px 14px 48px}.kokomo-profile .pf-dressing{grid-template-columns:minmax(0,1fr);gap:26px}.kokomo-profile .pf-stage{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:0 14px;padding:12px}.kokomo-profile .pf-hero{grid-row:1/4}.kokomo-profile #pf-avatar{min-height:190px;height:190px}.kokomo-profile #pf-avatar .kokomo-avatar{transform:scale(.69);transform-origin:center 38%}.kokomo-profile .pf-name{font-size:19px}.kokomo-profile .pf-stage>a{font-size:13px;margin-top:10px!important;padding:10px}.kokomo-profile #pf-balance{margin:0!important}.kokomo-profile .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kokomo-profile .pf-sec-title{font-size:24px}}
@media(max-width:390px){.kokomo-profile .pf-items{grid-template-columns:repeat(2,minmax(0,1fr))}.kokomo-profile .pf-stage{grid-template-columns:1fr}.kokomo-profile .pf-hero{grid-row:auto}.kokomo-profile #pf-avatar{height:214px}.kokomo-profile #pf-avatar .kokomo-avatar{transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){.kokomo-profile .pf-item{transition:none}.kokomo-profile .pf-item:hover{transform:none}}
.kokomo-kot main{max-width:1120px;padding:26px 24px 56px}
.kokomo-kot .lu-leikhaus #btn-help{right:16px;left:auto}
.kokomo-kot .scene-wrap{border:2px solid var(--ld-line);border-radius:28px 24px 26px 30px;box-shadow:0 5px 0 var(--ld-line);background:#dcf0ee}
.kokomo-kot #mascot-spot{left:38%;bottom:5%;width:14.3%;aspect-ratio:220/240}
.kokomo-kot #mascot-spot .kokomo-avatar{width:100%!important;height:100%!important}
.kokomo-kot #mascot-spot img{width:100%!important;height:100%!important}
.kokomo-kot #mascot-spot::after{display:none}
.kokomo-kot .kot-bar{margin:28px 0 16px;gap:12px}
.kokomo-kot .kot-bar h2{font-size:26px;color:var(--ld-ink)}
.kokomo-kot .kot-bar .prog{color:var(--lu-ink-accent);background:var(--ld-tint);padding:9px 14px;border-radius:12px}
.kokomo-kot .chore{background:var(--ld-paper);border:2px solid var(--ld-line);border-radius:16px;padding:16px;margin:20px 0}
.kokomo-kot .chore span{color:var(--ld-muted);line-height:1.5}
.kokomo-kot .items{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.kokomo-kot .item{min-width:0;padding:10px 10px 14px;border:2px solid var(--ld-line);border-radius:20px 17px 19px 18px;background:var(--ld-paper);box-shadow:0 3px 0 var(--ld-line);gap:8px}
.kokomo-kot .item.owned{border-color:var(--ld-green);box-shadow:0 3px 0 var(--ld-green)}
.kokomo-kot .item .ic{position:relative;flex:0 0 110px;height:110px;min-width:0;overflow:hidden;background:transparent;border-radius:12px;margin-bottom:3px}
/* A light art field keeps the approved dark SVG outlines visible at night. */
[data-theme="dark"] :is(.kokomo-profile .pf-item-art,.kokomo-kot .item .ic){background:#F3ECFF}
.kokomo-kot .ic img{position:absolute;inset:0;display:block;width:100%;height:100%;padding:13px;object-fit:contain}
.kokomo-kot .item .nm{font-family:var(--lu-font-display);font-weight:600;font-size:18px;line-height:1.2;color:var(--ld-ink)}
.kokomo-kot .item .ds{font-size:13px;line-height:1.45;color:var(--ld-muted)}
.kokomo-kot .item button{border:1.5px solid var(--ld-line);border-radius:11px;color:var(--ld-ink);box-shadow:0 2px 0 var(--ld-line);min-height:44px}
.kokomo-kot .item .lu-btn--grass{background:var(--ld-brand);color:var(--ld-brand-ink)}
.kokomo-kot .next-ch{margin-top:32px;padding-top:22px;border-top:2px solid var(--ld-lilac)}
.kokomo-kot .next-ch h3{font-size:20px;color:var(--ld-ink)}
.kokomo-kot .next-ch .lock{background:var(--ld-paper);border:1px solid var(--ld-line);border-radius:12px;color:var(--ld-muted)}
@media(max-width:900px){.kokomo-kot .items{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.kokomo-kot main{padding:18px 12px 40px}.kokomo-kot .scene-wrap{border-radius:19px}.kokomo-kot .items{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.kokomo-kot .chore{flex-wrap:wrap}.kokomo-kot .chore span{flex-basis:65%}.kokomo-kot .kot-bar h2{font-size:23px}}

/* Give the avatar a real responsive box; transformed oversized boxes can overflow mobile columns. */
.kokomo-profile #pf-avatar .kokomo-avatar{width:100%!important;max-width:242px;height:auto!important;aspect-ratio:220/240;transform:none}
@media(max-width:720px){.kokomo-profile #pf-avatar .kokomo-avatar{max-width:174px}}
@media(max-width:390px){.kokomo-profile #pf-avatar .kokomo-avatar{max-width:196px}}

/* Lundi and the balance stay in view while choosing clothing on a phone. */
@media(max-width:720px) {
  .kokomo-profile .pf-stage {
    position:sticky;top:8px;z-index:20;grid-template-columns:104px minmax(0,1fr);
    gap:0 12px;padding:10px;border-radius:20px;box-shadow:0 4px 0 var(--ld-line);
  }
  .kokomo-profile .pf-hero {grid-row:1/4}
  .kokomo-profile #pf-avatar {height:108px;min-height:108px}
  .kokomo-profile #pf-avatar .kokomo-avatar {max-width:99px}
  .kokomo-profile #pf-avatar::after {height:6px;bottom:0}
  .kokomo-profile .pf-name {font-size:15px;margin:0;overflow-wrap:anywhere}
  .kokomo-profile .pf-title {font-size:11px}
  .kokomo-profile #pf-balance {padding:9px 6px;font-size:13px;gap:4px;flex-wrap:wrap}
  .kokomo-profile #pf-balance::before {width:24px;height:24px}
  .kokomo-profile .pf-stage>a {margin-top:8px!important;padding:9px 6px;font-size:12px;white-space:normal}
  .kokomo-profile .pf-item {scroll-margin-top:205px}
}
@media(max-width:720px) and (max-height:500px) {.kokomo-profile .pf-stage{position:static}}

/* Existing success text gains a view of the actual purchase. No account state is written here. */
:is(.kokomo-profile,.kokomo-kot) #toast.kokomo-purchase {
  top:auto;bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  max-width:calc(100vw - 24px);width:max-content;white-space:normal;line-height:1.4;
  border:2px solid var(--ld-brand);border-radius:20px;background:var(--ld-paper);color:var(--ld-ink);
  padding:10px 16px 10px 10px;gap:14px;box-shadow:0 4px 0 var(--ld-brand);
  transform:translateX(-50%) translateY(180px);
}
:is(.kokomo-profile,.kokomo-kot) #toast.kokomo-purchase.visible {transform:translateX(-50%) translateY(0)}
.kokomo-purchase-art {
  position:relative;display:flex;align-items:center;flex:none;border-radius:13px;
  background:#F3ECFF;padding:4px;pointer-events:none;
}
.kokomo-purchase-art>img {width:70px;height:70px;object-fit:contain}
.kokomo-kot .kokomo-purchase-art>.kokomo-avatar {margin-left:-22px;align-self:flex-end}
@media(prefers-reduced-motion:reduce) {
  :is(.kokomo-profile,.kokomo-kot) #toast.kokomo-purchase {transition:none}
  .kokomo-kot .lag-pop {animation:none}
}