*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;height:100dvh;overflow:hidden;font-family:'Noto Sans JP',sans-serif;font-size:14px;color:#e0d8c8;user-select:none;-webkit-user-select:none;}
body{
    background:#0b3d1a;
    background-image:
        radial-gradient(ellipse at 50% 50%, rgba(30,90,50,0.6) 0%, rgba(8,40,18,0.95) 70%),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
}

/* ============== */
/* トップバー      */
/* ============== */
#top-bar{
    display:flex;justify-content:space-between;align-items:center;
    padding:4px 12px;
    background:rgba(0,0,0,0.5);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    z-index:50;min-height:32px;
}
#top-logo{
    font-family:'Shippori Mincho',serif;
    font-size:15px;font-weight:800;color:#f0c860;
    text-shadow:0 1px 3px rgba(0,0,0,0.5);
    margin-right:16px;
}
#top-bar .round-info{
    font-family:'Shippori Mincho',serif;
    font-size:15px;font-weight:800;color:#f0c860;
    text-shadow:0 1px 3px rgba(0,0,0,0.5);
}
#top-bar .sub-info{font-size:11px;color:#aab89a;margin-left:8px;}
.top-bar-buttons{display:flex;gap:10px;align-items:center;}
#btn-toppage{
    padding:5px 16px;
    background:linear-gradient(180deg,#4a8a50,#2d6630);
    color:#ffffff;border:none;border-radius:3px;
    font-size:11px;font-weight:900;cursor:pointer;
    text-decoration:none;
    font-family:'Noto Sans JP',sans-serif;
    letter-spacing:2px;
    box-shadow:0 1px 4px rgba(0,0,0,0.5),0 0 12px rgba(74,138,80,0.3);
    text-shadow:none;
    display:flex;align-items:center;gap:4px;
}
#btn-toppage:hover{
    background:linear-gradient(180deg,#5aa860,#3a7a40);
    color:#ffffff;
    box-shadow:0 2px 8px rgba(0,0,0,0.5),0 0 20px rgba(74,138,80,0.4);
}
#btn-restart{
    padding:5px 16px;
    background:linear-gradient(180deg,#f0c860,#c8a030);
    color:#1a0e00;border:none;border-radius:3px;
    font-size:11px;font-weight:900;cursor:pointer;
    font-family:'Noto Sans JP',sans-serif;
    letter-spacing:2px;
    box-shadow:0 1px 4px rgba(0,0,0,0.5),0 0 12px rgba(240,200,96,0.2);
    text-shadow:none;
}
#btn-restart:hover{
    background:linear-gradient(180deg,#ffe080,#d8b040);
    color:#1a0e00;
    box-shadow:0 2px 8px rgba(0,0,0,0.5),0 0 20px rgba(240,200,96,0.3);
}

/* ============== */
/* 卓エリア        */
/* ============== */
#game-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;opacity:0;}
#table-area{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding-bottom:40px;}

/* 中央パネル */
#center-panel{
    position:absolute;width:340px;height:150px;
    background:rgba(0,0,0,0.45);border:2px solid rgba(200,180,120,0.25);border-radius:8px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    z-index:10;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
#center-score-mid{
    display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 12px;
}
#center-info{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-width:120px;
}
.center-score{
    font-family:'Noto Sans JP',sans-serif;font-size:16px;font-weight:700;
    color:#f0e068;text-shadow:0 1px 3px rgba(0,0,0,0.6);
    padding:2px 6px;min-width:80px;text-align:center;
}
#center-score-top{color:#e0d8c0; position: relative; bottom: 15px;}
#center-score-bottom{color:#f0e068; position: relative; top: 10px;}
#center-score-left{color:#e0d8c0;}
#center-score-right{color:#e0d8c0;}
#center-round-label{font-family:'Shippori Mincho',serif;font-size:18px;font-weight:800;color:#f0c860;text-shadow:0 0 12px rgba(240,200,96,0.4);}

#dora-display{
    position:absolute;top:10px;right:40px;z-index:40;
    background:rgba(10,8,4,0.88);border:2px solid rgba(200,170,80,0.5);
    border-radius:6px;padding:6px 10px;
    box-shadow:0 2px 12px rgba(0,0,0,0.6);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);min-width:150px;
}
#dora-display .dora-label{
    font-family:'Shippori Mincho',serif;
    font-size:11px;font-weight:700;color:#cc9944;
    margin-bottom:4px;text-align:center;
    letter-spacing:2px;
}
#dora-display .dora-tiles{
    display:flex;gap:3px;align-items:center;
}
#dora-display .dora-tile-slot{
    width:32px;height:46px;
    background:rgba(60,55,40,0.6);
    border:1px solid rgba(200,170,80,0.25);
    border-radius:3px;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
}
#dora-display .dora-tile-slot img{
    width:30px;height:auto;
}
#dora-display .dora-tile-slot.empty{
    opacity:0.3;
}
#center-tiles-left{font-size:13px;color:#88aa88;margin-top:2px;}
#center-sticks{font-size:12px;color:#dd8844;margin-top:2px;}

/* ============== */
/* プレイヤー席    */
/* ============== */
.seat{position:absolute;display:flex;flex-direction:column;align-items:center;}
#seat-0{bottom:0;left:50%;transform:translateX(-50%);width:100%;padding:0 8px 24px;}
#seat-1{position:relative;right:auto;top:auto;transform:none;}
#seat-2{top:12px;left:50%;transform:translateX(-50%);}
#seat-3{position:relative;left:auto;top:auto;transform:none;}

.seat-label{font-size:11px;color:#aab89a;margin-bottom:2px;display:none;align-items:center;gap:4px;}
.seat-label .wind-badge{
    display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;
    background:rgba(200,160,48,0.2);border:1px solid rgba(200,160,48,0.4);border-radius:2px;
    font-family:'Shippori Mincho',serif;font-size:11px;font-weight:700;color:#f0c860;
}
.seat-label .points{font-size:12px;color:#d0c8a8;font-weight:700;}
.seat-label .riichi-mark{color:#ff4444;font-size:13px;font-weight:900;}
.seat-label.riichi-glow{
    box-shadow:0 0 14px rgba(255,68,68,0.55), 0 0 28px rgba(255,50,50,0.25);
    animation:riichiGlowPulse 1.8s ease-in-out infinite;
    border-radius:4px;
    padding:2px 6px;
}
@keyframes riichiGlowPulse{
    0%,100%{box-shadow:0 0 14px rgba(255,68,68,0.55), 0 0 28px rgba(255,50,50,0.25), inset 0 0 8px rgba(255,68,68,0.15);}
    50%{box-shadow:0 0 24px rgba(255,68,68,0.8), 0 0 48px rgba(255,50,50,0.4), inset 0 0 12px rgba(255,68,68,0.25);}
}
.seat-label .dealer-mark{color:#f0c860;font-size:10px;}

/* ============== */
/* アバターカード   */
/* ============== */
.avatar-card{
    position:absolute;z-index:20;
    display:flex;flex-direction:column;align-items:center;
    pointer-events:none;
}
.avatar-frame{
    width:64px;height:64px;
    border:2px solid rgba(200,170,80,0.7);
    border-radius:4px;
    background:rgba(0,0,0,0.5);
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.5);
}
.avatar-frame img{
    width:100%;height:100%;
    display:block;
    object-fit:cover;
}
.avatar-name{
    margin-bottom:3px;
    font-size:11px;
    font-weight:700;
    color:#e0d8c0;
    text-shadow:0 1px 3px rgba(0,0,0,0.8);
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* 自分(下) */
#avatar-0{flex-direction:row;align-items:flex-end;}
#avatar-0 .avatar-frame{width:120px;height:140px;}
/* 下家(右) */
#avatar-1 .avatar-frame{width:115px;height:115px;}
/* 対面(上) */
#avatar-2{flex-direction:row-reverse;align-items:flex-start;}
#avatar-2 .avatar-frame{width:115px;height:115px;}
/* 上家(左) */
#avatar-3 .avatar-frame{width:115px;height:115px;}

/* ============== */
/* 手牌            */
/* ============== */
.hand-area{
    display:flex;gap:0px;justify-content:flex-start;align-items:flex-end;flex-wrap:nowrap;
    max-width:calc(100vw - 16px);
    overflow-x:visible;
}
#hand-wrapper{
    display:flex;align-items:flex-end;justify-content:flex-start;
    width:100%;
    padding-left:calc(50% - 330px);
}
.hand-area-side{display:flex;gap:1px;justify-content:center;align-items:center;}
.melds-area{
    display:flex;gap:6px;align-items:flex-end;
    position:absolute;right:150px;bottom:10px;
}
.meld-group{display:flex;gap:1px;}
.melds-area .meld-group{gap:0px;}
.melds-area .tile-small{margin-left:-2px;margin-right:-2px;}

/* ======================== */
/* 左右ラッパー              */
/* ======================== */
.side-wrapper{position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;overflow:visible;}
#side-right{top:calc(50% - 20px);right:-100px;transform:translateY(-50%) rotate(-90deg);}
#side-left{top:calc(50% - 20px);left:-100px;transform:translateY(-50%) rotate(90deg);}

/* ======================== */
/* 捨て牌エリア              */
/* ======================== */
.discard-area{display:grid;grid-template-columns:repeat(6, 36px);gap:1px;align-content:start;overflow:visible;}

/* 自分(下)の捨て牌：中央パネルの下側から下へ伸びる */
#discards-0{position:absolute;left:50%;top:calc(50% + 80px);transform:translateX(-50%);justify-items:center;overflow:visible;height:158px;}
/* 下家(右)の捨て牌：ラッパー内固定サイズ */
#discards-1{position:relative;width:217px;height:157px;justify-items:center;overflow:visible;}
/* 対面(上)の捨て牌：中央パネルの上側から上へ伸びる */
#discards-2{position:absolute;left:50%;bottom:calc(50% + 110px);transform:translateX(-50%) rotate(180deg);justify-items:center;overflow:visible;height:158px;}
/* 上家(左)の捨て牌：ラッパー内固定サイズ */
#discards-3{position:relative;width:217px;height:157px;justify-items:center;overflow:visible;}

/* ============== */
/* 牌デザイン      */
/* ============== */
.tile{
    display:inline-flex;align-items:center;justify-content:center;
    width:52px;height:75px;
    background:transparent;
    border:none;border-radius:0;position:relative;
    box-shadow:none;
    cursor:default;transition:transform 0.12s ease;flex-shrink:0;
}
.tile-svg-img{
    width:100%;height:100%;display:block;object-fit:fill;pointer-events:none;
}
.tile-small{width:36px;height:52px;}
.tile-small .tile-svg-img{width:100%;height:100%;}



.tile-back{
    background:linear-gradient(170deg,#2244aa 0%,#1a3388 40%,#142866 100%);
    border:1px solid #1a2855;border-radius:4px;
    box-shadow:0 2px 3px rgba(0,0,0,0.3),inset 0 1px 0 rgba(100,130,200,0.3);
}

.tile.clickable{cursor:pointer;}
.tile.clickable:hover{
    transform:translateY(-10px);
    filter:drop-shadow(0 8px 12px rgba(0,0,0,0.4)) drop-shadow(0 0 10px rgba(240,200,96,0.3));
    z-index:20;
}
.hand-area .tile{margin-left:-3px;margin-right:-3px;}
.hand-area .tile:first-child{margin-left:0px;}
.hand-area .tile:last-child{margin-right:0px;}
.tile.drawn-tile{margin-left:12px;}

.tile.riichi-candidate{filter:drop-shadow(0 0 8px rgba(68,136,255,0.5));}
.tile.riichi-candidate.wait-shown{filter:drop-shadow(0 0 12px rgba(255,200,68,0.8));}
.tile.disabled-tile{opacity:0.35;cursor:default !important;}
.tile.disabled-tile:hover{transform:none !important;filter:none !important;}

.tile.call-preview{
    transform:translateY(-10px);
    filter:drop-shadow(0 8px 12px rgba(0,0,0,0.4)) drop-shadow(0 0 10px rgba(255,153,34,0.5));
    z-index:20;
}

#riichi-wait-panel{
    display:none;position:absolute;bottom:160px;left:50%;transform:translateX(-50%);
    z-index:50;background:rgba(20,16,10,0.95);border:2px solid rgba(200,170,80,0.6);
    border-radius:8px;padding:10px 14px;min-width:180px;max-width:90vw;
    box-shadow:0 4px 20px rgba(0,0,0,0.7);
}
#riichi-wait-panel .wait-title{
    font-size:14px;font-weight:700;color:#f0c860;margin-bottom:8px;
    font-family:'Shippori Mincho',serif;text-align:center;
}
#riichi-wait-panel .wait-tiles{
    display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;
}
#riichi-wait-panel .wait-tile-item{
    display:flex;flex-direction:column;align-items:center;gap:2px;
}
#riichi-wait-panel .wait-tile-item img{
    width:32px;height:auto;
}
#riichi-wait-panel .wait-tile-item .remain{
    font-size:12px;font-weight:700;color:#e0d8c0;
}
#riichi-wait-panel .wait-total{
    font-size:13px;font-weight:700;color:#cc9944;margin-top:8px;text-align:center;
    font-family:'Shippori Mincho',serif;
}

.tile-small.riichi-discard{
    transform:rotate(90deg);
    margin:-8px 8px;
    filter:drop-shadow(0 0 4px rgba(255,68,68,0.4));
}
.tile-small.discard-highlight{
    transform:translateY(-6px);
    outline:2px solid #ff4444;
    outline-offset:-1px;
    filter:drop-shadow(0 0 8px rgba(255,68,68,0.8));
    z-index:10;
}
.tile-small.riichi-discard .tile-svg-img{
    width:100%;height:100%;
}

/* ============== */
/* アクション      */
/* ============== */
#action-section{
    position:absolute;bottom:140px;left:50%;transform:translateX(-50%);
    z-index:30;display:flex;flex-direction:column;align-items:center;gap:6px;
}
#action-area{display:none;gap:8px;justify-content:center;}
#call-area{display:none;gap:8px;justify-content:center;}

.action-btn{
    padding:10px 28px;border:none;border-radius:5px;
    font-size:20px;font-weight:900;cursor:pointer;color:#ffffff;
    text-shadow:0 1px 2px rgba(0,0,0,0.4);
    box-shadow:0 3px 10px rgba(0,0,0,0.4);
    transition:transform 0.1s ease;font-family:'Shippori Mincho',serif;
}
.action-btn:hover{transform:scale(1.05);}
.action-btn:active{transform:scale(0.97);}
.tsumo-btn{background:linear-gradient(180deg,#ff4444,#cc2222);}
.ron-btn{background:linear-gradient(180deg,#ff4444,#cc2222);}
.riichi-btn{background:linear-gradient(180deg,#4488ff,#2266cc);}
.riichi-btn.active{background:linear-gradient(180deg,#ff8800,#cc6600);}

.call-btn{
    padding:8px 18px;background:linear-gradient(180deg,#ff9922,#cc7711);
    color:#fff;border:none;border-radius:4px;
    font-size:16px;font-weight:700;cursor:pointer;
    box-shadow:0 2px 6px rgba(0,0,0,0.3);font-family:'Shippori Mincho',serif;
}
.call-btn:hover{background:linear-gradient(180deg,#ffbb44,#dd8822);}
.call-btn-with-tiles{
    display:inline-flex;flex-direction:column;align-items:center;gap:4px;
    padding:6px 12px;
}
.call-btn-label{font-size:14px;font-weight:700;}
.call-btn-tiles{display:flex;gap:2px;align-items:center;}
.call-btn-tile-img{width:28px;height:40px;display:block;object-fit:contain;}

#btn-skip-call{
    display:none;padding:6px 16px;
    background:rgba(100,100,100,0.8);color:#ddd;
    border:1px solid rgba(150,150,150,0.4);border-radius:4px;font-size:13px;cursor:pointer;
}
#btn-skip-call:hover{background:rgba(130,130,130,0.8);}

/* ============== */
/* 演出            */
/* ============== */
#effect-overlay{
    display:flex;visibility:hidden;opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;height:100%;height:100dvh;
    z-index:200;pointer-events:none;justify-content:center;align-items:center;
}
#effect-overlay.show{visibility:visible;opacity:1;}
#effect-text{
    font-family:'Shippori Mincho',serif;font-size:64px;font-weight:900;color:#ffd700;
    text-shadow:0 0 30px rgba(255,215,0,0.8),0 0 60px rgba(255,100,0,0.4),0 4px 8px rgba(0,0,0,0.6);
    animation:effectPop 1.2s ease-out forwards;opacity:0;
}
@keyframes effectPop{
    0%{opacity:0;transform:scale(2.5);filter:blur(8px);}
    30%{opacity:1;transform:scale(1);filter:blur(0);}
    70%{opacity:1;transform:scale(1);}
    100%{opacity:0;transform:scale(0.8) translateY(-30px);}
}
#effect-riichi{
    font-family:'Shippori Mincho',serif;font-size:48px;font-weight:900;color:#66aaff;
    text-shadow:0 0 20px rgba(100,170,255,0.8),0 4px 8px rgba(0,0,0,0.5);
    animation:riichiPop 1s ease-out forwards;opacity:0;
}
@keyframes riichiPop{
    0%{opacity:0;transform:translateX(-100px) rotate(-10deg);}
    30%{opacity:1;transform:translateX(0) rotate(0);}
    70%{opacity:1;}
    100%{opacity:0;}
}

/* ============== */
/* 局終了          */
/* ============== */
#round-end-overlay{
    display:flex;visibility:hidden;opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;height:100%;height:100dvh;
    background:rgba(0,0,0,0.75);z-index:100;
    justify-content:center;align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
#round-end-overlay.show{visibility:visible;opacity:1;transition:opacity 0.2s ease-out;}
#round-end-box{
    background:linear-gradient(180deg,#1a2a18,#0d1a0c);
    border:2px solid rgba(240,200,96,0.4);border-radius:10px;padding:36px 48px;text-align:center;
    max-width:560px;width:90%;overflow:hidden;
    box-shadow:0 8px 32px rgba(0,0,0,0.6),0 0 40px rgba(240,200,96,0.1);
}
#round-end-box.gameend-layout{
    display:flex;gap:36px;align-items:center;
    max-width:780px;text-align:left;
}
#round-end-box.gameend-layout #gameend-left{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-width:160px;
}
#round-end-box.gameend-layout #gameend-right{
    flex:1;
}
.rank-row{
    display:flex;align-items:center;gap:12px;padding:6px 0;
}
.rank-avatar{
    width:90px;height:90px;border-radius:6px;object-fit:cover;
    border:2px solid rgba(200,170,80,0.7);
    box-shadow:0 2px 8px rgba(0,0,0,0.5);
}
.rank-medal{font-size:22px;min-width:28px;text-align:center;}
.rank-name{font-size:20px;font-weight:700;min-width:100px;}
.rank-points{font-size:20px;font-weight:700;white-space:nowrap;}
.rank-row.rank-1 .rank-name,.rank-row.rank-1 .rank-points{color:#ffd700;}
.rank-row.rank-2 .rank-name,.rank-row.rank-2 .rank-points{color:#c0c0c0;}
.rank-row.rank-3 .rank-name,.rank-row.rank-3 .rank-points{color:#cd7f32;}
.rank-row.rank-4 .rank-name,.rank-row.rank-4 .rank-points{color:#888888;}
.rank-row.rank-1 .rank-avatar{border-color:rgba(255,215,0,0.7);}
.rank-row.rank-2 .rank-avatar{border-color:rgba(192,192,192,0.7);}
.rank-row.rank-3 .rank-avatar{border-color:rgba(205,127,50,0.7);}
.rank-row.rank-4 .rank-avatar{border-color:rgba(136,136,136,0.5);}
#round-end-box h2{
    font-family:'Shippori Mincho',serif;font-size:28px;font-weight:800;color:#f0c860;
    text-shadow:0 0 12px rgba(240,200,96,0.3);margin-bottom:14px;
}
#round-end-box p{font-size:20px;line-height:1.8;}
.yaku-line{color:#f0c860;font-weight:700;font-family:'Shippori Mincho',serif;}
.rank-line{font-size:24px;color:#ff8844;font-weight:900;font-family:'Shippori Mincho',serif;margin:8px 0;}
.score-line{font-size:20px;color:#e0d8c0;font-weight:700;}

/* ======================== */
/* 局終了・ゲーム終了 共通    */
/* ======================== */
#round-end-message.re-msg{
    display:flex;gap:64px;align-items:center;justify-content:center;
}
#roundend-left{
    display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:220px;
}
#roundend-left h2{
    font-family:'Shippori Mincho',serif;font-size:22px;font-weight:800;
    color:#f0c860;text-shadow:0 0 12px rgba(240,200,96,0.3);
    margin-bottom:14px;white-space:nowrap;
}
#roundend-left .re-yaku-list{
    width:100%;margin-bottom:12px;
}
.re-yaku-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:3px 8px;font-family:'Shippori Mincho',serif;
}
.re-yaku-name{color:#f0c860;font-size:16px;font-weight:700;}
.re-yaku-han{color:#cc9944;font-size:15px;font-weight:700;white-space:nowrap;}
.re-yaku-total{
    display:flex;justify-content:space-between;align-items:center;
    padding:6px 8px;border-top:1px solid rgba(240,200,96,0.3);
    margin-top:4px;font-family:'Shippori Mincho',serif;
}
.re-yaku-total-label{color:#e0d8c0;font-size:16px;font-weight:800;}
.re-yaku-total-han{color:#ff8844;font-size:18px;font-weight:900;}
.re-rank-pay{
    font-size:20px;color:#ff8844;font-weight:900;
    font-family:'Shippori Mincho',serif;margin-bottom:14px;text-align:center;
}
#roundend-right{flex:1;}
.re-player-row{
    display:flex;align-items:center;gap:12px;padding:6px 0;
}
.re-player-avatar{
    width:90px;height:90px;border-radius:6px;object-fit:cover;
    border:2px solid rgba(200,170,80,0.7);box-shadow:0 2px 8px rgba(0,0,0,0.5);
    flex-shrink:0;
}
.re-player-name{font-size:20px;font-weight:700;color:#e0d8c0;min-width:100px;}
.re-player-pts{font-size:20px;font-weight:700;color:#e0d8c0;white-space:nowrap;}
.re-diff-plus{font-size:18px;font-weight:700;color:#ff4444;white-space:nowrap;}
.re-diff-minus{font-size:18px;font-weight:700;color:#6688ff;white-space:nowrap;}

/* 流局 左パネル */
.re-status-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:3px 8px;font-family:'Shippori Mincho',serif;
}
.re-status-name{color:#e0d8c0;font-size:16px;font-weight:700;}
.re-status-label{font-size:16px;font-weight:700;white-space:nowrap;}
.re-status-tenpai{color:#ff8844;}
.re-status-noten{color:#6688ff;}
.re-penalty-plus{color:#ff4444;font-weight:700;}
.re-penalty-minus{color:#6688ff;font-weight:700;}

/* ゲーム終了 自治掲示板ボタン */
#btn-gameend-toppage{
    display:inline-flex;align-items:center;justify-content:center;gap:4px;
    padding:10px 0;margin-top:8px;
    background:linear-gradient(180deg,#2d5a2d,#1a3a1a);color:#c0d8a0;
    border:1px solid #4a8a4a;border-radius:6px;font-size:15px;font-weight:900;
    cursor:pointer;
    font-family:'Noto Sans JP',sans-serif;text-decoration:none;
    letter-spacing:2px;width:200px;
}
/* ゲーム終了 ボタンスタイル */
#btn-next-round.ge-btn{
    letter-spacing:2px;font-weight:900;width:200px;
}

#btn-next-round{
    padding:11px 28px;margin-top:16px;
    background:linear-gradient(180deg,#f5d475,#c8a030);
    color:#1a0e00;border:none;border-radius:6px;
    font-size:15px;font-weight:700;cursor:pointer;
    box-shadow:0 3px 10px rgba(0,0,0,0.5);font-family:'Noto Sans JP',sans-serif;
}
#btn-next-round:hover{background:linear-gradient(180deg,#ffe080,#d8b040);}

/* ================================ */
/* スマホ横画面用（max-height:500px） */
/* ================================ */
@media (orientation:landscape) and (max-height:500px){
    html,body{font-size:11px;}

    /* トップバー */
    #top-bar{padding:2px 8px;min-height:24px;}
    #top-logo{font-size:12px;margin-right:10px;}
    #top-bar .round-info{font-size:12px;}
    #top-bar .sub-info{font-size:9px;margin-left:4px;}
    #btn-restart{padding:2px 8px;font-size:9px;}

    /* 卓エリア */
    #table-area{padding-bottom:0px;}

    /* 中央パネル */
    #center-panel{width:180px;height:90px;border-radius:5px;border-width:1px;left:50%;top:48%;transform:translate(-50%,-50%);}
    .center-score{font-size:9px;padding:1px 3px;min-width:55px;}
    #center-round-label{font-size:11px;}
    #dora-display{top:5px;right:75px;padding:4px 6px;min-width:90px;}
    #dora-display .dora-label{font-size:9px;margin-bottom:2px;}
    #dora-display .dora-tile-slot{width:22px;height:32px;}
    #dora-display .dora-tile-slot img{width:20px;}
    #center-tiles-left{font-size:8px;margin-top:1px;}
    #center-sticks{font-size:8px;margin-top:1px;}
    #center-score-mid{padding:0 6px;}
    #center-info{min-width:65px;}

    #center-score-top{bottom:7px;}
    #center-score-bottom{top:5px;}
    #center-score-left{position:relative;right:5px;}
    #center-score-right{position:relative;left:0px;}

    /* プレイヤー席 */
    #seat-0{padding:0 4px 2px;}
    #seat-2{top:4px;}

    /* アバター */
    .avatar-frame{width:40px;height:40px;}
    .avatar-name{font-size:8px;margin-bottom:1px;}
    #avatar-0 .avatar-frame{width:55px;height:65px;}
    #avatar-1 .avatar-frame{width:50px;height:50px;}
    #avatar-2 .avatar-frame{width:50px;height:50px;}
    #avatar-3 .avatar-frame{width:50px;height:50px;}

    /* 手牌 */
    .hand-area{gap:0px;max-width:600px;}
    #hand-wrapper{padding-left:calc(57% - 210px);}
    .melds-area{gap:3px;right:100px;bottom:2px;}
    .meld-group{gap:0px;}
    .tile.drawn-tile{margin-left:9px;}

    /* 牌サイズ */
    .tile{width:28px;height:40px;}
.hand-area .tile{margin-left:-2px;margin-right:-2px;}
    .tile-small{width:20px;height:29px;}
    .tile-back{border-radius:2px;}

    /* 捨て牌 */
    .discard-area{grid-template-columns:repeat(6, 20px);gap:0px;}
    #discards-0{top:calc(50% + 44px);height:80px;left:50%;transform:translateX(-50%);}
    #discards-1{width:120px;height:80px;}
    #discards-2{bottom:calc(50% + 56px);height:80px;}
    #discards-3{width:120px;height:80px;}

    /* 左右ラッパー */
    #side-right{right:4px;}
    #side-left{left:4px;}

    /* リーチ捨て牌 */
    .tile-small.riichi-discard{margin:-4px 4px;}

    /* アクションボタン */
    #action-section{bottom:60px;}
    .action-btn{padding:5px 14px;font-size:13px;}
    .call-btn{padding:4px 10px;font-size:11px;}
    .call-btn-label{font-size:10px;}
    .call-btn-tile-img{width:18px;height:26px;}
    #btn-skip-call{padding:3px 10px;font-size:10px;}

    /* 演出 */
    #effect-text{font-size:36px;}
    #effect-riichi{font-size:28px;}

    /* 局終了オーバーレイ */
    #round-end-box{padding:2px 16px;max-width:620px;width:auto;}
    #round-end-box.gameend-layout{max-width:620px;gap:16px;padding:2px 16px;}
    #round-end-box.gameend-layout #gameend-left{min-width:90px;}
    #round-end-box.gameend-layout #gameend-left h2{font-size:18px;margin-bottom:4px;}
    #round-end-box h2{font-size:18px;margin-bottom:4px;}
    #round-end-box p{font-size:13px;line-height:1.4;}
    .yaku-line{font-size:12px;}
    .rank-line{font-size:14px;margin:3px 0;}
    .score-line{font-size:13px;}
    #btn-next-round{padding:6px 18px;font-size:14px;margin-top:4px;}
    #btn-next-round.ge-btn{width:160px;font-size:13px;padding:8px 0;letter-spacing:1px;}
    #btn-gameend-toppage{width:160px;font-size:13px;padding:8px 0;margin-top:4px;letter-spacing:1px;}
    .rank-row{gap:8px;padding:3px 0;}
    .rank-avatar{width:80px;height:80px;border-radius:5px;}
    .rank-medal{font-size:18px;min-width:22px;}
    .rank-name{font-size:17px;min-width:60px;}
    .rank-points{font-size:17px;}

    /* 局終了・ゲーム終了 クラス（小画面） */
    #round-end-message.re-msg{gap:20px;}
    #roundend-left{min-width:160px;}
    #roundend-left h2{font-size:18px;margin-bottom:4px;}
    #roundend-left .re-yaku-list{margin-bottom:4px;}
    .re-yaku-row{padding:2px 6px;}
    .re-yaku-name{font-size:16px;}
    .re-yaku-han{font-size:15px;}
    .re-yaku-total{padding:4px 6px;margin-top:2px;}
    .re-yaku-total-label{font-size:16px;}
    .re-yaku-total-han{font-size:17px;}
    .re-rank-pay{font-size:17px;margin-bottom:4px;}
    .re-player-row{gap:8px;padding:3px 0;}
    .re-player-avatar{width:80px;height:80px;border-radius:5px;}
    .re-player-name{font-size:17px;min-width:60px;}
    .re-player-pts{font-size:17px;}
    .re-diff-plus{font-size:16px;}
    .re-diff-minus{font-size:16px;}
    .re-status-row{padding:3px 6px;}
    .re-status-name{font-size:14px;}
    .re-status-label{font-size:14px;}

    /* ホバー無効化（タッチデバイス） */
    .tile.clickable:hover{transform:translateY(-6px);}

    /* seat-label */
    .seat-label{font-size:8px;}
    .seat-label .wind-badge{width:14px;height:14px;line-height:14px;font-size:9px;}
    .seat-label .points{font-size:9px;}
}

/* ======================== */
/* 縦向き時の強制メッセージ   */
/* ======================== */
#rotate-message{
    display:none;position:fixed;top:0;left:0;width:100%;height:100%;height:100dvh;
    background:#000;z-index:99999;
    flex-direction:column;align-items:center;justify-content:center;
    color:#ffffff;font-size:20px;text-align:center;
    font-family:'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
}
#rotate-message span{font-size:48px;margin-bottom:20px;}
@media(orientation:portrait){
    #rotate-message{display:flex;}
}