@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap');

.apc-page {
    font-family: 'VT323', monospace;
    color: #c8f0ff;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}
.apc-title {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(14px, 3vw, 22px);
    color: #7fffff;
    text-shadow: 0 0 8px #00eeff, 0 0 20px #0099cc;
    margin: 10px 0 4px;
    letter-spacing: 2px;
    line-height: 1.6;
}
.apc-subtitle {
    font-size: 20px;
    color: #aaeeff;
    margin-bottom: 20px;
    text-shadow: 0 0 6px #0088bb;
}

.tank-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 24px;
}
.tank-frame {
    border: 4px solid #2255aa;
    border-radius: 6px;
    background: linear-gradient(180deg, #001a2e 0%, #002844 18%, #003358 55%, #001a30 100%);
    box-shadow: 0 0 0 2px #11aaff44, 0 0 20px #0066cc88, inset 0 0 2px #55aaff44;
    position: relative;
    overflow: hidden;
    height: 420px;
}
.tank-frame::before {
    content: '';
    position: absolute;
    top:0; left:0; right:0; height:100%;
    background: linear-gradient(105deg,
        transparent 0%, rgba(150,220,255,0.03) 30%, rgba(150,220,255,0.07) 31%,
        transparent 32%, transparent 60%, rgba(150,220,255,0.04) 80%, transparent 81%);
    pointer-events: none;
    z-index: 20;
}
.tank-frame::after {
    content: '';
    position: absolute;
    top:0; left:-100%; width:300%; height:3px;
    background: linear-gradient(90deg, transparent, rgba(120,210,255,0.4),
        rgba(180,240,255,0.7), rgba(120,210,255,0.4), transparent);
    animation: surfaceRipple 4s linear infinite;
    z-index: 21;
}
@keyframes surfaceRipple {
    from { transform: translateX(0); }
    to   { transform: translateX(33.33%); }
}

.tank-sand {
    position: absolute;
    bottom:0; left:0; right:0; height:32px;
    background: linear-gradient(180deg, #3a2a10 0%, #5a3e1a 40%, #4a3010 100%);
    z-index: 5;
}
.tank-sand::before {
    content: '';
    position: absolute;
    top:-3px; left:0; right:0; height:6px;
    background:
        radial-gradient(ellipse 10px 3px at 8%  50%, #6a4a22 0%, transparent 100%),
        radial-gradient(ellipse 14px 3px at 22% 50%, #5a3e18 0%, transparent 100%),
        radial-gradient(ellipse 8px  2px at 40% 50%, #6a4a22 0%, transparent 100%),
        radial-gradient(ellipse 16px 3px at 58% 50%, #5a3e18 0%, transparent 100%),
        radial-gradient(ellipse 11px 3px at 75% 50%, #6a4a22 0%, transparent 100%),
        radial-gradient(ellipse 13px 3px at 92% 50%, #5a3e18 0%, transparent 100%);
}

.plant {
    position: absolute;
    bottom: 28px;
    z-index: 7;
    pointer-events: none;
    transform-origin: bottom center;
}
.plant-stem   { animation: sway 3s ease-in-out infinite; }
.plant-stem-2 { animation-delay: -1.2s; animation-duration: 3.8s; }
.plant-stem-3 { animation-delay: -0.6s; animation-duration: 2.6s; }
@keyframes sway {
    0%, 100% { transform: rotate(-4deg); }
    50%       { transform: rotate(4deg);  }
}

.bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        rgba(220,245,255,0.55), rgba(140,210,255,0.1));
    border: 1px solid rgba(180,235,255,0.35);
    pointer-events: none;
    z-index: 15;
    transition: opacity 0.4s;
}

.mouth-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        rgba(220,245,255,0.85), rgba(140,210,255,0.25));
    border: 1px solid rgba(180,235,255,0.65);
    pointer-events: none;
    z-index: 16;
    animation: mouthBubble 1.3s ease-out forwards;
}
@keyframes mouthBubble {
    0%   { opacity:0.9; transform:translateY(0)     translateX(0)             scale(1);    }
    55%  { opacity:0.5; transform:translateY(-16px)  translateX(var(--mx,4px)) scale(0.85); }
    100% { opacity:0;   transform:translateY(-30px)  translateX(var(--mx,4px)) scale(0.55); }
}

.shrimp {
    position: absolute;
    z-index: 9;
    cursor: grab;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    user-select: none;
}
.shrimp:active { cursor: grabbing; }
.shrimp:hover .fish-tooltip { opacity: 1; }

.fish {
    position: absolute;
    cursor: pointer;
    z-index: 12;
    user-select: none;

    transition: transform 0.16s ease;
    transform-origin: center center;
}
.fish:hover    { transform: scale(1.12); }
.fish.dragging { cursor: grabbing; z-index: 30; transform: scale(1.12); }

.fish img    { display:block; image-rendering:pixelated; pointer-events:none; }
.fish canvas { display:block; image-rendering:pixelated; pointer-events:none; }

.fish-tooltip {
    position: absolute;

    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #001a30ee;
    border: 1px solid #2266aa;
    color: #99ddff;
    font-family: 'VT323', monospace;
    font-size: 15px;
    padding: 2px 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 50;
}
.fish:hover .fish-tooltip { opacity: 1; }

.pellet {
    position: absolute;
    width:5px; height:5px;
    background:#cc8833;
    border-radius:50%;
    z-index:14;
    pointer-events:none;
}

.feed-btn {
    position: absolute;
    top:10px; right:10px; z-index:25;
    font-family:'Press Start 2P', monospace; font-size:9px;
    background:linear-gradient(180deg,#1a4a7a,#0d2e55);
    color:#7fffff; border:2px solid #2288cc;
    padding:8px 12px; cursor:pointer; letter-spacing:1px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);
    transition:background 0.15s,color 0.15s;
    text-transform:uppercase;
}
.feed-btn:hover  { background:linear-gradient(180deg,#1e5a9a,#11366a); color:#aaffff; }
.feed-btn:active { transform:translateY(1px); }
.feed-btn.fed    { color:#ffee88; border-color:#ffcc44; }

.apc-divider {
    border:none; border-top:2px solid #1155aa;
    margin:22px auto; width:80%; position:relative;
}
.apc-divider::after {
    content:'~-~-~';
    position:absolute; top:-10px; left:50%;
    transform:translateX(-50%);
    color:#3388cc; font-size:16px; padding:0 8px;
}

.join-section {
    background:linear-gradient(135deg,#001833 0%,#002244 50%,#001833 100%);
    border:2px solid #1a4488; padding:20px; margin:20px 0; text-align:left;
}
.join-title {
    font-family:'Press Start 2P',monospace; font-size:11px;
    color:#7fffff; text-shadow:0 0 6px #00ccff;
    margin:0 0 14px; text-align:center;
}
.join-section p, .join-section li { font-size:19px; color:#aacce8; line-height:1.5; }
.join-section ul { margin:8px 0 14px 20px; padding:0; }
.join-section li { margin-bottom:6px; }
.join-section a  { color:#66ddff; }
.join-section strong { color:#ddffff; }

.template-grid {
    display:flex; justify-content:center;
    gap:40px; flex-wrap:wrap; margin:16px 0 8px;
}
.template-item { text-align:center; }
.template-item img {
    image-rendering:pixelated; display:block;
    margin:0 auto 6px; background:#034770;
    padding:6px; border:2px solid #224466; width:128px; height:auto;
}
.template-label { font-size:16px; color:#88ccee; }
.template-hint  { font-size:14px; color:#557799; margin-top:2px; }

.tank-glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 110, 255, 0.09) !important;

    z-index: 24 !important; 

    pointer-events: none !important; 
}