@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
:root{font-family:'Noto Sans JP',sans-serif;color:#f5eedc;background:#292319;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:320px;background:#292319}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:3px solid #e9bd65;outline-offset:4px}
.app{min-height:100svh;max-width:1600px;margin:auto;padding:26px clamp(20px,4vw,64px) 18px;display:flex;flex-direction:column;background:radial-gradient(circle at 73% 47%,#3c3425 0,#292319 49%)}
.topbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff20;padding-bottom:20px}
.brand{display:flex;align-items:center;gap:13px;font-size:18px;font-weight:900;letter-spacing:.04em;line-height:1.3}
.brand-icon{display:grid;place-items:center;width:37px;height:37px;border:1px solid #e9bd65;border-radius:50%;color:#e9bd65;font-size:26px;font-weight:400}
.brand small{display:block;font:10px 'DM Mono',monospace;letter-spacing:.13em;color:#c8aa71;margin-top:4px}
.sound-button{border:1px solid #ffffff36;color:#e9d4a5;background:#ffffff09;border-radius:40px;padding:9px 14px;display:flex;gap:9px;align-items:center;font-size:17px}
.sound-button span{font:10px 'DM Mono',monospace}

.layout{flex:1;display:grid;grid-template-columns:minmax(260px,.75fr) minmax(430px,1.25fr);gap:clamp(28px,5vw,90px);align-items:center;max-width:1360px;width:100%;margin:0 auto;padding:25px 0 12px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;color:#e9bd65}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e9bd65;box-shadow:0 0 0 4px #e9bd6530;margin-right:11px}
.intro h1{font-size:clamp(50px,5.2vw,86px);letter-spacing:-.09em;line-height:1.22;margin:27px 0 26px;font-weight:900}
.intro h1 em{font-style:normal;color:#e9bd65}
.intro>p:not(.hint){font-size:15px;line-height:2;color:#cdc1aa}
.stats{display:flex;margin:48px 0 30px;border-top:1px solid #ffffff24;border-bottom:1px solid #ffffff24;padding:22px 0}
.stats>div{flex:1;min-width:0}
.stats>div+div{border-left:1px solid #ffffff24;padding-left:16px}
.stats span{display:block;font-size:11px;color:#b7a990;margin-bottom:7px}
.stats strong{font:500 clamp(20px,1.9vw,32px) 'DM Mono',monospace;color:#f7ead0}
.stats small{margin-left:4px;font-size:11px;color:#b7a990}
.hint{font-size:11px;color:#a99b83}
kbd{border:1px solid #86785f;border-radius:3px;padding:2px 5px;font:11px 'DM Mono',monospace}

.game{width:100%;max-width:760px;justify-self:center;min-width:0}
.game-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;color:#dbcba9;font-size:12px}
.game-heading>span:first-child{font-weight:700;letter-spacing:.1em}
.game-heading b{font:10px 'DM Mono',monospace;color:#b69861}
.game-heading>span:last-child{color:#ae9d7e}
.board-wrap{background:#6c4c2d;padding:11px 11px 0;border-radius:20px 20px 10px 10px;box-shadow:0 20px 45px #140d08a8,0 4px 0 #4c321e,inset 0 2px 2px #c59255}
.board{height:clamp(320px,34vw,440px);position:relative;overflow:hidden;isolation:isolate;border-radius:12px;cursor:pointer;background:repeating-linear-gradient(1deg,#9e6d3e 0,#a97744 19px,#ae7b47 24px,#a4713e 40px);box-shadow:inset 0 0 0 2px #7c4f2a,inset 0 0 45px #60371470;-webkit-tap-highlight-color:transparent}
.board:after{content:'';position:absolute;inset:13px;border:1px solid #f3c27a50;border-radius:7px;pointer-events:none}
.board-grain{position:absolute;inset:0;opacity:.23;background:repeating-linear-gradient(178deg,transparent 0 21px,#5c361933 22px,transparent 24px 53px),radial-gradient(ellipse at 88% 55%,transparent 0 23%,#63351c42 24%,transparent 25% 31%,#63351c42 32%,transparent 33%)}
.board-caption{height:31px;display:grid;place-items:center;color:#eac995;font-size:10px;letter-spacing:.12em}
.board-caption span{font-size:13px;margin-right:5px}

/* the clove being cut (left side of the board). Local box 150x100: root left, tip right. */
.garlic{position:absolute;z-index:3;width:150px;height:100px;padding:0;left:27%;top:50%;transform:translate(-50%,-50%) scale(var(--base,1.15));border:0;background:none;touch-action:manipulation;transition:opacity .3s}
.garlic.arrive{animation:garlic-arrive .5s cubic-bezier(.3,1.3,.6,1)}
.garlic.pop{animation:garlic-pop .35s cubic-bezier(.3,1.6,.6,1)}
.garlic.wobble .bulb{animation:bulb-wobble .3s ease-out}
.paint{position:absolute;width:0;height:0;overflow:hidden}
.clove{position:absolute;inset:0;display:block}
/* the whole bulb (before it is broken into cloves) sits over the cutting spot */
.bulb{position:absolute;left:-5px;top:-40px;width:160px;height:170px;display:none;filter:drop-shadow(3px 10px 7px #4d321a70)}
.bulb svg{display:block}
.garlic.bulb-mode .bulb{display:block}
.garlic.bulb-mode .clove,.garlic.bulb-mode .cut-face{display:none}
.bulb .bulb-outer,.bulb .bulb-inner{transform-origin:80px 100px;transition:opacity .35s ease-out,transform .35s ease-out}
.bulb[data-peel="1"] .bulb-outer,.bulb[data-peel="2"] .bulb-outer,.bulb[data-peel="2"] .bulb-inner{opacity:0;transform:scale(1.08) translateY(-4px)}
/* a clove still in its thin skin: the skin comes off with one tap */
.clove .clove-skin{opacity:0;transform:translate(6px,-12px) rotate(-5deg);transform-origin:75px 50px;transition:opacity .3s ease-out,transform .3s ease-out}
.garlic.skinned .clove .clove-skin{opacity:1;transform:none;transition:none}
/* cloves waiting their turn, lined up at the top of the board */
.spare{position:absolute;z-index:2;left:27%;top:7%;transform:translateX(-50%);display:flex;gap:6px;pointer-events:none}
.spare-clove{display:block;width:60px;height:40px;filter:drop-shadow(1px 4px 3px #4d321a60)}
.spare-clove svg{display:block}
.spare-clove:nth-child(odd){transform:rotate(-8deg)}
.spare-clove:nth-child(even){transform:rotate(7deg) scaleX(-1)}
.spare-clove.fly{animation:spare-fly .5s cubic-bezier(.3,1.3,.6,1) both}
/* rotten clove: brown bruises and mould on the skin and the flesh */
.rot{display:none}
.rotten .rot{display:inline}
.garlic.rotten .cut-face{background:radial-gradient(ellipse at 40% 50%,#4a3518 0 14%,#a07c42 34%,#c4a064 70%,#8a6a38 100%)}
.piece.rotten:before{background:linear-gradient(#d9c08a,#b69456 45%,#86663a)}
.piece.rotten:after{background:radial-gradient(circle at 35% 40%,#4a3518 0 10%,#0000 16%),radial-gradient(ellipse at 50% 56%,#6b4f26 0 8%,#b38d4c 22%,#cfae70 55%,#b8975a 82%,#86663a 100%);border-color:#86663a}
.slice.rotten{background:
    radial-gradient(circle at var(--sx,35%) var(--sy,40%),#4a3518 0 7%,#4a351800 13%),
    radial-gradient(circle at calc(100% - var(--sx,35%)) calc(100% - var(--sy,40%)),#6f7d4ccc 0 6%,#6f7d4c00 11%),
    radial-gradient(ellipse at 50% 56%,#a5803f 0,#c3a062 28%,#d2b47a 58%,#b8975a 86%,#86663a 100%);
  border-color:#86663a}
/* whiffs of smell */
.stink{position:absolute;z-index:7;width:14px;height:36px;margin-left:-7px;pointer-events:none;opacity:0;
  border-left:3px solid #9fae6a;border-radius:50%;animation:stink 1.2s ease-out both}
.stink:after{content:'';position:absolute;left:4px;top:-14px;width:10px;height:22px;border-right:3px solid #9fae6a;border-radius:50%}
@keyframes stink{0%{opacity:0;transform:translate(0,10px) scaleY(.6)}25%{opacity:.85}100%{opacity:0;transform:translate(var(--dx),-55px) rotate(12deg) scaleY(1.1)}}
/* papery skin flakes */
.flake{position:absolute;z-index:6;margin:-6px 0 0 -8px;pointer-events:none;background:linear-gradient(135deg,#fffdf8,#ece5d8 60%,#d9ccb8);opacity:.95;
  box-shadow:0 2px 3px #4d321a30;animation:flake-off .75s cubic-bezier(.2,.7,.4,1) forwards}
.flake-0{clip-path:polygon(0 30%,40% 0,100% 20%,85% 100%,20% 85%)}
.flake-1{clip-path:polygon(10% 0,100% 35%,70% 100%,0 70%)}
.flake-2{clip-path:polygon(0 0,100% 10%,90% 60%,40% 100%,5% 70%)}
.clove svg{display:block;overflow:visible;filter:drop-shadow(2px 7px 5px #4d321a70)}
/* the fresh, moist cut face at the end of the remaining clove */
.cut-face{position:absolute;width:7px;margin-left:-4px;border-radius:50%;
  background:radial-gradient(ellipse at 40% 50%,#ecd794 0 9%,#fffbee 24%,#fbf2d8 70%,#e4cf9a 100%);
  box-shadow:inset -1px 0 1px #fff,1px 0 2px #8a6a3a40}
.cut-face.hidden{display:none}
/* top-down kitchen knife: comes straight down on the cut line */
.knife{position:absolute;z-index:4;top:-46px;width:14px;height:200px;margin-left:-6px;opacity:0;pointer-events:none;transform:rotate(-6deg)}
.knife.chop{animation:knife-chop .26s ease-out}
.blade{position:absolute;left:3px;top:0;width:11px;height:144px;border-radius:2px 8px 0 0;
  background:linear-gradient(90deg,#f5f8f3 0,#c6cdc4 45%,#9aa398 80%,#e8ede6 100%);box-shadow:var(--ks,10px 14px 8px #2a1a0c40)}
.handle{position:absolute;left:1px;top:142px;width:15px;height:60px;border-radius:3px 3px 7px 7px;background:linear-gradient(90deg,#5a4330,#3b2a1d);box-shadow:var(--ks,10px 14px 8px #2a1a0c40)}
/* the slab just cut off: leans away, then tips over to show its round face */
.piece{position:absolute;z-index:4;width:var(--w0);height:var(--h);transform-origin:0 50%;animation:piece-fall .36s ease-out forwards}
.piece:before,.piece:after{content:'';position:absolute;inset:0;box-shadow:1px 3px 3px #4d321a55}
.piece:before{border-radius:3px 45% 45% 3px / 3px 50% 50% 3px;background:linear-gradient(#fffaea,#f3e3b7 40%,#dcc28a);animation:piece-slab .36s ease-out forwards}
.piece:after{border-radius:50% 50% 48% 48% / 68% 68% 34% 34%;opacity:0;
  background:radial-gradient(ellipse at 50% 56%,#ecd794 0 8%,#f6e9c2 18%,#fdf6e2 55%,#f5e6c4 82%,#d6bd84 100%);border:1px solid #c9ad72b0;animation:piece-face .36s ease-out forwards}

/* the one and only plate */
.plate{position:absolute;z-index:1;left:66%;top:56%;width:min(54%,92%);max-width:350px;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.plate:before{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,#fbf8f0 0 54%,#efe9db 57%,#fbf7ee 63%,#f3eee2 70%,#ddd5c3 71.5%,#00000000 72%);filter:drop-shadow(0 12px 10px #4d321a80)}
.plate:after{content:'';position:absolute;inset:14%;border-radius:50%;box-shadow:inset 0 3px 8px #b9ad9440}
.mound-shadow{position:absolute;z-index:1;left:50%;top:52%;width:70%;height:70%;border-radius:50%;transform:translate(-50%,-50%) scale(calc(.3 + var(--grow,0) * .7));opacity:calc(var(--grow,0) * .9);background:radial-gradient(circle,#a07c4560 0,#a07c4500 70%);transition:transform .4s,opacity .4s}
.plate-food{position:absolute;z-index:2;inset:0}

/* one garlic slice: a clove cross-section (D-shaped, glossy ivory flesh, pale rim, germ in the middle).
   --lv (0..1) brightens higher layers so the mound reads as a heap; --s / shape-* / --germ vary each slice. */
.slice{position:absolute;width:17.5%;height:12.5%;margin:-6.25% 0 0 -8.75%;scale:var(--s,1);
  border-radius:50% 50% 48% 48% / 68% 68% 34% 34%;
  background:
    radial-gradient(ellipse 62% 55% at 34% 30%,#ffffffb8 0,#ffffff40 30%,#fff0 60%),
    radial-gradient(ellipse at 50% 56%,#efdcaa 0,#f6e9c2 22%,#fbf1d6 46%,#fdf6e2 66%,#f5e6c4 82%,#e7d3a0 94%,#d6bd84 100%);
  border:1px solid #c9ad72b0;
  box-shadow:inset 0 0 0 1.5px #fffaeccc,inset 0 -2px 3px #b99a5c40,0 1.5px 0 #d5bb82,
    1px calc(2.5px + var(--lv,0) * 3px) calc(2px + var(--lv,0) * 3px) #5a3d1c4a;
  filter:brightness(calc(.9 + var(--lv,0) * .16)) saturate(calc(1 - var(--lv,0) * .15));
  transform:rotate(var(--r));animation:slice-fly .45s cubic-bezier(.3,.6,.4,1) both}
.slice.shape-1{border-radius:44% 56% 40% 60% / 74% 70% 30% 36%}
.slice.shape-2{border-radius:50% / 58% 60% 42% 42%}
/* fine fibrous texture of the cut surface */
.slice:before{content:'';position:absolute;inset:6%;border-radius:inherit;opacity:.25;
  background:radial-gradient(circle at 30% 60%,#e6d29f30 0 1px,#fff0 1.5px) 0 0/5px 4px,radial-gradient(circle at 70% 30%,#fffef840 0 1px,#fff0 1.5px) 2px 1px/6px 5px}
/* the germ (sprout) in the centre, a little toward the inner flat side */
.slice:after{content:'';position:absolute;left:41%;right:41%;top:44%;height:22%;border-radius:50%;
  background:radial-gradient(ellipse,var(--germ,#ecd794) 0 35%,color-mix(in srgb,var(--germ,#ecd794) 55%,#fbf3dc) 65%,#fbf3dc00 100%);
  box-shadow:0 0 0 .5px #d9c38a40}
.slice.static{animation:none}
.slice-spill{filter:brightness(.9) saturate(.9)}

/* juice drops */
.burst{position:absolute;inset:0;pointer-events:none;z-index:5}
.spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff8dccc;animation:spark .4s ease-out forwards;--dx:0px;--dy:0px}

/* controls */
.progress-area{padding:18px 2px 16px}
.progress-label{display:flex;justify-content:space-between;font-size:11px;color:#d8c8aa;margin-bottom:9px}
.progress-label span:last-child{font-family:'DM Mono',monospace}
.progress-track{height:7px;border-radius:10px;background:#5c4e38;overflow:hidden}
.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#d7a653,#f4d98b);border-radius:10px;transition:width .25s}
.cut-button{display:flex;align-items:center;width:100%;text-align:left;min-height:72px;padding:13px 18px;border:0;border-radius:10px;gap:13px;font-weight:900;font-size:16px;background:#edc975;color:#382813;box-shadow:0 4px 0 #a27635;transition:transform .15s,filter .15s;touch-action:manipulation}
.cut-button:hover{transform:translateY(-3px);filter:brightness(1.08)}
.cut-button:active{transform:translateY(1px)}
.action-icon{font-size:25px;font-weight:400}
.cut-button b{font-weight:900}
.cut-button small{display:block;font:10px 'DM Mono',monospace;letter-spacing:.04em;margin-top:4px}
.arrow{margin-left:auto;font-size:20px;font-weight:400}
.note{text-align:center;font-size:12px;color:#c6b795;min-height:28px;padding-top:16px}

footer{display:flex;justify-content:space-between;border-top:1px solid #ffffff20;padding-top:15px;color:#9e8e73;font:10px 'DM Mono',monospace;letter-spacing:.13em}
footer span{font-size:20px;color:#e9bd65;line-height:.6}

@keyframes knife-chop{
  0%{opacity:0;transform:translate(10px,-22px) rotate(-6deg) scale(1.06);--ks:16px 22px 12px #2a1a0c30}
  20%{opacity:1}
  45%{transform:translate(0,0) rotate(-6deg) scale(1);--ks:2px 3px 2px #2a1a0c55}
  70%{opacity:1;transform:translate(0,0) rotate(-6deg) scale(1)}
  100%{opacity:0;transform:translate(8px,-16px) rotate(-6deg) scale(1.04)}}
@keyframes piece-fall{
  0%{width:var(--w0);transform:none}
  35%{width:var(--w0);transform:translateX(3px) rotate(4deg)}
  75%{opacity:1;width:var(--w1);height:calc(var(--h)*.72);transform:translate(10px,calc(var(--h)*.14)) rotate(-6deg)}
  100%{width:var(--w1);height:calc(var(--h)*.72);opacity:0;transform:translate(12px,calc(var(--h)*.14)) rotate(-6deg)}}
@keyframes piece-face{0%,40%{opacity:0}70%,100%{opacity:1}}
@keyframes piece-slab{0%,40%{opacity:1}65%,100%{opacity:0}}
@keyframes spark{to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
@keyframes slice-fly{
  0%{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--r0)) scale(.5)}
  15%{opacity:1}
  55%{transform:translate(calc(var(--fx)*.4),calc(var(--fy)*.4 - 70px)) rotate(calc((var(--r0) + var(--r))/2)) scale(1.15)}
  85%{transform:translate(0,-3px) rotate(var(--r)) scale(1.04)}
  100%{opacity:1;transform:translate(0,0) rotate(var(--r)) scale(1)}}
@keyframes garlic-arrive{from{opacity:0;transform:translate(-50%,-160%) scale(calc(var(--base,1.15)*.45))}}
@keyframes garlic-pop{from{transform:translate(-50%,-50%) scale(calc(var(--base,1.15)*.7))}}
@keyframes bulb-wobble{30%{transform:rotate(-4deg)}65%{transform:rotate(3deg)}}
@keyframes spare-fly{from{opacity:.4;translate:var(--fx) var(--fy);scale:1.8}}
@keyframes flake-off{0%{opacity:.95;transform:none}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.7)}}

@media(max-width:850px){
  .app{padding:18px 18px 20px}
  .layout{display:block;padding-top:30px}
  .intro h1{font-size:clamp(44px,10vw,66px);margin:18px 0}
  .intro>p:not(.hint){font-size:13px}
  .stats{margin:22px 0 14px;padding:15px 0}
  .hint{margin-bottom:28px}
  .game{margin:0 auto}
  .board{height:clamp(320px,62vw,440px)}
  footer{margin-top:32px}
}
/* Narrow phones: plate on top, garlic below. */
@media(max-width:560px){
  .brand{font-size:15px}.brand-icon{width:32px;height:32px}.sound-button{padding:7px 10px}
  .intro h1{font-size:46px}
  .stats{display:grid;grid-template-columns:1fr 1fr;row-gap:14px}
  .stats strong{font-size:22px}.stats>div+div{padding-left:12px}
  .stats>div:nth-child(3){border-left:0;padding-left:0}
  .board{height:500px}
  .garlic{--base:1.05;left:50%;top:74%}
  .spare{left:50%;top:91%}
  .bulb{transform:scale(.85)}
  .plate{left:50%;top:32%;width:min(80%,290px)}
  .game-heading{font-size:10px}
}

/* ---- trophies: header button & unlock banner ---- */
.top-actions{display:flex;align-items:center;gap:10px}
.trophy-button,.back-button{display:flex;align-items:center;gap:8px;border:1px solid #ffffff36;color:#e9d4a5;background:#ffffff09;border-radius:40px;padding:6px 14px 6px 10px;text-decoration:none;font:500 12px 'DM Mono',monospace;transition:background .15s,border-color .15s}
.trophy-button:hover,.back-button:hover{background:#ffffff16;border-color:#e9bd6580}
.trophy-button:focus-visible,.back-button:focus-visible{outline:3px solid #e9bd65;outline-offset:4px}
.trophy-button span:first-child{display:grid;width:20px;height:20px}
.back-button{padding:9px 16px;font:500 13px 'Noto Sans JP',sans-serif}
.toast-area{position:fixed;z-index:50;top:92px;right:18px;display:grid;gap:10px;pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;min-width:270px;padding:12px 18px 12px 14px;border-radius:12px;color:#f5eedc;
  background:linear-gradient(100deg,#201a12f0,#3a3022f0);border:1px solid #ffffff22;box-shadow:0 14px 34px #00000070,inset 0 1px #ffffff18;
  animation:toast-in .45s cubic-bezier(.2,1.3,.5,1) both}
.toast.out{animation:toast-out .4s ease-in forwards}
.toast small{display:block;font-size:10px;letter-spacing:.08em;color:#c8b38a;margin-bottom:3px}
.toast b{font-size:15px;font-weight:900}
.toast svg{flex:none;filter:drop-shadow(0 2px 4px #0008)}
.toast-platinum{border-color:#c8dbea80}.toast-gold{border-color:#e6b13c80}
@keyframes toast-in{from{opacity:0;transform:translateX(40px) scale(.96)}}
@keyframes toast-out{to{opacity:0;transform:translateY(-12px)}}

/* ---- trophy list page ---- */
.trophy-page{display:block}
.trophy-summary{display:flex;align-items:center;gap:clamp(22px,4vw,48px);max-width:960px;margin:44px auto 26px}
.trophy-summary h1{font-size:clamp(36px,5vw,58px);font-weight:900;letter-spacing:-.05em;margin:10px 0 4px}
.trophy-summary p{margin:0 0 18px;color:#cdc1aa;font-size:14px}
.trophy-ring{flex:none;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(closest-side,#292319 78%,#0000 80%),conic-gradient(#e9bd65 calc(var(--p)*1%),#ffffff1c 0)}
.trophy-ring span{font:500 30px 'DM Mono',monospace;color:#f7ead0}
.tier-counts{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;padding:0;margin:0}
.tier-counts li{display:flex;align-items:center;gap:7px;font:13px 'DM Mono',monospace;color:#b7a990}
.tier-counts b{color:#f7ead0;font-size:18px;font-weight:500}
.tier-counts small{font:11px 'Noto Sans JP',sans-serif;color:#9e8e73}
.trophy-filter{display:flex;gap:8px;max-width:960px;margin:0 auto 14px}
.trophy-filter button{border:1px solid #ffffff2a;background:none;color:#cdbf9f;border-radius:30px;padding:7px 16px;font-size:12px}
.trophy-filter button[aria-pressed="true"]{background:#e9bd65;border-color:#e9bd65;color:#382813;font-weight:700}
.trophy-list{list-style:none;max-width:960px;margin:0 auto 40px;padding:0;display:grid;gap:10px}
.trophy-card{display:flex;align-items:center;gap:18px;padding:16px 20px;border-radius:14px;background:#ffffff0a;border:1px solid #ffffff14}
.trophy-card[hidden]{display:none}
.trophy-card.earned{background:linear-gradient(100deg,#ffffff12,#ffffff06)}
.trophy-card.earned.tier-platinum{border-color:#c8dbea66;box-shadow:inset 0 0 30px #c8dbea14}
.trophy-card.earned.tier-gold{border-color:#e6b13c55}
.trophy-cup{flex:none;width:56px;height:56px;display:grid;place-items:center;border-radius:12px;background:#00000030}
.trophy-card.earned .trophy-cup svg{filter:drop-shadow(0 3px 6px #0009)}
.trophy-card.locked .trophy-cup svg{filter:grayscale(1) brightness(.55);opacity:.6}
.secret{font:500 26px 'DM Mono',monospace;color:#7d705c}
.trophy-body{flex:1;min-width:0}
.trophy-name{font-weight:900;font-size:16px;color:#f7ead0}
.trophy-card.locked .trophy-name{color:#b9ab90}
.trophy-desc{font-size:12px;color:#ae9f84;margin-top:3px}
.trophy-progress{height:5px;border-radius:5px;background:#ffffff18;overflow:hidden;margin-top:10px;max-width:320px}
.trophy-progress span{display:block;height:100%;background:linear-gradient(90deg,#d7a653,#f4d98b);border-radius:5px}
.trophy-count{font:10px 'DM Mono',monospace;color:#9e8e73;margin-top:5px}
.trophy-meta{flex:none;text-align:right;display:grid;gap:5px;font-size:11px;color:#9e8e73}
.trophy-tier{font-weight:700;letter-spacing:.06em}
.tier-platinum .trophy-tier{color:#c8dbea}.tier-gold .trophy-tier{color:#e6b13c}.tier-silver .trophy-tier{color:#c3cad3}.tier-bronze .trophy-tier{color:#d08a55}
.trophy-meta time{color:#d8c8aa}
@media(max-width:560px){
  .top-actions{gap:6px}.trophy-button{padding:5px 10px 5px 8px}
  .trophy-summary{flex-direction:column;align-items:flex-start;margin-top:28px}
  .trophy-ring{width:104px;height:104px}
  .trophy-card{flex-wrap:wrap;gap:12px;padding:14px}
  .trophy-meta{width:100%;text-align:left;display:flex;gap:12px}
  .toast-area{left:12px;right:12px}.toast{min-width:0}
}