/* ===========================================================
   Echo Instruments — like button + いそがしさんの楽器店
   楽器店の世界観：温かい木の工房。軽量・JINR干渉なしに名前空間化。
   =========================================================== */

/* ---------- イイねボタン ---------- */
.echo-like {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 2.4em 0 1em;
	padding-top: 1.4em;
	border-top: 1px dashed rgba(140, 110, 70, .35);
}
.echo-like__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border: 1.5px solid #d8a657;
	border-radius: 999px;
	background: #fffaf2;
	color: #b06a2c;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	line-height: 1;
	transition: background .18s ease, transform .12s ease, color .18s ease;
	-webkit-tap-highlight-color: transparent;
}
.echo-like__btn:hover { background: #fff1dc; }
.echo-like__btn:focus-visible { outline: 3px solid #d8a657; outline-offset: 2px; }
.echo-like__heart { font-size: 17px; transition: transform .18s ease; }
.echo-like__btn.is-liked {
	background: #d8a657;
	color: #fff;
	border-color: #c8923f;
	cursor: default;
}
.echo-like__count { min-width: 1.2em; text-align: center; font-variant-numeric: tabular-nums; }

/* タップ時のはずみ演出 */
.echo-like--bump .echo-like__heart { animation: echoBump .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes echoBump {
	0% { transform: scale(1); }
	35% { transform: scale(1.45) rotate(-8deg); }
	100% { transform: scale(1) rotate(0); }
}
.echo-like__shop {
	font-size: 13px;
	color: #9a6a3a;
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}
.echo-like__shop:hover { color: #b06a2c; }

@media (prefers-reduced-motion: reduce) {
	.echo-like--bump .echo-like__heart { animation: none; }
}

/* ========== 楽器店（レトロ・ポップ／店内ビジュアル＋ループ演出） ========== */
.echo-shop{
	position:relative; max-width:680px; margin:1.5em auto; border-radius:18px; overflow:hidden;
	box-shadow:inset 0 0 0 4px #e9b97a, 0 8px 30px rgba(120,80,30,.25);
	font-family:inherit;
}
.echo-shop *{ box-sizing:border-box; }

/* ---- 空：太陽キラキラ＋流れる雲 ---- */
.echo-shop__sky{ position:relative; height:78px; overflow:hidden;
	background:linear-gradient(#aee3f2,#cdeef0); }
.echo-shop__sun{ position:absolute; top:12px; right:50px; width:50px; height:50px; border-radius:50%;
	background:radial-gradient(#fff6c0,#ffd23e 70%); box-shadow:0 0 22px #ffd84d; z-index:2; }
.echo-shop__sun::before,.echo-shop__sun::after{ content:""; position:absolute; inset:-12px; border-radius:50%;
	background:conic-gradient(from 0deg,
		transparent 0 18deg,rgba(255,221,77,.55) 18deg 22deg,transparent 22deg 45deg,
		rgba(255,221,77,.55) 45deg 49deg,transparent 49deg 90deg,rgba(255,221,77,.55) 90deg 94deg,
		transparent 94deg 135deg,rgba(255,221,77,.55) 135deg 139deg,transparent 139deg 180deg,
		rgba(255,221,77,.55) 180deg 184deg,transparent 184deg 225deg,rgba(255,221,77,.55) 225deg 229deg,
		transparent 229deg 270deg,rgba(255,221,77,.55) 270deg 274deg,transparent 274deg 315deg,
		rgba(255,221,77,.55) 315deg 319deg,transparent 319deg 360deg);
	animation:echoSpin 14s linear infinite; }
.echo-shop__sun::before{ animation:echoSpin 22s linear infinite reverse; opacity:.5; }
@keyframes echoSpin{ to{ transform:rotate(360deg); } }

.echo-shop__spark{ position:absolute; color:#fff; font-size:13px; z-index:2;
	animation:echoTwinkle 2.4s ease-in-out infinite; }
.echo-shop__spark--1{ top:8px; right:104px; }
.echo-shop__spark--2{ top:42px; right:38px; animation-delay:.8s; }
.echo-shop__spark--3{ top:24px; right:122px; animation-delay:1.5s; }
@keyframes echoTwinkle{ 0%,100%{ opacity:0; transform:scale(.4);} 50%{ opacity:1; transform:scale(1);} }

.echo-shop__cloud{ position:absolute; top:16px; height:16px; background:#fff; border-radius:20px; opacity:.92;
	animation:echoDrift 26s linear infinite; }
.echo-shop__cloud::before,.echo-shop__cloud::after{ content:""; position:absolute; background:#fff; border-radius:50%; }
.echo-shop__cloud::before{ width:20px; height:20px; top:-9px; left:9px; }
.echo-shop__cloud::after{ width:14px; height:14px; top:-6px; left:27px; }
.echo-shop__cloud--1{ left:-60px; width:50px; }
.echo-shop__cloud--2{ left:-160px; width:36px; top:6px; animation-duration:34s; }
@keyframes echoDrift{ from{ transform:translateX(0);} to{ transform:translateX(820px);} }

/* ---- 屋根 ---- */
.echo-shop__roof{ position:relative; height:34px; z-index:3;
	background:repeating-linear-gradient(90deg,#c0492f 0 22px,#a83c25 22px 44px);
	border-bottom:5px solid #7d2a18; box-shadow:0 4px 8px rgba(90,40,20,.3); }
.echo-shop__roof::before{ content:""; position:absolute; left:-6px; right:-6px; top:-8px; height:10px;
	background:#d65a3f; border-radius:6px 6px 0 0; }

/* ---- 壁（店内） ---- */
.echo-shop__wall{ position:relative; padding-top:8px;
	background:linear-gradient(#f7e6c8,#f1d9b0);
	background-image:repeating-linear-gradient(0deg,rgba(180,130,70,.12) 0 1px,transparent 1px 26px); }

/* ---- 窓：外で木が風になびく ---- */
.echo-shop__window{ position:absolute; left:30px; top:14px; width:118px; height:84px; z-index:1; overflow:hidden;
	background:linear-gradient(#bfeaf4,#9fd8ea); border:6px solid #fff; border-radius:8px;
	box-shadow:0 4px 10px rgba(60,90,110,.25); }
.echo-shop__window::after{ content:""; position:absolute; left:50%; top:0; width:4px; height:100%;
	background:#fff; transform:translateX(-50%); }
.echo-shop__window::before{ content:""; position:absolute; top:50%; left:0; width:100%; height:4px;
	background:#fff; transform:translateY(-50%); z-index:2; }
.echo-shop__tree{ position:absolute; bottom:-6px; left:12px; width:54px; height:70px;
	transform-origin:bottom center; animation:echoSway 3.4s ease-in-out infinite; }
.echo-shop__trunk{ position:absolute; bottom:0; left:23px; width:8px; height:26px; background:#8a5a2b; border-radius:3px; }
.echo-shop__leaf{ position:absolute; border-radius:50%; }
.echo-shop__leaf--1{ width:40px; height:40px; left:7px; top:4px; background:#62c062; }
.echo-shop__leaf--2{ width:30px; height:30px; left:0; top:18px; background:#52aa52; }
.echo-shop__leaf--3{ width:30px; height:30px; left:24px; top:16px; background:#6ac86a; }
@keyframes echoSway{ 0%,100%{ transform:rotate(-4deg);} 50%{ transform:rotate(4deg);} }

/* ---- 看板 ---- */
.echo-shop__sign{ position:relative; z-index:5; width:max-content; margin:6px auto 0;
	background:#fff8ec; border:3px solid #c8923f; border-radius:10px; padding:3px 16px;
	font-weight:500; color:#9a5a26; font-size:15px; box-shadow:0 3px 0 #c8923f; }

/* ---- キャラ ---- */
.echo-shop__stage{ position:relative; z-index:2; display:flex; justify-content:space-between;
	align-items:flex-end; gap:12px; padding:18px 26px 6px; min-height:120px; }
.echo-shop__char{ position:relative; width:46%; max-width:180px; }
.echo-shop__char img{ display:block; width:auto; max-width:100%; max-height:140px; margin:0 auto; }
.echo-shop__char--isogashi{ animation:echoBob 2.8s ease-in-out infinite; }
.echo-shop__char--ecogi{ animation:echoBob 2.8s ease-in-out infinite .6s; }
.echo-shop__char--ecogi img{ max-height:115px; }
@keyframes echoBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }

.echo-shop__bubble{ position:relative; margin-top:8px; background:#fff; border-radius:14px; padding:9px 12px;
	font-size:13.5px; line-height:1.5; color:#5b4126; box-shadow:0 3px 8px rgba(120,80,30,.18); border:2px solid #f0d9b8; }
.echo-shop__bubble--isogashi{ border-color:#e7b85a; }
.echo-shop__bubble--ecogi{ border-color:#7bc47f; }
.echo-shop__bubble::after{ content:""; position:absolute; top:-9px; left:24px;
	border:8px solid transparent; border-top:0; border-bottom-color:#fff; }

.echo-shop__live{ position:absolute; top:6px; right:14px; z-index:4; font-size:11px; font-weight:500;
	color:#d64545; letter-spacing:.04em; animation:echoPulse 1.6s ease-in-out infinite; }
@keyframes echoPulse{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }

/* ---- 棚 ---- */
.echo-shop__shelves{ position:relative; z-index:2; display:flex; flex-direction:column; gap:16px; padding:6px 22px 4px; }
.echo-shop__shelf{ position:relative; display:flex; gap:10px; padding:16px 14px 12px; border-radius:10px;
	background:linear-gradient(#e8c89c,#d3a063);
	box-shadow:inset 0 3px 8px rgba(255,255,255,.45),0 6px 0 #7d4f2a,0 10px 14px rgba(90,55,20,.25); }
.echo-shop__shelf::before{ content:""; position:absolute; left:8px; right:8px; top:7px; height:2px;
	background:rgba(255,255,255,.4); border-radius:2px; }
.echo-shop__slot{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.echo-shop__inst{ height:84px; display:flex; align-items:flex-end; justify-content:center; }
.echo-shop__inst img{ width:auto; max-width:100%; max-height:84px; object-fit:contain;
	filter:drop-shadow(0 4px 5px rgba(80,50,20,.35)); animation:echoArrive .5s ease both; }
@keyframes echoArrive{ from{ opacity:0; transform:translateY(-10px) scale(.85);} to{ opacity:1;} }
.echo-shop__crate{ width:100%; height:84px; border-radius:8px; display:flex; align-items:center; justify-content:center;
	font-size:30px; color:#9a6a3a;
	background:linear-gradient(#d8b27e,#c69a5e); border:2px solid #a9763f;
	background-image:repeating-linear-gradient(90deg,transparent 0 18px,rgba(140,90,40,.22) 18px 20px),
		repeating-linear-gradient(0deg,transparent 0 18px,rgba(140,90,40,.22) 18px 20px); }
.echo-shop__label{ font-size:12px; font-weight:500; color:#5b4126; text-align:center; }
.echo-shop__label--locked{ color:#9a8266; font-weight:400; }

/* ---- 進捗 ---- */
.echo-shop__progress{ position:relative; z-index:2; padding:16px 26px 24px; text-align:center; }
.echo-shop__total{ font-size:14px; color:#6b4a2b; margin:0 0 10px; }
.echo-shop__total strong{ font-size:24px; color:#b06a2c; }
.echo-shop__bar{ height:14px; border-radius:999px; background:rgba(120,80,40,.18); overflow:hidden;
	max-width:430px; margin:0 auto 10px; box-shadow:inset 0 1px 3px rgba(90,55,20,.3); }
.echo-shop__bar span{ display:block; height:100%; border-radius:999px;
	background:repeating-linear-gradient(45deg,#f0b24a 0 10px,#e8a838 10px 20px);
	box-shadow:0 0 8px rgba(240,170,60,.6); transition:width .6s ease; animation:echoFill 1.4s ease; }
@keyframes echoFill{ from{ width:0;} }
.echo-shop__next{ font-size:14px; color:#6b4a2b; margin:0; }
.echo-shop__next strong{ color:#b06a2c; }

/* ---- スマホ ---- */
@media (max-width:600px){
	.echo-shop__char{ width:48%; }
	.echo-shop__char img{ max-height:104px; }
	.echo-shop__char--ecogi img{ max-height:88px; }
	.echo-shop__inst img{ max-height:60px; }
	.echo-shop__crate{ height:60px; font-size:22px; }
	.echo-shop__window{ width:96px; height:70px; left:18px; }
}

/* ---- アニメ抑制設定 ---- */
@media (prefers-reduced-motion: reduce){
	.echo-shop__sun,.echo-shop__sun::before,.echo-shop__sun::after,
	.echo-shop__spark,.echo-shop__cloud,.echo-shop__tree,
	.echo-shop__char--isogashi,.echo-shop__char--ecogi,
	.echo-shop__inst img,.echo-shop__bar span,.echo-shop__live{ animation:none; }
}