:root{--font:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;--text:#fff;--text-dim:#ffffffb8;--text-shadow:0 1px 3px #00000073;--glass-bg:#12101a52;--glass-bg-strong:#12101a7a;--glass-border:#ffffff38;--glass-hl:#ffffff1a;--glass-blur:blur(16px) saturate(150%);--glass-shadow:0 8px 32px #00000047;--btn-bg:#ffffff1f;--btn-bg-hover:#ffffff3d;--btn-bg-active:#0000003d;--btn-border:#ffffff47;--btn-border-hover:#ffffff8c;--accent:#ffcd5a61;--accent-border:#ffdc82bf;--danger:#e8432abf;--radius:16px}html,body,#root{height:100%;font-family:var(--font);color:var(--text);background:#bfe0f5;margin:0}html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button,input,select,textarea{font-family:inherit}.glass,.panel,.bubble,button.round,.joy{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hl)}.panel{color:var(--text);text-shadow:var(--text-shadow);border-radius:var(--radius);padding:10px 14px;font-size:14px;position:fixed}.panel button,.panel select,.panel input{color:var(--text);background:var(--btn-bg);border:1px solid var(--btn-border);text-shadow:var(--text-shadow);border-radius:12px;margin:4px;padding:8px 14px;font-size:14px;font-weight:500;transition:background .15s,border-color .15s,transform 80ms}.panel button,button.round{cursor:pointer;touch-action:manipulation;transition:background .15s,border-color .15s,box-shadow .15s,transform 80ms,filter .15s}@media (hover:hover){.panel button:hover:not(:disabled),button.round:hover{background:var(--btn-bg-hover);border-color:var(--btn-border-hover);box-shadow:0 4px 18px #ffffff24,inset 0 1px #ffffff40}.panel button.on:hover:not(:disabled),button.round.on:hover,.panel button.alert:hover{filter:brightness(1.15)}}.panel button:active:not(:disabled),button.round:active{background:var(--btn-bg-active);filter:brightness(.85);transform:scale(.96);box-shadow:inset 0 2px 8px #0006}.panel button.on:active:not(:disabled),button.round.on:active{background:var(--accent);filter:brightness(.8)}.panel button:focus-visible,button.round:focus-visible{outline-offset:2px;outline:2px solid #ffffffd9}.panel button:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4);box-shadow:none;transform:none}.panel button.on{background:var(--accent);border-color:var(--accent-border)}.panel input,.panel select{background-color:#00000038;outline:none}.panel input:focus,.panel select:focus{background-color:#0000004d;border-color:#fff9}.panel input::placeholder{color:var(--text-dim)}.panel select option{color:#1a1a1a;text-shadow:none;background:#fff}.center{text-align:center;background:var(--glass-bg-strong);border-radius:calc(var(--radius) + 4px);flex-direction:column;min-width:280px;padding:22px 24px;display:flex;top:50%;left:50%;transform:translate(-50%,-50%)}.top-left{line-height:1.6;top:12px;left:12px}.top-right{min-width:200px;padding:8px 12px;top:12px;right:12px}.bottom{flex-wrap:wrap;justify-content:center;padding:6px;display:flex;bottom:16px;left:50%;transform:translate(-50%)}.toast{background:var(--glass-bg-strong);font-weight:500;top:12px;left:50%;transform:translate(-50%)}.fish-status{font-weight:600;bottom:84px;left:50%;transform:translate(-50%)}.xoay{text-align:center;z-index:40;max-width:80vw;top:50%;left:50%;transform:translate(-50%,-50%)}h1{letter-spacing:.3px;color:var(--text);margin:2px 0 12px;font-size:22px;font-weight:700}b{font-weight:700}.hint{color:var(--text-dim);font-size:12px}.corner{color:var(--text);text-shadow:0 1px 4px #000000b3;font-size:12px;position:fixed;bottom:12px;right:12px}.stats{gap:12px;margin-top:2px;display:flex}.bxh-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.panel .bxh-head button{border-radius:10px;margin:2px;padding:3px 10px;font-size:12px}.bxh{margin:6px 0 0;padding-left:22px;font-size:13px;line-height:1.7}.bxh li span{min-width:120px;display:inline-block}.bxh li.me{text-decoration:underline;-webkit-text-decoration-color:var(--accent-border);text-decoration-color:var(--accent-border);text-underline-offset:3px;font-weight:700}.nhac{align-items:center;gap:6px;margin-top:4px;display:flex}.panel .nhac button{border-radius:10px;margin:0;padding:3px 10px;font-size:12px}.panel .nhac input[type=range]{accent-color:#fff;background:0 0;border:none;width:90px;margin:0;padding:0}.alert,.panel button.alert{color:#fff;animation:.45s infinite alternate nhay;background:var(--danger)!important;border-color:#ffb4a0cc!important}@keyframes nhay{0%{filter:brightness()}to{filter:brightness(1.3)}}.chat{flex-direction:column;width:300px;padding:8px;display:flex;bottom:16px;left:12px}.chat-list{word-break:break-word;height:160px;padding:2px 4px;font-size:13px;line-height:1.5;overflow-y:auto}.chat-list b.me{text-decoration:underline;-webkit-text-decoration-color:var(--accent-border);text-decoration-color:var(--accent-border);text-underline-offset:2px}.chat-list .sys{color:var(--text-dim);font-style:italic}.cau-mau{flex-wrap:wrap;gap:4px;margin-top:6px;display:flex}.panel .cau-mau button{border-radius:10px;margin:0;padding:4px 9px;font-size:12px}.chat-list::-webkit-scrollbar{width:6px}.chat-list::-webkit-scrollbar-thumb{background:#ffffff40;border-radius:3px}.chat-close{color:var(--text);position:absolute;top:2px;right:6px;box-shadow:none!important;background:0 0!important;border:none!important;margin:0!important;padding:0 6px!important;font-size:22px!important}.bubble{color:var(--text);text-shadow:var(--text-shadow);font-family:var(--font);text-align:center;word-break:break-word;background:var(--glass-bg-strong);border-radius:14px;width:max-content;max-width:220px;padding:6px 12px;font-size:14px;position:relative;transform:translateY(-50%)}.bubble:after{content:"";border:7px solid #0000;border-top-color:#12101a7a;border-bottom:0;position:absolute;bottom:-7px;left:50%;transform:translate(-50%)}@media (width<=760px){.corner{display:none}.chat{width:calc(100% - 48px);top:auto;bottom:84px}.chat-list{height:90px}.top-right{min-width:0}.fish-status{bottom:200px}}body.touch{touch-action:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0;overflow:hidden}body.touch canvas{touch-action:none}.panel input,.panel select{font-size:16px}.joy{left:calc(18px + env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));touch-action:none;z-index:30;border-radius:50%;width:136px;height:136px;position:fixed}.joy-knob{pointer-events:none;background:radial-gradient(circle at 35% 30%,#fffffff2,#ffffff8c);border:1px solid #fffc;border-radius:50%;width:58px;height:58px;margin:-29px 0 0 -29px;position:absolute;top:50%;left:50%;box-shadow:0 4px 14px #0000004d}.joy-knob.run{background:radial-gradient(circle at 35% 30%,#ffd9b8,#ff8a4c)}.touch-side{right:calc(12px + env(safe-area-inset-right));z-index:30;flex-direction:column;gap:10px;display:flex;position:fixed;top:50%;transform:translateY(-60%)}button.round{width:58px;height:58px;color:var(--text);text-shadow:var(--text-shadow);touch-action:none;border-radius:50%;padding:0;font-size:12px;font-weight:600;line-height:1.1;position:relative}button.round.on{background:var(--accent);border-color:var(--accent-border)}.badge{background:var(--danger);color:#fff;border:1px solid #fff9;border-radius:10px;min-width:20px;height:20px;padding:0 4px;font-size:11px;line-height:20px;position:absolute;top:-4px;right:-4px}body.touch .top-left{top:calc(8px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));max-width:46vw;padding:6px 10px;font-size:12px;line-height:1.45}body.touch .top-right{top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));min-width:0;padding:6px 10px;font-size:12px}body.touch .bxh li span{min-width:90px}body.touch .bottom{left:auto;right:calc(84px + env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));justify-content:flex-end;max-width:calc(100vw - 260px);padding:4px;transform:none}body.touch .bottom button{margin:3px;padding:9px 11px;font-size:13px}body.touch .chat{left:50%;top:calc(8px + env(safe-area-inset-top));z-index:35;width:min(420px,100vw - 32px);bottom:auto;transform:translate(-50%)}body.touch .chat-list{height:120px}body.touch .fish-status{top:30%;bottom:auto}body.touch .toast{top:auto;bottom:calc(170px + env(safe-area-inset-bottom))}@media (orientation:portrait){body.touch .bottom{max-width:none;left:8px;right:8px;bottom:calc(170px + env(safe-area-inset-bottom));justify-content:center}body.touch .touch-side{top:auto;bottom:calc(24px + env(safe-area-inset-bottom));flex-direction:row;transform:none}body.touch .top-left{max-width:60vw}}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass,.panel,.bubble,button.round,.joy{background:#12101ab8}}.lobby-title{font-size:18px}.panel .lobby-field{box-sizing:border-box;border-radius:999px;height:42px;padding:0 18px;font-size:15px}.panel select.lobby-field{--arrow-right:18px;--arrow-size:12px;appearance:none;cursor:pointer;padding-right:calc(var(--arrow-right) + var(--arrow-size) + 8px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--arrow-right) center;background-size:var(--arrow-size) auto}.panel .lobby-btn{box-sizing:border-box;border-radius:999px;height:46px;margin-top:12px;font-size:16px;font-weight:700}body.touch .panel .lobby-field{font-size:16px}.panel.actions{border-radius:999px;gap:12px;padding:12px}body.touch .panel.actions{padding:12px}.panel.actions button,.panel.actions button.alert{box-shadow:none;border:none;border-radius:999px;background:0 0!important}.panel.actions button{min-width:64px;color:var(--text);flex-direction:column;justify-content:center;align-items:center;gap:4px;margin:0;padding:6px 16px;font-size:14px;line-height:1.2;display:inline-flex;position:relative}.panel.actions .icon{filter:drop-shadow(0 1px 2px #00000073);flex:none;width:26px;height:26px}.panel.actions button:hover:not(:disabled),.panel.actions button:active:not(:disabled),.panel.actions button.on{box-shadow:none!important;filter:none!important;transform:none!important}@media (hover:hover){.panel.actions button:hover:not(:disabled):not(.on){background:#ffffff24!important}.panel.actions button.on:hover:not(:disabled){background:#ffffff47!important}}.panel.actions button:active:not(:disabled):not(.on){background:#ffffff3d!important}.panel.actions button.on{background:#fff3!important}.panel.actions button.on:active:not(:disabled){background:#ffffff1f!important}.panel.actions button.alert{color:#ff9c8c;text-shadow:0 0 8px #ff5032cc}body.touch .panel.actions button{gap:3px;min-width:56px;margin:0;padding:6px 16px;font-size:13px}body.touch .panel.actions .icon{width:23px;height:23px}