/* Shared by portal + member shells (login-box, game-start, member panel). */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.login-card {
    position: relative;
    box-sizing: border-box;
    width: 170px;
    height: 240px;
    padding: 50px 7px 0 10px;
    background: url("../images/comm/new_bg_login.jpg") no-repeat left top;
    color: #686868;
    font-size: 12px;
    letter-spacing: -1px;
    text-align: left;
}

.login-line {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.login-fields input {
    display: block;
    box-sizing: border-box;
    width: 85px;
    height: 20px;
    margin: 0 0 3px;
    padding: 3px 3px 1px;
    border: 1px solid #d1b697;
    background: #fff;
    color: #666;
    font-family: inherit;
    font-size: 11px;
}

.go {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.save {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 2px 0 3px;
    color: #686868;
    font-size: 11px;
    line-height: 15px;
}

.save input { margin: 0; }

.find { display: block; margin: 3px 0 0; line-height: 0; }
.find img { width: 148px; height: 20px; }

.openid {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 152px;
    height: 65px;
    margin-top: 3px;
    padding: 33px 0 0 24px;
    background: url("../images/newopenid/login-box.jpg") no-repeat left top;
}

.openid a { line-height: 0; }
.openid img { width: 18px; height: 18px; }

.game-start {
    text-align: center;
}

.game-start .start-btn { line-height: 0; }

.game-start a {
    position: relative;
    display: block;
    line-height: 0;
}

.tooltip { position: relative; }

.tooltip .tooltiptext {
    display: none;
    position: absolute;
    z-index: 999;
    left: 50%;
    border-radius: 6px;
    color: #000;
    font-weight: bold;
    font-family: sans-serif;
    text-align: center;
    background: #fff7d6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.tooltip:hover .tooltiptext { display: block; }

.tooltip .tooltiptext:hover {
    display: none;
    pointer-events: none;
}

.member-slot {
    width: 167px;
}

.member-panel {
    box-sizing: border-box;
    width: 167px;
    height: 200px;
    padding: 50px 7px 0 10px;
    color: #000;
    font-size: 12px;
    line-height: 120%;
    letter-spacing: -1px;
    text-align: left;
}

.member-ok {
    box-sizing: border-box;
    width: 148px;
    height: 76px;
    padding: 7px;
    overflow: hidden;
    background: url("../images/comm/login_ok_bg.gif") no-repeat left top;
}

.member-nick { color: #de4204; font-weight: bold; }
.member-ruby { color: #fe5e39; font-weight: bold; font-size: 12px; }
.member-ok img { vertical-align: middle; }
.member-mail { margin-left: 2px; cursor: pointer; }

.member-actions { margin-top: 4px; }
.member-actions a,
.member-actions button {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
}
.member-actions a { margin: 1px 0; }
.member-actions form { margin: 1px 0 0; }