/* 사천성: a garden board with chunky cream tiles, stone blocks and wooden boxes, a HUD and our own office cat */
.sh-app {
  --leaf: #2f7a43; --leaf-d: #1f5a30; --leaf-l: #48a25c; --cream: #fffaf0; --cream-d: #efe1c0; --edge: #c9ae74; --edge-d: #8f7440;
  --gold: #ffcf3f; --ink: #3a2a14;
  position: relative; display: grid; gap: 10px; color: var(--fg);
}
.sh-app [hidden] { display: none !important; }
.sh-app button { font: inherit; }

/* top bar: clock, stage and progress, the cat */
.sh-top { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: linear-gradient(#3b8a50, #2b6d3e); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.sh-box { display: grid; place-items: center; min-width: 64px; padding: 6px 8px; border-radius: 10px; background: #fff7df; color: var(--ink); box-shadow: 0 3px 0 #c9ae74; }
.sh-box small { font-size: 12px; line-height: 1; }
.sh-box b { font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sh-box.low b { color: #d93025; animation: sh-blink .8s steps(2) infinite; }
.sh-mid { display: grid; gap: 4px; min-width: 0; }
.sh-title { font-size: 14px; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-bar { position: relative; height: 14px; border-radius: 8px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); }
.sh-bar i { position: absolute; inset: 2px auto 2px 2px; width: calc(var(--p, 0%) - 4px); min-width: 0; border-radius: 6px; background: linear-gradient(#ffe680, #ffbf1f); transition: width .3s; }
.sh-stars { position: absolute; right: 4px; top: -9px; display: flex; gap: 1px; font-size: 16px; }
.sh-stars i, .sh-lv em i { font-style: normal; color: rgba(255, 255, 255, .35); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.sh-stars i.on, .sh-lv em i.on { color: var(--gold); }
.sh-sub { display: flex; gap: 10px; font-size: 12px; opacity: .95; }
.sh-sub b { font-variant-numeric: tabular-nums; }
.sh-catwrap { position: relative; }
.sh-cat { width: 56px; height: 56px; display: block; animation: sh-bob 3s ease-in-out infinite; }
.sh-cat .ear, .sh-cat .head { fill: #f4b46c; stroke: #8a5a2b; stroke-width: 1.6; }
.sh-cat .ear-in { fill: #ffd8b0; }
.sh-cat .eyes ellipse { fill: #2a1d10; } .sh-cat .shine { fill: #fff; }
.sh-cat .eyes path, .sh-cat .mouth { fill: none; stroke: #2a1d10; stroke-width: 2; stroke-linecap: round; }
.sh-cat .happy-m { fill: #e0566b; stroke-width: 1.4; }
.sh-cat .blush { fill: #ff9a9a; opacity: .7; } .sh-cat .nose { fill: #b55a3a; }
.sh-cat .tie { fill: #2f6fe0; stroke: #1c3f80; stroke-width: 1; }
.sh-cat .happy-eyes, .sh-cat .sad-eyes, .sh-cat .happy-m, .sh-cat .sad-m { display: none; }
.sh-cat[data-mood="happy"] .idle-eyes, .sh-cat[data-mood="happy"] .idle-m { display: none; }
.sh-cat[data-mood="happy"] .happy-eyes, .sh-cat[data-mood="happy"] .happy-m { display: inline; }
.sh-cat[data-mood="happy"] { animation: sh-hop .5s ease-out 2; }
.sh-cat[data-mood="sad"] .idle-eyes, .sh-cat[data-mood="sad"] .idle-m, .sh-cat[data-mood="worried"] .idle-m { display: none; }
.sh-cat[data-mood="sad"] .sad-eyes, .sh-cat[data-mood="sad"] .sad-m, .sh-cat[data-mood="worried"] .sad-m { display: inline; }
.sh-cat[data-mood="worried"] { animation: sh-wobble .5s ease-in-out 2; }
.sh-bubble { position: absolute; right: 50px; top: 4px; padding: 4px 9px; border-radius: 12px 12px 2px 12px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); z-index: 3; }
.sh-bubble.pop { animation: sh-pop .25s ease-out; }

/* the menu */
.sh-menu { display: grid; gap: 10px; }
.sh-modes { display: flex; gap: 6px; }
.sh-modes button { flex: 1; padding: 9px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--leaf) 14%, var(--bg)); color: var(--fg); font-weight: 700; cursor: pointer; }
.sh-modes button[aria-selected="true"] { background: var(--leaf); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.sh-menusub { margin: 0; font-size: 13px; color: var(--muted); }
.sh-levels { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.sh-levels.classic { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.sh-lv { display: grid; justify-items: center; gap: 2px; padding: 10px 6px 8px; border: 0; border-radius: 12px; background: linear-gradient(var(--cream), var(--cream-d)); color: var(--ink); box-shadow: 0 4px 0 var(--edge), 0 6px 0 var(--edge-d), 0 8px 10px rgba(0, 0, 0, .18); cursor: pointer; transition: transform .1s; }
.sh-lv:hover:not(:disabled) { transform: translateY(-2px); }
.sh-lv:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--edge), 0 3px 0 var(--edge-d); }
.sh-lv b { font-size: 22px; } .sh-lv span { font-size: 12.5px; }
.sh-lv em { font-style: normal; font-size: 14px; }
.sh-lv em i { color: #d9c9a0; text-shadow: none; }
.sh-lv.done { background: linear-gradient(#fff3c4, #f7dc8a); }
.sh-lv.locked { opacity: .5; cursor: default; }
.sh-lv:focus-visible, .sh-item:focus-visible, .sh-tile:focus-visible, .sh-stone:focus-visible, .sh-modes button:focus-visible { outline: 3px solid var(--focus, #4d8ff0); outline-offset: 2px; }
.sh-setrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.sh-chip { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg); cursor: pointer; }
.sh-chip.on { border-color: var(--leaf); background: color-mix(in srgb, var(--leaf) 16%, var(--bg)); font-weight: 700; }

/* the garden frame and the board */
.sh-frame { padding: 10px; border-radius: 18px; background: radial-gradient(circle at 30% 20%, #4a9a5c, var(--leaf) 60%, var(--leaf-d)); box-shadow: inset 0 0 0 4px #6f5a3a, inset 0 0 0 7px #9b8257, 0 6px 14px rgba(0, 0, 0, .25); overflow-x: auto; }
.sh-boardwrap { position: relative; margin: 0 auto; width: max-content; }
.sh-board { position: relative; border-radius: 12px; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 12px, transparent 12px 24px), #2c6a3c; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25), inset 0 6px 14px rgba(0, 0, 0, .35); }
.sh-board.shake { animation: sh-shake .35s; }
.sh-board.hammering { cursor: crosshair; }
.sh-fx { position: absolute; inset: 0; pointer-events: none; }
.sh-slot { position: absolute; border-radius: 8px; background: rgba(0, 0, 0, .14); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.sh-tile, .sh-stone { position: absolute; width: var(--tw); height: calc(var(--tw) * 1.22); padding: 0; border: 0; border-radius: calc(var(--tw) * 0.2); cursor: pointer; transition: transform .12s ease-out, opacity .2s; }
.sh-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: linear-gradient(170deg, #ffffff, var(--cream) 45%, var(--cream-d)); color: #222; box-shadow: 0 calc(var(--tw) * 0.08) 0 var(--edge), 0 calc(var(--tw) * 0.14) 0 var(--edge-d), 0 calc(var(--tw) * 0.18) 6px rgba(0, 0, 0, .35); font-family: "Noto Serif KR", "Apple SD Gothic Neo", serif; }
.sh-tile:hover { transform: translateY(-2px); }
.sh-tile.sel { transform: translateY(calc(var(--tw) * -0.12)) scale(1.04); background: linear-gradient(170deg, #fffbe0, #ffe88a); box-shadow: 0 0 0 3px #ffcf3f, 0 0 14px 2px rgba(255, 207, 63, .8), 0 calc(var(--tw) * 0.14) 0 var(--edge-d); z-index: 2; }
.sh-tile.hint { animation: sh-glow .5s ease-in-out 3; z-index: 2; }
.sh-tile.no, .sh-stone.no { animation: sh-nope .3s; }
.sh-tile.gone { transform: scale(1.25); opacity: 0; transition: transform .22s ease-out, opacity .22s; pointer-events: none; }
.sh-tile.flip { animation: sh-flip .35s ease-out; }
.sh-tile.hid { background: linear-gradient(160deg, #c98a4b, #a76a33); color: #fff3d6; box-shadow: inset 0 0 0 2px #7a4a1f, inset 0 0 0 calc(var(--tw) * 0.08) #b97a3f, 0 calc(var(--tw) * 0.08) 0 #7a4a1f, 0 calc(var(--tw) * 0.14) 0 #5a3412, 0 calc(var(--tw) * 0.18) 6px rgba(0, 0, 0, .35); cursor: default; }
.sh-q { font-size: calc(var(--tw) * 0.6); font-weight: 900; text-shadow: 0 2px 0 #6a3a12; font-family: system-ui, sans-serif; }
.sh-stone { display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #d9d4ca, #a59f93 55%, #7c776d); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 calc(var(--tw) * 0.08) 0 #625d54, 0 calc(var(--tw) * 0.14) 0 #4a463f, 0 calc(var(--tw) * 0.18) 6px rgba(0, 0, 0, .35); cursor: default; }
.sh-stone b { display: grid; place-items: center; width: calc(var(--tw) * 0.5); height: calc(var(--tw) * 0.5); border-radius: 50%; background: rgba(0, 0, 0, .28); color: #fff; font-size: calc(var(--tw) * 0.34); font-family: system-ui, sans-serif; text-shadow: 0 1px 0 #000; }
.sh-stone.hp1 b { background: rgba(217, 48, 37, .6); }
.sh-stone.hit { animation: sh-nope .25s; }
.sh-stone.broken { transform: scale(1.3) rotate(8deg); opacity: 0; transition: transform .25s, opacity .25s; }
.sh-board.hammering .sh-stone, .sh-board.hammering .sh-tile.hid { cursor: crosshair; }
.sh-emoji { font-size: calc(var(--tw) * 0.66); font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .15)); }
.sh-num { font-size: calc(var(--tw) * 0.38); font-weight: 700; }
.sh-suit { font-size: calc(var(--tw) * 0.42); font-weight: 700; }
.sh-big { font-size: calc(var(--tw) * 0.62); font-weight: 800; }
.sh-tile .man.sh-suit { color: #c0392b; } .sh-tile .pin { color: #1f5fa8; } .sh-tile .sou { color: #237a3b; }
.sh-tile .wind { color: #222; } .sh-tile .red { color: #c0392b; } .sh-tile .green { color: #237a3b; } .sh-tile .flower { color: #c86a12; }
.sh-tile .white { color: #1f5fa8; border: 2px solid #1f5fa8; padding: 0 2px; border-radius: 3px; font-size: calc(var(--tw) * 0.48); }

/* items along the bottom */
.sh-items { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 4px; }
.sh-item { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e8f3ff 60%, #b9d4f2); box-shadow: 0 4px 0 #7aa1cf, 0 6px 8px rgba(0, 0, 0, .25); cursor: pointer; transition: transform .1s; }
.sh-item span { font-size: 26px; }
.sh-item b { position: absolute; right: -4px; bottom: -4px; min-width: 22px; padding: 1px 6px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 12px; box-shadow: 0 2px 0 #9f1f24; }
.sh-item:active { transform: translateY(3px); box-shadow: 0 1px 0 #7aa1cf; }
.sh-item.on { background: radial-gradient(circle at 35% 30%, #fff, #fff1b8 60%, #ffcf3f); box-shadow: 0 0 0 3px #ffcf3f, 0 4px 0 #c99a00; animation: sh-glow .8s ease-in-out infinite; }
.sh-btn.round { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #ffcf3f; color: var(--ink); font-size: 18px; font-weight: 900; box-shadow: 0 3px 0 #c99a00; cursor: pointer; }

/* the result card over the board */
.sh-result { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 30, 15, .45); border-radius: 14px; z-index: 5; animation: sh-fade .25s; }
.sh-card { display: grid; justify-items: center; gap: 8px; width: min(340px, 90%); padding: 18px 16px; border-radius: 18px; background: linear-gradient(#fffdf5, #f6ead0); color: var(--ink); box-shadow: 0 6px 0 var(--edge), 0 10px 24px rgba(0, 0, 0, .35); text-align: center; animation: sh-pop .35s ease-out; }
.sh-card h3 { margin: 0; font-size: 22px; }
.sh-card p { margin: 0; font-size: 13.5px; }
.sh-card.lose h3 { color: #b4321f; }
.sh-bigstars { display: flex; gap: 6px; font-size: 44px; line-height: 1; }
.sh-bigstars i { font-style: normal; color: #d9c9a0; }
.sh-bigstars i.on { color: var(--gold); text-shadow: 0 3px 0 #c99a00; animation: sh-starin .5s var(--d) both cubic-bezier(.3, 1.6, .5, 1); }
.sh-cardbtns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

@keyframes sh-blink { 50% { opacity: .4; } }
@keyframes sh-bob { 50% { transform: translateY(-2px); } }
@keyframes sh-hop { 40% { transform: translateY(-8px) rotate(-4deg); } }
@keyframes sh-wobble { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes sh-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sh-fade { from { opacity: 0; } }
@keyframes sh-glow { 50% { box-shadow: 0 0 0 3px #7fd0ff, 0 0 16px #7fd0ff; } }
@keyframes sh-nope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes sh-shake { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, -1px); } }
@keyframes sh-flip { from { transform: rotateY(90deg); } to { transform: none; } }
@keyframes sh-starin { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
@media (max-width: 520px) { .sh-item { width: 50px; height: 50px; } .sh-item span { font-size: 22px; } .sh-cat { width: 46px; height: 46px; } .sh-bubble { right: 42px; } }
@media (prefers-reduced-motion: reduce) { .sh-app *, .sh-app *::before { animation: none !important; transition: none !important; } }

/* chapters, bosses, ice */
.sh-chapters { grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.sh-chapters button { flex: none; display: grid; justify-items: center; gap: 1px; min-width: 76px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); cursor: pointer; }
.sh-chapters button b { font-size: 13px; } .sh-chapters button span { font-size: 11.5px; white-space: nowrap; } .sh-chapters button small { font-size: 11px; color: #c99a00; }
.sh-chapters button[aria-selected="true"] { border-color: var(--leaf); background: color-mix(in srgb, var(--leaf) 16%, var(--bg)); }
.sh-chapters button:disabled { opacity: .45; cursor: default; }
.sh-lv.boss { background: linear-gradient(#ffe7e0, #f7c1b2); box-shadow: 0 4px 0 #c97a62, 0 6px 0 #8f4a36, 0 8px 10px rgba(0, 0, 0, .18); }
.sh-lv.boss.done { background: linear-gradient(#fff3c4, #f7dc8a); }
.sh-tile.ice { cursor: default; }
.sh-ice { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(150deg, rgba(220, 245, 255, .75), rgba(150, 210, 245, .55) 50%, rgba(220, 245, 255, .8)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), inset 0 0 10px rgba(80, 160, 220, .6); pointer-events: none; }
.sh-tile.ice2 .sh-ice { background: linear-gradient(150deg, rgba(200, 235, 255, .92), rgba(120, 190, 240, .8) 50%, rgba(200, 235, 255, .95)); }
.sh-ice::after { content: ""; position: absolute; left: 18%; top: 12%; width: 22%; height: 40%; border-radius: 3px; background: rgba(255, 255, 255, .7); transform: skewX(-15deg); }
/* someone else's board in a race */
.sh-peer { display: grid; grid-template-columns: repeat(var(--n), 18px); grid-auto-rows: 21px; gap: 1px; padding: 4px; border-radius: 6px; background: #2c6a3c; }
.sh-peer i { display: grid; place-items: center; border-radius: 3px; font-style: normal; font-size: 12px; line-height: 1; }
.sh-peer i.t { background: #fffaf0; box-shadow: 0 1px 0 #c9ae74; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.sh-peer i.st { background: #a59f93; color: #fff; font-weight: 800; font-size: 10px; }
.sh-peer i.bx { background: #b97a3f; color: #fff3d6; font-weight: 900; font-size: 11px; }
.sh-peer i.ic { background: #bfe6fb; box-shadow: inset 0 0 0 1px #fff; }