/* Fishing minigame v2 (js/fishace.js): the full-screen scene, its top chips, the message line and the result card */
#fishace { position: fixed; inset: 0; z-index: 900; background: #0d1a22; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; font-family: 'Mali', 'Fredoka', system-ui, sans-serif; }
#fishace .fa-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
#fishace .fa-top { position: absolute; left: 14px; top: 12px; display: flex; gap: 8px; align-items: center; pointer-events: none; }
#fishace .fa-x { pointer-events: auto; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #e2b04a; background: radial-gradient(circle at 35% 30%, #3a2c22, #16100c); color: #ffe7a8; font: 700 22px Fredoka, sans-serif; cursor: pointer; box-shadow: 0 3px 0 #000a; }
#fishace .fa-x:hover { filter: brightness(1.2); }
#fishace .fa-chip { padding: 6px 14px; border-radius: 999px; background: #16100cd9; border: 2px solid #b8893a; color: #ffe7a8; font-weight: 700; font-size: 16px; }
#fishace .fa-msg { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); text-align: center; color: #fff; font-weight: 700; font-size: clamp(18px, 2.6vw, 34px); text-shadow: 0 0 0 #2a1a10, 2px 2px 0 #2a1a10, -2px 2px 0 #2a1a10, 2px -2px 0 #2a1a10, -2px -2px 0 #2a1a10; pointer-events: none; white-space: nowrap; }
#fishace .fa-msg small { font-size: .6em; opacity: .9; }
#fishace .fa-msg .fa-hot { color: #ffe27a; font-size: 1.3em; }
#fishace .fa-msg.fa-pop { animation: faPop .25s ease-out; }
@keyframes faPop { from { transform: translateX(-50%) scale(1.25); } to { transform: translateX(-50%) scale(1); } }
/* the result card */
#fishace .fa-card { position: absolute; inset: 0; display: grid; place-items: center; background: #0008; }
#fishace .fa-card[hidden] { display: none; }
#fishace .fa-rays { position: absolute; width: min(110vh, 90vw); aspect-ratio: 1; background: url(../assets/fishace/rays.png) center / contain no-repeat; animation: faSpin 14s linear infinite; opacity: .9; }
@keyframes faSpin { to { transform: rotate(360deg); } }
#fishace .fa-cbox { position: relative; box-sizing: border-box; width: min(760px, 94vw, 118vh); aspect-ratio: 1024 / 768; padding: 10.5% 9% 0; display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; background: url(../assets/fishace/result_card.png) center / 100% 100% no-repeat; animation: faIn .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes faIn { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#fishace .fa-rib { position: absolute; left: 50%; top: 4.2%; transform: translateX(-50%); color: #5a3410; font-weight: 800; font-size: clamp(16px, 3.4vh, 28px); white-space: nowrap; }
#fishace .fa-fish { height: clamp(70px, 17vh, 170px); width: auto; aspect-ratio: 1; margin-top: -1%; object-fit: contain; filter: drop-shadow(0 6px 10px #000a); animation: faBob 2s ease-in-out infinite; }
@keyframes faBob { 50% { transform: translateY(-8px) rotate(-3deg); } }
#fishace .fa-name { display: block; font-size: clamp(18px, 3.6vh, 30px); color: var(--rc, #fff); text-shadow: 2px 2px 0 #2a1a10; }
#fishace .fa-rar { display: inline-block; margin-top: 4px; padding: 2px 14px; border-radius: 999px; border: 2px solid var(--rc, #fff); color: var(--rc, #fff); font-weight: 700; }
#fishace .fa-nums { display: flex; justify-content: center; gap: 14px; margin: 1.6% 0 1%; }
#fishace .fa-nums span { min-width: 120px; padding: 4px 12px; border-radius: 12px; background: #0007; border: 2px solid #b8893a; font-size: 18px; }
#fishace .fa-nums small { display: block; font-size: 14px; color: #e8d4a8; }
#fishace .fa-nums b { font-size: clamp(18px, 3.4vh, 28px); color: #ffe7a8; }
#fishace .fa-line { font-size: clamp(12px, 1.9vh, 16px); color: #d8eef8; margin: 2px 0; }
#fishace .fa-again { position: absolute; bottom: -6%; left: 50%; transform: translateX(-50%); min-width: 220px; padding: 12px 30px; border-radius: 999px; border: 3px solid #2a1a10; background: linear-gradient(#ffe08a, #e0a23a); color: #3a210c; font: 800 24px Mali, sans-serif; cursor: pointer; box-shadow: 0 4px 0 #2a1a10; }
#fishace .fa-again:active { transform: translate(-50%, 3px); box-shadow: 0 1px 0 #2a1a10; }
@media (max-height: 520px) {
  #fishace .fa-chip, #fishace .fa-line { display: none; }
  #fishace .fa-x { width: 38px; height: 38px; font-size: 18px; }
  #fishace .fa-again { min-width: 150px; padding: 6px 20px; font-size: 18px; }
  #fishace .fa-cbox { padding-top: 11%; }
  #fishace .fa-fish { height: 30vh; }
}
/* round 2: sound / shake toggles, the message plate, rarity stars, the new tag */
#fishace .fa-tog { position: absolute; right: 14px; top: 12px; display: flex; gap: 8px; }
#fishace .fa-tog button { width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: center / contain no-repeat; filter: drop-shadow(0 3px 0 #000a); }
#fishace .fa-tog .fa-snd { background-image: url(../assets/fishace/snd_on.png); }
#fishace .fa-tog .fa-snd.off { background-image: url(../assets/fishace/snd_off.png); }
#fishace .fa-tog .fa-vib { background-image: url(../assets/fishace/vib_on.png); }
#fishace .fa-tog .fa-vib.off { background-image: url(../assets/fishace/vib_off.png); }
#fishace .fa-tog button:hover { filter: drop-shadow(0 3px 0 #000a) brightness(1.15); }
#fishace .fa-msg:not(:empty) { padding: .45em 2.2em .55em; background: url(../assets/fishace/msg_plate.png) center / 100% 100% no-repeat; }
#fishace .fa-star { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; background: url(../assets/fishace/star_rar.png) center / contain no-repeat; }
#fishace .fa-new { position: absolute; right: 7%; top: 14%; width: 22%; aspect-ratio: 256 / 110; background: url(../assets/fishace/new_tag.png) center / contain no-repeat; animation: faTag 1s ease-in-out infinite alternate; }
@keyframes faTag { to { transform: rotate(-8deg) scale(1.08); } }
@media (max-height: 520px) { #fishace .fa-tog button { width: 40px; height: 40px; } }
#fishace .fa-new::after { content: 'ใหม่!'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff4c8; font: 800 clamp(13px, 2.4vh, 22px) Mali, sans-serif; text-shadow: 1px 1px 0 #5a1208, -1px 1px 0 #5a1208, 1px -1px 0 #5a1208, -1px -1px 0 #5a1208; }

/* the skills button and panel (in the game) */
#fishace .fa-tog .fa-skb { width: auto; padding: 0 16px; border-radius: 999px; border: 3px solid #e2b04a; background: radial-gradient(circle at 35% 30%, #3a2c22, #16100c); color: #ffe7a8; font: 700 18px Mali, sans-serif; }
#fishace .fa-skp { position: absolute; inset: 0; display: grid; place-items: center; background: #000a; z-index: 3; }
#fishace .fa-skp[hidden] { display: none; }
#fishace .fa-skbox { width: min(560px, 94vw); max-height: 92%; overflow: auto; padding: 16px; border-radius: 16px; border: 3px solid #e2b04a; background: linear-gradient(#2a2018, #140e0a); color: #ffe7a8; display: flex; flex-direction: column; gap: 8px; }
#fishace .fa-skbox > b { font-size: 22px; } #fishace .fa-skbox > b small { font-size: 14px; color: #c9b48a; margin-left: 8px; }
#fishace .fa-skbox [data-sk] { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; border: 2px solid #6b4a22; background: #1c140e; color: #ffe7a8; text-align: left; cursor: pointer; font-family: Mali, sans-serif; }
#fishace .fa-skbox [data-sk].on { border-color: #ffd24a; background: #3a2a14; }
#fishace .fa-skbox [data-sk].lock { opacity: .5; cursor: default; }
#fishace .fa-skbox [data-sk] img { width: 52px; height: 52px; }
#fishace .fa-skbox [data-sk] span { flex: 1; display: flex; flex-direction: column; } #fishace .fa-skbox [data-sk] small { color: #d8c8a4; font-size: 14px; }
#fishace .fa-skbox [data-sk] i { font-style: normal; font-size: 13px; padding: 2px 10px; border-radius: 999px; background: #ffd24a; color: #3a210c; }
#fishace .fa-skok { margin-top: 6px; padding: 10px; border-radius: 999px; border: 3px solid #2a1a10; background: linear-gradient(#ffe08a, #e0a23a); color: #3a210c; font: 800 20px Mali, sans-serif; cursor: pointer; }