:root{--color-primary-rgb:78 205 196;--color-primary:rgb(var(--color-primary-rgb));--color-primary-dark:#3db8ac;--color-danger-rgb:255 107 107;--color-danger:rgb(var(--color-danger-rgb));--color-danger-dark:#e55555;--color-success-rgb:74 197 74;--color-success:rgb(var(--color-success-rgb));--color-success-dark:#3db03d;--color-warning-rgb:255 193 7;--color-warning:rgb(var(--color-warning-rgb));--color-purple-rgb:156 39 176;--color-purple:rgb(var(--color-purple-rgb));--color-bg-dark:#0e0e0e;--color-bg-medium:#1a1a1a;--color-bg-light:#2a2a2a;--color-bg-lighter:#3a3a3a;--color-border:#a8a8a8;--color-border-dark:#3a3a3a;--color-border-medium:#5a5a5a;--color-text-primary:white;--color-text-secondary:#a8a8a8;--color-text-muted:#666;--color-success-green-rgb:76 175 80;--color-success-green:rgb(var(--color-success-green-rgb));--color-error-red-rgb:244 67 54;--color-error-red:rgb(var(--color-error-red-rgb));--color-primary-alpha-20:rgb(var(--color-primary-rgb)/.2);--color-primary-alpha-10:rgb(var(--color-primary-rgb)/.1);--color-primary-alpha-50:rgb(var(--color-primary-rgb)/.5);--color-primary-alpha-80:rgb(var(--color-primary-rgb)/.8);--color-danger-alpha-20:rgb(var(--color-danger-rgb)/.2);--color-danger-alpha-30:rgb(var(--color-danger-rgb)/.3);--color-warning-alpha-20:rgb(var(--color-warning-rgb)/.2);--color-warning-alpha-50:rgb(var(--color-warning-rgb)/.5);--color-purple-alpha-20:rgb(var(--color-purple-rgb)/.2);--color-purple-alpha-50:rgb(var(--color-purple-rgb)/.5);--color-success-alpha-20:rgb(var(--color-success-green-rgb)/.2);--color-error-alpha-20:rgb(var(--color-error-red-rgb)/.2);--color-white-alpha-10:#ffffff1a;--color-white-alpha-30:#ffffff4d;--color-black-alpha-30:#0000004d;--color-black-alpha-50:#00000080;--color-black-alpha-60:#0009;--color-board-bg:#2a2a2a;--color-board-square:#3a3a3a;--color-board-square-hover:#3a3a3a;--color-board-square-valid:#2a4a2a;--color-board-square-valid-border:#4a8a4a;--color-board-square-valid-hover:#3a5a3a;--color-board-square-valid-hover-border:#5a9a5a;--color-board-square-selected:#2a4a4a;--space-xs:4px;--space-sm:6px;--space-md:8px;--space-lg:12px;--space-xl:16px;--space-2xl:20px;--radius-sm:4px;--radius-md:5px;--radius-lg:8px;--radius-xl:12px;--radius-full:50%;--piece-size:clamp(80px,12vw,150px);--board-max-size:min(calc(100vw - 300px),calc(100vh - 250px))}@supports (color:color(display-p3 0 0 0)){:root{--color-primary:color(display-p3 .35 .82 .78);--color-primary-dark:color(display-p3 .28 .74 .69);--color-danger:color(display-p3 1 .45 .45);--color-danger-dark:color(display-p3 .92 .36 .36);--color-success:color(display-p3 .32 .8 .32);--color-success-dark:color(display-p3 .27 .72 .27);--color-warning:color(display-p3 1 .78 .05);--color-purple:color(display-p3 .64 .18 .72);--color-success-green:color(display-p3 .32 .72 .34);--color-error-red:color(display-p3 .98 .28 .24)}}.flex{display:flex}.flex-center{justify-content:center;align-items:center;display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.m-0{margin:0}.p-xs{padding:var(--space-xs)}.p-sm{padding:var(--space-sm)}.p-md{padding:var(--space-md)}.p-lg{padding:var(--space-lg)}.p-xl{padding:var(--space-xl)}.px-lg{padding-left:var(--space-lg);padding-right:var(--space-lg)}.px-xl{padding-left:var(--space-xl);padding-right:var(--space-xl)}.py-sm{padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.py-md{padding-top:var(--space-md);padding-bottom:var(--space-md)}.radius-sm{border-radius:var(--radius-sm)}.radius-md{border-radius:var(--radius-md)}.radius-lg{border-radius:var(--radius-lg)}.radius-full{border-radius:var(--radius-full)}.border-2{border:2px solid}.font-bold{font-weight:700}.text-center{text-align:center}.box{padding:var(--space-md)var(--space-xl);border-radius:var(--radius-md);text-align:center;border:2px solid;font-size:16px;font-weight:700}html,body{background-color:var(--color-bg-dark);color:var(--color-text-primary);width:100%;height:100%;margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden scroll}#title{text-align:center;border-bottom:1px solid var(--color-border);flex-direction:row;justify-content:space-between;align-items:center;padding:10px 20px;display:flex}#title a{color:var(--color-text-primary);text-decoration:none}#title h1{margin:.25em;font-style:italic}.nav-buttons{flex-direction:row;align-items:center;gap:10px;display:flex}.user-info{align-items:center;gap:var(--space-md);padding:var(--space-xs)var(--space-lg);background-color:var(--color-white-alpha-10);border-radius:20px;flex-direction:row;display:flex}.user-avatar{border-radius:var(--radius-full);width:32px;height:32px;color:var(--color-text-primary);background-color:var(--color-primary);border:2px solid var(--color-white-alpha-30);justify-content:center;align-items:center;font-size:14px;font-weight:700;display:flex}.username{color:var(--color-text-primary);font-size:14px;font-weight:500}button{border-radius:var(--radius-md);padding:var(--space-md)var(--space-xl);cursor:pointer;border:none;font-size:14px;transition:background-color .2s}#logout-button{background-color:var(--color-danger);color:var(--color-text-primary)}#logout-button:hover{background-color:var(--color-danger-dark)}#new-game-button{background-color:var(--color-success);color:var(--color-text-primary)}#new-game-button:hover{background-color:var(--color-success-dark)}#main-view{flex-direction:column;height:calc(100vh - 60px);padding:20px;display:flex}#no-game-container{flex-direction:column;justify-content:center;align-items:center;gap:10px;height:100%;display:flex}#no-game-container h2{color:var(--color-text-secondary);margin:0}#no-game-container p{color:var(--color-text-muted);margin:0}#game-container{box-sizing:border-box;flex-direction:row;gap:20px;height:100%;display:flex}.game-header{flex-direction:column;gap:20px;margin-bottom:10px;display:flex}.game-header h2{color:var(--color-primary);margin:0}.ws-status{padding:var(--space-sm)var(--space-lg);border-radius:var(--radius-md);text-align:center;margin:0;font-size:14px;font-weight:500;transition:all .3s}.ws-connected{background-color:var(--color-success-alpha-20);border:2px solid var(--color-success-green);color:var(--color-success-green)}.ws-disconnected{background-color:var(--color-error-alpha-20);border:2px solid var(--color-error-red);color:var(--color-error-red);animation:2s infinite pulse-red}@keyframes pulse-red{0%,to{opacity:1}50%{opacity:.6}}#game-score{background-color:rgb(var(--color-purple-rgb)/.2);justify-content:space-between;align-items:center;width:100%;margin:0;display:flex}.turn-indicator{justify-content:center;align-items:center;margin:0;display:flex}.turn-status{padding:var(--space-md)var(--space-xl);border-radius:var(--radius-md);text-align:center;font-size:16px;font-weight:700}.point-status{padding:var(--space-md);border-radius:var(--radius-md);text-align:center;font-size:16px;font-weight:700}.my-box{background-color:var(--color-primary-alpha-20);border:2px solid var(--color-primary);color:var(--color-primary)}.opponent-box{background-color:var(--color-danger-alpha-20);border:2px solid var(--color-danger);color:var(--color-danger)}.initial-phase{background-color:var(--color-warning-alpha-20);border:2px solid var(--color-warning);color:var(--color-warning)}.waiting-phase{background-color:var(--color-purple-alpha-20);border:2px solid var(--color-purple);color:var(--color-purple)}#game-board{background-color:var(--color-bg-medium);border:2px solid var(--color-border);border-radius:var(--radius-lg);aspect-ratio:1;max-width:var(--board-max-size);max-height:var(--board-max-size);flex-direction:column;display:flex}.board-row{flex:1;display:flex}.board-square{aspect-ratio:1;background-color:var(--color-board-bg);border:1px solid var(--color-board-square);cursor:pointer;flex:1;justify-content:center;align-items:center;margin:1px;transition:background-color .2s;display:flex}.board-square:hover{background-color:var(--color-board-square-hover)}.board-square-valid{background-color:var(--color-board-square-valid);border:2px solid var(--color-board-square-valid-border);box-shadow:0 0 10px #4a8a4a80}.board-square-valid:hover{background-color:var(--color-board-square-valid-hover);border-color:var(--color-board-square-valid-hover-border);box-shadow:0 0 15px #4a8a4ab3}.board-square-selected{background-color:var(--color-board-square-selected);border:2px solid var(--color-primary);position:relative;box-shadow:0 0 15px #4ecdc4b3}#pieces-container{flex-flow:wrap;justify-self:flex-start;align-items:flex-start;gap:10px;display:flex}.piece-slot{aspect-ratio:1;background-color:var(--color-bg-light);border:2px solid var(--color-border-dark);border-radius:var(--radius-md);cursor:pointer;width:var(--piece-size);justify-content:center;align-items:center;gap:10px;transition:all .2s;display:flex;position:relative}.piece-slot:hover{border-color:var(--color-border-medium);transform:scale(1.05)}.piece-slot.selected{border-color:var(--color-primary);box-shadow:0 0 10px var(--color-primary);border-width:3px}.piece{width:var(--piece-size);height:var(--piece-size);border-radius:var(--radius-sm);pointer-events:none;isolation:isolate;transition:all .2s;position:relative}.piece:before{content:"";background-image:var(--piece-img-256);background-image:-webkit-image-set(var(--piece-img-128)1dppx,var(--piece-img-256)2dppx,var(--piece-img-512)3dppx);background-image:image-set(var(--piece-img-128)1dppx,var(--piece-img-256)2dppx,var(--piece-img-512)3dppx);border-radius:var(--radius-sm);transform:rotate(var(--piece-rotation,0deg));z-index:0;background-position:50%;background-repeat:no-repeat;background-size:cover;position:absolute;inset:0}.piece>*{z-index:1;position:relative}.piece-owner-avatar{bottom:var(--space-xs);right:var(--space-xs);border-radius:var(--radius-full);width:24px;height:24px;color:var(--color-text-primary);background-color:var(--color-primary);border:2px solid var(--color-black-alpha-30);box-shadow:0 2px 4px var(--color-black-alpha-30);pointer-events:none;justify-content:center;align-items:center;font-size:10px;font-weight:700;display:flex;position:absolute}.strength-indicator{pointer-events:none;background-color:var(--color-black-alpha-50);border-radius:10%;justify-content:center;align-items:center;padding:2px 5px;font-size:smaller;display:flex;position:absolute}.piece-tier{background-color:var(--color-primary);padding:var(--space-xs)var(--space-sm);border-radius:var(--radius-sm);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.element-icon{filter:drop-shadow(0 2px 4px #00000080);min-width:max-content;font-size:1em}.strength-top{top:2px;left:50%;transform:translate(-50%)}.strength-right{top:50%;right:2px;transform:translateY(-50%)}.strength-bottom{bottom:2px;left:50%;transform:translate(-50%)}.strength-left{top:50%;left:2px;transform:translateY(-50%)}.rotate-arrow{top:var(--space-sm);background-color:var(--color-primary-alpha-80);color:var(--color-bg-dark);border-radius:var(--radius-full);cursor:pointer;justify-content:center;align-items:center;width:30px;height:30px;font-weight:700;transition:background-color .2s;display:flex;position:absolute}.rotate-arrow:hover{background-color:var(--color-primary)}.rotate-left{left:var(--space-md)}.rotate-right{right:var(--space-md)}.board-rotate-left{left:var(--space-md);z-index:10}.board-rotate-right{right:var(--space-md);z-index:10}#login-container{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}#login-box{background-color:var(--color-bg-medium);border:2px solid var(--color-border);border-radius:var(--radius-lg);width:100%;max-width:400px;box-shadow:0 4px 6px var(--color-black-alpha-30);padding:40px}#login-box h1{text-align:center;color:var(--color-primary);margin-top:0;margin-bottom:30px}.form-group{margin-bottom:20px}.form-group label{color:var(--color-text-secondary);margin-bottom:8px;font-weight:500;display:block}.form-group input{width:100%;padding:var(--space-lg);background-color:var(--color-bg-light);border:2px solid var(--color-border-dark);border-radius:var(--radius-md);color:var(--color-text-primary);box-sizing:border-box;font-size:16px;transition:border-color .2s}.form-group input:focus{border-color:var(--color-primary);outline:none}.submit-button{width:100%;padding:var(--space-lg);background-color:var(--color-primary);border-radius:var(--radius-md);color:var(--color-bg-dark);cursor:pointer;border:none;font-size:16px;font-weight:700;transition:background-color .2s}.submit-button:hover{background-color:var(--color-primary-dark)}.toggle-mode{text-align:center;margin-top:20px}.toggle-mode p{color:var(--color-text-secondary);margin:0}.link-button{color:var(--color-primary);cursor:pointer;background:0 0;border:none;padding:0;font-size:14px;text-decoration:underline}.link-button:hover{color:var(--color-primary-dark)}.error-message{background-color:var(--color-danger-alpha-20);border:1px solid var(--color-danger);color:var(--color-danger);padding:var(--space-lg);border-radius:var(--radius-md);margin-bottom:var(--space-2xl);text-align:center}.success-message{background-color:var(--color-primary-alpha-20);border:1px solid var(--color-primary);color:var(--color-primary);padding:var(--space-lg);border-radius:var(--radius-md);margin-bottom:var(--space-2xl);text-align:center}#new-game-view{justify-content:center;align-items:center;min-height:calc(100vh - 60px);padding:20px;display:flex}.new-game-container{background-color:var(--color-bg-medium);border:2px solid var(--color-border);border-radius:var(--radius-lg);width:100%;max-width:600px;box-shadow:0 4px 6px var(--color-black-alpha-30);padding:40px}.new-game-container h2{text-align:center;color:var(--color-primary);margin-top:0;margin-bottom:30px}.opponent-selection{flex-direction:column;gap:20px;display:flex}.opponent-selection h3{text-align:center;color:var(--color-text-secondary);margin:0}.opponent-list{flex-direction:column;gap:10px;max-height:400px;margin-right:-10px;padding-right:10px;display:flex;overflow:visible auto}.no-opponents{text-align:center;color:var(--color-text-secondary);padding:var(--space-2xl)}.no-opponents p{margin:10px 0}.loading{text-align:center;color:var(--color-primary);padding:40px;font-size:18px}#select-game-view{justify-content:center;align-items:center;min-height:calc(100vh - 60px);padding:20px;display:flex}.select-game-container{background-color:var(--color-bg-medium);border:2px solid var(--color-border);border-radius:var(--radius-lg);width:100%;max-width:700px;box-shadow:0 4px 6px var(--color-black-alpha-30);padding:40px}.select-game-container h2{text-align:center;color:var(--color-primary);margin-top:0;margin-bottom:30px}.game-selection{flex-direction:column;gap:20px;display:flex}.game-list{flex-direction:column;gap:10px;max-height:500px;margin-right:-10px;padding-right:10px;display:flex;overflow:visible auto}.game-item-wrapper{align-items:stretch;gap:10px;margin-bottom:10px;display:flex;position:relative}.game-button{background-color:var(--color-bg-light);border:2px solid var(--color-border-dark);color:var(--color-text-primary);text-align:left;flex-direction:column;flex:1;gap:8px;padding:15px 20px;font-size:16px;transition:all .2s;display:flex}.game-button.my-box{border-color:var(--color-primary-alpha-50)}.game-button.opponent-box{border-color:var(--color-danger-alpha-30)}.game-button.initial-phase{border-color:var(--color-warning-alpha-50)}.game-button.waiting-phase{border-color:var(--color-purple-alpha-50)}.game-button:hover{background-color:var(--color-bg-lighter);border-color:var(--color-primary);transform:translate(5px)}.delete-game-button{color:var(--color-danger);cursor:pointer;background-color:#3a2a2a;border:2px solid #5a3a3a;justify-content:center;align-items:center;width:50px;height:auto;padding:0;font-size:28px;font-weight:700;line-height:1;transition:all .2s;display:flex}.delete-game-button:hover{background-color:var(--color-danger);color:var(--color-text-primary);border-color:var(--color-danger);transform:scale(1.1)}.game-info-row{justify-content:space-between;align-items:center;display:flex}.game-id{color:var(--color-primary);font-size:18px;font-weight:700}.game-status{padding:var(--space-xs)var(--space-lg);border-radius:var(--radius-xl);font-size:14px;font-weight:500}.my-box .game-status{background-color:var(--color-primary-alpha-20);color:var(--color-primary);border:1px solid var(--color-primary)}.opponent-box .game-status{background-color:var(--color-danger-alpha-20);color:var(--color-danger);border:1px solid var(--color-danger)}.initial-phase .game-status{background-color:var(--color-warning-alpha-20);color:var(--color-warning);border:1px solid var(--color-warning)}.waiting-phase .game-status{background-color:var(--color-purple-alpha-20);color:var(--color-purple);border:1px solid var(--color-purple)}.game-timestamp{color:var(--color-text-secondary);font-size:14px}.no-games{text-align:center;color:var(--color-text-secondary);padding:40px 20px}.no-games p{margin:10px 0}.burger-menu-container{position:relative}.burger-icon{color:var(--color-text-primary);cursor:pointer;padding:var(--space-md)var(--space-lg);border-radius:var(--radius-md);background:0 0;border:none;font-size:24px;transition:background-color .2s}.burger-icon:hover{background-color:var(--color-white-alpha-10)}.burger-modal-wrapper{pointer-events:none;width:0;height:0;position:absolute;top:0;left:0;overflow:visible}.burger-overlay{background-color:var(--color-black-alpha-50);z-index:999;pointer-events:auto;position:fixed;inset:0}.burger-dropdown{top:60px;right:var(--space-2xl);background-color:var(--color-bg-medium);border:2px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 4px 6px var(--color-black-alpha-30);z-index:1000;min-width:200px;padding:var(--space-md)0;pointer-events:auto;position:fixed}.burger-menu-item{padding:var(--space-lg)var(--space-2xl);color:var(--color-primary);cursor:pointer;font-size:16px;text-decoration:none;transition:background-color .2s}.burger-menu-item:hover{background-color:var(--color-primary-alpha-10);color:var(--color-primary-dark)}.host-display{color:var(--color-text-secondary);font-family:monospace;font-size:12px;position:absolute;top:20px;right:20px}@media (max-width:768px){:root{--piece-size:clamp(80px,30vw,140px);--board-max-size:min(calc(100vw - 20px),calc(100vh - 200px))}#game-board{padding:2px}#game-container{flex-direction:column;gap:10px}.rotate-arrow{font-size:1.5em}.piece{font-size:.7em}.element-icon{padding:0;font-size:1.5em}}@media (max-width:480px){:root{--piece-size:clamp(80px,30vw,110px);--board-max-size:min(calc(100vw - 10px),calc(100vh - 150px))}#game-board{padding:2px}.board-row{gap:1px}.rotate-arrow{font-size:1.5em}.piece-owner-avatar{width:16px;height:16px;font-size:8px}.piece{font-size:.7em}.element-icon{padding:0;font-size:1.5em}}.combat-message{border-top:1px solid var(--color-border);padding-top:var(--space-md);padding-bottom:var(--space-md);min-width:13em}