/* Bright controls on the homepage; administrator entry uses the shared yellow. */
body .button,body button:not(.hanbok-logo),body .doclink{background:#ffd0e0;color:#53273a;border-color:#d1d1d1}
body .button:hover,body button:not(.hanbok-logo):hover,body .doclink:hover{background:#ffb8d1;color:#53273a;border-color:#bdbdbd}
body .button:focus-visible,body button:not(.hanbok-logo):focus-visible{outline:3px solid #24563e;outline-offset:3px}
body a.button[href="admin.html"]{background:#ffe56b;color:#332b08;border-color:#c5a52e;font-weight:700}
body a.button[href="admin.html"]:hover{background:#ffdc3d;color:#332b08;border-color:#ad8b18}
body .doclink strong,body .doclink span{color:#53273a}

/* Illustrated homepage banner buttons. Yellow administrator links retain their rules above. */
.home-layout .board-intro-row .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:flex-end}
.home-layout .board-intro-row .character-banner-button{display:flex;flex-direction:column;gap:5px;padding:8px 12px;white-space:normal}
.character-button-pairs{display:flex;gap:12px;align-items:center}
.character-button-pair{display:flex;flex-direction:column;gap:2px;align-items:center;font-size:10px;line-height:1.2}
.character-button-pair>span{display:flex;gap:3px;perspective:350px}
.character-button-pair img{display:block;width:37px;height:48px;object-fit:contain;transform-origin:center;animation:banner-character-turn 9s linear infinite}
.character-button-pair:nth-child(2) img{animation-duration:11s;animation-delay:-4s}.character-button-pair:nth-child(3) img{animation-duration:13s;animation-delay:-7s}.character-button-pair img:nth-child(2){animation-direction:reverse}
@keyframes banner-character-turn{0%,100%{transform:rotateY(-35deg)}50%{transform:rotateY(35deg)}}
.home-layout .board-intro-row .match-banner-button{display:flex;align-items:center;justify-content:center;gap:12px;white-space:normal}
.match-button-label{display:block;text-align:center}.go-stone{display:inline-block;flex:none;width:26px;height:26px;border-radius:50%;box-shadow:0 3px 4px #0005}.go-stone.black{background:radial-gradient(circle at 32% 26%,#737373,#181818 50%,#000);border:1px solid #151515}.go-stone.white{background:radial-gradient(circle at 32% 26%,#fff,#f3f3f3 50%,#b8b8b8);border:1px solid #aaa}
@media(max-width:700px){.home-layout .hero>.board-intro-row{flex-direction:column;align-items:stretch}.home-layout .board-intro-row .actions{justify-content:center;width:100%}.character-button-pair img{width:30px;height:42px}.character-button-pairs{gap:7px}.home-layout .board-intro-row .character-banner-button{padding:7px}.home-layout .board-intro-row .match-banner-button{gap:7px}.go-stone{width:21px;height:21px}}

/* Transparent controls preserve the existing yellow administrator button. */
body .button,body button:not(.hanbok-logo),body .doclink{background:transparent;color:#fff1f6;border-color:#d1d1d1}
body .button:hover,body button:not(.hanbok-logo):hover,body .doclink:hover{background:transparent;color:#fff;border-color:#e6e6e6}
body .doclink strong,body .doclink span{color:#fff1f6}
body a.button[href="admin.html"]{background:#ffe56b;color:#332b08;border-color:#c5a52e}body a.button[href="admin.html"]:hover{background:#ffdc3d;color:#332b08}
.home-layout .board-intro-row .character-banner-button{position:relative;display:flex;align-items:center;justify-content:center;width:320px;height:136px;padding:0;overflow:hidden;isolation:isolate}
.character-button-pairs{position:absolute;inset:5px;display:block;pointer-events:none;overflow:hidden}
.character-button-pairs>img{position:absolute;left:0;top:0;display:block;width:44px;height:58px;object-fit:contain;animation:none;will-change:transform}
.character-button-title{position:relative;z-index:1;pointer-events:none;text-align:center;color:#fff;text-shadow:0 1px 3px #000,0 0 6px #000,0 0 10px #000;font-weight:700}.character-button-title .en{font-size:11px}
.home-layout .board-intro-row .match-banner-button{min-height:106px;gap:12px}
.go-bowl{position:relative;display:block;flex:none;width:64px;height:52px;margin-top:12px;border-radius:15% 15% 48% 48%;background:linear-gradient(90deg,#744018,#cb9656 40%,#a36931 70%,#623718);box-shadow:inset 0 -6px 8px #321b1566,0 4px 5px #0005;border:1px solid #704221;overflow:visible}
.go-bowl:before{content:"";position:absolute;left:-2px;top:-10px;width:66px;height:28px;border-radius:50%;background:#392414;border:4px solid #b47a40;box-sizing:border-box}
.go-bowl i{position:absolute;z-index:1;display:block;width:16px;height:10px;border-radius:50%;background:radial-gradient(ellipse at 35% 20%,#777,#151515 60%);border:1px solid #111;box-shadow:0 1px 2px #0008;left:calc(8px + var(--col,0)*12px);top:calc(-9px + var(--row,0)*6px)}
.white-bowl i{background:radial-gradient(ellipse at 35% 20%,#fff,#ddd 65%,#aaa);border-color:#bbb}
.go-bowl i:nth-child(4n+1){--col:0}.go-bowl i:nth-child(4n+2){--col:1}.go-bowl i:nth-child(4n+3){--col:2}.go-bowl i:nth-child(4n){--col:3}.go-bowl i:nth-child(n+5){--row:1}.go-bowl i:nth-child(n+9){--row:2}.go-bowl i:nth-child(n+13){--row:-1;left:calc(20px + var(--col,0)*12px)}
@media(max-width:700px){.home-layout .board-intro-row .character-banner-button{width:min(100%,320px);height:132px}.character-button-pairs>img{width:39px;height:52px}.home-layout .board-intro-row .match-banner-button{min-height:104px}.go-bowl{transform:scale(.88);margin-left:-3px;margin-right:-3px}}
/* Keep both illustrated banners together on one row at every screen width. */
.home-layout .hero>.board-intro-row{flex-wrap:wrap}
.home-layout .board-intro-row .actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;width:min(100%,660px);flex:0 1 660px;align-items:stretch}
.home-layout .board-intro-row .actions>a.button{width:100%;min-width:0;height:136px;min-height:136px;margin:0;box-sizing:border-box}
body .button,body button:not(.hanbok-logo),body .doclink{border-width:2px;border-style:solid;border-color:#d1d1d1;box-shadow:0 0 0 1px #15171c99,inset 0 0 0 1px #ffffff26}
body .button:hover,body button:not(.hanbok-logo):hover,body .doclink:hover{border-color:#e6e6e6}
body a.button[href="admin.html"]{border-color:#c5a52e}
@media(max-width:700px){.home-layout .board-intro-row .actions{flex:none;width:100%;gap:7px}.home-layout .board-intro-row .actions>a.button{height:132px;min-height:132px;padding:5px}.home-layout .board-intro-row .match-banner-button{gap:3px}.match-button-label{min-width:0}.match-button-label .ko{font-size:11px}.match-button-label .en{font-size:8px}.character-button-title .ko{font-size:12px}.character-button-title .en{font-size:9px}.go-bowl{width:32px;height:30px;transform:none;margin:5px 0 0;border-radius:15% 15% 45% 45%}.go-bowl:before{width:34px;height:18px;top:-6px;border-width:2px}.go-bowl i{width:9px;height:6px;left:calc(3px + var(--col,0)*7px);top:calc(-5px + var(--row,0)*4px)}.go-bowl i:nth-child(n+13){left:calc(8px + var(--col,0)*7px)}}

/* Administrative actions together at the footer, banner manager above login. */
body .footer-admin-link{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:0;margin-top:0}
body .footer-admin-link>.button{width:210px;min-height:48px;margin:0;border-radius:0;text-align:center}
body .footer-admin-link>a.button.banner-admin-button{background:#ffe56b;color:#332b08;border-color:#c5a52e;font-weight:700}
body .footer-admin-link>a.button.banner-admin-button:hover{background:#ffdc3d;color:#332b08;border-color:#ad8b18}
.home-layout .board-intro-row .actions{gap:0}
.home-layout .board-intro-row .actions>a.button{border-radius:0}
@media(max-width:700px){body .footer-admin-link{align-items:center}.home-layout .board-intro-row .actions{gap:0}}

/* Photographic wooden bowls, black to the left and white to the right. */
.home-layout .board-intro-row .match-banner-button{gap:7px}
.photo-go-bowl{display:block;flex:0 1 90px;min-width:32px;width:90px;height:76px;background-image:url('assets/photoreal-go-bowls.png');background-size:200% 100%;background-repeat:no-repeat;background-color:transparent}
.photo-black-bowl{background-position:left center}.photo-white-bowl{background-position:right center}
@media(max-width:700px){.home-layout .board-intro-row .match-banner-button{gap:2px}.photo-go-bowl{flex-basis:40px;width:40px;height:34px;min-width:25px}}