/* /website_huroos/static/src/css/arc_arcade.css */
 .arc-page{--arc-violet: #714B67; --arc-violet-hi: #9a6b8f; --arc-neon: #c77dff; --arc-neon-soft: rgba(199, 125, 255, .35); --arc-pink: #ff5fa2; --arc-teal: #21a085; --arc-teal-hi: #5ff0cf; --arc-sap: #6ccbf4; --arc-gold: #ffd34d; --arc-silver: #d7e0ea; --arc-bronze: #e0955a; --arc-ink: #12081f; --arc-panel: rgba(24, 11, 40, .82); --arc-text: #f6eefe; --arc-muted: #bba7d0; --arc-pixel: 'Press Start 2P', ui-monospace, monospace; --arc-header-h: 76px; padding-top: var(--arc-header-h); font-family: 'Poppins', system-ui, sans-serif; background: #fbfcfc; overflow-x: hidden;}.arc-page *{box-sizing: border-box;}.arc-page .d-none{display: none !important;}.arc-stage{position: relative; width: 100%; height: calc(100vh - var(--arc-header-h)); height: calc(100svh - var(--arc-header-h)); min-height: 320px; overflow: hidden; color: var(--arc-text); background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(113, 75, 103, .45), transparent 70%), linear-gradient(180deg, #120822 0%, #0b0514 100%); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;}.arc-canvas{position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; outline: none;}.arc-stage.is-playing .arc-canvas, .arc-stage.is-playing .arc-touch{touch-action: none;}.arc-stage.is-playing .arc-touch{cursor: crosshair;}.arc-touch{position: absolute; inset: 0; z-index: 2; display: none;}.arc-stage.is-playing .arc-touch{display: block;}.arc-stick, .arc-fire{position: absolute; display: none; pointer-events: none;}.arc-stage.is-touch .arc-fire{display: flex;}.arc-stick{width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%; border: 2px solid rgba(199, 125, 255, .55); background: radial-gradient(circle, rgba(199, 125, 255, .18), rgba(18, 8, 31, .35)); box-shadow: 0 0 24px rgba(199, 125, 255, .35);}.arc-stick.is-on{display: block;}.arc-stick__knob{position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f1d9ff, var(--arc-neon) 45%, var(--arc-violet)); box-shadow: 0 0 18px rgba(199, 125, 255, .8);}.arc-fire{right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); width: 92px; height: 92px; border-radius: 50%; align-items: center; justify-content: center; font: 10px/1 var(--arc-pixel); letter-spacing: .04em; color: #fff; border: 3px solid rgba(255, 255, 255, .7); background: radial-gradient(circle at 35% 30%, #ff9ccc, var(--arc-pink) 45%, #a0225f); box-shadow: 0 0 26px rgba(255, 95, 162, .55), inset 0 -6px 0 rgba(0, 0, 0, .2); opacity: .82;}.arc-fire.is-on{transform: scale(.92); opacity: 1;}.arc-rotate{position: absolute; left: 16px; right: 16px; top: calc(var(--arc-canvas-bottom, 60%) + 18px); z-index: 1; display: none; align-items: center; justify-content: center; gap: 10px; font-size: 13px; text-align: center; color: var(--arc-muted); pointer-events: none;}.arc-rotate svg{width: 22px; height: 22px; flex: 0 0 22px; fill: var(--arc-neon);}@media (orientation: portrait){.arc-stage.is-touch.is-playing .arc-rotate{display: flex;}}.arc-tools{position: absolute; top: 12px; right: 12px; z-index: 6; display: flex; gap: 8px;}.arc-tool{width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid rgba(199, 125, 255, .45); background: rgba(24, 11, 40, .72); color: #fff; cursor: pointer; transition: background .15s ease, transform .15s ease, border-color .15s ease;}.arc-tool:hover{background: rgba(113, 75, 103, .9); border-color: var(--arc-neon);}.arc-tool:active{transform: scale(.94);}.arc-tool:focus-visible{outline: 2px solid var(--arc-teal-hi); outline-offset: 2px;}.arc-tool svg{width: 20px; height: 20px; fill: currentColor;}.arc-tool .arc-ico-off{display: none;}.arc-tool.is-muted .arc-ico-on{display: none;}.arc-tool.is-muted .arc-ico-off{display: block;}.arc-tool--pause{display: none;}.arc-stage.is-playing .arc-tool--pause{display: flex;}.arc-screen{position: absolute; inset: 0; z-index: 4; display: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 22px 24px; background: radial-gradient(ellipse at 50% 30%, rgba(18, 8, 31, .35), rgba(10, 4, 18, .78));}.arc-screen.is-active{display: flex; animation: arcFade .28s ease both;}.arc-screen--pause, .arc-screen--over{background: rgba(10, 4, 18, .72);}@keyframes arcFade{from{opacity: 0;}to{opacity: 1;}}@keyframes arcRise{from{opacity: 0; transform: translateY(18px);}to{opacity: 1; transform: none;}}@keyframes arcPulse{0%, 100%{box-shadow: 0 0 0 0 rgba(199, 125, 255, .55), 0 10px 30px rgba(113, 75, 103, .55);}50%{box-shadow: 0 0 0 10px rgba(199, 125, 255, 0), 0 10px 30px rgba(113, 75, 103, .55);}}@keyframes arcGlow{0%, 100%{filter: drop-shadow(0 0 6px rgba(255, 211, 77, .55));}50%{filter: drop-shadow(0 0 16px rgba(255, 211, 77, .95));}}@keyframes arcFloat{0%, 100%{transform: translateY(0);}50%{transform: translateY(-5px);}}@keyframes arcBlink{0%, 49%{opacity: 1;}50%, 100%{opacity: .25;}}.arc-home{margin: auto; width: 100%; max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-areas: "head head" "hero board"; gap: 18px 24px; animation: arcRise .45s ease both;}.arc-home__head{grid-area: head; text-align: center;}.arc-kicker{display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 7px 14px; border-radius: 999px; font: 10px/1 var(--arc-pixel); letter-spacing: .12em; color: var(--arc-teal-hi); background: rgba(33, 160, 133, .14); border: 1px solid rgba(95, 240, 207, .4);}.arc-kicker i{width: 8px; height: 8px; border-radius: 50%; background: var(--arc-teal-hi); box-shadow: 0 0 10px var(--arc-teal-hi); animation: arcBlink 1.1s steps(1) infinite;}.arc-page .arc-title{margin: 0 0 12px; font: 400 clamp(26px, 4.6vw, 52px)/1.1 var(--arc-pixel); letter-spacing: .02em; color: #fff; filter: drop-shadow(0 4px 0 #3b1f48) drop-shadow(0 0 14px rgba(199, 125, 255, .55));}.arc-title__odoo{background: linear-gradient(180deg, #ffffff 0%, #f1d9ff 40%, #c77dff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}.arc-title__vs{display: inline-block; margin: 0 .25em; font-size: .55em; vertical-align: middle; color: var(--arc-pink); -webkit-text-fill-color: var(--arc-pink); transform: rotate(-8deg);}.arc-title__sap{background: linear-gradient(180deg, #e6f7ff 0%, #6ccbf4 60%, #2b8fd6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}.arc-page .arc-subtitle{max-width: 640px; margin: 0 auto; font-size: clamp(14px, 1.3vw, 16px); line-height: 1.6; color: #d9c7ea; text-shadow: 0 2px 10px rgba(10, 4, 18, .95), 0 0 2px rgba(10, 4, 18, .9);}.arc-panel{position: relative; padding: 22px 22px 20px; border-radius: 20px; background: var(--arc-panel); border: 1px solid var(--arc-neon-soft); box-shadow: 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 20px 50px rgba(0, 0, 0, .45), 0 0 40px rgba(199, 125, 255, .12);}.arc-panel--hero{grid-area: hero;}.arc-panel--board{grid-area: board; display: flex; flex-direction: column;}.arc-page .arc-panel__title{display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 400 12px/1.4 var(--arc-pixel); letter-spacing: .06em; text-transform: uppercase; color: #fff;}.arc-panel__title span{width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 11px; background: var(--arc-violet); box-shadow: 0 0 12px rgba(199, 125, 255, .55);}.arc-panel__title--board{justify-content: center; color: var(--arc-gold); text-shadow: 0 0 12px rgba(255, 211, 77, .55);}.arc-panel__title--board svg{width: 18px; height: 18px; fill: var(--arc-gold);}.arc-chars{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px;}.arc-char{position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 4px 10px; border-radius: 16px; border: 2px solid rgba(199, 125, 255, .2); background: linear-gradient(180deg, rgba(113, 75, 103, .18), rgba(18, 8, 31, .5)); color: var(--arc-text); cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;}.arc-char:hover{transform: translateY(-3px); border-color: rgba(199, 125, 255, .6);}.arc-char:focus-visible{outline: 2px solid var(--arc-teal-hi); outline-offset: 2px;}.arc-char.is-selected{border-color: var(--arc-neon); background: linear-gradient(180deg, rgba(199, 125, 255, .3), rgba(113, 75, 103, .35)); box-shadow: 0 0 0 3px rgba(199, 125, 255, .18), 0 0 28px rgba(199, 125, 255, .45);}.arc-char.is-selected::after{content: ""; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--arc-teal-hi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2312081f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; box-shadow: 0 0 10px var(--arc-teal-hi);}.arc-char__cv{display: block; width: 100%; max-width: 132px; height: auto; aspect-ratio: 120 / 130;}.arc-char__name{margin-top: 2px; font: 10px/1.3 var(--arc-pixel); color: #fff;}.arc-char__role{margin-top: 5px; font-size: 11px; line-height: 1.2; color: var(--arc-muted); text-align: center;}.arc-form{display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;}.arc-field{flex: 1 1 220px; min-width: 0;}.arc-page .arc-input{width: 100%; height: 54px; padding: 0 18px; border-radius: 14px; border: 2px solid rgba(199, 125, 255, .35); background: rgba(10, 4, 18, .7); color: #fff; font: 600 17px/1 'Poppins', system-ui, sans-serif; letter-spacing: .02em; outline: none; transition: border-color .15s ease, box-shadow .15s ease;}.arc-page .arc-input::placeholder{color: rgba(187, 167, 208, .6); font-weight: 500;}.arc-page .arc-input:focus{border-color: var(--arc-neon); box-shadow: 0 0 0 4px rgba(199, 125, 255, .2), 0 0 22px rgba(199, 125, 255, .35);}.arc-input.is-invalid{border-color: var(--arc-pink);}.arc-form__error{font-size: 12.5px; color: #ff9ccc;}.arc-form__error:not(:empty){margin-top: 6px;}.arc-form__hint{margin-top: 6px; font-size: 12px; color: var(--arc-muted);}.arc-form__error:not(:empty) + .arc-form__hint{display: none;}.arc-btn{display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 14px; border: 0; font: 400 14px/1 var(--arc-pixel); letter-spacing: .05em; color: #fff; text-decoration: none; cursor: pointer; transition: transform .15s ease, filter .15s ease, background .15s ease;}.arc-btn:hover{transform: translateY(-2px); filter: brightness(1.08); color: #fff;}.arc-btn:active{transform: translateY(1px) scale(.98);}.arc-btn:focus-visible{outline: 2px solid var(--arc-teal-hi); outline-offset: 3px;}.arc-btn--play{flex: 0 0 auto; min-width: 170px; background: linear-gradient(135deg, #a76a9b 0%, var(--arc-violet) 55%, #4f2f49 100%); border: 2px solid rgba(241, 217, 255, .45); text-shadow: 0 2px 0 rgba(0, 0, 0, .35); animation: arcPulse 1.8s ease-in-out infinite;}.arc-btn--play svg{width: 14px; height: 14px; fill: currentColor;}.arc-btn--ghost{background: rgba(255, 255, 255, .06); border: 2px solid rgba(199, 125, 255, .45);}.arc-btn--ghost:hover{background: rgba(199, 125, 255, .16);}.arc-keys{display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px dashed rgba(199, 125, 255, .25); font-size: 12.5px; color: var(--arc-muted);}.arc-keys li{display: inline-flex; align-items: center; gap: 6px;}.arc-keys kbd{display: inline-block; min-width: 22px; padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-bottom-width: 3px; font: 600 11px/1.2 'Poppins', system-ui, sans-serif; color: #fff; text-align: center;}.arc-keys__touch{display: none !important;}.arc-powers{display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; margin-top: 14px;}.arc-power{display: flex; align-items: center; gap: 10px; min-width: 0;}.arc-power__icon{width: 32px; height: 32px; flex: 0 0 32px;}.arc-power__text{display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12px; line-height: 1.3; color: var(--arc-muted);}.arc-power__text strong{font: 400 8px/1.3 var(--arc-pixel); letter-spacing: .04em;}.arc-stage.is-touch .arc-keys__desk{display: none !important;}.arc-stage.is-touch .arc-keys__touch{display: inline-flex !important;}.arc-podium{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; margin: 4px 0 14px;}.arc-podium__slot{--medal: var(--arc-gold); display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center;}.arc-podium__slot--2{--medal: var(--arc-silver);}.arc-podium__slot--3{--medal: var(--arc-bronze);}.arc-cup{width: 40px; height: 40px; margin-bottom: 4px; animation: arcFloat 2.6s ease-in-out infinite;}.arc-podium__slot--1 .arc-cup{width: 54px; height: 54px; animation: arcFloat 2.6s ease-in-out infinite, arcGlow 2.2s ease-in-out infinite;}.arc-podium__slot--2 .arc-cup{animation-delay: -.8s;}.arc-podium__slot--3 .arc-cup{animation-delay: -1.6s;}.arc-avatar{display: block; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--medal); background: radial-gradient(circle at 50% 35%, #3a1d52, #160a26); box-shadow: 0 0 16px color-mix(in srgb, var(--medal) 55%, transparent);}.arc-podium__slot--1 .arc-avatar{width: 56px; height: 56px;}.arc-podium__name{max-width: 100%; margin-top: 6px; overflow: hidden; font-size: 13px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; color: #fff;}.arc-podium__score{font: 10px/1.6 var(--arc-pixel); color: var(--medal);}.arc-podium__base{width: 100%; margin-top: 6px; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; border-radius: 10px 10px 4px 4px; font: 16px/1 var(--arc-pixel); color: rgba(18, 8, 31, .75); background: linear-gradient(180deg, var(--medal), color-mix(in srgb, var(--medal) 55%, #2a1240)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 8px 20px rgba(0, 0, 0, .35);}.arc-podium__slot--1 .arc-podium__base{height: 58px;}.arc-podium__slot--2 .arc-podium__base{height: 42px;}.arc-podium__slot--3 .arc-podium__base{height: 30px;}.arc-podium__slot.is-empty .arc-avatar{opacity: .35;}.arc-podium__slot.is-empty .arc-podium__name{color: var(--arc-muted); font-weight: 500;}.arc-board{margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px;}.arc-board__row{display: grid; grid-template-columns: 34px 30px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 4px 12px 4px 8px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); font-size: 13.5px;}.arc-board__row.is-me{border-color: var(--arc-teal-hi); background: rgba(33, 160, 133, .16);}.arc-board__rank{font: 10px/1 var(--arc-pixel); color: var(--arc-muted); text-align: center;}.arc-board__row .arc-avatar{width: 28px; height: 28px; border-width: 2px; --medal: rgba(199, 125, 255, .55); box-shadow: none;}.arc-board__name{overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: #fff;}.arc-board__wave{font-size: 11.5px; color: var(--arc-muted); white-space: nowrap;}.arc-board__score{font: 10px/1 var(--arc-pixel); color: var(--arc-neon); text-align: right;}.arc-board__empty, .arc-board__loading{margin: auto 0; padding: 18px 10px; text-align: center; font-size: 13.5px; color: var(--arc-muted);}.arc-board__loading::before{content: ""; display: block; width: 26px; height: 26px; margin: 0 auto 10px; border-radius: 50%; border: 3px solid rgba(199, 125, 255, .25); border-top-color: var(--arc-neon); animation: arcSpin .8s linear infinite;}@keyframes arcSpin{to{transform: rotate(360deg);}}.arc-dialog{margin: auto; width: 100%; max-width: 560px; padding: 30px 28px 26px; text-align: center; border-radius: 22px; background: var(--arc-panel); border: 1px solid var(--arc-neon-soft); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 50px rgba(199, 125, 255, .2); animation: arcRise .35s ease both;}.arc-page .arc-dialog__title{margin: 0 0 8px; font: 400 clamp(22px, 4vw, 34px)/1.2 var(--arc-pixel); color: #fff; text-shadow: 0 0 16px rgba(199, 125, 255, .85), 0 4px 0 #3b1f48;}.arc-page .arc-dialog__lead{margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--arc-muted);}.arc-dialog__actions{display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px;}.arc-dialog__actions .arc-btn{animation: none; min-width: 0; height: 50px; font-size: 12px;}.arc-over__score{margin: 4px 0 18px; font: 400 clamp(26px, 6vw, 44px)/1.1 var(--arc-pixel); color: var(--arc-gold); text-shadow: 0 0 18px rgba(255, 211, 77, .6), 0 4px 0 #6b4a00;}.arc-over__label{display: block; margin-bottom: 8px; font: 9px/1 var(--arc-pixel); letter-spacing: .14em; color: var(--arc-muted); text-shadow: none;}.arc-stats{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0;}.arc-stats > div{padding: 12px 6px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07);}.arc-stats dt{margin-bottom: 8px; font-size: 11px; font-weight: 500; color: var(--arc-muted);}.arc-stats dd{margin: 0; font: 13px/1 var(--arc-pixel); color: #fff;}.arc-over__status{display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; margin-top: 16px; padding: 10px 14px; border-radius: 14px; font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, .05); color: var(--arc-text);}.arc-over__status.is-ok{background: rgba(33, 160, 133, .18); color: #c9fff0;}.arc-over__status.is-top{background: linear-gradient(90deg, rgba(255, 211, 77, .25), rgba(199, 125, 255, .2)); color: #fff6d6;}.arc-over__status.is-error{background: rgba(255, 95, 162, .15); color: #ffc1dd;}.arc-over__status svg{width: 30px; height: 30px; flex: 0 0 30px;}.arc-over__record{display: inline-block; margin-top: 12px; padding: 6px 12px; border-radius: 999px; font: 9px/1.2 var(--arc-pixel); color: var(--arc-ink); background: var(--arc-teal-hi); box-shadow: 0 0 18px rgba(95, 240, 207, .55); animation: arcBlink 1s steps(1) 4;}.arc-over__record[hidden]{display: none;}.arc-noscript{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center;}@media (max-width: 991.98px){.arc-home{grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "hero" "board"; max-width: 640px;}}@media (max-width: 575.98px){.arc-screen{padding: 18px 14px 28px;}.arc-panel{padding: 18px 14px 16px; border-radius: 16px;}.arc-chars{gap: 6px;}.arc-char{padding: 4px 2px 8px; border-radius: 12px;}.arc-char__name{font-size: 8px;}.arc-char__role{font-size: 10px;}.arc-form .arc-btn--play{width: 100%;}.arc-stats{grid-template-columns: repeat(2, minmax(0, 1fr));}.arc-dialog{padding: 24px 16px 20px;}.arc-board__wave{display: none;}.arc-board__row{grid-template-columns: 26px 30px minmax(0, 1fr) auto;}.arc-tool{width: 36px; height: 36px; border-radius: 10px;}}@media (max-height: 820px) and (min-width: 992px){.arc-screen{padding-top: 16px;}.arc-home{gap: 14px 22px;}.arc-page .arc-title{font-size: 40px; margin-bottom: 8px;}.arc-kicker{margin-bottom: 8px;}.arc-page .arc-subtitle{font-size: 14px;}}@media (prefers-reduced-motion: reduce){.arc-btn--play, .arc-cup, .arc-kicker i, .arc-over__record{animation: none !important;}.arc-screen.is-active, .arc-home, .arc-dialog{animation: none;}}