#hud #fishing-status {
  position: absolute; left: 50%; bottom: 156px; transform: translateX(-50%);
  width: 340px; padding: 15px 18px 12px; color: #403e30;
  background: linear-gradient(120deg, rgba(250,244,222,.97), rgba(226,233,213,.96));
  border: 1px solid #9b9d76; border-top: 3px solid #678a80; border-radius: 8px;
  box-shadow: 0 5px 22px #152e2c35, inset 0 0 0 3px #fff7df65;
  pointer-events: auto; animation: fishing-enter .25s ease-out;
}
#hud #fishing-status[hidden] { display: none; }
#fishing-status header { display: flex; align-items: center; gap: 9px; }
#fishing-status header > .icon { width: 37px; height: 37px; }
#fishing-status header div { display: grid; gap: 2px; }
#fishing-status header small { font-size: 8px; letter-spacing: 1.4px; color: #56786d; }
#fishing-status header strong { font-family: Georgia, serif; font-size: 16px; }
#fishing-status button { margin-left: auto; white-space: nowrap; font-size: 10px; padding: 5px 7px; }
#fishing-status p { font-size: 11px; margin: 10px 0; color: #62654c; }
.fishing-rhythm { display: flex; justify-content: space-between; font-size: 10px; color: #426f67; }
#fishing-status .skill-progress { margin: 5px 0 9px; height: 4px; }
#fishing-status .skill-progress i { background: linear-gradient(90deg,#819c78,#4c9388); transition: none; }
.fishing-catch { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 11px; font-weight: 600; color: #3b664f; }
.fishing-catch .icon { width: 32px; height: 32px; }
.fishing-hint { display: block; text-align: right; font-size: 9px; color: #77745c; margin-top: 4px; }
.landed .fishing-catch { animation: fishing-land .7s ease-out; }
#hud .fishing-panel { width: min(590px, calc(100vw - 32px)); max-width: 650px; }
.fishing-shoal { display: flex; align-items: center; gap: 18px; padding: 14px 18px; border: 1px solid #829e894a; border-radius: 7px; background: radial-gradient(ellipse at 14% 50%, #a4cec45c, transparent 65%), linear-gradient(110deg, #c9dac77a, #f7efdb9c); box-shadow: inset 0 1px #fff8e8a8; }
.fishing-shoal > div:last-child { position: relative; z-index: 1; }
.fishing-shoal small { display: block; color: #4f756b; font-size: 8px; letter-spacing: 1.8px; margin-bottom: 5px; }
.fishing-shoal strong { color: #405b50; font-family: Georgia, serif; font-size: 17px; font-weight: 400; }
.fishing-shoal p { color: #637367; font-size: 10px; line-height: 1.5; margin: 5px 0 0; }
.fishing-shoal-art { position: relative; width: 108px; height: 66px; flex: 0 0 108px; isolation: isolate; }
.fishing-shoal-art::before, .fishing-shoal-art::after { content: ''; position: absolute; inset: 2px -5px; border: 1px solid #65988c40; border-left-color: transparent; border-radius: 50%; transform: rotate(-13deg); }
.fishing-shoal-art::after { inset: 12px 4px; border-color: #f7f5ddaa; border-right-color: transparent; transform: rotate(11deg); }
.fishing-shoal-art .icon { position: absolute; width: 58px; height: 58px; z-index: 1; filter: drop-shadow(0 3px 2px #355d5030); }
.fishing-shoal-art .icon:nth-child(1) { left: -5px; top: 4px; transform: rotate(-18deg); }
.fishing-shoal-art .icon:nth-child(2) { left: 33px; top: -9px; transform: rotate(8deg); }
.fishing-shoal-art .icon:nth-child(3) { left: 57px; top: 19px; width: 49px; height: 49px; transform: rotate(-7deg); }
.fishing-intro, .fishing-supplies { font-size: 11px; line-height: 1.65; color: #68634e; }
.fishing-intro { margin: 14px 0; }
.fishing-supplies { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #92897140; }
.fishing-supplies strong { display: block; font-size: 10px; color: #54695a; margin-bottom: 3px; }
.fishing-methods { display: grid; gap: 13px; }
.fishing-method { padding: 13px 15px; border: 1px solid #89967670; border-radius: 7px; background: linear-gradient(125deg, #fff9e6be, #d9e4d145); box-shadow: inset 0 1px #fff9e3, 0 2px 7px #4d5a3b08; transition: border-color .2s, box-shadow .2s; }
.fishing-method.ready:focus-within, .fishing-method.ready:hover { border-color: #6b9586; box-shadow: inset 0 1px #fff9e3, 0 2px 9px #426d5016; }
.fishing-method-heading { display: flex; gap: 11px; align-items: center; }
.fishing-method-heading > .icon { width: 49px; height: 49px; flex: 0 0 49px; }
.fishing-method-heading > div { min-width: 0; }
.fishing-method h3 { margin: 0 0 3px; font-family: Georgia, serif; font-size: 19px; font-weight: 400; color: #405444; }
.fishing-method small { font-size: 9px; color: #637362; }
.fishing-method-level { margin-left: auto; flex-shrink: 0; padding: 5px 7px; border: 1px solid #839c8054; border-radius: 4px; font-size: 9px; letter-spacing: .6px; color: #4e7163; background: #e1e7d375; }
.fishing-method p { font-size: 10px; line-height: 1.5; color: #6e6951; margin: 8px 0 11px; }
.fishing-method > button { width: 100%; margin-top: 11px; padding: 9px; transition: background .18s, border-color .18s; }
.fishing-method > button:focus-visible { outline: 2px solid #527e72; outline-offset: 3px; }
.fishing-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.fishing-species { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid #98977330; border-radius: 4px; background: #fbf6e275; }
.fishing-species > span { display: grid; gap: 4px; min-width: 0; }
.fishing-species strong { font-size: 11px; font-weight: 500; color: #485d4f; }
.fishing-species small { font-size: 9px; color: #737664; }
.fishing-species small b { margin: 0 3px; font-weight: 400; color: #98a08a; }
.fishing-table .icon { width: 37px; height: 37px; flex: 0 0 37px; }
.fishing-table .locked { background: #b6b6a312; border-style: dashed; }
.fishing-table .locked .icon { filter: saturate(.45); opacity: .65; }
.fishing-method .fishing-requirements { color: #8b6041; padding-left: 8px; border-left: 2px solid #b8976573; margin: 10px 0 0; }
@keyframes fishing-enter { from { opacity: 0; margin-bottom: -8px; } to { opacity: 1; margin-bottom: 0; } }
@keyframes fishing-land { 0% { background: #d0e4b9; transform: translateY(2px); } 100% { background: transparent; transform: translateY(0); } }
@media (max-width: 1000px) { #hud #fishing-status { width: 290px; bottom: 135px; } }
@media (max-width: 480px) { .fishing-shoal { gap: 10px; padding: 12px; } .fishing-shoal-art { transform: scale(.85); width: 88px; flex-basis: 88px; } .fishing-shoal strong { font-size: 15px; } .fishing-method { padding: 11px; } .fishing-species { padding: 4px; gap: 3px; } .fishing-table .icon { width: 30px; height: 30px; flex-basis: 30px; } }
@media (prefers-reduced-motion: reduce) { #hud #fishing-status, .landed .fishing-catch { animation: none; } .fishing-method, .fishing-method > button { transition: none; } }