/* churros-game style.css  version 2  2026-11-08 */
[hidden]{display:none !important;}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:#23303A;}
body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","Meiryo",sans-serif;
  color:#1E1E1E;font-weight:700;
  overflow:hidden;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-text-size-adjust:100%;
}
#app{
  position:fixed;inset:0;background:#23303A;
  display:flex;align-items:center;justify-content:center;
}
#cv{display:block;touch-action:none;background:#E4E7E9;}

.panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(88vw,460px);max-height:92vh;overflow:auto;
  background:#FBF7EF;border:1px solid #23303A;border-radius:10px;
  padding:28px 24px;text-align:center;
}
.panel h1{font-size:40px;line-height:1.2;font-weight:900;color:#7A3B12;letter-spacing:.04em;}
.panel h2{font-size:26px;font-weight:900;margin-bottom:16px;color:#1E1E1E;}
.lead{font-size:17px;margin:12px 0 18px;color:#3A3A3A;}
.best{font-size:15px;color:#3A3A3A;margin-bottom:18px;min-height:1em;}
.btn{
  display:block;width:100%;font:inherit;font-size:20px;font-weight:900;
  padding:15px 10px;border-radius:8px;cursor:pointer;margin-top:10px;
  border:1px solid #0B4A4E;
}
.btn.main{background:#0F5E63;color:#FFFFFF;}
.btn.main:active{background:#0B4A4E;}
.btn.sub{background:#FFFFFF;color:#1E1E1E;border-color:#5A646C;}
.btn.sub:active{background:#ECEFF1;}

#howto ol{text-align:left;padding-left:1.4em;font-size:15px;line-height:1.7;font-weight:500;}
#howto li{margin-bottom:10px;}
#howto b{font-weight:900;color:#7A3B12;}
.note{text-align:left;font-size:14px;line-height:1.7;font-weight:500;color:#3A3A3A;margin:6px 0 8px;}

.rank{font-size:30px;font-weight:900;color:#7A3B12;margin-bottom:14px;}
.price{width:100%;border-collapse:collapse;font-size:16px;margin:4px 0 8px;}
.price th,.price td{padding:7px 6px;border-bottom:1px solid #D6CFC2;}
.price th{text-align:left;font-weight:700;}
.price td{text-align:right;font-weight:900;color:#7A3B12;}
.score{width:100%;border-collapse:collapse;font-size:17px;margin-bottom:12px;}
.score th,.score td{padding:9px 6px;border-bottom:1px solid #D6CFC2;}
.score th{text-align:left;font-weight:700;color:#3A3A3A;}
.score td{text-align:right;font-weight:900;}

@media (prefers-color-scheme: dark){
  html,body,#app{background:#23303A;}
  .panel{background:#FBF7EF;color:#1E1E1E;}
}